Membuat Widget Related Post dengan Efek CSS Hover

Hari ini saya berbagi  Membuat Widget Related Post dengan Efek CSS Hover. Ini widget related post dibuat dengan javascript dan didesain dengan css. mudah untuk diinstal pada blogger template tidak perlu menggunakan linkwithin dan layanan lainnya untuk menciptakan widget ini.

Cukup tambahkan script ini untuk template blogger Anda yang ditunjukkan pada bawah langkah demi langkah tutorial. dengan fitur widget ini Anda bisa mendapatkan tampilan halaman lebih banyak dari pengunjung dan mendapatkan lebih banyak uang dari adsense.


Bagaimana kerjanya?

Widget terkait ini bekerja seperti tag label, ini java script memanggil semua tag label terkait dan menyelaraskan dalam jenis script ini menangkap semua posting gambar dan link terkait di bingkai dalam ukuran yang sama.

Cara Memasang  Widget Related Post :


Langkah 1
Pertama backup template Anda
Pergi ke > Edit Template> dan tekan Ctrl + F
Sekarang cari ]]> </ b: skin>

Langkah 2
Sekarang Paste kode ini di atas ]]> </ b: skin>

/*--- ------Related Posts --------------------*/
#related-posts {
margin: 1px 0px 15px 0px!important;
background: white;
height: 265px;
width: 600px!important;
padding: 0px 0px 0px 0px!important;
border-radius: 5px 5px 5px 5px;
}
#related-posts h2{
margin: 10px 0px!important;
padding: 15px 15px!important;
font-family: Helvetica,Arial,sans-serif;
font-size: 16px;
color: white;
font-weight: 600;
line-height: 14px;
text-transform: capitalize;
none repeat scroll 0% 0% rgb(255, 255, 255) !important;
background: #900000;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0px 2px 4px #333;
}
#related-posts-text {
font-size: 1.1em !important;
font-weight: 600 !important;
line-height: 1.45em !important;
font-family: Helvetica,Arial,sans-serif !important;
width: 120px;
padding-left: 3px;
height: 65px;
border: 0pt none;
margin: 3px 0pt 0pt;
}
#related-posts img {
border: 2px solid #ccc ;
padding: 3px !important;
overflow: hidden;
width: 110px;
height: 90px;
margin:3px;
border-radius:4px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
opacity:1;
}
#related-posts img:hover {
border: 2px solid #333;
opacity:0.5;
}
#related-posts a {
color:#666;
}
#related-posts a:hover{
color:#333;
}

 Langkah 3
Sekarang Cari </ head>
dan paste kode ini di atasnya

<!--Related Posts Scripts and Styles Start-->
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs9AqZ5C1_The1KmIM91tBubv6G-LFPw1rIqo69zxDMfd0OK7ctgGHu57DPvTJDVgP9FzUjCbT_c6YevDtCxi6Ymi8LgYfhbwj-WZqB6zAi7CS3GvX9SPlUTvLHF7xWVozDqvFn1i9g7Nf/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Topics:";
</script>
<script>
//<![CDATA[
var relatedTitles = new Arrayundefined);
var relatedTitlesNum = 0;
var relatedUrls = new Arrayundefined);
var thumburl = new Arrayundefined);
function related_results_labels_thumbsundefinedjson) {
for undefinedvar i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch undefinederror){
s=entry.content.$t;a=s.indexOfundefined"<img");b=s.indexOfundefined"src=\"",a);c=s.indexOfundefined"\"",b+5);d=s.substrundefinedb+5,c-b-5);
ifundefinedundefineda!=-1)&&undefinedb!=-1)&&undefinedc!=-1)&&undefinedd!=""))
{thumburl[relatedTitlesNum]=d;} else {ifundefinedtypeofundefineddefaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]
="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs9AqZ5C1_The1KmIM91tBubv6G-LFPw1rIqo69zxDMfd0OK7ctgGHu57DPvTJDVgP9FzUjCbT_c6YevDtCxi6Ymi8LgYfhbwj-WZqB6zAi7CS3GvX9SPlUTvLHF7xWVozDqvFn1i9g7Nf/s1600/no_image.jpg";}
}
ifundefinedrelatedTitles[relatedTitlesNum].length>45) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substringundefined0, 45)+"...";
for undefinedvar k = 0; k < entry.link.length; k++) {
if undefinedentry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;

}
}
}
}
function removeRelatedDuplicates_thumbsundefined) {
var tmp = new Arrayundefined0);
var tmp2 = new Arrayundefined0);
var tmp3 = new Arrayundefined0);
forundefinedvar i = 0; i < relatedUrls.length; i++) {
ifundefined!contains_thumbsundefinedtmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;

}
function contains_thumbsundefineda, e) {
forundefinedvar j = 0; j < a.length; j++) if undefineda[j]==e) return true;
return false;
}

function printRelatedLabels_thumbsundefinedcurrent) {
var splitbarcolor;
ifundefinedtypeofundefinedsplittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
forundefinedvar i = 0; i < relatedUrls.length; i++)
{
ifundefinedundefinedrelatedUrls[i]==current)||undefined!relatedTitles[i]))
{
relatedUrls.spliceundefinedi,1);
relatedTitles.spliceundefinedi,1);
thumburl.spliceundefinedi,1);
i--;
}
}

var r = Math.floorundefinedundefinedrelatedTitles.length - 1) * Math.randomundefined));
var i = 0;
ifundefinedrelatedTitles.length>0) document.writeundefined'<h2>'+relatedpoststitle+'</h2>');
document.writeundefined'<div style="clear: both;"/>');
while undefinedi < relatedTitles.length && i < 20 && i<maxresults) {
document.writeundefined'<a style="text-decoration:none;padding:5px;float:left;');
ifundefinedi!=0) document.writeundefined'border-left:solid 0.5px '+splitbarcolor+';"');
else document.writeundefined'"');
document.writeundefined' href="' + relatedUrls[r] + '"><img  src="'+thumburl[r]+'"/><br/><div id="related-posts-text">'+relatedTitles[r]+'</div></a>');
i++;

if undefinedr < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.writeundefined'</div>');
relatedUrls.spliceundefined0,relatedUrls.length);
thumburl.spliceundefined0,thumburl.length);
relatedTitles.spliceundefined0,relatedTitles.length);
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->

Langkah 4
Langkah akhir
sekarang mencari <div class='post-footer'>
setelah menemukan kode ini pastekan kode di bawah ini di atas kode  <div class='post-footer'>
jika widgetnya tidak muncul taruh kode berikut dibawah kode <data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<!--Related Post Start-->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-
results=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><br/><div style='clear:both'/>
<div style='clear:both;'/>
</b:if>

 Langkah 5

Save Template anda.

Sekian dulu Postingan Artikel kali ini yang membahas tentang  Membuat Widget Related Post dengan Efek CSS Hover semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post