Dari sekian Daftar Isi Blog yang sudah saya bahas, baik yang biasa maupun yang seperti Slide / Animasi Otomatis silahkan kawan nanti lihat contohnya di Blog Demo saya :y; agar pembicaraan saya tidak ngelantur sekarangpun saya akan membahas Daftar Isi berdasarkan Katagori Otomatis Buka-Tutup yang saya beri Judul Daftar Isi BBC :z;
Setelah kawan melihat Demonya, sekarang mari kita ke Cara Membuatnya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
- Copas Script berikut kedalamnya
<style type="text/css">
#daftar-Bbc{
font-family:"Helvetica", Tahoma, Verdana;
font-size:13px;
font-weight:bold;
color:#FF0;
background:-moz-linear-gradient(top,#FFF,#000);background:-webkit-gradient(linear,left top,right bottom,from(#000),to(#FFF));
padding:5px 0;
border: 1px solid #0FF;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 20px 20px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 20px 20px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 20px 20px;">
}
.daftar-label{
background:-moz-linear-gradient(top,#236C90,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#236C90),to(#FFF));
font-weight:bold;
font-size: 13px;
font-family: segoe Print;
line-height:1.4em;
text-transform: uppercase;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 5px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 3px 10px;
color: #FFF;
border:1px solid #2F94BA;
}
.daftar-label:hover{
background:#7CA9C0;
color:#FF0;
text-shadow: 2px 2px 2px #036;
font-size: 13px;
border: 1px solid #FFF;-moz-border-radius:10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;
}
.daftar-daf ol{
margin:0 0 0 35px !important;
padding:0 !important;
}
.daftar-daf ol li{
background-color:#C9E9F4 -moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#95CAFF),to(#FFF));
line-height:1.5em;
margin:0 5px !important;
padding: 3px;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.daftar-daf ol li a{
text-decoration: none !important;
color:#333; !important;
display:block;
font-size: 13px;
padding:0 0 0 10px;
}
.daftar-daf ol li a:hover{
background:#7CA9C0;
border: 0px #FFF solid;-moz-border-radius:15px;-khtml-border-radius: 15px;-webkit-border-radius: 15px;
padding: 0 5px;
color: #FFF;
font-size: 13px;
text-shadow: 2px 2px 2px #F00;
}
</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/blogbegocreation/javascript/Bbc.js" type="text/javascript"></script>
<script src="http://Nama Blog Kawan.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
- Ganti teks yang berwarna merah [Nama Blog Kawan] dengan URL Blog Kawan :q;
- Simpan Blog kawan dan lihat hasilnya
0 Kommentare:
Kommentar veröffentlichen