Sabtu, 01 September 2012
Bagi pengunjung daftar isi sangatlah
perlu karena dengan adanya daftar isi maka si pengunjung bisa melihat2
daftar isi blog anda yang ingin di baca oleh pengunjung. Maka dari itu
kali ini saya akan membagikan cara membuat Daftar isi versi versi editan
dari abu farhan, tentunya yang lebih bagus dan cukup menarik. Dengan
nama label yang di jadikan sebagai tombol untuk buka dan tutup, bisa di
edit warnanya, dan tampilan yang cukup pantas. Kamu bisa melihat contoh
daftar isinya di akhir postingan ini. Ingin tahu cara membuat daftar isi
seperti di bawah, ikuti langkah-langkahnya sperti berikut:
- Yang pertama kamu login di halaman blog kamu, Kemudian muncul Gambar Seperti Ini
- Kemudian kamu klik Edit Entri pada blog kamu, Kemudian muncul Gambar Seperti Ini
- Setelah itu pilih Edit Laman, Kemudian muncul Gambar Seperti Ini
- Setelah itu klik Laman Baru, Kemudian muncul Gambar Seperti Ini
- Dan tinggal salin script di bawah ini, Tapi memasukanya jangan di Compose, di Edit Html, Seperti Gambar Ini
<base target="_blank"></base>
<style type="text/css">
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #33ff33;
background: -webkit-gradient(linear, left top, left bottom, from(#33dd00), to(#33cc00));
background: -moz-linear-gradient(top, #33dd00, #33cc00);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33dd00', endColorstr='#33cc00');
}
</style>
<script src="http://linkrf.googlecode.com/files/DaftarIs2.2UM.js">
</script>
<script src="http://elites-run.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://linkrf.googlecode.com/files/Acc-PackUM.js" type="text/javascript">
</script>
Setelah memasukan scrip di atas ke page / halaman yang akan kamu jadikan daftar isi, kamu klik Terbitkan Entri. Dan lihat hasilnya..!
Keterangan:
Tulisan http://elites-run.blogspot.com/ kamu ganti dengan alamat blog kamu, dan tulisan yang berwarna biru
di atas adalah warna2 untuk daftar isinya, bisa kamu ganti dengan
warna2nya jika kamu mau agar sesuai dengan tema blog kamu, yang tentunya
jika kamu bisa / ingin.
Semoga bermanfaat.....
Contohnya....ada disini
