Cara Membuat Postingan Per Label Dengan Thumbnail

Cara Membuat Postingan Per Label Dengan Thumbnail - 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:



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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFCoUZdRB33cZ4Wgn0lDXaf14uHyclRt-2Kxv0-8er-I716Q7LNx91RZHIBXSFIYYJXqBJ2I8IlhNYOD3DVtlSnJv_zzsl76mDifAyRzid8CVCLALAHAoaymNn9SUZWKr0aOvWdWCyHXs/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/AVvXsEjmQ8xTMj3rb2bCKawaH5ep6ghGV-0_k7t7yYz-F5JkoKtcCu_TiXPG9H_lDPi2t8y6H1QAt5ZTJP-lDgMi1WUnldlqkaNW5qS-gCFZnohFIU1rtQpFpBm4GQx4JCFWHhZdhE7s-aApSXQ/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(&#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
  • Klik tab Rancangan.
  • Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menuElemen 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;

  • Kemudian Simpan
Selesai Deh sobat Membuat widget Kategori Ala website portal semoga berhasil....

Related

Tutorial Blog 3455637993605169921

Post a Comment

  1. lengkap sekali tutorial nya mas, sebenarnya yang dibutuhkan hanya javascriptnya saja, tapi ditambahi dengan penggayaan css memang menghasilkan tampilan yang lebih mantap.
    keren, terima kasih tutorialnya.

    ReplyDelete
    Replies
    1. Kok punya saya gak bisa ya. padahal udah ngikutin semua langkah-langkahnya :'(

      Delete
    2. mungkin salah di penempatan b:section> nya :)

      Delete
  2. @al Ghifari OK terima kasih gan atas kunjungannya :)

    ReplyDelete
  3. gan kalau membuat artikel perlabel di sertai thunambil+read morenya tau ga?
    contohnya kaya web www.binushacker.net
    please gan kalau tau di share saya uda 2 bulan nyari2 script kaya gitu tapi ga ktemu2. nanti kalau agan tau n berhasil di terapin di blog saya saja janji pasti bakal ngasih donasi sbg trima kasih.

    ReplyDelete
    Replies
    1. gan saya lihat di web tersebut, tampilan perlabelnya cuma ada desripsi sama thumbnail doang.. tidak ada readmorenya gan..

      Delete
    2. ada kok gan di bawahnya kan ada tulisan Artikel Lainnya ...
      nah itu yg di maksud read morenya tapi tulisan itu di ganti dgn Artikel Lainnya ...
      kalau di klik bakal menuju smua categoy terntentu, itu yg gw suka pengen banget punya script kaya gitu. yg agan posting di atas kan ada satu thunambil, pengennnya stiap judul artkel ada thunambilnya..
      tolong solusinya gan.

      Delete
    3. owh kaya gitu..
      nanti saya post gan :D lihat di postingan terbaru saya aja :)

      Delete
  4. mas, berarti HTMLnya diletakkan di antara main dan sidebar ya ? :-?

    ReplyDelete
    Replies
    1. yap bener gan.. pokonya dibawah Blog Post (tempat buat homepage)

      Delete
  5. nonton streaming bola gak ribet banyak pilihan chanel nya
    Berita update
    Streaming Tv Online bola

    ReplyDelete
  6. mantap dah artikelnya
    http://acemaxs31.com/obat-nyeri-haid-herbal/

    ReplyDelete
  7. sangat mantap, matursembahnuwun, mas

    ReplyDelete
  8. Punya ane sudah jadi gan.. Pokoknya mantap

    ReplyDelete
  9. Artikelnya bagus namun saya scripnya gambar ga bisa di copy..
    jadi gw simpulkan artikelnya ga bisa dipake.

    ReplyDelete

Terimakasih telah membaca artikel di atas. Silahkan berkomentar dengan sopan.

emo-but-icon

Side Ads

Facebook

Adv

item