Membuat Halaman Tabel konten Untuk Blogger

Akhirnya dapat inspirasi juga unuk membuat postingan terbaru hehe, okey sesuai dengan judulnya, kali ini saya akan membagikan sebuah widget berbentuk tabel yang apabila di klik atbel tersebut akan menampilkan postingan-postingan kamu terdahulu. Yah seperti daftar isi lah namun lebih keren lagi dong hehe kamu bisa melihat demonya langsung di blog ini. Lihat cara membuatnya di bawah ini :

1. Masuk ke Akun blogger kamu.

2. Klik Template (Blogger baru) atau Rancangan (Blogger lama) -->  Edit HTML --> dan kamu cari kode ]]></b:skin> oh iya sebelum meng-edit template blog kamu, jangan lupa di backup dahulu yah templatenya.

3. Salin kode CSS di bawah ini dan letakkan diatas kode ]]></b:skin>.

/*--------MBT TOC-----*/ 
/*----http://hzndi.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');
}

4. Simpan Template, namun belum selesai.

5. Sekarang buatlah sebuah LAMAN BARU bukan postingan terbaru, untuk tampilan blogger lama bisa kamu lihat di gambar di bawah ini.

 

Dan untuk tampilan blogger baru, klik Laman --> Laman Baru dan pilih laman Kosong, lalu klik bagian edit HTML seperti gambar di atas.

 

6. Salin kode di bawah ini dan masukkan ke dalam HTML tadi, seperti gambar di bawah ini, dan kamu ganti alamat yang di sorot dengan alamat blog/ web kamu.

 <script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.hzndi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;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>

7. Publikasikan dan kamu lihat hasilnya :D

source code & images by : mybloggertricks.com

Postingan Terkait:

Posted in: Blogger,Widget