Cara Memasang Widget Recent Post by Label

8/11/2015
Cara Memasang Widget Recent Post by Label

Cara Memasang Widget Recent Post by Label - Kali ini Arlina Design akan berbagi widget yang cukup menarik untuk di pasang pada blog. Widget recent post by label ini berfungsi untuk menampilkan postingan terbaru berdasarkan label tertentu.

Widget ini nantinya akan tampil tepat di bawah postingan pada halaman index atau halaman utama blog,

Bagi yang tertarik silakan ikuti langkah berikut :

1.Login ke Blogger > Buka Template > Klik Edit HTML > Tambahkan kode di bawah ini sebelum </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function tagpostthumbs(json){document.write('<ul class="taglabel">');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://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.png'}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(tagpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="tagpost_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a><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(tagpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}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>');if(tagpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(tagpostcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(tagpostmore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="'+posttitle+'">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(tagpostseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}
//]]>
</script>
</b:if>
</b:if>

2. Selanjutnya tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

/* CSS Recent Post by Label */
img.tagpost_thumb{float:left;border:1px solid #ddd;margin-right:8px;height:60px;width:60px;padding:2px;transition:all .6s}
img.tagpost_thumb:hover{border-color:#aaa;}
.taglabel{float:left;width:100%;padding:0;margin:0}
ul.taglabel li{padding:5px 0;min-height:73px}
#tagpost-left .widget ul,#tagpost-right .widget ul,#tagpost-bottom .widget ul{margin-top:-5px!important}
#tagpost-left .widget,#tagpost-right .widget,#tagpost-bottom .widget{position:relative;display:block;border:1px solid #ccc;float:left;padding:1.5%}
#tagpost-left h2,#tagpost-right h2,#tagpost-bottom h2{background:#333;color:#fff;font-family:inherit;font-weight:bold;font-size:15px;letter-spacing:.5px;position:relative;display:block;margin:0 0 10px 0;padding:15px}
#tagpost-left .widget{margin-right:5px}
#tagpost-bottom .widget{margin-top:10px}
#tagpost-left .widget ul,#tagpost-right .widget ul,#tagpost-bottom .widget ul{list-style:none;margin:0;padding:0}
#tagpost-left .widget ul li,#tagpost-right .widget ul li,#tagpost-bottom .widget ul li{display:block;font-size:12px;font-family:inherit;border-bottom:1px solid #ddd;margin:10px 0;padding:0;transition:all .6s}
#tagpost-left .widget ul li:hover,#tagpost-right .widget ul li:hover,#tagpost-bottom .widget ul li:hover{border-bottom-color:#bbb;}
#tagpost-left .widget li:last-child,#tagpost-right .widget li:last-child,#tagpost-bottom .widget li:last-child{border-bottom:none;margin:10px 0 0 0}
#tagpost-left .widget ul li a,#tagpost-right .widget ul li a,#tagpost-bottom .widget ul li a{font-size:13px;color:#333;font-weight:bold}
#tagpost-left .widget ul li a:hover,#tagpost-right .widget ul li a:hover,#tagpost-bottom .widget ul li a:hover{color:#444;text-decoration:underline;}
#tagpost-left .widget,#tagpost-right .widget{width:48%;margin:10px 5px}
#tagpost-bottom .widget{width:98.4%}

Catatan : Sebelumnya di template demo sudah memasang css ini

*, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

3. Tambahkan markup widget di bawah ini tepat di bawah widget blog1 jika kesulitan silakan lihat screenshot di bawah ini

Markup Widget Recent Post by Label

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:section class='tagpost-left' id='tagpost-left' preferred='yes'/>
<b:section class='tagpost-right' id='tagpost-right' preferred='yes'/>
<b:section class='tagpost-bottom' id='tagpost-bottom' preferred='yes'/>
</b:if>
</b:if>

4. Simpan template.

5. Selanjutnya buka Tata Letak > Silakan tambahkan widget baru yang berada tepat di bawah widget Posting Blog > Tambahkan kode di bawah ini di dalamnya

<script type='text/javascript'>
    var numposts = 5; // Jumlah Post yang akan ditampilkan
    var tagpostthumbnails = true; // Ganti "false" untuk tidak menampilkan
    var tagpostmore = false;
    var tagpostseparator = true;
    var tagpostcommentnum = true; // Ganti "true" untuk menampilkan 
    var tagpostdate = true; // Ganti "true" untuk menampilkan 
    var tagpostsummary = false; // Ganti "false" untuk tidak menampilkan 
    var numchars = 50; // Jumlah karakter deskripsi yang di tampilkan
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Featured?orderby=updated&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>

Catatan : Ganti kode yang ditandai dengan nama label.

Jika ingin memunculkan postingan terbaru, silakan ganti feed di atas dengan kode ini

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>

6. Simpan Widget dan lihat hasilnya.


Untuk tampilan widget bisa sobat kreasikan kembali. Sekian mengenai Cara Memasang Widget Recent Post by Label, semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

30 comments

Cieee... akhirnya pertamax :v

Balas

Cepat jg, belum 5 menit :D

Balas

Sangat simple but menarik.. Nice widget recent post

Balas

Wkwkwkw... biasanya gk pernah pertama nh :D

Balas

di widget seperti ini kalau count commetnya diganti sama author gimana mba??

Balas

Fantastis Arlina Aku ingin kau memberi saya template ini
saya mohon padamu

Balas

sangat bermanfaat artikelnya >> "Cara Memasang Widget Recent Post by Label "

Balas

Thanks arrtikel nya .....

Balas

mantaf sis tapi tampilan di mobile kok gak keluar ya?

Balas

Mbak, cara belajar memahami kode html blog dimulai darimana ya? hehe. Kok kayaknya anda jago sekali :) Buat buku sendiri dong mbak, kayaknya laris wkwk

Balas

Kyknya mesti ada yg diedit javascriptnya

Balas

Silakan digunakan dgn baik

Balas

Template mana ya?

Balas

Silakan dicoba sob

Balas

Kl itu silakan tambahkan mobile yes di widgetnya

Balas

Dimulai dari niat dan kemauan saja

Balas

Kak arlina cara membuat kotak info admin yang dibawah follow email gimana ya ?

Balas

Bantu jawab : cek dimari http://twistedshape.blogspot.com/2015/06/memasang-multi-auhor-box-di-bawah-postingan.html, mampir blog ane jg gan http://indzign.blogspot.com

Balas

Nah yang itu, blognya jd keren

Balas

mba arlina kalau dibuat random post bagus tuh kayanya hehe x-)

Balas

Random post sudah ada http://twistedshape.blogspot.com/2015/08/cara-memasang-widget-random-post-di-blog.html

Balas

mbak, untuk merubah width defaultnya bagaimana? mau ubah dari 72px ke 300px.. thx

Balas

bisa minta tolong mbak bagian mana dari script yang harus diedit?
thx

Balas

Jadiin responsive dong Mbak, udah keren nih

Balas

Sangat sederhana, terima kasih. Mau langsung praktek

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.