Johny Prett
sumber artikel : www.maskolis.com
Template ini mempunyai tampilan post di halaman muka yang hampir sama dengan Johny Jijay, bisa dibilang template ini adalah versi light dari Johny Jijay. Bedanya hanya pada slider dan sidebar yang saya munculkan di homepage. Template ini saya buat khusus untuk blog yang mempunyai konten gallery, tapi terserah Anda mau pakai untuk apa.
SLIDER
Seperti juga Johny Jijay template, Johny Prett juga mempunyai dua buah slider. Untuk memasang slider yang ada di Homepage, cari kode berikut di Edit HTML (jangan lupa centang expand widget templates) :
<div id='sliderTimer-wrapper'>
<ul id='sliderTimer-header'/>
<ul id='sliderTimer'>
<li class='sliderTimer-item active' id='mas-1' ref='Box Office' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/box office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-2' ref='Best Seller' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/best seller?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-3' ref='Watch Online' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/watch?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-4' ref='Horror Movie' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/horror?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-5' ref='Cartoon Kids' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/cartoon?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-6' ref='Comedy' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/comedy?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
</ul>
</div>
<ul id='sliderTimer-header'/>
<ul id='sliderTimer'>
<li class='sliderTimer-item active' id='mas-1' ref='Box Office' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/box office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-2' ref='Best Seller' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/best seller?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-3' ref='Watch Online' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/watch?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-4' ref='Horror Movie' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/horror?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-5' ref='Cartoon Kids' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/cartoon?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-6' ref='Comedy' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/comedy?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
</ul>
</div>
Kode warna biru adalah judul bar pada slider timer, dan warna merah adalah label atau kategori yang ditampilkan pada slider. Silahkan ganti dengan judul dan label yang Anda inginkan.
