Koleksi Daftar Isi ( Sitemap ) Blog Keren dan Unik
Tidak berbeda halnya dengan majalah, tabloid, koran dan sejenisnya, daftar isi akan selalu disertakan pada awal ataupun dimana yang dianggap bisa untuk menavigasi pembaca terhadap konten yang akan disuguhkan yang topik utama atau sebagai highlightnya yang berisi tag, label, judul posting berupa urutan tautan yang terstruktur, begitu juga dengan Blog/Website akan lebih baik memasang ini untuk mempermudah sekaligus mengarahkan konten yang di cari pengunjung.
Nah kali ini saya akan sharing tutorial daftar isi ( sitemap ) yang keren, cantik dan unique perpaduan antara JavaScript dan Jquery sehingga terlihat sangat dinamis.Widget ini bisa dipasang di Sidebar Blog ataupun di kolom postingan dan tidak bereffect loading berat ( Hard Loading ). Silahkan diikuti dan dicoba ...
1. Daftar Isi ala Walamn.org
Langkahnya :
1. Login to akun Blogger
2. Untuk pemasangan di Sidebar Blog
- Pilih Tata Letak >> Tambah Gadget >> Javascript / HTML
- Copy dan Paste kode HTML di bawah
3. Untuk pemasangan di area postingan :
- Pilih Posting >> Switch to EDIT HTML
- Copy dan Paste kode HTML di bawah
- Beri judul posting
- Publish
4. Selesai
Kode HTML :
<link
href="http://abu-farhan.com/script/acctoc/acc-toc.css"
media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://www.walman.org/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://www.walman.org/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>
Cara awalnya tidak jauh berbeda atau sama dengan diatas jadi sobat tinggal Copy dan Paste-kan kode HTML dibawah ini :
Kode HTML :
Script 1 :
<script src="http://jarlok.com/Script/Sitemap.js">
</script> <script
src="http://sampleBlog.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">
</script>
Script 2 :
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css"
media="screen" rel="stylesheet"
type="text/css"></link>
<script
src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script
src="http://sampleBlog.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script
type="text/javascript">
var accToc=true;
</script>
<script
src="http://abu-farhan.com/script/acctoc/accordion-pack.js"
type="text/javascript"></script>
3. Daftar isi ala Kompi Ajaib modif dari Abu Farhan ( http://www.abufarhan.com)
Cara pemasangannyapun sama dengan cara diatas tinggal Copy dan Paste-kan Kode HTML dibawah ini.
Kode HTML :
<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));border:1px solid #2D96DF;border-radius:4px;box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic}
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc"><script type="text/javascript" src="http://dvslabs.googlecode.com/files/customizable-TOC.js"></script>
<script src="http://namablogsobat.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));border:1px solid #2D96DF;border-radius:4px;box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic}
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc"><script type="text/javascript" src="http://dvslabs.googlecode.com/files/customizable-TOC.js"></script>
<script src="http://namablogsobat.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Demikianlah tutor singkat cara memasang dan menampilkan daftar isi ( sitemap ) keren pada Blog. Semoga bermanfaat bagi yang belum memiliki.
@dmc2020
0 komentar:
Post a Comment
No spam...