Search JavaScript Kit:

This free script provided by
JavaScript Kit

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&amp;alt=json-in-script&amp;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>
Note : www.walamn.org ganti dengan URL Blog sobat


2. Daftar Isi ala Abu Farhan ( http://www.abufarhan.com )

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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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>
Note : sampleBlog ganti dengan URL Blog sobat


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&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
Note : namablogsobat ganti dengan URL Blog sobat


Demikianlah tutor singkat cara memasang dan menampilkan daftar isi ( sitemap ) keren pada Blog. Semoga bermanfaat bagi yang belum memiliki.

0 komentar:

Post a Comment

No spam...