Premium Themes Blogger

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

<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>

<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>

1. Cari URL script ini di Edit HTML :
   

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

   Setelah ketemu ganti dengan URL script berikut :
   

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

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

   simpleCart.currency = USD;

   menjadi 

   simpleCart.currency = IDR;

<div class="product_image">

<a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a>

<span class="item_price">$00.00</span></div>

<div class="product_describe">

Description your product.............
</div>

<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>

1. Slider yang saya pasang disini bekerja otomatis, menampilkan artikel terbaru anda dengan jumlah 8 postingan. Jika Anda ingin menampilkan per kategori atau label, cari kode ini pada Edit HTML (jangan lupa centang expand widget templates) :
   

   <script>

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

   </script>

   Ganti dengan kode berikut :
   

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

   Ganti kode warna biru dengan label yang ingin Anda tampilkan pada slider.
   
2. Untuk mengganti email berlangganan yang ada di bawah navigasi, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
   
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
   Keterangan :
   Warna biru : ganti dengan alamat feed anda.
   
3. Template ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, sekali lagi jangan lupa untuk centang kotak expand widget templates :
   

   <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2440873145683465163&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

   Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :
   
   
   
   
   
4. Widget popular post thumbnail, setting seperti pada gambar dibawah ini :
   
   
   
   
   Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda. Untuk lebih jelasnya silahkan baca tutorialnya disini.

Saya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

DEMO

Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :

1. Login ke Blogger dengan akun Anda
2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :
   

   .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

   .PopularPosts ul{padding:5px 0}

   .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

   .PopularPosts .item-content{position:relative;float:left;margin:0}

   .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

   .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

   .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

   .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

   Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :
   
   
   
   
   Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-thumbnail-only'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
7. Setelah ketemu, ganti dengan kode berikut ini :
   
   <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
8. Terakhir, save templates lihat hasilnya.

1. Login ke akun Google anda, kemudian kunjungi http://code.google.com/hosting/
   
   
   
2. Setelah itu klik Create a new project seperti gambar diatas, setelah muncul jendela baru isi kotak kosong seperti contoh gambar di bawah.
   
   
   
   
   
   Yang perlu anda perhatikan adalah dalam mengisi Version control system dan source code lisence, Anda harus isi seperti contoh gambar diatas. Untuk kolom lain bisa diisi terserah anda. Setelah itu klik Create project.
3. Anda sekarang sudah mempunyai akun di Google Code, langkah selanjutnya adalah menyimpan kode javascript yang sudah dibuat diatas di Google Code. Menuju ke tab 'Download' dan klik New download. Kemudian klik Browse dan pilih file javascript yang ingin diupload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.
   
   
   
   
   
4. File javascript anda sudah diupload ke Google code. Sekarang tinggal memanggilnya dan meletakkanya di template Anda. Klik file yang tadi sudah diupload, setelah itu akan terbuka jendela baru. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) atau salin alamat tautan (Chrome) seperti gambar dibawah.
   
   
   
   
   
5. Sekarang bagaimana menempatkan direct link tersebut ke dalam template? Perhatikan dua gambar di bawah ini :
   
   
   
   Sebelum disimpan di Google code
   
   
   
   Sesudah disimpan di Google code
   
   
   Perhatikan kode block biru pada kedua gambar diatas, gambar atas belum diringkas dan pada gambar bawah kode sudah diringkas dan disimpan di tempat penyimpanan Google Code menjadi seperti ini :

   <script src="http://kauman.googlecode.com/files/contoh.js" type="text/javascript"/>

   Kode script diatas adalah kode ringkasan dari contoh kode script panjang paling atas dan warna merah adalah direct link file yang kita upload di Google Code pada langkah nomer 4 diatas.
   

