Cara Membuat Bar Rekomendasi Anime Acak
Bar Rekomendasi Anime ini emang udah pada tau. Tapi ngga apa2 kita posting lagi disini ok.
Langsung aja kita ke cara pemasangannya.
Pertama, kita letakkan CSS nyah. Atau lebih gampangnya, kita taro aja di tempat yang banyak CSS nyah. hehe
/* CSS Rekomendasi Anime */
.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;}
#rekomendasianim{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;}
.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;}
.rslides img{display:block;height:auto;float:left;width:100%;border:0;}
.rslides .rstle{margin:0;padding:7px 10px;font-family:'Open Sans Condensed',sans-serif;text-transform:uppercase;font-size:17px;font-weight:400;background:#333;display:inline-block;position:absolute;bottom:54px;left:20px;color:#fff;}
.rslides .rstle a{color:#fff;}
.rslides .rstle a:hover{color:#ddd;}
.rslides .rsdesc{background:#4caf50;color:#fff;font-weight:700;font-size:12px;padding:5px 8px;display:inline-block;position:absolute;bottom:23px;left:20px;}
Terus, kita masukin HTML-nya. Masuk ke Template - Edit HTML. Terus pastekan script di bawah ini. Kalo saya letaknya di dalem outer-wrapper. Itu sih terserah kalian, karena struktur tiap Template berbeda. Gimana enaknya kalian ajah lah itu mah.Karena cuman kalian yang tau template kalian sendiri.
<div id='rekomendasianim'>
<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>
Note:
- "maxresults=7" bisa kalian ubah dengan mengubah angka 7
- "Anime" kalian ubah dengan label kalian
- "#hits h3 {background: #2977BE;}" nah kalo ini kalian ubah aja kode warna nya, sesuain sama warna blog kalian. Itu defaultnya warna biru.
- Buat kalian yang bingung. warna apa yah?, kode warna kalian bisa liat DISINI
Cara Membuat Bar Rekomendasi Anime Acak
Reviewed by Michael William J
on
Selasa, April 21, 2015
Rating:
Tidak ada komentar
Terima Kasih