cara mengganti tampilan homepage static menjadi grid pada blog

Cara Mengubah Tampilan Beranda / Home Blog menjadi 2 kolom - Trik mudah yang bisa menampilakan halaman Home Pege menjadi 2 halaman ,sperti yang anda lihat pada blog saya,mukin banyk banayk orang yang yang ingin menggatikan halaman Beranda / Home menjadi 2 kolom ,ke bayakan gagal terus ,saya di sini akan kasih anda satu bauah terik mudah-mudah bisa menjadikan halam home menjadi dua halam ,dengan cara kali insya allah saya akan kasih cara yang jitu .

Dengan sebelumya di waktu saya mau menganti halamam home yang yang men satu kolom menjadi dua kolom ,dengan kode Css yang saya udah edit untk menjadikan halaman home pege menjadi dua kolom berhasil 100% .

DEMO

Bagi anda yang mau membuat/merubah halaman blog anda menajadi 2 kolom anda bisa ikuti dengan langakh di bawah ini.

1. Kamu Login ke blogger anda masing masing
2. Dan kamu pilih menu Tema dan tekan menu Edit Html
3. Kemudian kamu tekan Kibot Pc CTRL+F kemudian kamu cari kode yang bernama ]]></b:skin> jika sudah ketemu kamu ambil kode di bawah dan copykan di atas kode ]]></b:skin> ini.

/*----------------------------------------------------------------
Blog Tutorial Yang Mebahas Tentang, Blog, Template,Android, Komputer Dll.
Oleh: AdaniBlog
Blog: Adani -:[TUTORIALCID]:-
URL : http://tutorialcid.blogspot.co.id
Link Tutorial :
-----------------------------------------------------------------*/
.bidang-utama {
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
}

.bidang-artikel {
float: left;
width: 50%;
height: auto;
padding: 0px;
margin: 0px;
}

.kotak-artikel {
height: auto;
min-height: 144px;
padding: 10px;
margin: 5px;
border: 1px solid #DBDBDB;
}

.kotak-judul {
width: 96%;
height: 30px;
padding: 5px;
margin-bottom: 5px;
text-align: justify;
overflow: hidden;
border: 1px solid #f3f3f3;
font: bold 13px Arial;
background: #F5F5F5;
background: -moz-linear-gradient( center top, #f9f9f9 20%, #F5F5F5 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f9f9f9), color-stop(1, #F5F5F5) );
}

.kotak-gambar {
float: left;
width: 90px;
height: 95px;
margin-right: 10px;
border: 1px solid #f3f3f3;
border-radius: 3px;
overflow: hidden;
}

.kotak-gambar img {
width:90px !important;
height:95px !important;
}

.kotak-ringkasan {
max-height: 70px;
min-height: 70px;
text-align: justify;
font: 11px Arial;
overflow: hidden;
}

.garis-batas {
padding-top: 5px;
width: 100%;
border-bottom: 1px solid #f3f3f3;
}

.baca-selengkapnya {
text-align: right;
}

.baca-selengkapnya a {
display: inline-block;
margin: 0;
padding: 2px 2px;
border: 1px solid #f3f3f3;
text-align: center;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #F5F5F5;
background: -moz-linear-gradient( center top, #f9f9f9 20%, #F5F5F5 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f9f9f9), color-stop(1, #F5F5F5) );
font: 11px Arial;
}

.baca-selengkapnya a:hover {
background: #f9f9f9;
background: -moz-linear-gradient(center top, #F5F5F5 20%, #f9f9f9 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #F5F5F5),color-stop(1, #f9f9f9));
}

4. Kemudian kamu cari lagi kode <b:includable id='main' var='top'> jika sudah ketemu anda hapus saja kode <b:includable id='main' var='top'> samapi dengan akhir kode </b:includable> Sebagai contoh pada kode di bawah ini.

<b:includable id='main' var='top'>

----- rangkaian kode -----

</b:includable>

5. Kemudian kamu gantikan saja kode yang sudah di hapus gantikan dengan kode berikut di bawah ini.

<b:includable id='main' var='top'>
<b:if cond='data:mobile == "false"'>


<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isFirstPost == "true"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:include name='kolom-posting'/>
<b:else/>
<b:include name='full-artikel'/>
</b:if>
<b:else/>
<b:include name='full-artikel'/>
</b:if>
<b:else/>
<b:include name='kolom-posting'/>
</b:if>
<b:else/>
</b:if>
</b:loop>
</div>


<b:include name='nextprev'/>


<b:include name='feedLinks'/>

<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
<b:else/>
<b:include name='mobile-main'/>
</b:if>

<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>

<b:includable id='kolom-posting'>
<div class='date-outer'>
<div class='post-outer' style='padding: 0px; margin: 0px; height: auto; overflow: hidden;'>
<div class='bidang-utama'>
<b:loop values='data:posts' var='post'>
<div class='bidang-artikel'>
<div class='kotak-artikel'>
<a expr:name='data:post.id'/>
<div class='kotak-judul'>
<b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b><br/>
</div>

<b:if cond='data:post.thumbnailUrl'>
<div class="kotak-gambar">
<a expr:href='data:post.url' title='Klik untuk membuka artikel.'><img alt='Gambar' expr:src='data:post.thumbnailUrl'/></a><br/>
</div>
<b:else/>
<div class='kotak-gambar'>
<a expr:href='data:post.url' title='Klik untuk membuka artikel.'><img alt='Gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhek_hbQx2Agk_orO_gWC9V_O_WTUK47EfuABw8dC0jinaYt2DMlUWlekFVI5iaP0NG4_DBzL0RsGotS0uL9vLMCCQkuSYlMzusxaemuG43i4HwEHp1kxT4d-sYdAFO2XSkr4MTGMEgOrg/s800/ELTELU.png'/></a><br/>
</div>
</b:if>

<b:if cond='data:post.snippet'>
<div class='kotak-ringkasan'>
<data:post.snippet/>
</div>
<b:else/>
<div class='kotak-ringkasan'>

</div>
</b:if>

<div class='garis-batas'/>

<div class='baca-selengkapnya'>
<b><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></b>
</div>

</div>
</div>
</b:loop>
</div>
</div>
</div>
</b:includable>

<b:includable id='full-artikel'>
<data:defaultAdStart/>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>

<div class='post-outer'>
<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</div>

<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</b:includable>

6. Kemudian kamu coba Save pada template jika terjadi kesalahn anda bisa ulangi kembali dari awal jika berhasil kamu coba buka New tab naru pada halaman blog anda jika berhasil anda bisa test mobile friendly di sini https://search.google.com/search-console/mobile-friendly juga sudah berhasil anda bisa juga untuk cek dalam kode Html ke halaman https://search.google.com/structured-data/testing-tool jika tidak terjadi pada ke salahan pada kode template seperti di pada gambar tersbut seperti di bawah ini.

Jika 100% lolos itu bertati tanda anda kode template yang kamu terapkan tadi itu menadakan berhasil demikian pada tutorial kali ini semoga artikel ini bisa bermanpaat bagi anda ,jangan lupa shree pada teman-teman blogger yang ingin merubah halaman home pege menjadi 2 kolom ,cukup sekian terimakasih semoga bermanpaat bagi anda wasalam.

Lokasi:

cara mengganti tampilan homepage static menjadi grid pada blog

<b:includable id='main' var='top'>

</b:includable>

Menu Halaman Statis