Membuat Auto Readmore Dua Kolom Responsive di Blogger

Baca Juga

Auto Readmore Dua Kolom Responsive di Halaman Depan Blog menjadi salah satu tren desain website.

Hal itu untuk mendukung tampilan di mobile, sebagaimana mayoritas pengunjung mengakses internet melalui HP.

Bagi yang ingin menampilkan Auto Readmore Dua Kolom, pengguna template yang sudah menggunakan auto readmore --yaitu berupa judul, gambar, dan ringkasan bagian awal tulisan di halaman depan blog-- tingga memasangkan kode berikut ini.

Bagi blog yang belum menggunakan autoreadmore, tentunya harus pasang dulu auto readmore-nya, lalu pasang kode di bawah ini.

Nanti hasilnya seperti tampilan halaman depan template blog legendaris Johny Wuss nan unik, fast loading, dan super seo friendly itu.

Membuat Auto Readmore Dua Kolom Responsive di Blogger

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode </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 -->

Simpan template!

Cara Membuat Auto Readmore 

Berikut ini cara membuat Auto Readmore Tanpa Javascript, dengan Gambar di atas Teks, bagi pengguna template blog bawaan Blogger yang versi Sederhana (Simple). Anda bisa memadukannya dengan kode di atas.

1. Tema > Edit HTML.
2. Copas script di bawah ini tepat di atas kode ]]></b:skin> 

.dp-thumbnail{margin-bottom:20px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:100%;height:90px;text-align:center}
.dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px}
.dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}

3. Cari dan hapus kode <data:post.body/> yang kedua

4. Ganti kode ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='dp-thumbnail'>
<b:if cond='data:post.firstImageUrl'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<b:else/>
<b:if cond='data:post.thumbnailUrl'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<span>No thumbnail</span>
</b:if>
</b:if>
</div>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

5. Simpan template!