Responsive Simple Sitemaps Blogger
Pada postingan terdahulu aku sudah memposting sebuah sitemaps yang cukup simple untuk Blogger. Dengan simple sitemaps ini kita tidak menampilkan semua link postingan blog dalam satu halaman sehingga saluran untuk membuka halaman sitemaps-nya cukup ringan. Hanya judul dari tiap-tiap label saja yang ditampilkan di halaman sitemaps dan link-link postingannya akan muncul saat mengklik salah satu label-nya.
Jumlah link postingan yang muncul saat label-nya diklik pun diatur jumlahnya sehingga tidak semua link postingan dari sebuah label tidak pribadi ditampilkan semua tetapi memakai tombol next prev untuk menampilkan link selanjutnya. Sebagai tumpuan semoga lebih terperinci silahkan coba lihat sitemaps Kompi Ajaib yang memakai simple sitemaps ini DI SINI.
Jika Anda belum menggunakannya dan ingin mencobanya silahkan simak lagi postingan simple sitemaps untuk Blogger pada link di bawah ini.
Baca juga: Simple Sitemaps Untuk Blogger
Sebenarnya sitemaps ini dapat dibilang sudah responsive sebab bila lebar device-nya lebih kecil maka link postingan yang ditampilkan akan ada di bawah label-labelnya. Namun berdasarkan aku tampilannya kurang rapih. Nah kali ini aku sedikit merubah dan menambahkan aba-aba CSS dari simple sitemaps ini semoga lebih responsive sehingga saat diakses di banyak sekali device, tampilannya menjadi lebih rapih.
Untuk itu silahkan ganti aba-aba CSS-nya dengan aba-aba CSS di bawah ini.
Kode CSS Responsive Simple Sitemaps Blogger
#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}
#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}
#show-cat ul li:last-child a{border-bottom:none;}
#show-cat ul li a,#navi-cat a{background:#fff;color:#4d90f0;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post ul li{list-style-type:none;margin-left:-40px}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
@media screen and (max-width:768px){
#show-cat{width:35%;}
#show-post{width:59%;}
}
@media screen and (max-width:480px){
#show-cat{width:100%;margin:20px 0}
#show-post{width:100%;}
}
Jika ternyata link postingannya terlalu ke kiri saat ditampilkan (ketika label diklik), silahkan kurangi margin kirinya pada aba-aba margin-left:-40px pada aba-aba CSS #show-post ul li contohnya menjadi margin-left:-20px.
Untuk demo responsive-nya silahkan coba sitemaps Kompi Ajaib di JsFidle pada link demo di bawah ini. Silahkan coba gese-geser kolomnya untuk melihat responsivenya.
0 Response to "Responsive Simple Sitemaps Blogger"
Posting Komentar