Membuat Auto Readmore Dua Kolom Responsive di Blogger

Baca Juga

Cara Membuat Auto Readmore Dua Kolom Responsive di Halaman Depan Blogger

AUTO Read more adalah istilah bagi Jump Break otomatis, yang meringkas posting blog di halaman depan (homepage) secara otomatis.

Dengan auto read more atau jump break otomatis, tampilan halaman depan hanya akan berupa judul, image thumbnail (gambar kecil), dan ringkasan posting (summary/snippet) yang diambil dari alinea pertama tulisan.

Berikut ini cara Membuat Auto Readmore Dua Kolom Responsive di Blogger.

Bagi  pengguna template yang sudah menggunakan auto readmore, yaitu berupa judul, gambar, dan ringkasan bagian awal tulisan di halaman depan blog, kode ini tinggal dipasang.

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 yang dikenal super seo friendly itu.

Membuat Auto Readmore Dua Kolom Responsive di Blogger

1. Template > Edit HTML
2. Simpan 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 -->

3. Sesuaikan lebar (width:50%) menjadi lebih kecil jika tampilannya kurang baik.
4. Save Template!

Demikian cara Membuat Auto Readmore Dua Kolom Responsive di Blogger.*