Membuat widget Kategori Ala website portal

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat widget Kategori Ala website portal dan semoga artikel ini bermanfaat.


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

  1. Login ke blogger dengan ID anda.
  2. Klik Rancangan. 
  3. Klik tab Edit HTML. 
  4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
  5. 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6o5slmY1MeuyISEXg9Pyif5J1r2YyIFnSiJTXbyFgu6NcNTkjAC61rg8N14m57xD1i1uSvQREy46ty4qa7UPrj-7DBq_T0E8ggaSrSyfkF5eq2S4QhzVgUEeBDQRgJypbp-6y5AVhVM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhT3x1QEMvwXYBfVpUNPMmCqyLptcEiD-zl_svP-MElX58WEf_oKJgPV0qf4YfYUrf_O-IJI9A4SvrSY2XTNeXJP8zDxQI_NH2NnYxtNRbvBS21x_eaVTejIQDtmjQMVBPov5RBASQC1U/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.
  1. 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'/>
  1. 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.
  1. 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(&#39;&lt;h3 class=&quot;catbox-title&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h3&gt;&#39;);
</script>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts5\&quot;&gt;&lt;\/script&gt;&quot;);
</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(&#39;&lt;h3 class=&quot;catbox-title&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h3&gt;&#39;);
</script>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts5\&quot;&gt;&lt;\/script&gt;&quot;);
</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(&#39;&lt;h3 class=&quot;catbox-title&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h3&gt;&#39;);
</script>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts5\&quot;&gt;&lt;\/script&gt;&quot;);
</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(&#39;&lt;h3 class=&quot;catbox-title&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h3&gt;&#39;);
</script>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts5\&quot;&gt;&lt;\/script&gt;&quot;);
</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

  1. Klik tab Rancangan.
  2. Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.  untuk tampilan bloger baru klik tata letak
  3. 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.
  1. 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;
  1. Kemudian Simpan
Selesai Deh sobat Membuat widget Kategori Ala website portal semoga berhasil....

Referensi : Template maskholis

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat widget Kategori Ala website portal kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered
feedburner

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 14:48

16 komentar :

  1. Wah Updatan bru nih..,
    Kunjungan malam...
    sukses selalu buat bapak....

    BalasHapus
  2. wah blognya makin lama makin mantab, blm sempet update gan

    BalasHapus
  3. Saya sangat terkesan dengan tampilan dan pernak-pernik yang terlihat di theme ataupun di postingan, bahkan gambar blink star yang unik membuat saya kagum. Blog unik dan psotingan yang menarik, patut untuk selalu dikunjungi.

    Salam kenal

    TambelanBlog.com

    BalasHapus
  4. bang mau tanya donk
    kalo linknya ganti website lain bisa apa kaga?

    BalasHapus
    Balasan
    1. maksudnya mau ngambil label dengan beda domain sob, oh mungkin ga bisa sob..

      Hapus
  5. Wah mantep infonya sob, tp banyak banget kodenya ya? masih agak takut utak atik trllu bnyk ni...

    BalasHapus
    Balasan
    1. pokonya asal di download komplit aja dulu, kalau gagal kembalikan lagi dengan upload yg aslinya...

      Hapus
  6. boleh juga info-info dari sini, makasi gan udah share ilmunya

    BalasHapus
  7. Salam kenal sobat. Tutorial bgs yg sdh lm sy cari2. Tp ko hasilnya hanya tombol table sj yh ? Sy cb di blog privasi, khusus bt pcobaan sj.

    BalasHapus
    Balasan
    1. salam kenal kembal... makasih atas kunjungannya, mungkin pemasangannya ada yg salah atau penulisan labelnya yang salah.

      Hapus
  8. Wahhh ,,,, mantep mas, tapi kalau kebanyakan widget loadingnya berat ..

    BalasHapus
  9. Keren-keren banget tutornya mas.
    Jadi bingung saya mau pilih yang mana..barusan saya abis baca tutor mas tentang membuat kategori keren juga. Eh, sekarang ada lagi yang lebih keren.

    Saya bookmark dulu deh..makasih sharingnya ya mas.

    BalasHapus
  10. Jos gandos kang... @@, Izin ZSedot sampe abis ilmune.. **p

    BalasHapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |