Bismillah. Alhamdulillah... Beberapa hari ini Blogger Tune-Up tidak membuat artikel atau pun tips-n-trik karena terkonsentrasi untuk membuat daftar isi dengan efek jQuery accordion (tapi bukan sedang berburu dan menikmati video porno mirip Abah Ariel Peterporn versus Mpo Luna atau versus Mpo Tari lho...). Bahan dasar dari pembuatan daftar isi ini masih menggunakan JSON Feed dengan diberikan sentuhan efek animasi accordion (slideup slidedown) dan efek animasi bergoyang dengan framework jQuery, sehingga menjadikan daftar isi versi ini layak untuk dicoba. Dipilihnya efek animasi accordion supaya daftar isi ini lebih ringkas dan tidak terlalu panjang serta artikel yang di susun berdasarkan Label/Kategori. Daftar isi yang ringkas, mudah dan rapi untuk blog anda yang ingin tampil lebih profesional.
Integrasi Daftar Isi dengan Efek jQuery Accordion pada Template Blogger
Langkah 1Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada Langkah 3:
#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/AVvXsEggl7Dfa_rMQbHvw5CivRY6O4SPdHEW7UjtdY8sY-cgoy_TOngQw_EZoge85y9n6TM-F5ZnlgpCMUTCUlVPach-mFr61o7GYviko3qdcIhdrr8MbBmXuZP2QeD6OF69TPktNoBdJCCLqSE/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/AVvXsEgiFSekNzzCdnuXbaykU6KU5dzZYOKhpszqjcHuWN7HB_SaiocDjQ5RwR6Ak7oDmRuBycDm5ixSbv_eVblaH7MtThyphenhyphenYR2TAKXcNLqoT0sl7_nSwZQY5uD1ptANgtsQA2tWBUA4nGwjrXd0/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/AVvXsEiq2MzHv9qundsHW6DMs2kVB2k0cLH3kVrMbLi9SFjLE2TP_S-zngrFHDNuNEaTYRBU0CfGzmp5R8G8uXiMYNlq60XFGOZrgB9N4uF1zJCOoSGhBGiiO5X1V_bmIqocBIjLUqljICfJ7Sg/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);
}
Langkah 5Cari kode dibawah ini:
</head>Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada Langkah 5:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>Perhatian! Ingat jika pada bagian tag head pada template blogger anda sudah pernah/ada framework jQuery maka lewati Langkah 6 ini (Baca disini)
Langkah 7
Simpan template blogger...
Integrasi Daftar Isi dengan Efek jQuery Accordion pada Artikel
Langkah ABuat sebuah artikel dengan judul terserah anda (misal; Daftar Isi atau Table of Content)
Langkah B
Pindahkan mode Editor artikel ke mode Edit HTML
Langkah C
Masukan (copy paste) kode dibawah ini ke dalam artikel :
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/jquery.toc.acc.min.js"></script>Langkah D
<script src="http://modification-blog.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
Ubah URL blog pada langkah C (yang di blok) sesuai dengan URL Blog anda
Langkah E
Terbitkan artikel dan preview artikel tersebut...
Keterangan:
Untuk file dafis_accv1.js silahkan anda upload sendiri dari file source code yang disertakan kemudian ubah URL sesuai dengan URL file tersebut...
Alhamdulillah... Selamat mencoba dan semoga berhasil. Happy Blogging :)
