Cara Membuat Kotak Artikel Rekomendasi Berjalan pada Header Blog

 Yoo temen - temen, pada artikel kali ini mimin bakal bagiin Cara Membuat Kotak Artikel Rekomendasi Berjalan pada Header Blog dengan mudah tentunya. widget ini bisa memberi tahu pengunjung artikel - artikel yang di rekomendasikan, widget ini sangat responsive dan akan sangat berguna untuk meningkatkan pengunjung dan juga untuk memperbagus blog.

Langsung saja ke langkah - langkahnya.

Cara Membuat Kotak Artikel Rekomendasi Berjalan pada Header Blog :

1. Masuk ke Blogger > Tema > Edit HTML.

2. Masukkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style> .

#animeterhits {
    margin: -10px 0 15px 0;
    background: #1f1f1f;
    border-left: -0;
    max-height: 26px;
    padding: 0px;
    margin-top: 15px
}
#hits {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 5px;
  background: #1f1f1f;
  max-height: 26px;
    padding: 3px;
}
#hits h3 {
    background: #373737;
    font-weight: bold;
    float: left;
    font-size: 11px;
    padding: 7px;
    line-height: 12px;
    color: #FFF;
    margin-top: 0;
    font-size: 11px;
    margin-left: 0;
    margin-right: 7px;
}
#hits h3::before {
    content: 'Recommended';
}
#hits a {
    color: #fff;
    padding-right: 7px;
    margin-left: 5px;
    line-height: 30px;
    padding-left: 2px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
#hits a:last-child {
    border: 0;
}
.Night #animeterhits {
    background: #fff;
}


@media screen and (max-width: 480px)
#animeterhits {
    margin: -10px 0 15px 0;
    padding: 0 3px 0 0;
}
@media only screen and (max-width: 480px)
h3 {
    font-size: 130%;
}
@media screen and (max-width: 480px)
#hits h3::before {
    content: '\2606';
}

3. Setelah itu kembali ke menu blogger dan pilih Tata Letak.

4. Tambahkan Widget di bagian Header, lalu masukkan kode di bawah ini.

<div id="animeterhits">
<script type="text/javascript">
//<![CDATA[[
function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(){for(var e=0;e<relatedUrls.length;e++)relatedUrls[e]==currentposturl&&(relatedUrls.splice(e,1),relatedTitles.splice(e,1));var l=Math.floor((relatedTitles.length-1)*Math.random()),e=0;for(relatedTitles.length>1&&document.write('<div id="hits"><h3 class="rctle"></h3><marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">');e<relatedTitles.length&&20>e&&maxresults>e;)document.write('<a class="rcli" href="'+relatedUrls[l]+'">'+relatedTitles[l]+"</a>"),l<relatedTitles.length-1?l++:l=0,e++;document.write('</marquee><span class="clear"/></div>')}var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
<script src="https://www.hiirotaku.my.id/feeds/posts/default/?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10" type="text/javascript"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels();
</script></div>

5. Setelah itu Simpan dan lihat hasilnya.