Membuat Label Feed dengan Gambar Harizontal di Blogger

Membuat Label Feed dengan Gambar Harizontal di Blogger

Membuat Label dengan gambar memberikan nilai plus untuk google dan label tersebut biasanya menggunakan rss atau alamat feed yang dapat anda tambahkan pada add widget, namun pada menu yang dimiliki google feed hanya menampilkan artikel yang kita postingkan saja,

dan tahukan anda dengan adanya label feed dapat meningkatkan traffic di blog kita, kira kira 20% dapat meningkatkan traffic.

dengan adanya label feed pengunjung jadi tahu isi artikel yang kita terbitkan, dan apabila artikel itu mempunyai judul yang menarik, dengan otomatis penggunjung pasti akan mengeklik judul artikel tersebut, dengan begitu traffic rank artikel yang kita terbitkan pun ikut naik.

ok lanjut ke Modif label Feed dengan Gambar.

Sebelum Membuat sebuah label feed dengan gambar kita buat CSS terlebih dahulu,

Belum Tahu CSS, silahkan anda klik pada kategori CSS di Blog ini.

untuk CSS nya sebagai berikut :

/* Label dengan Gambar Thubnail

--------------------------------------- */

img.label_thumb{padding:2px;border:1px solid #e8e8e8;transition:all 0.15s ease-in-out 0s;position:absolute;top:0;left:0;float:left;height:46px;width:56px;opacity:10;}img.label_thumb:hover{background:#FFD62C;border:1px solid #FFD62C;}.label_with_thumbs{float:left;width:100%;min-height:60px;margin:0;padding:0;}ul.label_with_thumbs li{padding:0 0 3px 68px;position:relative;min-height:53px;margin:0 0 6px 0;border-bottom:1px dotted #e2e2e2;}ul.label_with_thumbs li:last-child{border-bottom:none;}.label_with_thumbs li{list-style:none;font-size:11px;color:#999;}.label_with_thumbs .title-label a{float:left;display:inline-block;font-weight:bold;font-size:13px;margin:0 0 3px;padding:0;color:#555;width:100%;}.label_with_thumbs a:hover{color:#0099cc;}.label_with_thumbs strong{padding-left:0px;}a.comment-label{font-size:11px;color:#999;}a.more-label{font-size:11px;color:#999;}

Letakan kode CSS diatas tepat diatas ]]></b:skin>

 untuk blogger kode ]]></b:skin> bisa anda  buka pada pengaturan Dasbor :

1. Login Blogger Anda
2. Pilih menu Tema klik edit HTML
3. untuk mempercepat pencarian kode tersebut klik CTRL+F paste "]]></b:skin>"

Langkah ke 2 :
kita buat Javascript,
dimana Javascript berfungsi memanggil data yang akan kita tampilkan pada blog kita, contoh disini adalah data Artikel Blog.
Untuk Javascript label feed sebagai berikut :

<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/AVvXsEjkBWi5Hqcp0NYl042ERNkQN1PMMvCEO5yUAOYZ4CEIK12iBTfTmAcVB8f5pusCyVS_TAs3FVtg8zI_wbS1PmfSF-zdESJMnK9j1mapOOnFmLcS0SMo1fS4Tey09U2xSToYK3JVfPRfFWU/s1600/picture_not_available.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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";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+'" alt="'+posttitle+'" title="'+posttitle+'"/></a>');document.write('<div class="title-label"><a href="'+posturl+'" target ="_top">'+posttitle+'</a></div>');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 class="comment-label" href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a class="more-label" 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>

Copy Paste Javascript diatas letakan diatas kode </head>
 langkah 1 dan 2 sudah lalu Simpan atau Save,

Langkah selanjutkan kita akan menampilkan dari Javascript dan CSS yang kita buat tadi.
Berikut langkah langkah menampilkan Label Feed dengan Gambar :

1. Login Blogger
2. Pilih Menu Layout atau Tata Letak
3. Tambah Widget HTML --> letakan Label Feed sesukan Anda
4. Paste Sorce Code dibawah ini :

<script type="text/javascript">var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default?published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Keterangan  :

untuk var numposts = 4; merupakan jumlah post artikel yang ingin anda tampilkan.

Selesai,

Semoga Bermanfaat..

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: