Cara Membuat Widget Recent Post Tooltip

Cara Membuat Widget Recent Post Tooltip - Artikel kali ini saya akan membagikan tutorial yang hampir sama dengan Recent Post Image With Tooltip By Label, namun berbeda dengan yang sebelumnya ditutorial ini saya menghilangkan gambar utama dan hanya menggunakan gambar pada tooltipnya saja.

Fitur ini saya buat lebih minim gambar dan simple untuk blog kalian, ok kita mulai saja tutorial kali ini.

Cara Membuat Widget Recent Post Tooltip

1. Silahkan buka Blogger > Tema > Edit HTML, lalu simpan CSS berikut ini diatas </style>

/* Widget Recent Post With Tooltip - Arlethdesign */
#recentpost-tooltip .recentpost-widget a{font-size:13px;color:#111;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}
#recentpost-tooltip .recentpost-widget{position:relative;border-bottom:1px solid #DDD;margin:0;padding:5px 0}
#recentpost-tooltip .recentpost-widget:before{content:'\f054';float:left;color:#222;font-weight:bold;padding:0;margin:0 5px;font-family:fontawesome;font-size:15px}.recentpost-widget:nth-child(odd){background:#F0F0F0}
#recentpost-tooltip .tooltip{display:none;position:absolute;top:0!important;right:103%!important;z-index:1000;width:450px;background-color:rgba(0,0,0,0.85);box-shadow:0 0 0.5rem rgba(83,78,76,0.5);padding:35px 10px 10px 10px;overflow:hidden;word-wrap:break-word;color:#b6b6b6;font-size: 12px;font-weight:700}
#recentpost-tooltip .tooltip img{float:left;padding:2px;margin-right:10px;display: block!important;width:130px;height:180px}
#recentpost-tooltip .recentpost-widget .tooltip h4{position:absolute;top:0;left:0;font-size:14px;width:98%;margin:0 0 5px 0;padding:5px;float:right;border-bottom:2px solid #1b1b1b;background:rgba(0,0,0,0.6);border-left:none}
#recentpost-tooltip .recentpost-widget .tooltip h4 a{color:#eee}



2. Jika sudah save tema
3. Selanjutnya buka Tata Letak > tambahkan Widget > HTML/Javascript, lalu simpan javascript berikut diwidget tersebut

<script type="text/javascript">
numposts = 10,
numchar = 370,
rcFadeSpeed = 610,
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxW1SqsHvgY-EYFdc4fELCDKIRdtOy5vshchSTKIyOGHRcFSlKer1KzAJtZOuDvyA421jnZ0VgcRIuTQYti53a39OOc07wbV_08Ut-wbFeIA_RIkRRSIkxV7mNjCpnuin1pukWvlCBRDBj/s1600/no-images.png";
function recentpost_widget(t){for(var i=t.feed.entry,e=0;e<numposts;e++){for(var d,n=0;n<i[e].link.length;n++)if("alternate"==i[e].link[n].rel){d=i[e].link[n].href;break}if("content"in i[e])var r=i[e].content.$t;else if("summary"in i[e])var r=i[e].summary.$t;else var r="";var a=/<\S[^>]*>/g;r=r.replace(a,""),r.length>numchar&&(r=r.substring(0,numchar)+"...");var h=i[e].title.$t;"media$thumbnail"in i[e]?postimg=i[e].media$thumbnail.url:postimg=pBlank,document.write('<div class="recentpost-widget"><a href="'+d+'">'+h+"</a>"),document.write('<div class="tooltip hidden"><img src="'+postimg+'" alt="thumb" /><h4><a href="'+d+'">'+h+"</a></h4>"),document.write(r+"</div>"),document.write("</div>")}}$(function(){$("div.recentpost-widget img").hide(),$("div.tooltip").removeClass("hidden");var t=$(window).width(),i=$(window).height(),e=$("div.tooltip").outerWidth(),d=$("div.tooltip").outerHeight();$("div.recentpost-widget").outerWidth(),$("div.recentpost-widget").outerHeight();$("div.recentpost-widget").mouseenter(function(){$("div.tooltip",this).filter(":not(:animated)").fadeIn(rcFadeSpeed)}).mousemove(function(n){var r=n.pageY+20,a=n.pageX+20;r+d>i&&(r=i-d-40),a+e>t&&(a=t-e-40),$("div.tooltip",this).css({display:block,top:r,left:a})}).mouseleave(function(){$("div.tooltip",this).hide()})});function doThis(){var n=$("div.recentpost-widget img").length;i>=n&&clearInterval(int),$("div.recentpost-widget img:hidden").eq(0).fadeIn(200),i++}var i=0,int=0;$(window).bind("load",function(){setInterval("doThis(i)",200)});document.write('<div id="recentpost-tooltip"><sc' + 'ript src="/feeds/posts/default?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=recentpost_widget"></sc' + 'ript><div style="clear:both;"></div></div>');$(document).ready(function() {$('.tooltip img').attr('src', function(i, src) {return src.replace( 's72-c', 'w132-h190-c' );});});
</script>

Demo

Tag	Keterangan
numposts = 10,	Ganti 10 Dengan Jumlah post