Cara Menciptakan Widget Recent Post Tooltip

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

Fitur ini aku 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, kemudian 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, kemudian simpan javascript berikut diwidget tersebut

<script type="text/javascript"> numposts = 10, numchar = 370, rcFadeSpeed = 610, pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpYwJDtCZ5OruFZ8TpFbT-5JKMA-moWfP1BnSoqz3KgmxGFTCrGK3Kbt4t41viB0YRtvSIF-1GyTwvcdt9x1kVPezk-cgQL5hmOvej_xrAOlfvcBQBkqRuesZh9LFDsRbX5TAnkUyY-of/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=" Artikel kali ini aku akan membagikan tutorial yang hampir sama dengan  Cara Membuat Widget Recent Post Tooltip" /><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

Jika Ingin menambahkan Label ganti "/feeds/posts/default" dengan "/feeds/posts/default/-/LABEL-POST"

Bagikan Artikel ini