Template Magazine untuk Toko Online

Johny Magstore, Template Magazine untuk Toko Online

Template ini memenuhi permintaan dari beberapa teman blogger pada kotak komentar yang menginginkan ada tambahan untuk tampilan grid dan list style pada postingan di homepage. Saya membuat template toko online ini bukan karena banyak peminatnya tapi lebih karena memenuhi permintaan dari teman. Tanpa mereka juga blog saya ini tidak akan berkembang, untuk itu pada kesempatan ini saya pribadi mengucapkan terima kasih yang sebesar-besarnya kepada teman-teman blogger semua yang telah sudi mampir dan berkunjung ke blog saya ini, dan tak lupa juga untuk para pengguna template buatan saya, terima kasih sudah memberikan apresiasi yang begitu tinggi kepada saya. Kalau disuruh memilih, saya lebih suka membuat template biasa, karena disamping lebih mudah, tampilan bisa lebih variatif, beda sama template toko online yang tampilannya melulu berbentuk gallery produk. Terus terang untuk membuat template toko online diperlukan waktu yang lebih lama. Tapi saya jangan disuruh membuat atau convert template yang persis seperti situs-situs yang sudah jadi, maksudnya kemarin ada yang minta dibuatkan template yang seperti Mashable, kompas, dan lain-lain... ogah saya, serius

Sebenarnya template ini hanya modifikasi dari template toko online saya sebelumnya Johny Blackstore, tambahan fitur grid dan list disini saya memakai jQuery Cookies buatan Sebastian Sulinski dari SSD Tutorial (klik link untuk tutorial membuat grid and list view). Slider yang saya pakai disini juga masih sama hanya ukurannya lebih besar dan ada tambahan thumbnail untuk fungsi pagination.

Fitur yang terdapat dalam template Johny Magstore :

1. Shopping Cart dari wojodesign.com
2. Grid and list view dari SSD Tutorial
3. Simple Image Panner and Zoomer v1.1 dari Dynamicdrive

Posting Artikel

Dalam membuat postingan, perhatikan struktur kode di bawah ini :

<div class="product_image">
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:150px; height:150px;">
<img border="0" class="item_thumb" src="product_image.jpg" /></div>
<span class="item_price">$00.00</span> </div>
<div class="product_describe">
Descriptions... </div>

Keterangan :
Warna merah : masukkan url gambar produk anda pada kode warna merah diatas. Pilih gambar yang ukuran pixel nya sedang, antara 200 - 300 px.
Warna kuning : harga produk
Warna biru : deskripsi dari produk

Kode diatas adalah kode yang harus anda awali dalam membuat postingan terbaru, dan untuk memudahkan agar Anda tidak berulang kali copy paste kode tersebut sewaktu membuat artikel terbaru, masukkan kode tersebut pada kolom post template. Masuk ke setting, pilih posts and comments >> post template. Klik add, setelah itu masukkan kode diatas pada kotak kosong seperti gambar dibawah, terakhir save setting.

Shopping Cart

Fitur Shopping Cart masih menggunakan simplecart dari wojodesign.com. Dan hanya support untuk top currency, antara lain : Dollar, Poundsterling dan Euro. Untuk mengganti akun Paypal yang terdapat pada blog demo ini dengan akun Paypal Anda, cari kode dibawah ini :

<script type='text/javascript'>

simpleCart.email = &quot;johnytemplate@gmail.com&quot;;

simpleCart.checkoutTo = PayPal;

simpleCart.currency = USD;

simpleCart.taxRate  = 0.02;

simpleCart.shippingFlatRate = 3.25;

simpleCart.shippingQuantityRate = 1.00;

simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];

</script>

Ganti email warna merah diatas dengan email Anda (email yang sudah didaftarkan di Paypal).

Fitur Pendukung

Slider yang saya pasang pada template ini bekerja otomatis berdasarkan label yang Anda masukkan pada kotak HTML/Javascript. Perhatikan gambar di bawah ini :

