Membuat Auto Readmore Halaman Depan Dua Kolom Responsive

cara Dan Teknik Membuat Auto Readmore Halaman Depan Dua Kolom Responsive.  Pure CSS tanpa JavaScript sehingga Fast Loading.

Auto Readmore Dua Kolom. Lihat DEMO.

Tampilan halaman depan blog, terutama template bawaan blogger, umumnya satu kolom. Kita dapat mengubahnya menjadi dua kolom semoga lebih banyak posting blog yang dilihat atau disajikan di halaman depan.

Bagi yang blognya belum memakai autoreadmore, yakni tampilan posting berupa judul tulisan, gambar thumbnail, dan cuplikan isi goresan pena (snippet/ringkasan/summary), ada dua tahap untuk menciptakannya.

• Membuat auto readmore-nya dulu. 
• Menjadikannya dua kolom.

LANGKAH KE-1: MEMBUAT AUTO READMORE

1. Template > Edit HTML
2. Pasang Kode CSS Imaga Thumbnail berikut ini di atas isyarat ]]></b:skin>

.thumbnail-post { width:100px; height:100px; float:left; margin:0px 10px 0px 0px; }

3. Ganti isyarat <data:post.body/> yang kedua atau ketiga dengan isyarat HTML/XML Auto Readmore berikut ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div> <div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a> </div> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> </b:if>

4. Save Template!

LANGKAH KE-2: MENJADIKAN DUA KOLOM

1. Simpan isyarat berikut ini di atas isyarat </head>

<!-- Two Col Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-outer {
  width:50%;
  height:auto;
  float:left;
}
.post {
    background: #fff;
    margin: 5px;
    padding: 0;
    height: auto;
    min-height: 120px;
    border: none;
    line-height: normal;
    font-size: small;
}
.post h2 {
    margin: 0 0 5px;
    border: none;
    font-size: 13px;
    font-family: Tahoma;
    font-weight: 700;
}
.post-thumbnail img {
    float: left;
    margin: 0 10px 12px 0;
    background: #fff;
    width: 85px;
    height: 85px;
    padding: 0;
    border: none;
    box-shadow: none;
}
@media screen and (max-width:885px){
.post-outer{margin:5px 5px 0 0;}
}
@media screen and (max-width:800px){
.post-outer {width:100% !important;float: none !important;margin-top:5px;}
.post h2 {font-size:17px;}
}
@media screen and (max-width: 768px){
.post h2 {font-size:15px;}
}
@media screen and (max-width:600px){
.post h2 {font-size:17px;}
}
@media screen and (max-width:500px){
.post h2 {font-size:14px;}
}

#blog-pager,.date-header {clear:both !important;}
</style>
</b:if>
</b:if>
<!-- Two Col End -->

2. Edit ukuran lebar (width) dan tinggi (hight) sesuai dengan lebar area blog post template yang Anda gunakan.

3. Save Template!

Demikian Membuat Auto Readmore Halaman Depan Dua Kolom Responsive. Good Luck & Happy Blogging! ( www.contohblog.com).*


Sumber http://www.contohblog.com/

Artikel Terkait

Membuat Auto Readmore Halaman Depan Dua Kolom Responsive

4/ 5

Oleh Unknown

Unknown September 27, 2016