Cara Membuat Daftar Isi/ Link List Otomatis untuk Label/ Kategori Tertentu

Tutorial Blog Pemula

Sabtu, 09 Juni 2012

7 Komentar

Belakangan ini sobat telah melihat beberapa menu navigasi baru di sidebar kanan berupa daftarisi/ link list berdasarkan label atau kategori tertentu yang ingin ditonjolkan dari Tutorial Blog Pemula. Kenapa kategori- kategori tersebut ingin lebih ditonjolkan?? Tentunya karena konten tersebut mewakili beberapa kategori lainnya dan merupakan keyword utama dari blog sehingga memungkinkan informasi tersebut menarik visitor yang sedang berkunjung.

Daftar isi/ Link list tersebut dibuat berdasarkan label/ kategori tertentu dengan sebuah kode html/ java script. Cara membuat daftar isi per label ini cukup mudah sobat dan tentunya memudahkan sobat- sobat yang memang ingin menonjolkan label- label tertentu dari blog.

Berikut ini adalah langkah- langkah membuat daftar isi otomatis berdasarkan label/ kategoritertentu :

1.       Login ke akun blogger sobat

2.     PIlih Layout ( Rancangan ) > Tambah Gadget > HTML/ Javascript

3.       Masukkan kode berikut ini ke dalam kotak HTML/ Javascript dengan judul sesuai selera masing- masing untuk membuat daftar isi dengan 1 kategori/ label tertentu:

<div style="overflow:auto; width:auto; height:150px; padding:5px;border:0px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;"><ol><script style="text/javascript">var numposts = 100;var standardstyling = true;</script><script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script><ol><script src=" http://blogpemula-tutorial.blogspot.com/feeds/posts/default/-/ Bisnis%20Online?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol></ol></div>

4.       Masukkan kode berikut ini ke dalam kotak HTML/ Javascript dengan judul sesuai selera masing- masing untuk membuat daftar isi dengan 2 kategori/ label tertentu atau lebih :

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;"><ol><script style="text/javascript">var numposts = 100;var standardstyling = true;</script><script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script><h3>Judul Label 1</h3>
<ol><script src=" http://blogpemula-tutorial.blogspot.com/feeds/posts/default/-/ Bisnis%20Online?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol><br/><h3>Judul Label 2</h3>
<ol><script src="http://blogpemula-tutorial.blogspot.com/feeds/posts/default/-/ Bisnis%20Afiliasi?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol></ol></div>

5.       Simpan dan lihat hasilnya.

Berikut ini adalah informasi kode javascript yang bisa sobat sesuaikan dengan kondisi blog sobat :

·         width:auto :  lebar scroll box.

·         height:100px : tinggi scroll box.

·         border:1px solid #e6e4e3 :  adalah ukuran, jenis dan warna dari border.

1px adalah tebal border, solid adalah jenis border. Untuk kode warna silakan cek disini.

·         font-size : adalah ukuran huruf.

·         <ol> : adalah numbered lIst , sobat bisa menggantinya menjadi bullet list dengan kode <ul>

·         Ganti http://blogpemula-tutorial.blogspot.com/dengan Url blog sobat.

·         Ganti Bisnis%20Online dengan label yang sobat inginkan. Penulisan label yang terdiri dua kata dipisahkan oleh %20 sebagai pengganti spasinya.

Selamat Mencoba!