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.


.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 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 == &quot;false&quot;'>

<!-- posts -->
<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 == &quot;true&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<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(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
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 + &quot;#more&quot;' 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 == &quot;false&quot;'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</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'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>
<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'>
&lt;/div&gt;&lt;/div&gt;
</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

ARTIKEL TERKAIT:

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

Artikel Terkini: