Cara Recent Post Image With Tooltip By Label

Recent Post Image With Tooltip By Label - Tutorial kali ini sama dengan artikel sebelumnya yaitu Recent Post Image With Tooltip tetapi kali ini saya menggunakan label, jadi saya hanya memodifikasi sedikit dari tutorial sebelumnya yang tidak menggunakan label.

ok kali ini saya akan membahas bagaimana cara membuatnya atau lebih tepat memasang fitur ini keblog kalian, baiklah kita mulai saja,

Pertama Buka Blogger > Tata Letak > Add Widget > HTML/Javascript
Kedua masukkan CSS dibawah ini di widget blog kalian

<style type="text/css">
#arleth98{width:100%;margin:0 auto;color:#494848;padding:2px}
.yuu-desz{float:left;display:inline;position:relative;margin:2px;padding:0 0;width:135px;height:195px}
.yuu-desz img{width:135px;height:195px;border:none!important;margin:0 0!important;padding:0 0!important;background:transparent!important;display:block!important}
#arleth98 .yuu-desz .yuu-desu{position:relative;top:-60%!important;left:20%!important;z-index:1000;width:400px;background-color:rgba(0,0,0,0.88);color:#fff;box-shadow:2px 2px 10px rgba(0,0,0,0.40);padding:10px 15px;overflow:hidden;word-wrap:break-word;display:none;}
.yuu-desz > h4{position: absolute;width:128px;bottom:0px;margin:0;padding:0;font-size:11px;text-align: center;color:#FFF;background:rgba(0,0,0,0.80);}
#arleth98 .yuu-desu img{float:left;margin-right:5px!important}
#arleth98 .yuu-desz .yuu-desu h4{bottom: 0;font-size:15px;margin:0 0 5px;color:#fff;z-index:-1;}
#arleth98 .yuu-desz:hover .hidden{display:block}
</style>

lalu masukkan javascript ini tepat dibawah CSS yang tadi

<script type="text/javascript">
numposts    = 10,
numchar     = 250,
rcFadeSpeed = 400,
pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQAIsTrXJ2_-lAanJXl4DinQb_rwZKXA5SOOPfbtLB7t02iY09i2NT0AkWKvcrIt_L1yW00jmOzuYMVcvLYxK0UspdMLdrjo3AHyrKeMbUrXel0k9AWtZ0bx-y9NIgEBndLHRB92R8JvE/s1600/no-image-ava.jpg";
function showrecentposts(e){for(var t=e.feed.entry,i=0;i<numposts;i++){for(var u,d=0;d<t[i].link.length;d++)if("alternate"==t[i].link[d].rel){u=t[i].link[d].href;break}if("content"in t[i])var s=t[i].content.$t;else if("summary"in t[i])var s=t[i].summary.$t;else var s="";var n=/<\S[^>]*>/g;s=s.replace(n,""),s.length>numchar&&(s=s.substring(0,numchar)+"...");var r=t[i].title.$t;"media$thumbnail"in t[i]?postimg=t[i].media$thumbnail.url:postimg=pBlank,document.write('<div class="yuu-desz"><a href="'+u+'"><img src="'+postimg+'" alt="thumb" /></a><br/><h4><a href="'+u+'">'+r+'</a></h4>'),document.write('<div class="yuu-desu hidden"><img src="'+postimg+'" alt="thumb" /><a href="'+u+'"><h4>'+r+"</h4></a>"),document.write(s+"</div>"),document.write("</div>")}}$(function(){$("div.yuu-desz img").hide(),$("div.yuu-desu").removeClass("hidden");var e=$(window).width(),t=$(window).height(),i=$("div.yuu-desu").outerWidth(),u=$("div.yuu-desu").outerHeight();$("div.yuu-desz").outerWidth(),$("div.yuu-desz").outerHeight();$("div.yuu-desz").css("position","relative").mouseenter(function(){$("div.yuu-desu",this).filter(":not(:animated)").fadeIn(rcFadeSpeed)}).mousemove(function(d){var s=d.pageY+20,n=d.pageX+20;s+u>t&&(s=t-u-40),n+i>e&&(n=e-i-40),$("div.yuu-desu",this).css({display:block,top:s,left:n})}).mouseleave(function(){$("div.yuu-desu",this).hide()})});
document.write('<div id="arleth98"><sc' + 'ript src="/feeds/posts/default/-/Tutorial?&orderby=published&alt=json-in-script&callback=showrecentposts&max-results=' + numposts + '"></sc' + 'ript><div style="clear:both;"></div></div>');function doThis(){var n=$("div.yuu-desz img").length;i>=n&&clearInterval(int),$("div.yuu-desz img:hidden").eq(0).fadeIn(400),i++}var i=0,int=0;$(window).bind("load",function(){setInterval("doThis(i)",400)});
$(document).ready(function() {$('.yuu-desz img').attr('src', function(i, src) {return src.replace( 's72-c', 'w135-h195-c' );});});
</script>

Disini saya membuat thumbnail yang ukuran lebarnya 135 & tingginya 195, silahkan kalian atur sesuai dengan ukuran widget blog

Tag	Keterangan
numposts = 10	Silahkan Ganti No 10 untuk menampilkan Jumlah postnya
numchar = 250	250 Ganti Dengan Jumlah Snippet(Isi Post)
Tutorial	Ganti Dengan Label post kalian

Ok Sekian tutorial dari saya hari ini, semoga bermanfaat & Sampai jumpa ditutorial berikutnya, Terima kasih.