Responsive Simple Sitemaps Blogger

Responsive Simple Sitemaps Blogger

Bola Hero Gawai

Responsive Simple Sitemaps Blogger

Simple Sitemaps Blogger
Pada postingan terdahulu saya sudah memposting sebuah sitemaps yang cukup simple untuk Blogger. Dengan simple sitemaps ini kita tidak menampilkan semua link postingan blog dalam satu halaman sehingga akses 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 ketika mengklik salah satu label-nya. 

Jumlah link postingan yang muncul ketika label-nya diklik pun diatur jumlahnya sehingga tidak semua link postingan dari sebuah label tidak langsung ditampilkan semua tetapi menggunakan tombol next prev untuk menampilkan link selanjutnya. Sebagai contoh agar lebih jelas silahkan coba lihat sitemaps Kompi Ajaib yang menggunakan 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.


Sebenarnya sitemaps ini bisa dibilang sudah responsive karena jika lebar device-nya lebih kecil maka link postingan yang ditampilkan akan ada di bawah label-labelnya. Namun menurut saya tampilannya kurang rapih. Nah kali ini saya sedikit merubah dan menambahkan kode CSS dari simple sitemaps ini agar lebih responsive sehingga ketika diakses di berbagai device, tampilannya menjadi lebih rapih.

Untuk itu silahkan ganti kode CSS-nya dengan kode 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 ketika ditampilkan (ketika label diklik), silahkan kurangi margin kirinya pada kode margin-left:-40px pada kode CSS #show-post ul li misalnya 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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×