Anda telah melihat bahwa saya telah membuat tabel secara otomatis diperbarui dari isi halaman yang menunjukkan link ke semua posting yang diterbitkan sejauh ini di blog ini. Widget ini menampilkan semua kategori posting Anda bijaksana dan benar-benar menghemat waktu. Saya sebelumnya menambahkan link baru secara manual ke Trik Blogger halaman tapi begitu saya datang untuk mengetahui widget yang besar ini dari admin sendiri johan andy agasi Saya langsung dikonversi untuk itu. Widget ini juga akan memberitahu pengunjung bahwa yang posting baru dan yang sudah tua. Saya telah memodifikasi CSS untuk membuatnya sesuai penampilan blog Anda.
Silahkan terlebih dahulu melihat Demo Daftar Isi Halaman dan bermain dengan widget untuk melihat apa yang begitu menarik tentang hal itu.
Ikuti langkah-langkah di bawah ini untuk membuat halaman TOC untuk blog Anda
- Pergi Untuk Blogger > Desain> Edit HTML
- Back up template Anda
- Mencari ]]></b:skin>
- Dan tepat di atas itu paste kode CSS di bawah ini,
/*-----johanandyagasi.blogspot.com-----*/
.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;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #1C8DFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}
5. Simpan template Anda dan sekarang membuat Halaman Baru (bukan topik baru).
6. Berikan Halaman baru Anda judul yang relevan seperti "XYZ Daftar Isi" dan kemudian dalam modus EDIT HTML editor blogger Anda paste kode di bawah ini,
Update Kode
<script src = "http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"> </ script>
<scriptsrc=" http://www.johanandyagasi.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://abu-farhan.com/script/acctoc/accordion-pack.js" type = "text / javascript"> </ script>
Sekarang cukup mengganti http://www.johanandyagasi.blogspot.com dengan URL Blog Anda dan tekan simpan. Lihat halaman baru Anda untuk melihat tabel indah Of Isi dengan setetes bagus down effect. Sesuaikan widget TOC
Secara default saya telah memelihara Kategori latar belakang dalam mode warna aktif untuk muncul sebagai biru dan aktif sebagai abu-abu gelap seperti yang ditunjukkan di bawah ini.
Jika Anda ingin mengubah warna modus aktif maka perubahan sederhana # 9dc2e7 dan # 438cd2. Berikut # 9dc2e7 mengacu pada warna yang lebih ringan dan # 438cd2 mengacu pada warna warna yang lebih gelap. Jadi warna apa saja yang ingin Anda gunakan hanya mengganti # 438cd2 dengan warna yang disukai dan # 9dc2e7 dengan lebih terang dari warna yang anda sukai.
Anda akan menemukan kami Warna Generator Alat yang berguna dalam menentukan pilihan warna.
Itu dia!
0 Komentar untuk " Cara Membuat Daftar Isi Halaman Untuk Blogger Dengan Accordion "