Cara menampilkan posting menurut label dengan thumbnail

widget post per label satu thumbnail

Cara membuat widget post perlabel dengan satu tampilan gambar unik pada halaman blog anda akan menambah kesan elegan pada tampilan halaman blog anda. Disamping tampilannya yang unik scriptnya juga ringan, dan valid HTML 5 jadi untuk template HTML 5 anda jangan ragu untuk memasangnya. Penulisan code tag yang mendukung sistem SEO Friendly menambah widget ini semakin layak anda gunakan pada halaman blog kesayangannya. Sistem kinerja dari widget post perlabel with 1 image ini adalah menampilkan artikel postingan dari satu kategori atau label dengan menampilkan 1 gambar dari postingan label tersebut. Oke langsung saja menuju TKP simak tutorial berikut ini.

Login ke dashboard anda

Masuk ke "TEMPLATE" lalu klik " Edit HTML "

Cari code </head>

Copy Code script CSS dibawah ini, pastekan tepat diatas code yang tadi </head>

<style type='text/css'>
/*****************************************
Name : Post perlabel with 1 image
******************************************/
#BD-rlabel {
width:300px;//lebar widget
background-color: #FFFFFF;
list-style-type: none;
text-align: left;line-height: normal;
}
#BD-rlabel ul li {margin-right:-50px;line-height: normal;
list-style-type: none;margin-top:-5px;
}
#BD-rlabel a{
padding:0 0 0 18px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #990000;
text-decoration: none;
list-style-type: none;line-height: normal;
}
#BD-rlabel li a{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmXCroKV5bJ9eOVJ6-bd4yYk0WoYj83aWQzA6JjEXygJmyO8u57100k98kp0nsvfLt3vgIktKkTSkqyi8hi6JcataTDAdn9o5JmK7HqdnCHzUhDwNveS5CiY7im3dCGOvrH1I5DTHMTg/s1600/ico-rss.jpg') 0px 50% no-repeat;
border-bottom:dotted #CCCCCC 1px;
list-style-type: none;
text-decoration: none;
width: 300px;line-height: normal;

}
#BD-rlabel li a:hover {
list-style-type: none;
text-decoration: none;
color: #0000FF;
background-color: #E2E2E2;
}
.BD-text {
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-size: 10px;
padding:0 0 0 5px;
list-style-type: none;line-height: normal;

}
.BD-text a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-size: 10px;
padding:0 0 0 0px;margin-right:-35px;
list-style-type: none;

}
.BD-text a;hover{
color: #0000FF;

}img.BDLABEL_thumb{
float:left;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:60px;
width:60px;
padding:2px;
border-radius:50%;margin-left:-10px;
}
img.BDLABEL_thumb:hover{background:#f7f6f6}
.BDLABEL-tumb{
float:left;
width:100%;
min-height:70px;
margin:0 5px 2px 0;
background-image: url(none);
list-style-type: none;margin-right:-50px;
}
ul.BDLABEL-tumb li{min-height:65px;margin:2px 0;padding:4px 0;margin-right:-50px;}
#BD-rlabel .BD-more a{
color:#000000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
text-decoration: none;
text-shadow: 1px 1px #ccc;
padding:3px 15px;
border:solid #F3F3F3 1px;
font-weight: bold;
margin-top:10px;
background-color: #F8F8F8;
float: right;
}
#BD-rlabel .BD-more a:hover{
color:#000000;
box-shadow:0 0 2px #999;
background-color: #F8F8F8;
border:solid #BEBEBE 1px;
text-shadow: 0px 0px 1px #000;
}/*** Blog Design CSS and ***/
</style>
<!-- BLOG DESIGN script post/label start --><script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="BDLABEL-tumb">');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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoaMMCaLn2Y1cAYHxsocJfervOD_6IYea11cBxUwwH0LTqlQdsOxRqrJzUEeQrp_t_baFLqzCNM6mVNeRtOKCngBfNKiCiDqiKdVSGyVpKmV-2oLDy4Uu1tcfn83H7NLquRcJsx7hUeXo/h120/rss-bulat.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('<div class="BD-text">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img alt="'+posttitle+ '" class="BDLABEL_thumb" src="'+thumburl+'" title="'+posttitle+ '" /></a>');document.write('<a href="'+posturl+'" target ="_top" 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(showpostsummary==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(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">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script><!-- BLOG DESIGN script post/label and -->


Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.

Silahkan pilih " Tata Letak " pada dasbor blog anda.

klik "Add gadget " ( Tambahkan gadget )

Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".

Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.

Edit script dan save .

<!-- BDRS Script post/label start -->
<div id="BD-rlabel">
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 120;</script>
<script type="text/javascript" src="URL BLOG ANDA/feeds/posts/default/-/LABEL ANDA?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank" title="' + entryTitle +'">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="URL BLOG ANDA/feeds/posts/summary/-/LABEL ANDA?max-results=8&alt=json-in-script&callback=recentpostslist"></script>
<div class="BD-more"><a href="URL BLOG ANDA/search/label/LABEL ANDA" title="more kategory" >See more &#187;</a></div></div>
<!-- BDRS Script post/label End -->


Tulisan kode warna MERAH ganti dengan URL blog anda.
Kode tulisan warna BIRU ganti dengan nama label / kategori anda bila label anda memakai spasi Cth " Trik Blog " maka anda harus mengganti spasi dengan kode [ 20% ] sehingga penulisannya demikian " Trik20%Blog ". Untuk penulisan label semua huruf sangat sensitiv jadi anda harus menuliskan nama label sesuai dengan label atau kategori halaman blog anda.

sumber http://rivai-silaban.blogspot.com/2013/08/widget-post-per-label-satu-thumbnail.html