Cara Menciptakan Recent Post Image With Tooltip By Label

Recent Post Image With Tooltip By Label - Tutorial kali ini aku menciptakan Recent Post Image With Tooltip, sebelumnya aku juga sudah membagikan tutorial Cara Membuat Widget Latest Episodes.

Recent post kali ini aku menambahkan label supaya lebih berbeda dari recent post sebelumnya yang tidak memakai label, pada artikel kali ini aku buat lebih gampang menerapkannya pada blog kalian.

Recent Post Image With Tooltip By Label Blogger

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

/* Recent Post Image With Tooltip By Label - Arlethdesign */ #recentposttooltipbylabel{margin:0 auto;color:#494848;padding:0px} #recentposttooltipbylabel .req-posts{float:left;display:inline;position:relative;margin:2px;padding:0 0;width:135px;height:195px} #recentposttooltipbylabel .req-posts img{width:135px;height:195px;border:none!important;margin:0 0!important;padding:0 0!important;background:transparent!important;display:block!important} #recentposttooltipbylabel .req-posts .req-imgposts{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;} #recentposttooltipbylabel .req-posts a > h4{position:absolute;height:15px;bottom:0;margin:0;padding:5px;font-size:12px;text-align:center;color:#FFF;background:rgba(0,0,0,0.80);transition: all 0.25s;} #recentposttooltipbylabel .req-posts a:hover h4{height:53px;transition: all 0.25s;} #recentposttooltipbylabel .req-imgposts img{float:left;margin-right:5px!important} #recentposttooltipbylabel .req-posts .req-imgposts h5{bottom: 0;font-size:15px;margin:0 0 5px;color:#fff;font-weight:700;line-height:normal;} #recentposttooltipbylabel .req-posts:hover .hidden{display:block}



2. Jika Sudah save tema
3. Selanjutnya buka Tata letak > tambahkan widget > HTML/javascript, masukkan javascript berikut untuk menampilkannya diblog kamu

<script type="text/javascript"> numposts    = 10, numchar     = 250, rcFadeSpeed = 400, pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt_JvXDo3dltnTQNltIwPoIxK66mOxRLCbUXYe3A43KQSpPox21ccYC8JYBe5q6DhPGqWAMSwlvteaHKavRrFSqCub-peXK_z0g0epIU8M8h63T0JM601Ze-kNgMPbQUQOWP2eHPiyTK0/s1600/no-image-ava.jpg"; function recent_post_querytip_label(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="req-posts"><a href="'+u+'"><img src="'+postimg+'" alt=" sebelumnya aku juga sudah membagikan tutorial  Cara Membuat Recent Post Image With Tooltip By Label" /><h4>'+r+'</h4></a>'),document.write('<div class="req-imgposts hidden"><img src="'+postimg+'" alt=" sebelumnya aku juga sudah membagikan tutorial  Cara Membuat Recent Post Image With Tooltip By Label" /><a href="'+u+'"><h5>'+r+"</h5></a>"),document.write(s+"</div>"),document.write("</div>")}}$(function(){$("div.req-posts img").hide(),$("div.req-imgposts").removeClass("hidden");var e=$(window).width(),t=$(window).height(),i=$("div.req-imgposts").outerWidth(),u=$("div.req-imgposts").outerHeight();$("div.req-posts").outerWidth(),$("div.req-posts").outerHeight();$("div.req-posts").css("position","relative").mouseenter(function(){$("div.req-imgposts",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.req-imgposts",this).css({display:block,top:s,left:n})}).mouseleave(function(){$("div.req-imgposts",this).hide()})}); document.write('<div id="recentposttooltipbylabel"><sc' + 'ript src="/feeds/posts/default/-/LABEL?&orderby=published&alt=json-in-script&callback=recent_post_querytip_label&max-results=' + numposts + '"></sc' + 'ript><div style="clear:both;"></div></div>');function doThis(){var n=$("div.req-posts img").length;i>=n&&clearInterval(int),$("div.req-posts img:hidden").eq(0).fadeIn(400),i++}var i=0,int=0;$(window).bind("load",function(){setInterval("doThis(i)",400)}); $(document).ready(function() {$('.req-posts img').attr('src', function(i, src) {return src.replace( 's72-c', 'w135-h195-c' );});}); </script>

Demo

Tag	Keterangan
numposts = 10	Silahkan Ganti No 10 untuk menampilkan Jumlah postnya
numchar = 250	250 Ganti Dengan Jumlah Snippet(Isi Post)
LABEL	Ganti Dengan LABEL post kalian
w135-h195-c	w135 untuk lebar, h195 untuk tinggi gambarnya

Bagikan Artikel ini