<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 »</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.
Posts
