Membuat widget Kategori Ala website portal:blog go blog

Membuat widget Kategori Ala website portal ini maksudnya yaitu membuat widget kategori berdasarkan label seperti pada website portal baik itu portal Berita, portal Pemerintah atau yang lainnya.

kebanyakan website portal itu menggunakan kategori -kategori dihalaman utamanya sebagai informasi tampilannya ada yang menggunakan gambar adapula yang hanya menampilkan judulnya saja.

Ini saya berikan contoh screenshot dari Pikiran Rakyat Online:

contoh Membuat widget Kategori Ala website portal

Ini tidak menggunakan gambar jadi hanya menampilkan judul artikel dari label tersebut.

Dibawah ini saya tampilkan screenshot dari Okezone.com.

Ini memakai gambar pada Artikel pertamanya dan yang lainnya tidak memakai gambar.

Nah pada kesempatan ini saya akan berbagi cara membuat widget kategori seperti pada gambar kedua diatas.

Berikut adalah langkah-langkah untuk Membuat widget Kategori Ala website portal :

Langkah pertama

Login ke blogger dengan ID anda.
Klik Rancangan.
Klik tab Edit HTML.
Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
Carilah kode ]]></b:skin>, copy lalu paste kode berikut persis diatas kode ]]></b:skin>

#label1-wrapper{width:250px;float:left;word-wrap:break-word;overflow:hidden}
#label2-wrapper{width:250px;float:left;word-wrap:break-word;overflow:hidden}
.labelbox {background:#fff;border:1px solid #bebebe;width:230px;padding:0px;margin:0px}
.labelbox h3{font:bold 14px Arial;text-transform:none;color:#333;line-height:1.2em;letter-spacing:.01em;background:url(http://3.bp.blogspot.com/-ogcZLzJaG4U/T4RM-CJ5o6I/AAAAAAAAAbg/srtfctWVOdo/s1600/sidebar-bg.png) repeat-x bottom;margin:0 auto;border-bottom:1px solid #bebebe;padding:7px 10px}
.labelbox h1 a,.catbox-even h1 a:visited{color:#333}
.labelbox h1 a:hover{color:#1da7e7}
.labelbox li{border-bottom:1px solid #ddd;font-size:12px;background:url(http://4.bp.blogspot.com/-CetnW4aSnp4/Tzzms5OvwvI/AAAAAAAAFTo/C_Q4Y90axkI/s1600/arrowList_2.gif) no-repeat 0 4px;margin:0 10px;padding:5px 0 5px 11px}
.labelbox ul li a:hover{color:#1da7e7}
.labelbox li.first{display:block;font-family:Arial,serif;font-size:12px;border-top:0;background:none;padding:0}
.labelbox .entry-thumb{float:left;margin-right:10px}
.labelbox .entry-title{font-size:13px}
.labelbox .entry-excerpt{display:block}
.labelbox h2 a:hover{color:#1da7e7;text-decoration:none}
.labelbox ul{list-style:none;padding:0}
.labelbox h2 a,.catbox-even h2 a:visited,.labelbox ul li a,.labelbox ul li a:visited{color:#000;text-transform:none}

Sesuaikan Widthnya agar sesuai dengan halaman postingan sobat.

Carilah kode </head>, copy lalu paste kode berikut persis diatas kode </head>

<script src='http://my-project-favicon.googlecode.com/files/sllb2.js' type='text/javascript'/>

Pada tahap ini mungkin bagi pemula akan sedikit kesulitan apabila dalam template tersebut berbeda dengan kode pada tutorial ini, namun tidak usah putus asa berjuang sobat.. Cari kode seperti dibawah ini:

</b:widget>
</b:section>
</div>
<div id='sidebar-wrapper'>

Sobat fokuskan pada kode </b:section> saja karena mungkin bagi sebagian template ini akan berbeda, namun pada intinya sobat harus mengetahui kode </b:section> ini berada dalam section/bagian apa, dan yang harus dicari disini adalah dibawah kode </b:section> dari section/bagian <b:section class='main' id='main' showaddelement='no'> yang didalamnya terdapat widget postingan, ini merupakan bagian yang paling panjang dalam template dan di akhiri dengan </b:section>, nah kode </b:section> itu yang saya maksud.
kalau kurang jelas silahkan sobat download lengkap dulu templatenya kemudian setelah selesai didownload buka pada notepad++, maka disana akan kita tau section/bagiannya.

Kalau sobat sudah menemukan kode yang saya maksud silahkan sobat copy paste kode dibawah tepat dibawah kode </b:section> tersebut.

<div id='label1-wrapper'>
<b:section class='label1' id='label1' preferred='yes'>
<b:widget id='HTML26' locked='false' title='Label 3' type='HTML'>
<b:includable id='main'>
<div class='labelbox'>
<script>
document.write('<h3 class="catbox-title"><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h3>');
</script>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts4+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML28' locked='false' title='Label 5' type='HTML'>
<b:includable id='main'>
<div class='labelbox'>
<script>
document.write('<h3 class="catbox-title"><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h3>');
</script>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts4+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='label2-wrapper'>
<b:section class='label2' id='label2' preferred='yes'>
<b:widget id='HTML27' locked='false' title='Label 4' type='HTML'>
<b:includable id='main'>
<div class='labelbox'>
<script>
document.write('<h3 class="catbox-title"><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h3>');
</script>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts4+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML29' locked='false' title='Label 6' type='HTML'>
<b:includable id='main'>
<div class='labelbox'>
<script>
document.write('<h3 class="catbox-title"><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h3>');
</script>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts4+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Kalau sobat hanya ingin memasang hanya satu 2 kolom kiri dan kanan maka sobat hapus saja kode yang berwarna merah.
Simpan dulu template sobat

Langkah kedua

Klik tab Rancangan.
Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman. untuk tampilan bloger baru klik tata letak
Setelah tampil halaman tata letak maka pada template sobat akan ada 4 buah kotak widget dengan nama Label 3,4,5 dan 6. lihat gambar dibawah, namun terkadang tampilannya menyamping.

Selanjutnya pada tiap label klik edit dan setelah tampil halaman konfigurasi HTML/javascript masukan judul kategory pada kolom judul dan nama label pada kotak konten. lihat contoh dibawah;