Cara Membuat Sitemap 3 kolom di Blogspot plus responsive

Unknown

Widget

Senin, 16 Februari 2015

Belum ada komentar

Sebagian besar blogger yang memiliki blog di blogspot ingin membuat sitemap keren seperti WordPress, sayangnya daftar isi / Sitemap widget yang dirancang untuk blogger tidak dapat bersaing dengan sitemap WordPress . Beberapa hari yang lalu kami menerbitkan sebuah widget sitemap (oleh Ankit) tapi itu juga tidak terlihat banyak menarik dan dapat hanya ditambahkan untuk label tertentu. Jadi, hari ini kita akan melihat bagaimana untuk menambahkan tiga kolom blogger sitemap bergaya dengan desain responsif. Widget ini mudah untuk menambah dan memiliki terlihat keren bila dibandingkan dengan widget sitemap lainnya.
OK, Anda dapat melihat Screenshot di bawah ini.

Cara Menambahkannya sebagai berikut ini.

Di Dashboard blogger, Pilih blog Anda
Pergi ke Halaman >> New Page dan kemudian pilih Bagian HTML
Paste kode berikut ini di dalamnya.

<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>
<script src="http://sponray.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: #555; 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; } }
</style>

Setelah anda selesai menambahkan script di atas Dan jangan lupa, Untuk mengganti Link yang sudah di mark warna biru

Sekarang anda sudah boleh untuk Mempublish. Tapi sebelum itu Preview terlebih dahulu. Kalau sudah terasa pas di hati, Lanjutkan ke Publish

Note;
Anda bisa mengedit sesuka hati anda dan kalau bisa jangan hapus WIDGET BY PEMBUAT SCRIPTNYA

Mungkin sampai di sini dulu, saya memposting tentang cara membuat Sitemap 3 kolom di blogspot
Jikan ada yang ingin di tanyakan silahkan tanyakan di kolom komentar
Sekian dari saya terima kasih......