Widget Recent Posts sesuai Label Atau Kategori blogger

Sekarang kita akan membuat widget recent post dimana recent postingan ini akan keluar sesuai label atau kategori sesuai apa yang nanti akan kita ingin keluarkan nama label atau kategori tersebut pada widget blog kita nanti,
nah nanti widget ini akan mengeluarkan postingan terbaru dari apa yang kita postingkan seperti recent post lainnya tapi kalau ini akan keluar sesuai label atau kategori hanya sekedar menjelaskan ulang

sekarang kita ketopik pembahasan kita akan membuat sebuah widget recent post tersebut:
- terlebih dahulu silahkan buka edit HTML blogger kalian
- taruh script dibawah ini diatas tag </head> ,lanjut kebawah

<script type='text/javascript'> 
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5LB5V8ZKNBTOvbW8w8N4NNckNDhxfpZJzlkfiN79urWFAK7fcXr8PuUC1qh-ZmnEMqoD6_HIQJkJjJyrGP3joInlaV1Ofh6QZ8EsvfcbWOstEq6I_F9ZB7St3rGoR3KolaQ4TGa8UVaMK/';}
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('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><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>

- sebelumnya java script diatas adalah yang nanti memfungsikan kode java script dibawah ini, kalau tidak ada javascript diatas maka java script yang nanti akan di taruh di widget tidak akan keluar gambarnya, atau tidak akan bekerja
- selanjutnya Cari kode berikut ]]></b:skin> dan letakkan kode CSS dibawah ini diatas kode  ]]></b:skin>

 

    
/************start label************/

    img.label_thumb{
    float:left;
    padding:5px;
    border:1px
    solid #F3F3F3;
    background:#D2D0D0;
    margin-right:10px;
    height:55px;
    width:55px;
    }
    img.label_thumb:hover{background:#f7f6f6}
    .label_with_thumbs{
    float:left;
    width:100%;
    min-height:70px;
    margin:0px 10px 2px 0px;
    padding:0
    }
    ul.label_with_thumbs li{
    padding:8px 0;
    min-height:65px;
    margin-bottom:10px;
    list-style:none;
    }
    .label_with_thumbs a{}
    .label_with_thumbs strong{}
/************end label************/

- jika semuanya kode diatas sudah selesai sekarang saatnya mulai menjalankan javascript recent post tersebut pada blog kita
- langkah terakhir silahkan salin kode dibawah ini dan letakkan di HTML/JavaScript  baru, letaknya ada di dasbor>>   Tata Letak>>  HTML/JavaScript


 <script type='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;var displaymore = false;
var displayseparator = false;var showcommentnum = false;
var showpostdate = false;var showpostsummary = true;
var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/nama label?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

yang warna merah silahkan ganti sesuai kebutuhan anda
nah kemudian untuk nama label jika nama label tersebut mempunyai spasi maka spasi tersebut harus di ikutkan juga contoh category berita malam, nah spasi disitu harus di ikutkan

nah itu saja untuk sementara semoga bisa bertemu kembali dilain kesempatan, semoga bisa membantu anda dalam belajar agar gak males-males lagi

0 comments:

Posting Komentar