Related Post Dengan Effects Tooltip Sederhana

Related Post Dengan Effects Tooltip Sederhana

Assalamualaikum warahmatullahi wabarakatuh.

Masih dalam suasana Idul Fitri, kmbali saya share buat sobat semua tutoial blogging, Kebetulan seedikit waktu saya sempatkan posting trik ini yang kebetulan pada blog saya juga sudah di terapkan. Jika anda berminat dengan widget related post dengan style yang saya pesembahkan. Silahkan simak selengkapnya.

Baca juga posts Lainya : Semua Label Widget

Related Post :

Sebagai demonya coba anda arahkan cursor pada widget related posts di bawah postingan ini. Kurang lebih sepeti itu nanti hasil tampilan dari tutorial ini. Bagi yang beminat silahkan masuk blog anda pilih template lalu pilih edit template blogger anda. cari kode : </style> pada template anda. Selanjutnya simpan kode CSS di bawah ini tepat diatas kode : </style>

/* Related Posts */
.related-post{box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.3);border: 4px double #AAE1C6;padding:0px 0px 2px 0px;margin:0px 0px 0px 0px;font-size:13px;background:#284F77;width:99%;}.related-post ul {padding:0px 10px;}.related-post h4{font-size:16px;margin:0 0 .5em;border-bottom:4px double #AAE1C6;color:#fff;padding:14px 20px 14px 58px;font-weight:400;position:relative;font-family:'Roboto', Arial, sans-serif;text-transform:uppercase}.related-post h4:before{content:"\f074";font-family:fontAwesome;font-size:22px;font-style:normal;color:#fff;top:0;left:0;background-color:transparent;border-radius:4px 0 0;padding:14px 23px;position:absolute}.related-post-style-6 li {padding:5px;list-style:none;position:relative;}.related-post-style-6 li a{color:#fff;text-decoration:none}.related-post-style-6 li a:hover{color:#ff6600;text-decoration:none}.related-post-style-6 .related-post-item-thumbnail {width:69px;height:69px;max-width:none;max-height:none;background-color:#2f3741;padding:5px;border:1px solid #282f39;float:left;margin:0 10px 0 0;}.related-post-style-6 .related-post-item-title {font-family:'Roboto', Arial, sans-serif;display:block;font-weight:220;font-size:14px;margin-left:5px;line-height:1.4em;}.related-post-style-6 .related-post-item-title::before{content:"\f08e";font-family:fontAwesome;color:#ffd700;font-style:normal;top:0;left:0;margin-right:13px}.related-post-style-6 .related-post-item-summary {display:block;overflow:hidden;font-size:11px;color:#fff;}.related-post-style-6 .related-post-item-tooltip {position:absolute;bottom:100%;left:10px;z-index:999;margin-bottom:10px;border:3px double #fff;background-color:#1540B4;padding:10px;width:90%;height:80px;display:none;}.related-post-style-6 .related-post-item-tooltip:before,.related-post-style-6 .related-post-item-tooltip:after {content:"";display:block;width:0;height:0;border:10px solid transparent;border-top-color:inherit;position:absolute;top:100%;left:35px;}.related-post-style-6 .related-post-item-tooltip:after {border-top-color:#1540B4;border-width:9px;margin-left:1px;}.related-post-style-6 li:hover .related-post-item-tooltip {display:block;}.related-post li{list-style:none;position:relative;display:block;border-bottom:1px solid #1988B8;margin:0 10px;padding:0}

Selanjutnya simpan kode java script di bawah ini, simpan di bawah postingan blog anda, atau lebih jelasnya simpan di bawah kode : <data:post.body/> Pada urutan yang paling bawah, jika di tmplate blog anda ada 3-4 kode <data:post.body/> Pilih yang paling terakhir/atau 3-4.

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='karristaent-related'>
<div class='related-post' id='related-post'>
<script type='text/javascript'>  var labelArray = [];  var relatedPostConfig = {      homePage: &quot;http://karristaent.blogspot.com/&quot;,      widgetTitle: &quot;<h4>Artikel Lainya</h4>&quot;,      numPosts: 6,      titleLength: &quot;auto&quot;,      containerId: &quot;related-post&quot;,      newTabLink: false,      widgetStyle: 6,      callBack: function() {}  };  </script>
<script>
//<![CDATA[
/*! Related Post plus tooltip by : Saud Karrysta => http://gplus.to/tovic */var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://karristaent.blogspot.com",numPosts:7,summaryLength:350,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title lltooltip" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title lltooltip" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title lltooltip" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip lltooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</div>
</div>
</b:if>
<!-- Related Post Widget End -->

Keterangan :

Ganti tulisan yang di beri background (http://karristaent.blogspot.com) dengan url blog anda. Setelah semuanya terpasang sesuai dengan petunjuk diatas. Selanjutnya save templat blog anda. Coba load/refresh postingan anda jika berhasil maka related posts dengan effects tooltip akan nampak di bawah postingan blog anda. Jika belum berhasil baca kembali dan amati dengan teliti cara pemasangan kode CSS dan Javascripts pada pstingan ini.

Akhirnya skian yang bisa saya bagikan pada kesempatan ini. Semoga bisa bermanfaat untuk anda semua. Mohon maaf jika ada kesalahan, Dan sekali lagi saya sekeluarga mengucapkan Minnal aidhin walfaidzin (mohon maaf lahir dan bathin) Salam blogging.