Dari gambar diatas lihat kolom kotak merah, klik Edit pada widget featured content slider, setelah terbuka jendela baru masukkan atau ketik label yang ingin ditampilkan pada slider, lihat gambar di bawah ini :

Dari gambar diatas saya memasukkan label Electronic yang akan muncul pada slider, Anda bisa ganti sesuai keinginan. Untuk lebih jelasnya silahkan baca tutorial dalam membuat slider ini disini.

Dua navigasi pada template ini semuanya harus memasukkan manual, tidak seperti pada template sebelumnya terdapat satu navigasi khusus untuk halaman statis, meskipun begitu template ini sudah support dengan static page (halaman statis).

Untuk merubah simbol currency dari $ (dollar) menjadi Rp (rupiah) pada widget shopping cart :

1. Cari URL script ini di Edit HTML :
   

   http://kauman.googlecode.com/files/WojosimpleCart-USD.js

   Setelah ketemu ganti dengan URL script berikut :
   

   https://masolis-javascript.googlecode.com/svn/trunk/magstorecart-rupiah.js

2. Langkah selanjutnya, masih pada Edit HTML ganti USD pada kode ini :
   

   simpleCart.currency = USD;

   menjadi 

   simpleCart.currency = IDR;

Terakhir save templates, dan currency anda akan berubah menjadi rupiah. Tapi perlu diingat disini, itu hanya sekedar penggantian currency saja, tidak bisa untuk melakukan checkout atau pembayaran langsung lewat Paypal. Karena Paypal belum menerima Rupiah sebagai alat pembayaran.

Disini sudah saya siapkan dua tombol dibawah gambar produk di homepage yaitu add to cart dan view detail, jika tidak ingin memakai shopping cart sebagai alat transaksi. Anda tinggal rubah tombol add to cart menjadi order dan arahkan ke direct link halaman formulir order yang sudah anda buat, misalnya seperti ini (contoh form ini dibuat menggunakan docs google). Jika anda menggunakan form order untuk transaksi penjualan,  fitur shopping cart tidak terpakai, jadi hapus semua script CSS dan javascript untuk shopping cart pada template ini. Selamat mencoba dan semoga bermanfaat

Tutorial Membuat Slider Carousel Otomatis

Membuat Slider Carousel Otomatis Berdasarkan Label

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

DEMO

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypqrjRlRqgkOotKhyioYk8MTeqewfz1TZnR8GIYW-_QXZJdPsMRNEtho-u6tdt9-V-kfLh4_mFaTYgpfoi97AosGn5MLD4kNxm2rgXormojJmEdpU5guH1DTv4-mpouc052LYbguZojo/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUnbDgLm7ZFTsYMuOXkOaFYwZiqJMcooaz_SK5R_uyjoFObcA5Yec1326hGkc3qhg3MitTuJMUVGl5N-BOtQ9IECYERgBS-ZTJBRiqcSewzMGGOL3qN0jPqVRq6jLKNhbjsJDxgmxELrg/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNiNn1QhWiinuW94HE0ix342nwdggjY5sDS8K6NPaLh31q7GOVe6ALkEh_J14TD5-FM2gKBjQ8-6qIpNR7RzwPtIxHnHFtLAHo9YFNC38JrdxuKOtja6g16ODlUlykac4CDawPMXoazzk/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4KNJ4z5ySiGfNS_eEwDBU8HKWc6AhDzqcuUJXboN224QweGtcDrHbq3XTwWgVIktvSkRrz-71j6EexRhwvAMrMS8ome3Itd0812jmg32EXjfb0OJV5FZuS7NF57_Z-w_jXAiQh3zuYMQ/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirfSqU4WSFXMTHZwF-lRvIo2OWyC8ka5bp1xGhV0PYyorKrk_iEg3NaFwh2bPM7ylsoUwqHfEoxUoVoh0AsTtcnlN1wTKkOVaGrnuy7zGJ9P7RKXUB8TjnpasOb0sOoCR0nqV9-QFPKew/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDD4ZS3U62WflEvRozejQ2upLlT-DYhZkopWe4nCZosohM_g9A0r063VlSSxVqARe-YsDf-Pocf9q6_SgNLX3bBlRXsNK-_vmqaz6WAX-neVoafP6G87XyfWQ2_Olf56RGIJy19D10S14/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSYwCipXMRHR01Dh95GSjK3NVzDKYWADtNolFJj-3gGojzupzlwFhSuxdlOB1gQga2rUFi3jH-6GYTZ7eH96CnLswosGTjuKibmMg66M41ChYoTvBqSYmiKR-D76X71V_8lrIzHiImj8c/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Keterangan :

Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).

Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :

