Contoh Template Blogger Super Jelek Sekali

Sobat. Sudah berulang kali kita sampaikan bahwa dalam membuat sebuah situs blog berkualitas sangat dipengaruhi oleh desain template yang kita gunakan. Berbagai tampilan yang begitu "ngejreng" atau bahkan ada yang lebih memilih sederhana saja.

Berbagai pilihan tentu sangat banyak sekali. Dengan mencari di Google, kita bisa saja menggunakan desain tempilan sebuah blog yang kita inginkan. Tidak perlu "bayar", yang gratis juga buanyak buanget kok. Tetapi memang ada perbedaan antara yang gratisan dengan yang berbayar. Semua kembali pada blogger masing-masing. Jika masih bingung alias belum faham, silakan simak tulisan saya tentang cara memilih template yang baik dan benar (SEO dan disukai Google)

Dah, tidak berlama-lama. Kali ini akan saya bagikan template super jelek sekali, yakni Bukan Johny Blogger template. Template ini dibuat dengan dua varian, yakni yang sederhana dan menggunkan slider. Jelek dalam artian hanya sekedar nama, namun pada kenyataanya template ini bagus banget alias keren bingit, hehe. 

Langsung saja, nih penampakan dari Bukan Johny Blogger template:

1. Bukan Johny blogger template dengan Slider

Demo | Download

Catatan Penting:

Slider
Masukkan 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.

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://www.maskolis.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

Ganti URL warna merah http://www.maskolis.com 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

Search box atau kotak pencarian yang saya gunakan pada template ini saya ambil dri 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.

2. Bukan Johny blogger template tanpa Slider

Sesuai dengan namanya, template ini berbeda dengan template pertama.

Demo | Download

Template ini sangat sederhana. Namun demikian, ketika saya test kecepatan loadingnya menggunakan GTmetrix, template ini sudah tergolong pada grade B, yakni udah bagus banget untuk digunakan.

Demikian info tentang template blogger super jelek sekali. Semoga bermanfaat.

Salam (http://www.forumblogindo.com/).*

Sumber:

http://www.maskolis.com/2013/02/inilah-template-blogger-super-jelek.html