Johny Simple Magazine 2, Template Full Widget

Johny Simple Magazine 2, Template Full Widget

Setelah kemarin saya sudah memodifikasi template Minima menjadi Johny Simple Magazine, sekarang saya akan modif lagi agar fiturnya lebih lengkap. Banyak yang protes karena template sebelumnya tidak terdapat slide gambar di homepage, pada template ini yang saya beri nama Johny Simple Magazine 2 saya tambahkan beberapa fitur yang memungkinkan penggunanya lebih leluasa dalam meletakkan widget yang diinginkan.

Template ini saya beri nama Johny Simple Magazine 2 karena memang tampilan headernya mirip dengan seri pertama. Pada bagian homepage terdapat 5 sidebar untuk meletakkan widget yang Anda inginkan dan satu sidebar untuk iklan ukuran 650 x 80 yang terletak di bawah main wrapper. Di sidebar sebelah kanan saya menambahkan accordion sidebar dari dezinerfolio.com, untuk lebih lengkapnya silahkan lihat demonya. Pada postpage, anda tidak perlu lagi menambahkan kode related articles yang biasanya diletakkan di bawah postingan, template ini sudah menyediakan fitur tersebut dan juga kolom untuk iklan ukuran 300 x 250  disampingnya (lihat demo).

Sekarang saya akan memberikan tutorial pemasangan widget-widget yang terdapat dalam template ini :

