Cara Membuat Rekomendasi Anime di Bawah Header

Apa kabar Sobat Designz Chan yang masih setia nongkrong disini ^_^) ?? Sehat yaa! hehe.. Di artikel ke-dua saya kali ini saya ingin membuat tutorial Cara Membuat Rekomendasi Anime di Bawah Header.

Contohnya seperti di Screenshot bawah ini :

SS DEMO

Langsung saja langkah-langkah penambahannya :

1. Pergi ke HTML/Template dan CTRL + F lalu cari code /b:skin persisnya seperti ini </b:skin>
Jika sudah ketemu, Copy-kan Code di bawah ini di atas code </b:skin>

/* RECOMENDED ANIME by Designz Chan */
.hitsdah{overflow:hidden;float:left;background:#FFF;border:1px solid #DDD;padding:4px;border-left:0;width:830px;font-size:14px;}
#rslides-container{margin-bottom:15px;}
#hits{margin:0;padding:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
#hits li{float:left;margin:0;line-height:33px;margin-right:5px;}
#hits a{color: #333;padding-right: 7px;margin-left: 5px;line-height: 33px;padding-left: 2px;font-size: 11px;font-family: "Open Sans";font-weight:600;}
#hits a:hover{text-decoration: underline;}
#hits a:last-child{border:0;}
#dchan-hits{margin: 0 10px 15px 0;background: #F5F5F5;border-left: -0;max-height: 30px;}
#hits h3{background: #27ae60;font-family: 'font-weight: bold;float: left;font-size: 11px;padding: 9px 7px;font-family: "Open Sans";line-height: 12px;color: #FFF;margin-top: 0px;font-size: 11px;margin-left: 0px;margin-right: 7px;}
.rslides{position:relative;list-style:none;overflow:hidden;width:100%;padding:0;margin:0;}
.rslides li{margin:0;position:relative;display:block;-webkit-backface-visibility:hidden;position:absolute;display:none;width:100%;left:0;top:0;}
.rslides li:first-child{position:relative;display:block;float:left;}

2. Selanjutnya cari lagi code <div id="content-wrapper"> atau <div id="outer-wrapper">, jika ada copykan code di bawah ini tepat di bawahnya :

<div id="dchan-hits">
<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">Rekomendasi Anime</h3>');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('<span class="clear"/></div>')}var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
<script src="/feeds/posts/default/?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7" type="text/javascript"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=7;
removeRelatedDuplicates(); printRelatedLabels();
</script>

Sekian dari tutorial saya yaitu, Cara Membuat Rekomendasi Anime di Bawah Header. Jika ada masalah jangan sungkan ajukan permasalahanmu di bawah.

Arigatou~