Widget Recent Post by Label With Tooltip

Syahrul

Halo semuanya, pada tutorial ini saya akan membahas cara membuat widget recent post dengan label efek tooltip, tutorial kali ini saya buat lebih simpel dan mudah, bahkan kalian bisa edit sendiri stylenya. Pada tutorial sebelumnya saya juga sudah membagikan Post yang hampir sama dengan ini, namun berbeda dari yang sebelumnya, karena kali ini saya menggunakan label. Ok kita mulai saja tutorial kali ini.

Cara Membuat Widget Recent Post By Label Dengan Tooltip


1. Buka Blog kalian, Pilih Tata Letak dan tambahkan widget HTML/Javascript, lalu simpan CSS berikut ini diwidget tersebut
<style>
/* Widget Recent Post With querytip - Arleth98 */
#new_label .content a{font-size:13px;color:#111;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}
.content{position:relative;border-bottom:1px solid #DDD;margin:0;padding:5px 0}
.content:before{content:'\f054';float:left;color:#222;font-weight:bold;padding:0;margin:0 5px;font-family:fontawesome;font-size:15px}.content:nth-child(odd){background:#F0F0F0}
.querytip{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}
.querytip img{float:left;padding:2px;margin-right:10px;display: block!important;width:130px;height:180px}
#new_label .content .querytip 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}
#new_label .content .querytip h4 a{color:#eee}
</style>

2. Tambahkan Javascript berikut ini dan letakkan dibawah CSS tadi
<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://1.bp.blogspot.com/-RWvwQaPZCl4/WJo2qDGr-AI/AAAAAAAAA0E/fzYL0X6yeQs6WluNEx9cbjkfegbTjnlVgCLcB/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>

Demo
TagKeterangan
numposts = 10, Ganti Dengan Jumlah post
Regalia%3A%20The%20Three%20Sacred%20Stars Ganti Dengan Label Post

Ok saya rasa cukup sekian dulu tutorial kali ini, semoga bermanfaat dan sampai jumpa ditutorial berikutnya.
Related Posts
Disqus Comments