widget post per label satu thumbnail valid html5

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.

Untuk DEMO silahkan " KLIK DISINI " Lihat bagian sebelah kanan halaman, bagaimana menurut anda ?

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code </head>
4. Copy Code script CSS dibawah ini, pastekan tepat diatas code </head> yang tadi

<style type='text/css'>
/*****************************************
Name : Post perlabel with 1 image
By : Rivai Silaban | Blog Design
Update : 16/08/2013
******************************************/
#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/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/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/AVvXsEgeDq52rWhgSslt0lTRjxNLI_jmt3299TRhjB0ky2Dkl66n2IBdX5sdigQQh6f2Sz3ZqQ6rtObG7GGDIgPvjEPqPW60n8pp8STRkxtJFLnKUK2MMtVM6ru3lWUXiRPQ9QieoYqMLO1_ZKk/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 -->

Install Program Tag HTML

• 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 -->

Keterangan Code

• Untuk kode CSSnya warna hijau [ 300px ] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
• Untuk tulisan warna HIJAU pada script/html jumlah 120 adalah banyaknya huruf yang akan ditampilkan sebagai keterangan postingan tersebut.
• 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.
• Kode tulisan warna KUNING lihat angka 8 pada script, silahkan anda ganti menurut selera anda. angka 8 adalah jumlah post yng akan ditampilkan.
  

Kesimpulan

Bila anda menginginkan ataupun menambahkan widget lagi dengan nama label / kategori lain tetapi tampilannya sama ( hanya berbeda nama label saja ) silahkan ganti tulisan kode warna biru pada script dengan nama label yang lain

script widget post perlabel dengan satu tampilan gambar ini memakai script Json yang terkenal, jadi sudah di rekomendasikan pemakaiannya keberbagai server jadi sudah benar benar stabil. CSS valid CSS 3, HTML valid HTML 5, penulisan script dan tag html sesuai standart SEO, script ringan. Silahkan anda coba di halaman blog kesayangan anda, bila anda mengalami masalah dalam pemasangan script, CSS dan tag HTMLnya pada halaman blog anda silahkan share bersama saya melalui form komentar dibawah ini, dengan senang hati saya akan membantu anda.

Salam Bloger.
16/08/2013

By : Admin

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:26 PM