1. Social bookmark dan Subscriber
   Cara pasangnya masuk ke layout >> add gadget masukkan kode ini ke dalamnya :
   
   <center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
   <table><tbody><tr><td>
   <a href='http://feedburner.google.com/fb/a/mailverify?uri=Download Disini' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifKGDimitr_iqy5Vi5lkl8dvuF8ugKKKSwmJp5I2GYKfd04QSUXQhv7RDxJdRh-iGJBgtJT0pxs2TzVlFL_VZrvU9MjDHFYSyRlBmWgSLfKBZImaRZxI3Yf72GDMRQNUE-M0upP_TiO0A/s1600/mail.png" border="0" title='newsletters'/></a> </td>
   <td> <a href='http://feeds.feedburner.com/Download Disini' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimrHyALTk7nAqICSF3ekaTTH5GczgAumfzN-JZA9SxshZcThoL_eK4d_0iQHAtYI60WCI-3rHvlbaWL56n276ur8g1NDDFCdH5CPN9PJ7uid2yLWuQG5z0e3TBnjxtWSK7G3EeNBi6_W4/s1600/rss.png" border="0" title='rss'/></a> </td>
   <td> <a href='http://twitter.com/Download Disini' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_V61hrYHkdiVIQdnwGsxlIhpLoRzfZ1DOCblejoG_RogP1QG73dsmCYSQzUOnyHvgkJS6MXj22sl2Ho_tl16QhMSlFbvnX2tIMDCB6X4K3QkcM8T3HxOoUXBo3xV0kSXnY5JEfNyBaz0/s1600/twitter.png"  border="0" title='twitter'/></a> </td>
   <td> <a href='http://www.facebook.com/Download Disini' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4P9oss58IyA4Iazv7sPAXK1isPvT_v_R7YWAt18_AiC8CpTDPPs4WdgfdIeWOI83carsJCERj5hE6kQRSnsto3qY70Kg1P300fK6dUaghlujx07USAk0MvXw8Q6Mu2utWF0f0HS4rsoQ/s1600/facebook.png"  border="0" title='facebook'/></a> </td>
   <td> <a href='http://www.youtube.com/maskoli' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIyMb9-pJll297UPpe0cm4wcDNtzDviQsUiqjOLlyjP3be70cczLXFGykiom6vBbTSbph9mWjMpft9_Ayo9ByvifNb0tVr3Y-fBS86-MDbnXtnHm5wsRpQm5dD8qfQxhxBrPBTIcZVGyU/s1600/youtube.png"  border="0" title='youtube'/></a>
   </td></tr></tbody></table> </div></center>
   <center>
   <div class='sub-box'>
   <div style="text-align: left; display: inline-block;">
   <h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
   <small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/Download Disini' target='_blank' title='feedburner'>
   <b>click here</b></a>, or subscribe to receive more great content just like it.</i></small>
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Download Disini', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   <input type="hidden" value="Download Disini" name="uri"/>
   <input type="hidden" name="loc" value="fr_FR" />
   <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailtext" />
   <input type="submit" class="sub-button" value="Enter" title='' alt='' />
   </form></div></div></center>
   Ganti kata Download Disini diatas dengan ID anda masing-masing.
   
2. Template Johny Simpleblog ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, jangan lupa untuk centang kotak expand widget templates :

   <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=6168443577798831338&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

   Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :
   
   
   
   
   
3. Untuk mengganti iklan yang ada di bawah postingan (sebelah related post), masuk ke Edit HTML lalu cari kode berikut (kode ini tidak akan muncul jika anda tidak mencentang kotak expand widget templates) :
   
   <div id='banner-ads'>
   &lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
   google_ad_client = &quot;ca-pub-9608487840337104&quot;;
   google_ad_host = &quot;pub-1556223355139109&quot;;
   /* johny bingung 1 */
   google_ad_slot = &quot;3387370593&quot;;
   google_ad_width = 300;
   google_ad_height = 250;
   //--&gt;
   &lt;/script&gt;
   &lt;script type=&quot;text/javascript&quot;
   src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
   &lt;/script&gt;
   </div>
   Tulisan warna biru diatas adalah kode iklan yang ada di bawah postingan blog demo, silahkan Anda ganti dengan iklan Anda ukuran 300 x 250 px.

