Kata Mutiara

Kesungguhan Adalah Kunci Keberhasilan

Cara Membuat Daftar Isi Blog Dengan Menggunakan JQuery


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&amp;alt=json-in-script&amp;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 !


Membuat Breadchumbs Agar Label Di Index Google


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 == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<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'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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 !

Diberdayakan oleh Blogger.
Twitter Delicious Facebook Digg Stumbleupon Favorites More