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


Bukan Johny blogger template dengan Slider

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.

Bukan Johny blogger template tanpa Slider


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

4 Responses to "Contoh Template Blogger Super Jelek Sekali"

  1. oalah... saya pikir template yang benar-benar jelek

    ReplyDelete
    Replies
    1. hehe..keren kan mas..memang bener-bener keren, cuma sayangnya mas kholis nyebutnya super jelek,hehe

      Delete
    2. kirain juga gitu..ternyata keren tenin malahan...hehe

      Delete
  2. gan link download temanya dah gak ada ya?
    bisa minta minta file template ini? kirim ke email saya ya, komarudiniha@gmail.com

    ReplyDelete

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel