Sitemap (Daftar Isi) Responsive Untuk Blogger - Sitemap atau daftar isi ini bisa menyesuaikan sesuai ruang yang ada. Maka dari itu, sitemap ini bisa dibilang responsive. Desainnya pun juga simple dan ringan. Terdiri atas label-label yang jika diklik akan keluar postingan-postingan pada label tersebut.
Dan uniknya sitemap ini terdapat page navigationnya. Jadi, kita bisa mengatur berapa jumlah postingan yang akan tampil untuk satu halamannya. Sehingga, sitemap ini tidak akan memanjang ke bawah meskipun postingannya banyak. Bisa kita lihat gambarnya di bawah ini
Untuk memasangnya, silahkan simpan kode berikut ini di halaman statis. Ingat menyimpannya pada mode HTML, bukan Compose. Usahakan setelah kita menaruh kode tersebut di bagian HTML, jangan kita klik Compose. Karena ketika kita mengklik Compose dan coba anda mengklik HTML lagi, kodenya bisa berubah. Dan kalau orang tidak cermat dan langsung dipublish saja halamannya, maka daftar isi tersebut akan tampak kosong. Ini seperti yang saya alami dulu.
Berikut ini kodenya.
<style type='text/css' scoped='scoped'>
#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:15px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none;padding-bottom:15px}
#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}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://blog-thoni.blogspot.com';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>
Silahkan ubah URL nya dengan URL blog anda. Untuk kode cat_numb=11 itu merupakan kode jumlah postingan yang tampil per halamannya. Anda bisa mengubahnya sesuai selera.
Ingat, ketika anda memasukkan di HTML, usahakan jangan sesekali membuka bagian Compose, karena nanti kodenya akan berubah. Jika berubah, maka hasilnya akan kosong. Ini banyak yang mengalaminya, termasuk saya sendiri.
Jangan lupa juga untuk mematikan komentar pada halamannya. Caranya lihat bagian samping kanan saat membuat halamannya, klik Pilihan, lalu pilih Jangan bolehkan, sembunyikan yang ada. Dengan begitu, komentar pada halaman tersebut telah dinonaktifkan.
Ingat, ketika anda memasukkan di HTML, usahakan jangan sesekali membuka bagian Compose, karena nanti kodenya akan berubah. Jika berubah, maka hasilnya akan kosong. Ini banyak yang mengalaminya, termasuk saya sendiri.
Jangan lupa juga untuk mematikan komentar pada halamannya. Caranya lihat bagian samping kanan saat membuat halamannya, klik Pilihan, lalu pilih Jangan bolehkan, sembunyikan yang ada. Dengan begitu, komentar pada halaman tersebut telah dinonaktifkan.
Untuk membuat halaman statis bisa lebar tanpa ada sidebarnya, gunakan tag kondisional dan taruh di atas </head>.
Seperti tag kondisional pada blog yang saya jadikan demo.
<b:if cond='data:blog.url == "URL HALAMAN DAFTAR ISI"'>
<style type='text/css'>
.sidebar-wrapper {display:none}
.main-wrapper{width:100%}
.post h1,.post h2{text-align:center}
.post-footer{display:none}
.breadcrumbs{display:none}
#comments{display:none}
</style>
</b:if>
Jika elemen CSS-nya sama, gunakan saja seperti kode di atas. Dan jangan lupa mengubah URL HALAMAN DAFTAR ISI dengan URL halamannya. Jika elemen CSS-nya berbeda, ya sesuaikanlah sendiri. Itu hanya contoh saja.
Resource : blog.duypham.info
Tag :
Blogging
12 Komentar untuk "Sitemap (Daftar Isi) Responsive Untuk Blogger"
Sama ya sob. Hehehe...pas kalo gitu mas.
Daftar isi ini cocok biar blog ringan gak terbebani kayak JS sitemap yang lain
Iya kang. Sitemap ini tergolong ringan. Jadi, nggak membebani blog kita. Untuk tampilannya pun juga simple kang
daftar isinya keren om, bookmarks dulu gan
Silahkan deh dibookmark dulu gan
Iya sob. Selain simple dan ringan, ini juga keren lho..
mantap. tak ganti dengan ini sitemap saya. hehe
trims kawan
makasih ya gan
+++
Merasa kurang hoki bermain judi di situs lain ? atau Ingin mendapatkan income tanpa bekerja ?
KAMI HADIR UNTUK ANDA , MARI BERGABUNG BERSAMA KAMI DI RUBYQQ
PRESENTASI KEMENANGAN 80% ( MENANG ATAU KALAH TETAP DAPAT BONUS )
100 % PLAYER vs PLAYER !!
Hanya dengan 1 USER ID anda bisa main 7 GAMES :
* Bandar Poker | Poker Online | Capsa Susun | DominoQQ | BandarQ | AduQ | SAKONG ONLINE |
* Pendaftaran FREE ==> https://goo.gl/AQYhSc
* Minimal Deposit & Withdraw HANYA Rp.15.000,-
* Bonus Turn Over 0,5% SETIAP HARI DIBAGIKAN
* Bonus Referral 20% Seumur Hidup
* MEGA JACKPOT RATUSAN JUTA RUPIAH
* Customer Service siap melayani anda 24 jam
Untuk informasi lebih lengkap silahkan Hubungi Customer Service kami
BBM : 2B8938F7
FACEBOOK : rubyqq
SKYPE : RUBY QQ
LIVECHAT https://goo.gl/AQYhSc
Selamat malam bossku semua...
Kamu Sering Kalah Main Judi?
Sudah Tidak Jaman Lagi Kalah Main Judi
Kami Hadir Dengan Inovasi Terbaru & Tercangih, Dengan Jackpot Yang Super Pasti & Gampang Untuk Menang Terus Di Setiap Hari .
Transaksi Cepat, Aman & Terpercaya.
Tersedia 7 Games Dalam 1 User ID :
New Game ------>> GAME SAKONG
Poker, Domino, Bandar Ceme, Capsa, Ceme Keliling, dan Live Poker
Minimal Deposit Rp.15.000,-
Minimal Withdraw Rp.15.000,-
Promo Bonus Harian + Mingguan + Bulanan :
- Bonus Deposit
- Bonus Turn Over Harian 0.5%
- Bonus Refferal 10% + 10%
Untuk Informasi Lebih Lanjut Segera Hubungi CS Kami 24 Jam : www,royalqq,poker
Ayo segera bergabung dengan Agen Judi Poker Online Terbaik dan Terpercaya di Indonesia KacangMasPoker | www.kacangmaspoker.net | . Dapatkan Jackpot hingga Jutaan rupiah setiap harinya !!
• Bonus New Member & Next Deposit s/d Rp. 1.000.000,-
• Bonus Jackpot s/d Rp. 200.000,-
• Bonus TurnOver 0,5%
• Bonus Referral 20%
# LINE : pokerkcm
# BBM : pokerkcm
# WHATSAPP : +6287819742741
# Twitter : kcm__poker
# IG : kcm_p0ker
• 7 Games dalam 1 ID
| Texas Poker | Capsa Susun | Ceme | Domino QQ | Bandar Ceme | Super 10 | Omaha |
• BCA - BNI - BRI - CIMB - Danamon - Mandiri.
• Menerima Deposit via Go-Pay, Ovo & Pulsa Telkomsel / XL
Link Alternatif:
• www.kacangmaspoker.xyz
• www.kacangmaspoker.club
• www.kacangmaspoker.live
Silahkan berkomentar yang relevan. Jangan menyertakan link aktif di sini. Jika melanggar, komentar akan terhapus.
Emoticon :