7. <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div id='carousel'>
   <div id='previous_button'/>
   <div class='container'>
   <script>
   

   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>   
   <div class='clear'/>
   </div>
   <div id='next_button'/>
   </div>
   <script type='text/javascript'>
   (function($) {     $(document).ready(function(){
   $(&quot;#carousel .container&quot;).jCarouselLite({
       auto:4000,
       scroll: 1,
       speed: 800,   
       visible: 5,
       start: 0,
       circular: true,
       btnPrev: &quot;#previous_button&quot;,
       btnNext: &quot;#next_button&quot;
       });
       })})(jQuery)   
   </script>
   </b:if>
   Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

Tutorial Membuat Slider Carousel Otomatis Versi 2

 

Sebenernya sudah lama sekali saya diminta oleh seorang teman blogger Ronny Dee untuk membuat tutorial slider Carousel seperti pada template Mas Paper 2. Kali ini saya akan membuat tutorialnya tapi hanya memakai slider carousel sederhana yang sudah pernah saya buat pada tutorial sebelumnya, disini saya hanya memodifikasi kode CSS nya saja, sehingga tampilannya mirip dengan slider Carousel yang ada di template Mas Paper 2. Tapi kalau dilihat sepintas, justru slider ini lebih mirip dengan slider Carousel yang ada di bagian atas (bawah navigasi) halaman depan situs detik.com.





DEMO

Cara membuatnya hampir sama dengan slider Carousel otomatis versi 1, disini saya hanya merubah kode CSS dan menambahkan timestamp diatas judul post. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Pertama Anda mesti login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
1. #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
   #carousel h5{color:#555;margin:2px}
   #carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
   #carousel .thumb{float:left;margin-right:5px;}
   #carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNc4Q-_pDQAyV_gfSUqcUSP8FI8ZEQH62U_UpYdbX0-kMAuX4vbP_b-2Qh9rkihSi_A58OuD0xPLmvKwJJtTOlbhNcsuXCYZD3RjU1iBlHYbNJoHS3TKFsJSnGDMK-gXGjl05_azPdhyphenhyphenb/s1600/previous.png) center;z-index:100;cursor:pointer;}
   #carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMfUeY-dDoC-R9TEzWTV66SgA0ns0LMs14woD4Ii5g-FcfvLzeMyuEUslQGpAb2r3jNpoX67tbV5aE23uEkAmFiAOCW5r4dfZrf4Ai7dybJgLfhQFWsb9Q675bNuQhq7jnKuwswHpdtwR_/s1600/next.png) center;z-index:100;cursor:pointer;}
   #carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
   #carousel ul{width:100000px;position:relative;margin-top:10px}
   #carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
   #carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
   #carousel ul li a.slider_title:hover{color:#1b5d97}
   #carousel a img{display:block;background:#fff;margin-top:0}
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
2. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
3. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSYwCipXMRHR01Dh95GSjK3NVzDKYWADtNolFJj-3gGojzupzlwFhSuxdlOB1gQga2rUFi3jH-6GYTZ7eH96CnLswosGTjuKibmMg66M41ChYoTvBqSYmiKR-D76X71V_8lrIzHiImj8c/s1600/no+image.jpg";
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 140;
   summaryTitle = 25;
   numposts1 = 12;
   
   function removeHtmlTag(strx,chop){
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   
   s = s.join("");
   s = s.substring(0,chop-1);
   return s;
   }
   function showrecentposts(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   document.write('<ul>');
   for (var i = 0; i < numposts1; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var pcm;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
   pcm = entry.link[k].title.split(" ")[0];
   break;
   }
   }
   
   if ("content" in entry) {
   var postcontent = entry.content.$t;}
   else
   if ("summary" in entry) {
   var postcontent = entry.summary.$t;}
   else var postcontent = "";
   postdate = entry.published.$t;
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   
   var daystr = day+ ' ' + m + ' ' + y ;
   var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
   
   document.write(trtd);
   j++;
   }
   document.write('</ul>');
   }
   //]]>
   </script>

   Keterangan :
   

   Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

   Kode warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90 adalah panjang dan lebar image yang ada di slider.
4. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
5. <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div id='carousel'>
   <div id='previous_button'/>
   <div class='container'>
   <script>
   

   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>   
   <div class='clear'/>
   </div>
   <div id='next_button'/>
   </div>
   <script type='text/javascript'>
   (function($) {     $(document).ready(function(){
   $(&quot;#carousel .container&quot;).jCarouselLite({
       auto:4000,
       scroll: 1,
       speed: 800,   
       visible: 5,
       start: 0,
       circular: true,
       btnPrev: &quot;#previous_button&quot;,
       btnNext: &quot;#next_button&quot;
       });
       })})(jQuery)   
   </script>
   </b:if>
   Perhatikan kode warna merah diatas, sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
6. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

 

tutorial template magazine

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 :


1. 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 :
   
1. <div id="gal1" class="img400">
     <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibygHlc28eTM1UFJFquQtg36S2BO1Td3nRBGKvRPVVm9ev0XpSp6AeMjFQJyXYv4TxGm9qhaR94md_ZgQ8gtGgXqjxWmmXwzk7i9D4N8ummLiTMb4sIpqgzcA3qCvIYnSwR8ZsAd9o0Ek/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/AVvXsEhb2pUsuQhZgUz7c6PpPysSYiN4EG8IFVIiK4vMIhe5tgorM_axm5Jyw9R-leIJxJiCrMEtRwN8TYhIIOuvnIdSKNovYQ-CajNpxqjvV7uOD_WsN-V8WLM6bwA99mbU-2b14usz7FEB04I/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/AVvXsEiN7t8MDQdk48lG9j0f9icjs8kVQ4yWDQk5lBn4S6zXALS0wfu8rprYe4qQ1k3RY7jNcO8_JyjvyNoKE59MezDe8T3CUqXLp1RC-iJU68q5F6Vhsy_n2GgTu6gcLTGTJF_jXMe5fL_778U/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/AVvXsEibs90JJR1IVFzZQwfzbXupPHc1KB2hyeSU0_j3xgPe43VNoU2CbJF3C0pWjOLdxH5oYJzwW4zz8AEU9jvNQkjtvgtzGYiue24rXOpZo7ZrMWx2Aoov3pcvvb9GJ9bSemZc7cNOYUalAig/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/AVvXsEicDKuX1JWNu8tXQliDMAX9MWjeFOj_sTtB75ziI3o9ksySrlZXk32Zdj8OEdl9aQlzIFKF_4n-sKIXmvp6sIxwt61fuwVUwqFkRePOjeZhyphenhyphenWwZ987PFr0f430XPb-PsJmbR23miCq4Nl4/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
2. 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.
3. Memasang Random Post
   Langkahnya seperti di atas, setelah anda pilih HTML/Javascript. Letakkan kode berikut di dalamnya :
   
4. <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.
5. 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 :
   view plainprint?

   1. <script type="text/javascript">  
   2. var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;  
   3. </script>  
   4. <script src="/feeds/posts/default/-/entertainment?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript">  
   5. </script>  
   
   
   
   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 :
6. <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>
7. Langkah terakhir klik save, dan lihat hasilnya.