1. Image Slider
   Letakkan kode berikut ini pada kolom diatas blog post, Add Gadget >> pilih HTML/Javascript.
   
    <!-- 1st Content -->
   <div id="gal1" style="display:none;" class="img400">
   <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyUMviS2kSVeHK3-xCgUOsGMFshrNyFG9L_PSy3ueTC8QKAilonxlWhlz4SxMtYjOdgR2LzDSdb-0HPX6i3OLxmlI8PFrzgxHauSA2MgkcX8IptSshkzCwkLVg8o3ZRxUProJLCo4QyC7g/s1600/barca-beat-madrid-in-santiago-bernabue.jpg&cat=1&pid=2107&cache=false" /></div>
   
   <div class="min250">
   <div class="bottom">
   <div class="topic">
   <a href="http://johnysimple-magazine2.blogspot.com/2011/12/real-madrid-1-3-barcelona-in-santiago.html">Real Madrid 1-3 Barcelona in Santiago Bernabéu</a>
   
   </div>
   <div class="summary">Barcelona were the comeback kings at the Santiago Bernabeu as the champions recovered from conceding within the first ...... <a href="http://johnysimple-magazine2.blogspot.com/2011/12/real-madrid-1-3-barcelona-in-santiago.html">Read Full Post</a>
   
   </div>
   </div></div>
   </div>
   
   <!-- 2st Content -->
   
   <div id="gal2" class="img400">
   <div class="h250">
   <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWVB-ULueucoW3wEE3oXsKPwjcDTREb_nxqreboQZrcZLcYh0hQo5NeCif_QxPQTUkla8jUPyxqwp1c-RrZLpQjWaAgBlY4pxxCQZeJNo2E9gKMPiewJ-EwVX_4A3P0dz2jgZF8AH9eKLm/s1600/ahmadinejad.jpg&cat=1&pid=2107&cache=false" /></div>
   
   <div class="min250">
   <div class="bottom">
   <div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2012/01/iran-ahmadinejad-to-seek-latin-american.html">Iran's Ahmadinejad to seek Latin American support</a>
   </div>
   <div class="summary">Iranian President Mahmoud Ahmadinejad will seek support from Latin America's leftist leaders on a tour starting....... <a href="http://johnysimple-magazine2.blogspot.com/2012/01/iran-ahmadinejad-to-seek-latin-american.html">Read Full Post</a>
   
   </div>
   </div></div>
   </div>
   
   <!-- 3st Content -->
   <div id="gal3" style="display:none;" class="img400">
   
   <div class="h250">
   
   <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6glLqJHpZM79mJRJV3abpmIpbUILc3vPS3wcSq1egRpWfjPL_e0O7mISgHtGd1qxbiIUqq3O7DMMKKEZd1YjIo-Uj6Pr3HCPymYRxaMekbIJHWyL52i45gMPsKrhuIflnCAi_GLDn1hHR/s1600/federer.jpg&cat=1&pid=2107&cache=false" /></div>
   <div class="min250">
   <div class="bottom">
   <div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2012/01/federer-untroubled-by-back-eases-into.html">Federer, untroubled by back, eases into second</a>
   </div>
   <div class="summary">Roger Federer showed no sign of back trouble, testing it at every opportunity, as he cruised into the second round...... <a href="http://johnysimple-magazine2.blogspot.com/2012/01/federer-untroubled-by-back-eases-into.html">Read Full Post</a>
   
   </div>
   </div></div>
   </div>
   
   <!-- 4st Content -->
   
   <div id="gal4" style="display:none;" class="img400">
   
   <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6M37REWQG2o4UeRifW93pQq1YNTz_dappe8xILCaIAAWZSwHC5jqWwSolauRYsETHQH1vGSonz8UvSJfdm11O74nmtUv22jEjyQ-D8C47ohyphenhyphent2zoXyhnvx3i2H9eKHYfi7lseKYvepji/s1600/Julian-Pavone.jpg&cat=1&pid=2107&cache=false" /></div>
   
   <div class="min250">
   <div class="bottom">
   <div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2011/12/julian-pavone-is-worlds-youngest.html">Julian Pavone is World&#8217;s Youngest Professional Drummer</a>
   </div>
   <div class="summary">Guinness World Records has recognized a U.S. boy as the youngest professional drummer. Julian Pavone was certified......<a href="http://johnysimple-magazine2.blogspot.com/2011/12/julian-pavone-is-worlds-youngest.html">Read Full Post</a>
   
   </div>
   </div></div>
   </div>
   
   <!-- 5st Content -->
   
   <div id="gal5" style="display:none;" class="img400">
   <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifn0oPzd33Sg7_-3x2zjNJ8hA6Z45V-LQsabm9vijoYgIxqvcZplNGPJ-qvTNbbiPpxCUAzel2MQTJwaasLcZGZyGAAWZq7WmIqvqHboNwZ1mzEuA1QAmoivTmJ0yTO5ipXELikwMyhV6y/s1600/nadal.jpg&cat=1&pid=2107&cache=false" /></div>
   <div class="min250">
   
   <div class="bottom">
   <div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2012/01/nadal-hits-back-over-motivation-doubts.html">Nadal hits back over motivation doubts</a>
   </div>
   <div class="summary">A combative Rafa Nadal returned serve at sceptics who have questioned his motivation at the Australian Open on Sunday ...... <a href="http://johnysimple-magazine2.blogspot.com/2012/01/nadal-hits-back-over-motivation-doubts.html">Read Full Post</a>
   </div>
   
   </div></div>
   
   </div>
   
   <!-- 6st Content -->
   <div id="gal6" style="display:none;" class="img400">
   <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3YsPmXfpqpcFYU3A-ubngeu7G8vR_pdfMN0oHLNNrABIh8VuEL2C86LU22o7WeupNHx62OJrjREyPgHvgwK8UcPMPnG6ZP4lQ5dHa2_-9gRqrB76_zhRf3LCe0niKkd6OL54ISQMienxJ/s1600/3-US-ships-in-Vietnam-to-train-with-former-foe.jpg&cat=1&pid=2107&cache=false" /></div>
   <div class="min250">
   <div class="bottom">
   <div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2011/12/3-us-ships-in-vietnam-to-train-with.html">3 US ships in Vietnam to train with former foe</a>
   
   </div>
   <div class="summary">Three U.S. Navy ships were welcomed Friday by former foe Vietnam for joint training, despite China&#8217;s irritation following...... <a href="http://johnysimple-magazine2.blogspot.com/2011/12/3-us-ships-in-vietnam-to-train-with.html">Read Full Post</a>
   </div>
   
   </div></div>
   </div>
   
   <div style="height:255px; margin-top:-255px;"><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> <a href="#" rel="gal6">6</a> </div></div><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(4000)
   </script>
   Ganti semua URL gambar dan artikel dengan url yang ingin anda tampilkan dalam slider image ini.
