Template Dua kolom Dengan Slider

SHADOWS || Pagi sob..... Kali ini saya akan share sebuah template yang saya lihat cukup simple tetapi menawan. Template Dua Kolom Dengan Slider, saya rasa para sobat tentunya banyak memakai templet 2 kolom tetapi coba perhatikan ini ada perbedaan sedikit di bawah slider ada sample page untuk para sobat gunakan. Kadangkala sample page ini berguna jika kita mempunya beberapa template.
Nah marilah kita lihat demonya dari Bukan johny template disini.

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

Ganti URL warna merah http://shadows-k.blogspot.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.

Nah itulah Cara Template Dua Kolom Dengan Slider yang telah sobat lihat berikut tutorial yang ada di template, semoga bermanfaat bagi sobat semua.

NB:
UNTUK PARA SOBAT YANG INGIN TERAPKAN ATAU MEMAKAI TEMPLATE INI DI PERSILAHKAN, TETAPI SOBAT HARUS INGAT...!!! JANGAN HILANGKAN KREDIT LINK DI BAWAH SEBELAH KANAN, HARGAILAH HASIL KARYA SESEORANG, JIKA SOBAT INGIN DI HARGAI, SEBELUMNYA BELAJARLAH HARGAI ORANG LAIN DAHULU TERIMAKSAIH....

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