Cara Membuat Satu Widget, Bisa Menampilkan Banyak Label dan Artikel

Cara Membuat Satu Widget, Bisa Menampilkan Banyak Label dan Artikel
Selama ini saya perhatikan blog menggunakan widget hanya menampilkan satu kategori / label saja dan saya berpikir kenapa tidak hanya menggunakan satu widget bisa tampilkan kategori yang berbeda-beda

Postingan ini bukan berniat menjelekkan tampilan blog siapa pun ini hanya semata-mata membuat blog  postingan artikel pada blog lebih mudah di lihat orang sedang berkunjungi pada blog kita, sebab pengunjung saat ini tidak suka hal yang ribet, misalnya untuk membaca dengan klik menu di atas sudah kita siapkan cara sekali mereka lalukan, karena pengunjung lebih suka melihat yang ada di depan mata mereka yang akan mereka baca selanjutnya.

Kenapa saya memberikan judul artikel cara membuat satu widget bisa menampilkan banyak kategori, sebenarnya tidak ada perbedaan dengan pembahasan pada blog yang lain, yang membedakan pada pembahasan lain hanya tampil satu topik/katogeri/label saja seperti artikel terbaru.


Baca juga: Cara Mudah Memasukkan Video Youtube ke Postingan Blog

Pada pembahasan ini bisa memunculkan beberapa kategori sekaligus yang sesuai dengan keinginan kita sendiri dan memberikan banyak pilih untuk pengunjung akan membaca artikel lainnya nanti.

Contoh sederhana, bila widget artikel kita pasang hanya satu kategori misalnya "Adsense" memang kita bisa memberi banyak label pada artikel tersebut tapi yang sesuai dengan topiknya supaya tidak membiat pengunjung bingung, pada saat pengunjung membaca artikel tersebut yang bersumber dari widget pasti di akhir artikel kita ada namanya postingan terkait.

Contoh dengan menerapkan satu widget bisa tampil banyak kategori dan artikel:
Judul widget: Baca juga
Artikel 1 dari kategori Kesehatan
Artikel 2 dari kategori Tekno
Artikel 3 dari kategori Aplikasi Android
Artikel 4 dari kategori Bloging
Artikel 5 dari kategori Google Adsense

Dari ilustrasi di atas dalam satu widget akan muncul lima artikel yang beda label, pada saat pengunjung membaca, misalnya artikel Google Adsense, pada post artikel terkait akan muncul artikel serupa, begitu juga bila membaca artikel kesehatan, itu lumayan membuat view meningkat dan pengunjung bisa berlama-lama di blog kita.

Memang dalam menerapkan panduan ini, pasti ada sisi lebih dan kurangnya, mungkin hal kurang membuat kecepatan blog sedikit berkurang dengan ada widget, tapi mempunyai kelebihan yaitu terjadi peningkatan view dan memudahkan pengunjung menemukan artikel lain, semua tergantung pilihan anda.

Cara membuat hanya satu widget, bisa menampilkan Banyak Kategori dan Artikel

Untuk persoalan memasang widget tidak ada perbedaan dengan pembahasan blog lain.

1. Login blogspot
2. Tata letak > tambahkan gadget > HTML/javaScript > judul: silakan di isi, konten atau kolom tempat paste kode di bawah ini
3. Simpan, lalu simpan setelan

Kode
<style>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write;
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write;}
}
var towrite='';var flag=0;
document.write('<br><strong>');
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');
}
</script>
<script>
var numposts = 2; var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 75;
</script><script src="/feeds/posts/default/-/Label1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>
<script src="/feeds/posts/default/-/Label2?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>
<script src="/feeds/posts/default/-/Label3?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>
<div class="clear"/></div>


Keterangan:
var numposts = 2 jumlah artikel yang ditampilkan.
label1 - label3
 ganti dengan nama label anda, untuk demo bisa dilihat di blog ini, jika belum di ganti.

Label:
data-matched-content-ui-type="image_sidebyside" data-matched-content-rows-num="4" data-matched-content-columns-num="1"

Untuk Membaca Artikel Terbaru:

2 Responses to "Cara Membuat Satu Widget, Bisa Menampilkan Banyak Label dan Artikel"

  1. wah pas ini, kolom recent post, komen dan pos populer jadi satu tapi tidak mucul. itu sama nggak ya kondisi ?

    ReplyDelete
  2. Ini menampilkan artikel, bisanya kita pasang widget artikel dg label berita dan diwigdet tersebut hanya muncul artikel hanya label berita..

    Panduan ini
    Dlm satu widget, bisa akan tampilkan bukan hanya satu label saja.
    Misalnya gan
    Mau tampilkan artikel di label kesehatan, blog, seo, adsense, tips unik masing2 hanya satu artikel.

    Nanti akan muncul masing akan muncul satu artikel dari label kesehatan, blog dan seterusnya..

    Beda scrip kau yaitu gan

    ReplyDelete

Syarat komentar:
1. Mohon komentar sesuai dengan topik
2. Mohon jangan masukan link atau url hidup atau mati karena di anggap Sp@m.
3. Dengan profil dari Google+ akan di kunjungi balik jadi tidak perlu masukan link blog
4. Tidak boleh promosi dalam bentuk apa pun.