1. News Ticker atau headline news letaknya diatas header. Untuk mengganti dengan headline dari blog Anda masuk ke Edit HTML (gunakan control + F untuk mempersingkat), cari URL http://johny-storage.blogspot.com. Setelah ketemu ganti dengan URL blog Anda. Demikian juga dengan kotak pencarian atau search box cari URL http://johny-storage.blogspot.com ganti dengan URL blog Anda.
2. Yang kedua adalah kotak email berlangganan, letaknya persis diatas image slider. Untuk mengganti email berlangganan, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
   Keterangan :
   Warna biru : ganti dengan alamat feed anda.
   

1. Untuk menampilkan slider, masuk ke layout kemudian klik edit pada kotak HTML/Javascript. Masukkan kode berikut ini ke dalamnya :
   <div id='featuredContent'>
   <div class='sliderwrapper' id='featured-slider'>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
   </script>
   </div>
   <div id='paginate-featured-slider'>
   <ul>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
   </script>
   </ul>
   <div class='clear'></div>
   </div>
   <script type='text/javascript'>
   featuredcontentslider.init({
   id: "featured-slider", //id of main slider DIV
   contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
   toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
   nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
   revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
   enablefade: [true, 0.4], //[true/false, fadedegree]
   autorotate: [true, 5000], //[true/false, pausetime]
   onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
   //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
   //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
   }
   })
   </script>
   </div>
   Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan slider, efek mouseover dan lain-lain, tidak harus dimasukkan. Untuk lebih jelasnya Anda bisa membaca pada tutorial membuat slider tersebut disini.
2. Sekarang untuk label 1 sampai dengan label 8 seperti pada layout diatas, caranya sangat gampang. Anda tinggal ketik/masukkan label yang diinginkan ke dalam kotak tersebut. Perhatikan gambar dibawah ini :
   
   
   Keterangan :
   Ganti news dengan label Anda, dan ganti judul widget (label 1) dengan judul yang sesuai dengan label.
   
3. Sekarang kita menuju pada tabber sidebar yang terletak di sebelah kanan. Terdapat tiga tabber disitu, yaitu recent post, popular post dan comment. Untuk kolom recent post letakkan kode berikut ke dalamnya :

   <ul>
   <script>
   

   document.write("<script src=\"/feeds/posts/default?max-results="+numposts5+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");

   </script>
   </ul>

   Untuk popular post anda tinggal masuk ke layout kemudian pilih widget popular post, silahkan pilih disitu berapa post yang ingin ditampilkan. Dan untuk comment atau recent comment silahkan Anda baca tutorialnya disini. Ketiga tabber sidebar ini boleh Anda rubah sesuai keinginan, letaknya di sidebar kanan baris kedua.
4. Slider Carousel yang terdapat di atas footer bekerja secara otomatis menampilkan artikel terbaru Anda disitu. Jadi disini Anda tidak perlu merubah atau menambahkan kode script lagi, tapi jika Anda ingin menampilkan per kategori di dalam slider tersebut silahkan baca pada tutorial membuat slider Carousel tersebut disini.
5. Khusus untuk Johny Storage Dark.  membuat twitter widget masukkan kode di bawah ini pada kotak HTML/Javascript :
   
   <div style="background:#cc0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOra9RrWEDXQLTNY_T8sH6Kn0rBtiZy9GjEA3r_zctg-Ohrd2rT9nGLLegWzqSYcRoGRC1CLGmsWco2x9sqHhBnpRYijT2xIDycI4mRwivCNQfzXCQ8Hf6tDe6cRMhW6VgY6dWbNl9ck/s1600/tweet+2.png) no-repeat;padding-top:46px;padding-left:10px">
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>
   new TWTR.Widget({
   version: 2,
   type: 'profile',
   rpp: 10,
   interval: 3000,
   width: 280,
   height: 122,
   theme: {
   shell: {
   background: 'transparent',
   color: '#aeaeae'
   },
   tweets: {
   background: 'transparent',
   color: '#aeaeae',
   links: '#5193f0'
   }
   },
   features: {
   scrollbar: false,
   loop: true,
   live: true,
   hashtags: true,
   timestamp: true,
   avatars: true,
   behavior: 'default'
   }
   }).render().setUser('Download Disini').start();
   </script>
   </div>
   Ganti Download Disini dengan twitter username anda.