Home » » Cara Membuat Auto Readmore Responsive di Halaman Depan Blogger

Cara Membuat Auto Readmore Responsive di Halaman Depan Blogger

Subratagoweser.com -  Auto Readmore adalah istilah bagi Jump Break otomatis, yang meringkas posting blog di halaman depan secara otomatis. 

Berikut tampilannya:





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.


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 ulasan cara Membuat Auto Readmore Dua Kolom Responsive di Blogger. Semoga bermanfaat. Terimakasih...

0 komentar:

Post a Comment