OPTIMASI BLOG 3: Tutorial Widget Johny Magazine Template

Bagi yang masih bingung cara pemasangan widget-widget yang terdapat pada template Johny Magazine, saya akan berikan tutorial cara pemasangannya. Oke langsung saja :

Memasang Slideshow (Sidebar kiri atas)
Setelah anda login, kemudian klik menu Tata Letak >> Elemen Laman. Setelah itu Tambah Gadget >> pilih HTML/Javascript. Masukkan kode di bawah ini pada sidebar sebelah kiri paling atas :
<div id="gal1" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3iEEROTJC9oEJXxXP8umic2TDNxMTxD9_FhbLyOHbB4Z-Gg3HgLjZFx1tkiQO_VBIZ-uaM3j815HLtzUOfKM7SSJWWWjwn66WGuWV4fMEXOJanL0PVIXemZF4Of-UKh7clhjh58eMmqo/s1600/Limitless-Movie-Review-Starring-Bradley-Cooper-Robert-De-Niro.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>Entertainment </strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2011/12/limitless-movie-review-starring-bradley.html"><strong>Limitless Movie Review, Starring Bradley Cooper & Robert De Niro </strong></a>
</div>
</div>
</div>

<div id="gal2" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamaEUy2AGWfTALJNVz0rkPv_9Qmw1dVGQEwUNwhCY4oAT_WqMgwdXs44bVRkHUPjSShti3ARZQUQABIONmPgueZwSokcT-Ekk9yvp4zngfRzTSRFamUBUdOfkzAEAFPiz65hz3RWIp0c/s1600/sucker-punch.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>Entertainment</strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2011/12/sucker-punch-2011-by-zack-snyder.html"><strong>Sucker Punch (2011) By Zack Snyder</strong></a>
</div>
</div>
</div>

<div id="gal3" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjn8EejxE9NdnXyN7-BeaH8woOzmbaxpK6ZePjLWta9ykFhUcj-BvQggbKBqRON-pLl3WNZV6_34SySp4Qj0zm70aEA7H6asl-famaI3HRTKR_J2cLsI54X2EZlDzbzxpuqmYxKFu5P04/s1600/Loris-Capirossi-Retires.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>Sport</strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2011/12/loris-capirossi-retires-riders-pay.html"><strong>Loris Capirossi Retires, Riders Pay Tribute</strong></a>
</div>
</div>
</div>

<div id="gal4" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFVC9TKq1iWoLuOl3eaBNqZroy3AukUlSUSCMMFPNer7Uy7d2XqGUtq3bMvSyKr5hyphenhyphenEoBGAdmozjbf4awRX5afqcnjvK4iug7bsZqkFE2zv9aIPPBcMsWCec4Q8WdJbBAsgdGfF_Q-QXA/s1600/Atheris-matildae.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>News World</strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2012/01/new-large-horned-viper-discovered-but.html"><strong>New large horned viper discovered, but biologists keep location quiet</strong></a>
</div>
</div>
</div>

<div id="gal5" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbuHrfy2wuwZER1odbL4X2d8e8Qmb56bfsrdFcl_Dgqc77VrGPegBuMTb3dHVIWR83dzkyMXQIR1mFLuHFpvWstePqkFQaTltN3rb2Ul6XQljjReb9uU63Nf7RLQsaroifbvxjVgLi10M/s1600/Libyan+rebel+chief.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>News Today</strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2012/01/libyan-rebel-chief-warns-egypt-over-pro.html"><strong>Libyan rebel chief warns Egypt over pro-Gaddafi TV </strong></a>
</div>
</div>
</div>

<div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5"><a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a><div class="clearit"></div>
<div class="clearit pb_10"></div>
<script type="text/javascript">
var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(5000)
</script></div></div>
Ganti semua URL gambar dan judul dengan url yang ingin anda tampilkan dalam slideshow
Memasang Widget Popular Post
Saya yakin sudah banyak yang bisa cara memasangnya, bagi yang masih bingung klik menu Tata Letak >> Elemen Laman. Setelah itu Tambah Gadget >> pilih widget Popular Post yang ada pada baris ketiga. Silahkan anda berkreasi sendiri dalam menentukan jumlah post yang akan ditampilkan.
Memasang Random Post
Langkahnya seperti di atas, setelah anda pilih HTML/Javascript. Letakkan kode berikut di dalamnya :
<script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=4;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>
Untuk angka 4 yang saya kasih warna merah adalah jumlah random post yang ditampilkan, silahkan ganti sesuai dengan keinginan anda.
Memasang Widget Tabber Tab (Sidebar Kanan Atas)
Sebelum memasang ini anda harus melihat struktur layout template ini, kemudian tambahkan tiga widget yang ingin anda tampilkan dalam menu Tabber ini. Misalnya saya ambil dari template Johny Magazine di bawah ini gambar layout tabbernya :

Dari gambar diatas, widget yang akan ditampilkan dalam tabber adalah kategori Entertainment, Sport dan News World. Anda harus memasukkan kode script untuk memasang kategori-kategori tersebut, misalnya sekarang Anda ingin memasukkan pada tabber 1 adalah kategori Entertainment, masukkan kode di bawah ini ke dalam kotak HTML/Javascript :
Ganti entertainment yang saya kasih warna biru dengan label/kategori yang anda inginkan. Perhatikan angka yang saya lingkari dari gambar di atas, angka 4 adalah jumlah kategori yang ditampilkan dan 60 adalah jumlah karakter huruf yang ditampilkan dalam satu judul, untuk lebih jelasnya anda silahkan baca tutorial cara memasang kategori tertentu dengan thumbnail. Oya jangan lupa dikasih judul widget, contoh : Entertainment

Kemudian isi juga tabber 2 dan tabber 3, langkahnya sama seperti memasukkan kategori entertainment diatas. tetapi anda bisa juga mengisi dengan widget lainnya sesuai dengan keinginan anda. Setelah semuanya terisi, kembali pilih add gadget terus klik HTML/Javascript masukkan kode di bawah ini pada posisi paling atas (diatas ketiga tabber tersebut, lihat gambar 2) ingat jangan dikasih judul, biarkan kosong :
<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 7px 3px 0;font-size: 12px;color:#CECECF;padding: 5px 8px;overflow: hidden;position: relative;background: #3b3b3b;cursor:pointer;border: 1px solid #9E9D9D;}
html .blogtabs h2.active {color:#727171;background: #fff;}
.blogtabs .widget-content {padding:1px 10px 10px 5px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/min.js"></script>
<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/jtabber.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>
Langkah terakhir klik save, dan lihat hasilnya.

Demikian tadi tutorial pemasangan widget-widget yang terdapat dalam Johny Magazine template. Bagi yang langsung baca artikel ini tanpa mengetahui template mana yang dimaksud silahkan baca Johny Magazine, Template Magazine untuk Blog Berita. Selamat mencoba dan semoga bermanfaat, bagi yang masih bingung silahkan isi kotak komentar yang ada di bawah.