Template Blogger Silder Otomatis

Template ini merupakan template yang canggih dari Template Blogger yang pernah saya pakai. Pasalnya dalam slider tidak usah mengedit sendiri seperti template blogspot sebelumnya. Dan kayaknya template ini sangat ringan untuk ukuran blog standar. Maka dari itu sesudah saya menemukan template ini dari searching google dan menemukan template yang bagus ini. Tapi yang bikin saya heran template bagus gini kok di posting adminnya dengan judul 'Inilah Template Blogger Super Jelek Sekali'. Mungkin admin atau perancang template ini yang akhirnya saya tahu bernama maskolis merasa rendah diri kali ya..

Langsung saja anda bisa melihat Demo template ini yang telah dirancang oleh maskolis.com dan bisa Download template ini dengan gratis. Template ini dinamai Bukan Johny.

Slider Otomatis hanya perlu memasukkan kode berikut pada kolom kosong di bawah header. Masuk ke Layout/Tata Letak >> Add a Gadget pilih HTML/Javascript :

 <div class='lof-main-wapper' id='slider'>

 <div class='slider-main-outer'>

 <ul class='slider-main-wapper'>

 <script>                

 document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

 </script>

 </ul>

 </div>

 <div class='slider-navigator-outer'>

 <ul class='slider-navigator'>

 <script>                

 document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

 </script>

 </ul>

 </div>

 </div>

Kode diatas bekerja berdasarkan artikel terbaru.

Untuk menambah Widget Komentar masukkan kode di bawah ini pada widget sidebar :

 <style type="text/css">

 ul.tb_recent_comments{list-style:none;margin:0;padding:0;}

 .tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}

 .tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

 .tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

 .tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

 </style>

 <script type="text/javascript">

 //<![CDATA[

     // Recent Comments Settings

     var

 numComments  = 5,

 showAvatar  = true,

 avatarSize  = 30,

 characters  = 60,

 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",

 hideCredits = true;

 //]]>

 </script>

 <script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>

 <script type="text/javascript" src="http://huyant.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

 Ganti URL warna merah dengan URL blog Anda.

Widget Random Post :

 <script type="text/javascript">

     var randarray = new Array();var l=0;var flag;

     var numofpost=7;function randomposts(json){

     var total = parseInt(json.feed.openSearch$totalResults.$t,10);

     for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}

     if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');

     for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];

     for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

     document.write(item);}}

     }document.write('</ul>');}

     </script>

     <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

 Angka 7 pada kode diatas adalah jumlah random post yang ditampilkan, silahkan ganti sesuai keinginan.

Search box atau kotak pencarian yang maskolis gunakan pada template ini diambil dari Google CSE, silahkan And langsung ketik Google CSE di halaman Google kemudian membuat kotak search. Gampang caranya, tinggal ikuti petunjuk yang ada. Atau Anda bisa ganti dengan kotak search dari tutorial yang banyak beredar di internet.

Tweet