Cara Mengatasi Label Thumbnail Yang Tidak MuncuL Di template blog


Cara membuat label dengan thumbnail atau gambar dari postingan yang sering tidak muncul pada template?
caranya sangat mudah, kita hanya manambahkan sedikit kode css dan javascript maka label dengan thumbnail akan menghiasi blog sobat.
Kali ini saya akan berikan tutorial blog tentang Cara membuat label dengan thumbnail atau gambar yang sering tidak muncul.
Penulisan label juga harus sesuai dengan yang ada di blog agan, seperti besar kecilnya huruf juga sangat memperangaruhi. Untuk memulainya, ada baiknya sobat BACKUP terlebih dahulu templatenya dengan masuk ke Rancangan –> EDIT HTML –> DOWNLOAD TEMPLATE LENGKAP.

Baik Lah pertama-tama  agan harus Tambahkan kode css berikut diatas / sebelum kode ini
]]></b:skin> :

==========================================

img.label_thumb {
float:left;
padding:3px;
background:#CCC;
border:1px solid #A4A4A4;
width:100px;
height:75px;
margin-right:10px;
margin-top:10px }
img.label_thumb:hover {
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8 }

==========================================

Dan kedua tambahkan kode script berikut dibawah /setelah kode ini
]]></b:skin> :

==========================================

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write
('<div>');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='';}
document.write('<a href="'+posturl+'"
title="'+posttitle+'"><img class="label_thumb"
src="'+thumburl+'"/></a>');
if(i!:(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>

==========================================

Dan selanjutnya agan SAVE

TruSs masuk ke LAYOUT blog agan => TATA LETAK

Pilih salah satu gadget yang ingin agam masukkan label, kemudian klik TAMBAH GADGET dan pilih yang HTML/Javascript.

Selanjut nya masukkan kode di bawah ini kedalamnya :

==========================================

<script type='text/javascript'>var numposts = 5;</
script>
<script type="text/javascript" src="/feeds/posts/
default/-/NAMA LABEL BLOG AGAN?orderby=updated&alt=json-in-
script&callback=labelthumbs"></script>

==========================================

Mata udah lima wat gan . . .
Okeee cukup sampai di sini dulu yaa gan dari pengelaman saya semoga bermanfaat kalo ada yang menjengkel silahkan komen gan saya juga masih belajar hehe :)

No comments:

Post a Comment