Cara membuat menu Daftar ISI dengan tampilan menarik

Friday, March 29, 2013

print this page
send email
Membuat daftar isi pada blog bertujuan agar pengunjung dengan mudah melihat artikel yang mereka suka.
Membuat daftar isi yang menarik juga sangat disukai pengunjung blog, apalagi daftar isi yang akan saya tunjukan caranya tampilannya sangat elegan dan keren . Para blogger juga sangat meminati tips ini untuk mempercantik tampilan blog nya . Daftar isi yang saya share caranya ini bernama daftar isi jQuery.  Dengan animasi scroll kebawah yang akan mempermudah pencarian dan tidak memakan tempat pada halaman postingan . Daftar isi otomatis akan menampilkan posting blog terbaru dari sobat blogger tanpa perlu sobat repot repot mengeditnya lagi. Untuk lebih jelasnya Gambarnya seperti berikut :

Keren kan daftar isinya


Nah, langsung saja sobat blogger, bagi sobat yang mau tahu cara membuat daftar isi dengan mudah ikuti petunjuk dibawah ini :


1. Masuk/login lah ke blogspot

2. Buatlah Entri Baru / Postingan baru

3. Pilih menu HTML , lalu copy kode dibawah ini dan pastekan pada postingan kamu , dan jika sudah carilah URL  http://badry7.blogspot.com/   lalu ganti dengan URL blog kamu.

Klik show untuk melihat
 <style type='text/css'>
#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); }
</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://starchau.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>


4. Setelah itu Bagikan / Publikasikan

5. Taraaaaaa.... Daftar isi yang keren ini sudah ada di blog sobat sekalian..

Description: Cara membuat menu Daftar ISI dengan tampilan menarik Rating: 5.0 Reviewer: Raja_Dihati ( Computer Informations ) ItemReviewed: Cara membuat menu Daftar ISI dengan tampilan menarik seperti di blog saya ini...




Cpx24.com CPM Program

0 Komentar:

Post a Comment

Pemberitahuan :
Mohon maaf apabila komentar Sobat dari Facebook tidak bisa saya jawab semua, dikarenakan sulit untuk memoderasi komentar dari Facebook, bila sobat ada pertanyaan yang ingin lansung saya jawab, silakan Sobat berkomentar dari id Blogger.

** Jika anda terbantu dengan apa yang ada di blog ini jangan lupa untuk IZIN COPAS dan Ucapan Terimasih pada kotak komentar di bawah.**



close
Chat