Membuat Daftar Isi Blog Responsive

Cinta adalah anugrah terindah yang Allah berikan kepada semua mahluknya tanpa cinta tiada artinya hidup ini. Seperti perasaan kita sebagai manusia untuk saling mencintai, saling memiliki, saling memenuhi dan saling pengertian. Cinta memberikan kasih sayang bukannya tahtah, atau perhiasan dunia tapi cinta memberikan kasih sayang dari dalam hati yang paling dalam dan dituangkan melalui perbuatan. Seperti artikel kali ini saya akan membagikan code script Sitemaps/Daftar isi Responsvie melalui artikel ini kepada Anda dari lubuk hati saya yang paling dalam bin lebayyy.

Screenshot Responsive :

Seperti yang telah saya jelaskan pada artikel sebelumnya fungsi sitemap pada blog,, cara penerapannya pun cukup mudah seperti biasa...

1. Masuk ke blog Anda bukan pada blog tetangga
2. Pilih Laman kosong atau New Post
3. Selanjutnya, masukkan code dibawah ini pada halaman HTML bukan pada Compose

<script src="http://fianetmucode.googlecode.com/files/fianetsitempasresponsive.js" type="text/javascript"></script>
<script src="http://www.kang-rio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #E98B18; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }

Keterangan :
Ganti Url berwarna merah (http://www.kang-rio.blogspot.com) diatas dengan url blog Anda

Demikian cara penerapan code Sitemap pada blog dan kata2 ngaur alias ngiur bin lebayyy, smoga lebih menambah nilai search engine terhadap blog Anda. Amiin...Sekian dan Terim Kasih

Sumber