Inilah Template Blogger Super Jelek Sekali

Sebelum besok libur karena ada keperluan penting selama dua hari, kali ini saya bagi lagi dua template yang super jelek dari Johny. Saya sampai sekarang masih mikir kok ya bisa-bisanya pakai nama Johny di setiap template yang saya buat. Padahal tidak ada satupun keluarga atau kerabat dekat yang punya nama Johny, mungkin dulu saya pengin punya nama Johny, tapi nggak kesampaian. Okeehhh... karena dari tadi sudah ada panggilan melulu dari HP, langsung saja nikmati kedua template super jelek kali ini, yang satu pake slider yang lain saya buat biasa dengan dua kolom seperti yang banyak diminta sama teman-teman blogger di kolom komentar.

Demo | Download

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, jika Anda ingin menampilkan label atau kategori tertentu baca postingan saya tentang Modifikasi Slider Lofslidernews Maknyus.

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.

Demo | Download

Template ini sama dengan Bukan Johny, bedanya template ini tidak ada slidernya, lebih sederhana dan gampang sekali cara pemakaiannya. Nama template ini.... bingung mau dikasih nama apa, ahh lagian juga ngapain dikasih nama yang penting isinya bung. Demonya pakai blog seadanya, yang penting templatenya jalan.

Kedua template ini dasarnya dari Johny Wuss, jadi semua tag H1 dan H2 sudah terpasang, tapi belum saya validasi HTML nya. Jangan terlalu fokus mengatasi masalah error validasi HTML, sangat wajar jika sebuah blog mempunyai error pada struktur HTMLnya. Santai saja, yang penting berbagi, membuat artikel yang bermanfaat bagi pembaca, bukankah setelah kita mati hanya tiga hal yang bisa terus memberikan manfaat salah satunya yaitu ilmu dan informasi yang kita berikan kepada orang lain? Hahaha... malah seperti pak Ustadz, ya itu tadi dua template yang saya bagikan gratis kepada teman-teman semua disini.

Dan satu lagi template ini bukan template responsif, karena saya tidak punya HP canggih untuk mengakses Internet dan belum pernah sekalipun browsing lewat HP. Untuk saat ini mungkin saya masih belum butuh responsif, suatu saat nanti jika HP saya sudah pakai merek terkenal seperti beri-beri mungkin baru mendalami responsif template. Oke.. jika tertarik silahkan dipakai, jika ada yang kurang jelas kebangeten banget, ini template sangat sederhana dan semua fitur yang saya pasang sudah saya berikan dalam bentuk tutorial sebelumnya. Tapi kalau mau tanya ya silahkan saja isi kotak komentar di bawah, sekian dulu dan selamat malam mau istirahat dulu, besok mesti berangkat pagi-pagi.

PENGUMUMAN PENTING
Silahkan baca sendiri disini