Cara Membuat Daftar Isi Blog | Arbeta Blog - Sobat blogger mungkin tidak asing lagi dengan widget daftar isi seperti ini,ya walaupun udah mainstream :D namun kalau ada sahabat Blog yang baru dan belum tahu tentang tata cara pembuatan nya, silahkan simak tutorial Cara Membuat Daftar Isi Blog berikut ini:
- Login ke akun Blog
- Masuk ke dasbor -> Tata letak -> Tambah Gadget -> Pilih HTML/Javascript
- Kemudian Copy dan paste kan kode dibawah ini pada HTML/Javasript
<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/AVvXsEihf9GqNC7KceeojD8jtHJOGc7fZJTT4eP-_cMQtAcoeQrD2IKqLxd_QU40HJMxQCcysdqNMFJfaHq2fISLJQR92Z5H0MZnKud11GSd0eb_XY9t-c8_EW_Vy2Na7c8Mgi0iC9KyhAO2j7U/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/AVvXsEiq1nkg-eYgpWBBODWLOQV9iT5D_TBbYs0o33aeOkTgWoZWQpZsjyTdZdB6YCeNNHL0pYOeqsyZn6E0-KpwL9ZV-aD91MBbx_f5EFua8FR-SST3DKf3h3O94UJZqDWPvp69k6wQP0RQCUk/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/AVvXsEicY7qbxKMU_KUmIC21q4A4Mpnc9CAm4n7fQdvTVQWvhx0fYrIa0stTCsisyi9kXRdJbiHeco7Go3JVNBljy57Uhsn57KXEzBmf-ipeJ4gPRDUzOA4Rhc5NkJwVrteZHIQSqhtQwmGZ48I/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 src="http://bangdadan.googlecode.com/files/daftar.isi.js" type="text/javascript"></script>
<script src="http://siapasihh.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
#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/AVvXsEihf9GqNC7KceeojD8jtHJOGc7fZJTT4eP-_cMQtAcoeQrD2IKqLxd_QU40HJMxQCcysdqNMFJfaHq2fISLJQR92Z5H0MZnKud11GSd0eb_XY9t-c8_EW_Vy2Na7c8Mgi0iC9KyhAO2j7U/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/AVvXsEiq1nkg-eYgpWBBODWLOQV9iT5D_TBbYs0o33aeOkTgWoZWQpZsjyTdZdB6YCeNNHL0pYOeqsyZn6E0-KpwL9ZV-aD91MBbx_f5EFua8FR-SST3DKf3h3O94UJZqDWPvp69k6wQP0RQCUk/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/AVvXsEicY7qbxKMU_KUmIC21q4A4Mpnc9CAm4n7fQdvTVQWvhx0fYrIa0stTCsisyi9kXRdJbiHeco7Go3JVNBljy57Uhsn57KXEzBmf-ipeJ4gPRDUzOA4Rhc5NkJwVrteZHIQSqhtQwmGZ48I/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 src="http://bangdadan.googlecode.com/files/daftar.isi.js" type="text/javascript"></script>
<script src="http://siapasihh.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
- Silahkan sobat ganti http://siapasihh.blogspot.com dengan URL blog sobat.
- results=1000 adalah jumlah daftar isi yang ingin di tampilkan
Kemudian klik simpan
Sobat juga bisa membuatnya di postingan, caranya sebagai berikut:
Entri Baru -> Klik HTML/disamping Compose
Taruh Script Kodenya pada Mode HTML tersebut
Terus Publikasikan deh. selesai..!!!
Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Daftar Isi Blog Accordion Keren.
semoga artikel ini bermanfaat buat sahabat blogger semua..
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll
Sobat sedang membaca artikel tentang Cara Membuat Daftar Isi Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
No comments:
Post a Comment