Cara Membuat Wiget Perlabel responsive Dengan Gambar di Blog. Seocips.com tentang Cara Membuat Wiget Perlabel Dengan thumbnail Responsive di Blogspot. Ok sobat pada saat ini seocips akan berbagi trik bagaimana membuat dan memasang widget perlabel diblogger dengan satu thumbnail. Sebelumnya juga telah dibahas bagaimana membuat widget perlabel dengan banyak thumbnail.

Cara Membuat Wiget Perlabel Responsive di Blog

Didemonya saya meletakannya dibawah postingan ( baca : cara menambahkan element add gatget dibawah postingan ) kemudian meletakan widget perlabel ini diblog. Oh iya mungkin di template demo yang anda lihat ada efek loadingnya jika anda tertarik ingin menggunakannya ditemplate Blog anda, silahkan baca artikel yang berjudul cara menambahkan efek loading diblog.

Membuat Wiget Perlabel Dengan 1 Thumbnail di Blogger

1. Silahkan anda masuk ke Blogger
2. Pilih template
3. Kemudian anda masuk ke Edit Html
4. Setelah itu silahkan anda cari kode ]]></b:skin> untuk mempermudah pencarian silahkan anda menggunakan CTRL+F dan letakan kode berikut sebelum atau diatas kode ]]></b:skin> 
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:160px;width:100%;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
#magazine-left {
width: 48%;
float: left;
}
#magazine-right {
width: 48%;
float: right;
}
Tulisan warna biru diatas adalah tinggi dan lebar thubnail/gambar, silahkan sobat sesuaikan dengan keinginan sobat.
5.Setelah itu silahkan anda cari kode </head> kemudian letakan kode berikut sebelum kode </head>
<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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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>
Jika kode script diatas terlalu panjang, Anda bisa simpan di tempat penyimpanan Google Code ( baca cara upload file ke google code ) Anda sendiri atau gunakan kode script di bawah ini yang sudah di ringkas di Google Code.
<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>
Setelah itu save templates, kemudian Lankah terakhir menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget -> HTML/Javascript masukkan kode berikut ini kedalamnya:
<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 = 60;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Template?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 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">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="/feeds/posts/summary/-/Template?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="/search/label/Template" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
Keterangan : Warna biru adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan label blog anda, warnah hijau adalah banyaknya huruf yang akan ditampilakan pada judul yang pertama, dan warna ungu adalah banyaknya judul artikel yang akan ditampilkan.

Selanjutnya save dan lihat hasilnya. Tampilan dari widget ini mengikuti kode CSS pada template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail, jika ingin tampilannya berubah silahkan edit kode css yang pertamakali anda masukan tadi diatas dengan menambahkan beberapa kode css.

0 Komentar untuk "Cara Membuat Wiget Perlabel Responsive di Blog"