3Brothers Study

Bagaimana Cara Membuat Daftar Isi Blog Dengan Menggunakan JQuery. Daftar isi Merupakan salah satu fitur tambahan yang kita pasang di blog bertujuan untuk memudahkan pengunjung blog dalam mencari Artikel-artikel yang ada di blog kita. Selain itu, Daftar isi juga merupakan Penilaian tersendiri dari pengunjung blog terhadap pengaturan tata-letak artikel pada blog tersebut.

Daftar isi yang kali ini berbeda dengan daftar isi pada umumnya, kali ini saya akan share cara membuat daftar isi blog dengan JQuery, oke langsung saja :

1.Login Ke Akun Blog Sobat
2.Masuk Ke Template
3.Pilih Edit Html
4.Klik Lanjutkan
5.Centang Expandt Widget Templates
6.Cari Kode ]]></b:skin> , & letakkan kode berikut tepat diatas kode yang telah di cari :

/* Daftar Isi With JQuery */ #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWyX37jvp3jR1CkWxXyVqnx1ZT6GbsbFxndVS0UBG0qWiPFYthZQnMpUxtc1sJP8wJA0gH6glVgPxT_G-DFjirqWgs8cBYyh0rbC7FlYZ9_l704_5EhKv0s0NBKZInQ6X3RqltGapJYs0/s320/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxaSgClYOryK4MFR3sdl4Q94mTxhvZvF40EaHW_qTOVkum8LXwOldITmgeOuL1q-5bqZrRzD4woBXFoBZ_tBtFlUIbVMEoWNhrRphh1reJEPeVVVSgM6DLJZrAxJLwR_k9Oa1djjn1guE/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Cd3nqAiISAD2h_9uocca_TKwIO11-Xn1M3fxGa_oDFyFstp2a7NmnpwwNMuEz4aIVOtLL0CURU5ev_gSVZACSyUljXCOP18P6EACMAHTo1bU-Dz4qXqPlB6q_r_5IL3yYzBbnArzdFw/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }

7.Kemudian Cari kode </head> dan letakkan kode berikut tepat di atas kode yg di cari :

<script src='http://dapurtutorial8.googlecode.com/files/Shttp://agungtalaga.blogspot.com/2012/05/cara-membuat-daftar-isi-blog-dengan.htmlcriptdaftarisi1.js' type='text/javascript'/>

8.Kemudian Save Template
9.Selanjutnya sobat masuk Ke TataLetak => Tambah Gadget => Html/JavaScript
10.Copy-Pastekan Kode Berikut :

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script> <script src="http://fungsi-media-internet.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

11.Save Gadget
12.Jika Sobat ingin Membuat Daftar Isi Dengan Scrool, Silahkan Coppas Script Berikut :

<div style="overflow:auto;width:350px;height:150px;padding:
10px;border:1px solid #C33F00">
<script type="text/javascript" 
src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt">
</script>
 <script src="http://fungsi-media-internet.blogspot.com/feeds/posts/summary?
max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

13.Ganti Teks Yang Bewarna Merah Deng Url Blog Sobat.

Sampai di sini dulu, semoga bermanfaat...!!!

Tips Ngeblog :

Kembali ke Site Map / Daftar Isi di Blog Ini, Klik Di Sini !

Bagaimana caranya Agar Label Dapat Di Index Google Search Engine. Membuat Navigasi Breadchumbs Untuk Sebuah Web/Blog Sangatlah Penting.
Breadcrumbs adalah link / tautan yang biasanya sering sobat temukan di atas sebuah judul artikel, bentuknya seperti Home, Kategori, Judul Artikel, dll
Penggunaan breadcrumbs bisa bermanfaat untuk:
1. memudahkan user atau pengunjung untuk menavigasi halaman situs
2. membuat search engine dapat menavigasi struktur halaman situs dengan lebih mudah

Berikut Tutorialnya :
1.Login Akun Blog Sobat
2.Masuk Ke Template
3.Klik Edit Html
4.Klik Lanjutkan
5.Centang Expandt Widget Template
6.Cari Kode ]]></b:skin> Dan Letakkan Kode Berikut Tepat Di atasa Kode ]]></b:skin>

breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

7.Selanjutnya Sobat Cari Kode <b:includable id='main' var='top'>
8.Hapus Kode Tersebut Dag Ganti Dengan Kode Berikut :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

9.Save Template

Oke Sobat, silahkan di coba...!!!

Tentang SEO :

Kembali ke Site Map / Daftar Isi di Blog Ini, Klik Di Sini !

Informasi

Info Di Blog Ini

	3Brothers Study

	Berbagai Tip dan Trik Menarik Mengenai dunia Blogger seperti cara membuat blog,Tentang Sound System, Bertani Kakao, Perikanan Air Tawar, Pemancar fm, Cara Mendapatkan Uang Lewat Blog, Jaringan Blog, Motivasi Ngeblog, Tentang Seo, Tentang Website, Tips Browsing dan Tips Kepribadian merupakan sajian yang di Hadirkan di Sini. Saya Berharap Posting-Posting Saya Ini Berguna / Bermanfaat Bagi Yang Mau Membacanya,Karena Mustahil Bila Ada Orang Pintar Tanpa Belajar dan Membaca.

	3Brothers Study

	Posting-Posting Yang Ada Di Blog Ini Saya Campur,Antara Hasil Dari Pengetahuan Sendiri Dan Hasil Browsing Di Mbah Google Yang Saya Padukan Untuk Menjadi Yang Lebih Baik.

	3Brothers Study

	Dapatkan Free Downloads,Music Mp3 serta Products-products menarik lainnya di sini. Jika anda suka dengan tampilan Music Playernya,anda dapat copy Paste Embed Codenya.Bagi anda yang suka belanja,silahkan anda membaca artikel Tips Berbelanja dan Berpenampilan dari Shouliehien Butik, Semoga Semua Posting Dari 3Brothers ini Dapat Bermanfaat Bagi Anda Yang Membutuhkannya.

Salam Blogger

Sound System Prafi

Fardino Travel

Tips Trik komputer

Kata Mutiara

Cara Membuat Daftar Isi Blog Dengan Menggunakan JQuery

Tips Ngeblog :

Membuat Breadchumbs Agar Label Di Index Google

Tag

Popular Posts

Blog Archive

Pengikut

Download Toolbar

Data Pengunjung

Informasi