2. Accordion Sidebar
   Anda bisa meletakkan kode di bawah ini pada sidebar sebelah kanan atau dimanapun anda inginkan, Add Gadget >> pilih HTML/Javascript.
   
   <div id="basic-accordian" ><!--Start of accordion parent-->
   
   <!--Start 1st Content-->
   <div id="test-header" class="accordion_headings header_highlight" >Judul/Heading</div>
   <div id="test-content">
   
   <div class="accordion_child">
   -------------------- Letakkan tulisan atau kode script disini -------------------------
   
   </div>
   </div>
   <!--End 1st Content-->
   
   <!--Start 2st Content-->
   <div id="test1-header" class="accordion_headings" >Judul/Heading</div>
   
   <div id="test1-content">
   
   <div class="accordion_child">
   -------------------- Letakkan tulisan atau kode script disini -------------------------
   
   </div>
   </div>
   <!--End 2st Content-->
   
   <!--Start 3st Content-->
   <div id="test2-header" class="accordion_headings" >Judul/Heading</div>
   <div id="test2-content">
   
   <div class="accordion_child">
   -------------------- Letakkan tulisan atau kode script disini -------------------------
   
   </div>
   </div>
   
   <!--End 3st Content-->
   
   <!--Start 4st Content-->
   
   <div id="test3-header" class="accordion_headings" >Judul/Heading</div>
   <div id="test3-content">
   <div class="accordion_child">
   -------------------- Letakkan tulisan atau kode script disini -------------------------
   
   <a href="#" style="float:right;font:normal 10px Arial;padding:5px 0;">More Article &#187;</a>
   </div>
   
   </div>
   <!--End 4st Content-->
   
   <!--Start 5st Content-->
   <div id="test5-header" class="accordion_headings" >Judul/Heading</div>
   
   <div id="test5-content">
   <div class="accordion_child">
   -------------------- Letakkan tulisan atau kode script disini -------------------------
   
   <a href="#" style="float:right;font:normal 10px Arial;padding:5px 0;">More Article &#187;</a>
   
   </div>
   
   </div>
   
   <!--End 5st Content-->
   
   <!--Start 6st Content-->
   
   <div id="test6-header" class="accordion_headings" >Judul/Heading</div>
   <div id="test6-content">
   <div class="accordion_child">
   -------------------- Letakkan tulisan atau kode script disini -------------------------
   
   <a href="#" style="float:right;font:normal 10px Arial;padding:5px 0;">More Article &#187;</a>
   </div>
   
   </div>
   <!--End 6st Content-->
   
   <!--End of accordion parent--></div>
3. Membuat Kategori dengan Thumbnail (Category with Thumbnail)
   Masukkan kode di bawah ini pada sidebar yang anda inginkan :
   
   
   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.

Untuk bagian yang lain saya kira sangat mudah, anda bisa berkreasi sendiri sesuaikan dengan kebutuhan dan isi atau konten blog anda, jika masih ada yang kurang paham, silahkan isi kotak komentar. Di bawah ini saya sudah siapkan link untuk Anda bagi yang ingin melihat demo dan bagi yang tertarik untuk mencoba template ini silahkan di download gratissssssss....... untuk membuat slider otomatis baca Membuat Image Slider Berdasarkan Kategori Tertentu

Read this :
Johny Portal 2, Elegan Template for Your Site
Johny Magazine 2, Darkmatter templates for your site
Johny Darkgamer, Template Gamer Mania

Updates :

Karena sesuatu hal, tempat penyimpanan saya di google code tidak bisa dibuka. Oleh karena itu news ticker dan sidebar accordion tidak bisa berjalan seperti semula. Untuk mengatasinya Anda harus mengganti kode berikut ini pada posisi edit HTML :

1. Sidebar accordion
   Cari kode di bawah ini :
   

   <script src='http://maskolis.googlecode.com/files/johny-manis.js' type='text/javascript'/>

   Ganti dengan kode berikut :
   

   <script src='http://johnytemplate.googlecode.com/files/johnysimple.js' type='text/javascript'/>

2. News ticker
   Cari kode di bawah ini :
   

   <script src='http://maskolis.googlecode.com/files/ticker.js' type='text/javascript'/>

   dan Anda ganti dengan kode berikut :
   

   <script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>

3. Related Articles (Bawah postingan)
   Jika hilang atau tidak muncul cari URL javascript ini pada posisi Edit HTML
   

   http://maskolis.googlecode.com/files/relateds.js

   dan Anda ganti dengan URL di bawah ini :
   

   http://jamu-martin.googlecode.com/files/related-martin.js

Terakhir save templates

Note : If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger

Demo | Download