Cara Menciptakan Recent Post Image With Tooltip

Cara Membuat Recent Post Image With Tooltip - Pada hari ini aku akan membagikan tutorial yang hampir sama dengan sebelumnya ialah Simple Recent Post By Label, tutorial ini bahwasanya sudah usang namun aku perbaharui sedikit dengan menambahkan beberapa design.

Artikel kali ini cukup gampang untuk dipraktekkan buat para newbie seperti saya, kalian tinggal baca dari awal hingga simpulan tutorial ini dan jangan hingga terlewatkan sedikitpun, pada dasarnya kalian harus lebih teliti itu saja.

Cara Membuat Recent Post With Tooltip Diblogger

1. Buka Blogger > Tema > Edit HTML, kemudian kalian simpan css berikut ini diatas </style>

/* CSS Recent Posts Tooltip - Arlethdesign */ #recentposts-tooltip{width:100%;margin:0 auto;color:#494848;padding:2px} #recentposts-tooltip .recent-post-tooltip{float:left;display:inline;position:relative!important;margin:2px;padding:0 0;width:165px;height:225px} #recentposts-tooltip .recent-post-tooltip img{width:165px;height:225px;border:none!important;margin:0 0!important;padding:0 0!important;background:transparent!important;display:block!important} #recentposts-tooltip .recent-post-tooltip .recentposttooltip{position:relative;top:-40%!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;} #recentposts-tooltip .recent-post-tooltip:hover h5{height:35px;transition:all 0.25s;} #recentposts-tooltip .recent-post-tooltip h5{height:17px;margin:0 auto;font-size:13px;position:absolute;bottom:0;left:0;right:0;text-align:center;padding:5px;color:#FFF;background:rgba(0,0,0,0.6);font-weight:700;line-height:normal;transition: all 0.25s;} #recentposts-tooltip .recentposttooltip img{float:left;margin-right:5px!important} #recentposts-tooltip .recent-post-tooltip .recentposttooltip h4{font-size:15px;margin:0 0 5px;} #recentposts-tooltip .recent-post-tooltip:hover .hidden{display:block} #recentposts-tooltip .recentposttooltip a{color:#FF5722}



2. Kemudian cari </body>, letakkan javascript berikut ini diatasnya

<script type='text/javascript'>/*//<![CDATA[*/ $(document).ready(function() {$('.recent-post-tooltip img').attr('src', function(i, src) {return src.replace( 's72-c', 'w165-h225-c' );});}); /*//]]>*/</script>



3. Jika sudah save tema
4. Lalu Buka Tata Letak > Tambahkan Widget > HTML/Javascript, silahkan tambahkan javascript berikut untuk menampilkannya diblog

<script type="text/javascript"> numposts    = 8,      numchar     = 250,      rcFadeSpeed = 400, pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt_JvXDo3dltnTQNltIwPoIxK66mOxRLCbUXYe3A43KQSpPox21ccYC8JYBe5q6DhPGqWAMSwlvteaHKavRrFSqCub-peXK_z0g0epIU8M8h63T0JM601Ze-kNgMPbQUQOWP2eHPiyTK0/s1600/no-image-ava.jpg",  blogURL     = "http://arlethdesign.blogspot.co.id"; function showrecentposts_tooltip(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="recent-post-tooltip"><a href="'+u+'"><img src="'+postimg+'" alt="Cara Membuat Recent Post Image With Tooltip Cara Membuat Recent Post Image With Tooltip" /><h5>'+r+'</h5></a>'),document.write('<div class="recentposttooltip hidden"><img src="'+postimg+'" alt="Cara Membuat Recent Post Image With Tooltip Cara Membuat Recent Post Image With Tooltip" /><a href="'+u+'"><h4>'+r+"</h4></a>"),document.write(s+"</div>"),document.write("</div>")}}$(function(){$("div.recent-post-tooltip img").hide(),$("div.recentposttooltip").removeClass("hidden");var e=$(window).width(),t=$(window).height(),i=$("div.recentposttooltip").outerWidth(),u=$("div.recentposttooltip").outerHeight();$("div.recent-post-tooltip").outerWidth(),$("div.recent-post-tooltip").outerHeight();$("div.recent-post-tooltip").css("position","static").mouseenter(function(){$("div.recentposttooltip",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.recentposttooltip",this).css({display:block,top:s,left:n})}).mouseleave(function(){$("div.recentposttooltip",this).hide()})}); document.write('<div id="recentposts-tooltip"><sc' + 'ript src="' + blogURL + '/feeds/posts/default?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts_tooltip"></sc' + 'ript><div style="clear:both;"></div></div>'); function doThis(){var n=$("div.recent-post-tooltip img").length;i>=n&&clearInterval(int),$("div.recent-post-tooltip img:hidden").eq(0).fadeIn(400),i++}var i=0,int=0;$(window).bind("load",function(){setInterval("doThis(i)",400)}); </script>

Demo

Tag	Keterangan
numposts = 8	Silahkan Ganti No 8 untuk menampilkan Jumlah postnya
numchar = 250	250 Ganti Dengan Jumlah Snippet(Isi Post)
http://arlethdesign.blogspot.co.id	Ganti Dengan link/url blog kalian
w165-h225-c	w165 untuk lebar, h225 untuk tinggi gambarnya

Bagikan Artikel ini