Blog Geisha

Cara Membuat Label Dengan Thumbnail - berbeda dengan label yang umumnya berbentu text, kali ini Kang Koisine akan membagi tutorial tentang membuat label dengan fitur gambar dengan tampilannya yang simple dan menarik saya rasa bagus untuk dipasang pada blog, selain itu menarik perhatian pengunjung yang melihatnya, pemasnganya juga sangat mudah asalkan kalian dengan teliti mengikuti langkah-langkah yang telah diberikan berikut ini.

• Pertama login terlebih dashulu ke Blogger kalian,
• Pilih Rancangan,
• Pilih Edit Html,
• Note : ceklist Expand Template Widget,
• Letakan kode di bawah ini sebelum kode ]]></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 } 

• Kemudian letakan kembali kode di bawah ini sesudah kode ]]></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>

Pasang Artikel Terkait Dengan Gambar Dan Ringkasan - Kang Koisine akan berbagi tutorialnya tentang artikel terkait yang keren dah.
Ceritanya setelah beberapa kali blogwalking saya menmukan tutorial tentang pemasangan artikel terkait dengan gambar dan ringkasan, saya sangat tertarik dengan tutorial tersebut karena tampilannya yang menarik perhatian dan tampil di bawah artikel, saya langsung menerapkannya pada blog saya, artikel terkait ini berbeda dengan artikel terkait dengan gambar lainnya, karena ditambahkan ringkasan artikel yang bisa kita sesuaikan dan dengan fitur readmore. Apabila sobat ingin memasnag tutorial ini yang diterapkan pada blog sobat silahkan ikuti peraturan di bawah ini.

• Pertama, Log ini ke draft.blogger sobat,
• Pilih Rancangan,
• Pilih Edit HTML,
• Gunakan ctrl-F untuk menemukan kode di bawah ini,

</head>

• Selanjutnya copy kode di bawah ini dan taruh tepat sebelum kode di atas,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts h4 {
background: none repeat scroll 0 0 #333;
color: #FFF;
font-family: Arial,Tahoma,Verdana;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 2px 5px 1px 8px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 4px;
line-height: 16px;
}

#relpost_img_sum:hover {
background: none;
}

#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#relpost_img_sum li {
border: 1px solid #DDD;
margin: 0;
padding: 5px;
height: 65px;
list-style: none;
}

#relpost_img_sum li:hover {
background-color: #E6E6E6;
}

#relpost_img_sum a {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
margin-bottom: 4px;
}

#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}

#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #DDD;
width: 55px;
height: 55px;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\'  I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... [<a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a>]<17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnojudul|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

•  Keterangan untuk text yang bercetak tebal,
• var relnojudul = 0; Jangan diubah.
  var relmaxtampil = 10; ubah angka 10 untuk menentukan berapa jumlah artikel terkait yang muncul.
  var numchars = 200; ubah 200 untuk mengubah jumlah karakter ringkasan dalam artikel terkait.
  var morelink = "readmore" ubah kata readmore sesuai dengan selera kalian.

• Selanjutnya cari kode di bawah ini,

<data:post.body/>

• Dan letakan kode di bawah ini tepat di bawah kode di atas,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<a href='http://namablog.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>

• Ganti kata yang bercetak tebal dengan nama blog kalian.
• Terakhir, Simpan Template.
• Lihat Hasilnya.

Selamat Mencoba.