Cara Membuat Rekomendasi Anime Ala Fansub untuk Blogger
Kali ini kita akan membuat rekomendasi anime ala fansub, seperti gambar diatas saya ambil dari blog wardhanime blogger template. Postingan ini hanya untuk pembelajaran saja, jadi tererah kalian kalau ingin menerapkan ini di blog kalian silakan saja.
Yang pertama, Masuk ke Blogger > Theme > Edit HTML Lalu masukkan CSS berikut tepat di atas kode </style> atau kode ]]></b:skin>
/* Anime Terhits */
.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{height: 15px;
background: #F5F5F5 none repeat scroll 0% 0%;
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
padding: 5px;
font-size: 11px;}
#hits li{float:left;margin:0;line-height:33px;margin-right:5px;}
#hits a{color: #222;padding-right: 7px;margin-left: 5px;padding-left: 2px;font-size: 11px;font-family: 'Exo 2', sans-serif;}
#hits a:hover{color: #222;
text-decoration: underline;
}.rslides img:hover{-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);-webkit-transform:scale(1.1) rotate(3deg);-o-transform:scale(1.1) rotate(3deg);-moz-transform:scale(1.1) rotate(3deg);opacity:.7;filter:alpha(opacity=70);}
#hits a:last-child{border:0;}
#animeterhits{margin:0px 0px 10px 0px;background: #F5F5F5;border-left: -0;max-height: 28px;}
#hits h3{background: #2977BE ;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
float: left;
font-size: 11px;
padding: 6px;
line-height: 13px;
color: #FFF;
margin-top: -5px;
margin-left: -5px;
margin-right: 10px;}
Setelah itu masukkan Javascript nya tepat di bawah kode <div id='main-wrapper'>, kalau di blog kalian tidak ada kode tesebut, coba cari yang serupa dengan kata kunci main-wrapper.
<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">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/-/Anime?alt=json-in-script&callback=related_results_labels&max-results=10' type='text/javascript'/>
<script type='text/javascript'>
var currentposturl="";
var maxresults=7;
removeRelatedDuplicates(); printRelatedLabels();
</script>
<div class='clear'/></div> Untuk bagian yang di tandai, kalian isi dengan Label postingan kalian.
Terkahir save theme, dan selesai.
Untuk hasilnya, bisa kalian lihat di https://www.animenload.blogspot.com
2 comments
itu buat apa ya min. kurang paham
EmoticonEmoticon