Cara Bikin Layout Grid yang Rapi Di Bloger

Banyak yang membahas ini tapi kadang tidak suport dengan beberapa templet, semoga langkah ini cocok dengan templet anda.

Merubah halaman blog anda menajadi 2 kolom yang rapi seperti grid layout postingan blog saya ini anda bisa ikuti dengan langakah 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 Keyboard Pc CTRL+F kemudian kamu cari kode yang bernama ]]>
jika sudah ketemu kamu ambil kode di bawah dan copykan di atas kode ini.

4. Kemudian kamu cari lagi kode jika sudah ketemu anda hapus saja kode sampai dengan akhir kode Sebagai contoh pada kode di bawah ini.
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/AVvXsEi4cehU4LlNAwXHUlndfK9fUzxz7GP8pjYiXe94rCQe3VZiCsXouh8r9j9Y-OSNC5zIKRJo9xHXhZjA4u2kFFgvy4ggFnCi5RHH4xty_TtwddXzGYvtEG5a0thNVMPpfLw2WWtZleYTJws/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. save dan lihat hasilnya
pengen lebih jelas silahkan klik link dibawah ini sob ane coba dari link dibawah
sumber

Cara Bikin Layout Grid yang Rapi Di Bloger

0 Response to "Cara Bikin Layout Grid yang Rapi Di Bloger"

Artikel Terkini:

Entri Populer

Label

Arsip Blog