Cara membuat Recent Post Image With Tooltip

Bagaiama caranya membuat postingan muncul dengan sendiri tanpa kita klik postnya terlebih dahulu. Biasanya muncul informasi agar kita tidak mengeklik post tersebut.

Langsung saja ikuti langkah saya:
Caranya buka Blogger, klik Tata Letak, Add Widget, lalu pilih klik HTML/Javascript. Copas kode di bawah ini

<style type="text/css">
#sekainoshouri{width:100%;margin:0 auto;color:#494848;padding:2px}
.ricky-desu{float:left;display:inline;position:relative;margin:2px;padding:0 0;width:135px;height:195px}
.ricky-desu img{width:135px;height:195px;border:none!important;margin:0 0!important;padding:0 0!important;background:transparent!important;display:block!important}
#sekainoshouri .ricky-desu .ricky-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;}
.ricky-desu > 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);}
#sekainoshouri .ricky-desu img{float:left;margin-right:5px!important}
#sekainoshouri .ricky-desu .ricky-desu h4{bottom: 0;font-size:15px;margin:0 0 5px;color:#fff;z-index:-1;}
#sekainoshouri .ricky-desu:hover .hidden{display:block}
</style>

Untuk max post copas kode ini tepat kode diatas tadi. kode ketiga di bawah tidak perlu di copas

<script type="text/javascript"> numposts = 10, numchar = 250, rcFadeSpeed = 400, pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qa7CkvOeOg43-9g6QmABU3sHPb3rKaKOGfj-prAnQsjyBbBavjRB69zQ0thl4ZEIrnW54Izv8h7TdrVElphOgGD6R2CXUo9jX6ulRjClj0Bxym5nBr8pmf_lYouDfUTEhAK9FcVKcsI/s1600/no-image-ava.jpg", blogURL = "https://arleth-desz.blogspot.co.id/"; 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="arleth-desu"><a href="'+u+'"><img src="'+postimg+'" alt="thumb" /></a>'),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.arleth-desu 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.arleth-desu").outerWidth(),$("div.arleth-desu").outerHeight();$("div.arleth-desu").css("position","static").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="arleth-desz"><sc' + 'ript src="' + blogURL + '/feeds/posts/default?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts"></sc' + 'ript><div style="clear:both;"></div></div>'); function doThis(){var n=$("div.arleth-desu img").length;i>=n&&clearInterval(int),$("div.arleth-desu img:hidden").eq(0).fadeIn(400),i++}var i=0,int=0;$(window).bind("load",function(){setInterval("doThis(i)",400)}); </script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() {$('.arleth-desu img').attr('src', function(i, src) {return src.replace( 's72-c', 'w165-h225-c' );});}); //]]> </script>

Untuk label post, copas kode pertama di atas. kode kedua tidak perlu.

<script type="text/javascript"> numposts = 10, numchar = 250, rcFadeSpeed = 400, pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qa7CkvOeOg43-9g6QmABU3sHPb3rKaKOGfj-prAnQsjyBbBavjRB69zQ0thl4ZEIrnW54Izv8h7TdrVElphOgGD6R2CXUo9jX6ulRjClj0Bxym5nBr8pmf_lYouDfUTEhAK9FcVKcsI/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>

Keterangan:
Numpost=10 : Gantilah no 10 dengan jumlah post kalian
numchar=20 : Gantilah no 250 dengan jumlah Snipset (Isi Post) kalian
Tutorial : Ganti dengan label post kalian

Update kode pertama di atas ganti dengan kode di bawah ini

/* Widget Recent Post With Tooltip - Ricky-desu */ #posting .konten a{font-size:13px;color:#111;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block} .konten{position:relative;border-bottom:1px solid #DDD;margin:0;padding:5px 0} .konten:before{content:'\f054';float:left;color:#222;font-weight:bold;padding:0;margin:0 5px;font-family:fontawesome;font-size:15px}.konten:nth-child(odd){background:#F0F0F0} .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} .tooltip img{float:left;padding:2px;margin-right:10px;display: block!important;width:130px;height:180px} #posting .konten .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} #posting .konten .tooltip h4 a{color:#eee}

Update hari ini 22 desember 2017. kode kedua ganti dengan kode di bawah ini

<script type="text/javascript"> numposts = 10, numchar = 370, rcFadeSpeed = 610, pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSgd9MUXSnclS7IPIntwG2cYk7wTrPjCxEKeKGcNV5SpMk-yD2Qat0LsQEeFRnQ2paGb5jA0RIh7m63FTwyWcKp4oF4In7-QIEP_weG7NUT23K5fEYC_2zxMoyJG4GLGWBPAFgdpe7mJem/s1600/no-images.png", blogURL = "https://arleth-desz.blogspot.co.id/"; </script> <script type="text/javascript" src="https://cdn.rawgit.com/Arleth98/Js/3953a81b/recent_post_tooltip.js"></script>

Update hari ini 22 desember 2017. Untuk kode ketiga ganti dengan kode ini

<script src='https://cdn.rawgit.com/Arleth98/Js/9c9c1181/Recentpostlabel_withtooltip.js'></script> <script type="text/javascript"> jumlahpost = 10, jumlahsinopsis = 450, qtipFadeSpeed = 600, noimages = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSgd9MUXSnclS7IPIntwG2cYk7wTrPjCxEKeKGcNV5SpMk-yD2Qat0LsQEeFRnQ2paGb5jA0RIh7m63FTwyWcKp4oF4In7-QIEP_weG7NUT23K5fEYC_2zxMoyJG4GLGWBPAFgdpe7mJem/s1600/no-images.png"; document.write('<div id="new_label"><sc' + 'ript src="/feeds/posts/default/-/Regalia%3A%20The%20Three%20Sacred%20Stars?max-results=' + jumlahpost + '&orderby=published&alt=json-in-script&callback=showpostbylabel"></sc' + 'ript><div style="clear:both;"></div></div>');$(document).ready(function() {$('.querytip img').attr('src', function(i, src) { return src.replace( 's72-c', 'w130-h180-c' );});}); </script>