Membuat Daftar Menu Terbaru 2013

Daftar Menu 

Salam Blogger!
Pada hari ini saya akan memposting artikel tentang Membuat Daftar Isi atau Menu pada Blog Update 2013, dimana dalam pembuatannya sangatlah simpel dan tidak memberatkan loading blog.
sebenarnya saya akan mengshare trik ini pada akhir tahun tetapi karena sudah saya anggap layak dan teruji tidak ada salahnya saya terbitkan hari ini.

Widget ini sangatlah Stylish, Modern dan Unik ( Klik gambar untuk memperbesar) :
A. Menu berisi sesuai dengan Label/ Kategori
B. Apabila kursor menyentuh maka akan bergeser kekanan
C. Memiliki sistem buka tutup
D. Dapat dimodifikasi menyesuaikan templete anda, Dll

Bila anda tertarik silahkan ikuti langkah-langkah dibawah ini :
1.Login ke blogger 
2.Klik Tata Letak.
3.Klik  Elemen Halaman.
4.Klik Tambah Gadget.
5.Kemudian Pilih HTML/Javascript.
6. Copi paste kode dibawah ini

<style type='text/css'>
#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/AVvXsEiZDvCkl7s0vCAYhIEasTG19aJ0e6lxoETAkRoD-5YTzQzcUZGbvqMFf2nhhsw5nMQ6NF-dRl21T9v7ChPfxc3Y-AYDeAeXddqQAD2CBMGx5zn87jbh1LzX5BvCDc6ZIpi6pjgfxnEkhk8/d/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/AVvXsEiycJy9QblxmoWI5I82nErbtW-SJlgzL7pvGi4wmWUkFCLvYee4QCjcns5ghNZESv20PfmUSUADxptW3bRFBgS5mTt4CD6kXuU5h3e-bgi9lX_NrD6P7eoEVEYZGQzjLaVqnZNufE5QeLI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1oINC_Q7ZGpZu1XUDIwvj0cvXSGQe-7NFmvrfRqpPOHETUQ8lad-NM6M_zHhCS04aEUig_BCzTE8ZIDUAcAw__8lrfkYnv0bsyXZ_6SGS0UKbNLe2SohHSgbaSFvzFPUzZX6v6FZhF4/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); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://riefsaz.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

C O D E

7. Simpan dan lihat hasilnya
bila ada pertanyaan silahkan mengisi di kotak komentar dibawah ini.

NB : Ganti http://riefsaz.blogspot.com dengan alamat blog anda.

Semoga bermanfaat.

Menu Button Vertical

NB : Untuk memanjakan Pembaca setia Blog ini  pada Tutorial berikutnya saya akan membahas bagimana cara membuat " Menu Button Pelangi " seperti tampak disamping ini, saya belum share karena ingin menambah warna lebih banyak lagi, supaya tidak ketinggalan silahkan sobat Follow Blog ini dengan cara klik "Join This Site"  agar terkirim otomatis dan selalu Update, terimakasih.