Membuat Daftar Isi yang keren maknyos pada Blog

        Kali ini saya akan mengshare sebuah trik and tips untuk Membuat Daftar Isi yang keren maknyos pada Blog hehe. cara ini sebenarnya sudah lama and ane dapat dari blog sebelah tepatnya blog Mbah Kolis Master Designer Template Blog cuman masalahnya cara yang ada disitu gak bisa tapi dengan keahlian yang seadanya dari ane mulai deh ane utak atik dan,,... yes Alhamdulillah berhasil juga.

Pesan yang ane dapat dari itu adalah "jika kita mau belajar pasti bisa" 

hmm,,.. terima kasih buat si Mbah yang telah bersedia memberikan ilmu-ilmunya dengan gratis :)
oke langsung aja yaa :

Langkah Pertama

1. Login dulu ke blogger anda
2. Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
3. Setelah itu cari kode berikut ini ]]></b:skin>
4. Kemudian copas kode dibawah ini dan taruh diatasnya
   

   #dafis-acc{
   

   font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

   font-size:12px;

   color:#333;

   background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;

   padding:2px 0;

   border:1px solid #339DC6;

   }

   .dafis-label{

   background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/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);
   }

5. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.
   
   view plainprint?

   1. <script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  
Nb : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas
6. Kemudian Klik Simpan Template.

Langkah Kedua

Nah dilangkah kedua ini banyak orang yang gagal tapi Alhamdulillah setelah ane utak atik dikit akhirnya bisa juga :

1. Buatlah sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )
2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
   view plainprint?

   1. <script src="http://relatedpost1.googlecode.com/files/daftarisimaskolis.js">
      </script><script src="http://namablogsobat .blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
      </script>
3. Ubah namablogsobat dengan url blog anda
4. Selanjutnya Klik Publish Post.

Itu tadi tutorial kali ini, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat.

Share this post

Berlangganan update artikel terbaru via email: