Johny Darkgamer, Template Untuk Gamer Mania

Bagi teman-teman yang suka dengan game, kali ini saya menyediakan satu lagi template untuk para gamer mania. Template ini saya beri nama Johny Darkgamer, sesuai dengan warnanya yang hitam dan hanya sedikit warna kuning orange sekedar memperindah tampilan. Fitur template ini sangat sederhana, di bawah header saya meletakkan slider carousel dan di sidebar terdapat tabber yang tinggal memasang empat widget yang ingin ditampilkan disana.

Berikut ini screenshot tampilan dari template Johny Darkgamer (klik untuk memperbesar gambar) :
Home Page

johny darkgamer

Postpage

johny darkgamer

Fitur yang terdapat pada template ini  :
  1. Slider Carousel, untuk mengganti dengan gambar dan URL anda tinggal cari kode di bawah ini :
    <a href="http://creatingwebsite-maskolis.blogspot.com/" title="God of War: Ghost of Sparta Review"><img alt="God of War: Ghost of Sparta Review" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqVVv6ECU-_uPA0zDk5MOqzPe_UYO0U104Wzm2sZuJXWXILkGP8jsVcXAAvEJh48gI54tBaO5ZWtJfoKeS74kLAbUMOcQij0mpN6e1z7_SpjkdedqMW46Z9Y38umAd4CCsdfs_kAWyU7c/s1600/index8.jpg" width="143" /></a>
    <h2 class="titleg"><a href="http://creatingwebsite-maskolis.blogspot.com/" rel="bookmark" title="Permanent Link to God of War: Ghost of Sparta Review">God of War: Ghost of Sparta Review</a></h2>
    Keterangan :
    -  Warna merah : URL post
    -  Warna kuning : URL gambar
    -  Warna biru : Keterangan dan judul gambar
  2. SEO friendly, Anda tinggal memasukkan meta tag yang sudah saya sediakan di bawah kode<head>
  3. Tabber sidebar, Anda tinggal memasukkan empat widget yang otomatis akan menjadi tabber sidebar
  4. Menu navigasi dropdown dengan sub menu transparan
  5. Breadcrumb ready
  6. Sharing artikel via FB, twitter dan Google+ yang juga sudah ada di bawah tiap postingan
  7. Twitter follower count di bawah navigasi kedua
  8. Dan tentunya kolom untuk pemasangan iklan bagi Anda yang ingin memonetisasi blog
Template ini tidak hanya untuk kontent game saja, tetapi juga dapat Anda isi dengan kontent lainnya, seperti berita, tutorial, atupun untuk toko online juga bisa terserah Anda mau diisi apa. Di bawah ini sudah saya siapkan link demo bagi yang ingin melihat secara langsung, juga tidak lupa link download bagi Anda yang mau mencobanya. Jika masih ada yang mau ditanyakan, isi kotak komentar yang ada di bawah, sekian dan semoga bermanfaat. Happy blogging...... untuk membuat slider otomatis baca Membuat Image Slider Berdasarkan Kategori Tertentu

UPDATE TEMPLATE :
Karena tempat penyimpanan google code saya kena banned sama google, kode script yang disimpan disitu tidak bisa dibuka semua sehingga slider carousel Johny Dargamer template tidak jalan, untuk mengatasinya cari kode di bawah ini pada posisi Edit HTML (diatas </head>) :
<script src='http://creatingwebsite.googlecode.com/files/ikansuper.js' type='text/javascript'/>
<script src='http://creatingwebsite.googlecode.com/files/muter-muter.js' type='text/javascript'/>
Setelah ketemu ganti kode tersebut dengan kode script di bawah ini :
<script src='http://jamu-martin.googlecode.com/files/jfish.js' type='text/javascript'/>
<script src='http://jamu-martin.googlecode.com/files/superfish.js' type='text/javascript'/>
Kemudian save templates
, jika ada yang kesulitan dalam memasang template silhkan di download ulang sudah saya perbaiki templatesnya.

Baca juga :


Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript
Label:

Johny Magazine 2, Darkmatter Template For Your Site

Karena keterbatasan koneksi internet saya akan persingkat saja artikel kali ini. Bagi yang suka dengan warna gelap terutama hitam, saya menyediakan satu lagi template untuk anda. Template ini saya kasih nama Johny Magazine 2, Darkmatter Template For Your Site. Sesuai dengan namanya template ini lanjutan dari versi pertama Johny Magzine pada versi sebelumnya hanya bagian header dan footer saja yang hitam, tapi yang versi kali ini bagian post body semua hitam (siapa takut....?)

Template ini dibuat terinspirasi dari template Joomla Darkmatter dari RocketTheme, langsung saja di bawah ini screenshotnya, lebih lengkapnya Anda bisa langsung klik Demo yang ada di bagian bawah.

johny magazine 2

Jika Anda tertarik menggunakan template ini, semuanya sudah saya sertakan pada file zip yang akan Anda download, mulai dari slider, sidebar accordion, kotak advertise dan label atau category semua sudah ada. Anda tinggal memasukkan ke dalam widget tapi jangan lupa ganti semua URL-nya dengan URL anda sendiri.

Untuk Flash News yang terdapat pada navigasi atas silahkan membuat sendiri, yaitu masuk ke http://www.rsspump.com/ masukkan URL feed blog anda, setelah itu copy kodenya letakkan di bawah kode ini (letakkan pada titik-titik) :
<div class='toppic'>
<div class='topnav'>
<div style='float:left;padding:9px 0px;'>
...........................................................
...........................................................
Oiya satu lagi hampir lupa, template ini sengaja tidak saya tambahkan kotak pencari. Jadi Anda mesti membuat sendiri terserah mau diletakkan dimana atau bisa juga ambil dari bawaan blogspot, saya kira itu sangat mudah. Dan bagi yang masih sering menggunakan static page template ini sudah saya modifikasi sehingga static page dapat muncul seperti post page (klik sample page yang ada di navigasi).

Lebih lengkapnya silahkan langsung saja lihat demonya. Bagi yang tertarik silahkan download template ini yang sudah saya sertakan kode script yang harus dipasang di sidebar tengah maupun sidebar kanan. Sekian dulu ya, sudah mulai lemot ini jaringan gara-gara anginnya kenceng banget mas/mbak yang baik-baik, selamat mencoba dan semoga bermanfaat.

NB :
Saya sebenernya juga membuat Johny Magazine 2 ini dalam versi light tanpa static page dengan menambahkan slider Yahoo dan sharing social bookmark dari Mashable. Yah ini hanya sekedar sharing template saja ya daripada tidak terpakai, kalau ada yang tertarik silahkan lihat demonya disini dan kalau ada yang mau memakai template ini silahkan download disini. (Jika ada yang ditanyakan khusus untuk Johny Magazine 2 Light tinggalkan email anda, nanti akan saya kirim script lengkap untuk pemasangan widgetnya)

Wah ternyata banyak juga yang berminat dengan template Johny Magazine 2 versi light ini, baiklah daripada saya kirim ke email teman-teman satu per satu berikut ini saya kasih link untuk download langsung script untuk pemasangan widgetnya. Jangan lupa jika anda sudah download ganti URL nya dengan URL Anda sendiri. Ini link downloadnya Script Widget

johny magazine 2 light

Updates :
Karena sesuatu hal, tempat penyimpanan saya di google code tidak bisa dibuka. Oleh karena itu news ticker (Johny Magazine 2 Light) dan sidebar accordion (johny Magazine 2) 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. Khusus untuk pengguna Johny Magazine 2 Light jika slider Yahoo tidak bisa jalan anda cari URL javascript berikut ini pada posisi Edit HTML :
    http://maskolis.googlecode.com/files/jquery.min.js
    Dan Anda harus menggantinya dengan URL di bawah ini
    http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
Terakhir save templates

Read this : Johny Darkgamer, Template Gamer Mania

Label:

Remove Automatic Readmore at Static Page Blogger

There's some questions in my box comment and in my email tells that static page in my every templates didn't work well. Okay, I will give you some reasons, because most Blogger template that I created or modified still using the old version of "automatic readmore" feature. So, if you're using my blogger templates than you need to edit the template manually to remove read more option from the static pages. You need to follow the instructions below to remove automatic read more from blogger static pages.
  1. Login to blogger with your account
  2. Go to the dashboard >> Design >> Edit HTML
  3. Checklist Expand Templates Widget box
  4. Don't forget to backup/download your template first
  5. Find this code below, or Press Ctrl+F and search this codes
    <div class='post-body entry-content'>
  6. Then you must add  this code below that codes.
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
    <data:post.body/>
    <b:else/>
  7. It must be look like this
    <div class='post-body entry-content'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
    <data:post.body/>
    <b:else/>
  8. Next step find this codes (Press Ctrl+F and reach this codes)
    <div style='clear: both;'/> <!-- clear for photos floats -->
  9. And then add this code above that codes
    </b:if>
  10. Save your work and it's done.
Static page should already appear on your blog, and if you want a static page as width as your postpage, add this codes after this code ]]></b:skin>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#midle-wrapper, .thumb img, #blog-pager{display:none}
.post{border:1px solid $bordercolor;margin:.1em 0 .5em;padding:10px 15px}
.post h3{font-family:Georgia, Times, Serif;font-size:180%;font-weight:700;line-height:1.2em;color:$titlecolor;margin:.25em 0 0;padding:0 0 4px}
.post h3 a,.post h3 a:visited,.post h3 strong{display:block;text-decoration:none;color:$titlecolor;font-weight:700}
.post h3 strong,.post h3 a:hover{color:$textcolor}
.post-body{border-top:2px solid #bbb;padding-top:6px;line-height:1.4em;margin:3.1em 0 .75em}
#main-wrapper{padding-left:20px;width:610px;float:$startSide;word-wrap:break-word;overflow:hidden}
</style>
</b:if>
Then save your template, or you can change with your own code to adjust the width of the static page, every template has a different case, so you can customize it by yourself. That's all friends, the instruction how to remove automatic readmore at static page. Happy blogging and new year...

Note :
This tutorial it can be used if only the templates has read more feature (Johny Simple Magazine and Creating Website)

Sompretttttt..... bener nggak ya bahasa Inggrisku, susah banget nulis Inggris.. hahahahaha
Label:

Johny Simple Magazine, Easy Magazine Template For Your Site

Buat temen-temen yang ingin template magazine sederhana modifikasi dari bang Johny, kali ini dia menawarkan template yang simple tapi banyak sekali fungsinya. Namanya Johny Simple Magazine sebuah template modifikasi yang di desain khusus bagi anda yang mempunyai blog konten berita, sederhana dan tidak terlalu rumit. Template ini dibuat terinspirasi oleh tampilan dari situs wordpress hack, tapi banyak sekali bagian yang berbeda. Walaupun bagian header memang dibuat mirip tapi bagian homepage dan postpage sama sekali berbeda. Di bawah ini screenshotnya (klik gambar untuk memperbesar) :

johny simple magazine

Seperti desain yang sebelumnya, bang Johny membagi 3 kolom di bagian homepage dan hanya 2 kolom pada postpage. Desainnya sangat sederhana tidak terlalu susah cara pemasangan widget, paling cuma pada bagian midlebar atau tengah untuk membuat kategori tertentu dengan thumbnail, cara pemasangannya sudah saya jelaskan pada tutorial widget template johny magazine, yaitu dengan memasukan kode di bawah ini dan ganti teks background biru (entertainment) dengan label atau kategori yang ingin anda tampilkan.
<script type="text/javascript">
var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;
</script>
<script src="/feeds/posts/default/-/entertainment?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript">
</script>
Pada bagian sidebar terdapat 4 buah iklan berukuran 125 x 125, anda tinggal masukkan kode di bawah ini pada kotak HTML/Javascript. 
<div id="advertise">
<ul class="ads">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwDGirA8vwasmWU6qAORsHpJkkQxjOphd_ZJkZUiuI7BjM8ICLHd8RDNTi-Ik-jB3N1FKvnyJaplEvsrmsPYOMz3n3hZVs73meWzuxnfGo_Dfv3d7Ppnt2YN0bGKKimp2gDMENte_fSmV/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>

<li class="last"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwDGirA8vwasmWU6qAORsHpJkkQxjOphd_ZJkZUiuI7BjM8ICLHd8RDNTi-Ik-jB3N1FKvnyJaplEvsrmsPYOMz3n3hZVs73meWzuxnfGo_Dfv3d7Ppnt2YN0bGKKimp2gDMENte_fSmV/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwDGirA8vwasmWU6qAORsHpJkkQxjOphd_ZJkZUiuI7BjM8ICLHd8RDNTi-Ik-jB3N1FKvnyJaplEvsrmsPYOMz3n3hZVs73meWzuxnfGo_Dfv3d7Ppnt2YN0bGKKimp2gDMENte_fSmV/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
<li class="last"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwDGirA8vwasmWU6qAORsHpJkkQxjOphd_ZJkZUiuI7BjM8ICLHd8RDNTi-Ik-jB3N1FKvnyJaplEvsrmsPYOMz3n3hZVs73meWzuxnfGo_Dfv3d7Ppnt2YN0bGKKimp2gDMENte_fSmV/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
       
</ul>
<div class="clear"></div>
</div>

Untuk kotak berlangganan feedburner yang tedapat di sidebar kanan atas dibuat statis kalau anda ingin mengedit tulisannya, harus masuk ke design kemudian pilih edit HTML. Anda tinggal cari kata kunci Enews kemudian cari dengan control + F untuk memudahkannya. Kalau sudah ketemu anda tinggal ganti kalimatnya, jangan lupa URL feedburner juga harus diganti dengan URL feed anda.

Untuk bagian lain terserah Anda untuk memodifikasinya sendiri, jika anda ingin melihat secara keseluruhan dari template ini klik demo yang ada di bawah. Anda juga bisa mendownloadnya secara gratis, selamat mencoba dan berkreasi dengan template buatan bang Johny semoga bermanfaat. Jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah atau kirim langsung ke email bang Johny johnytemplate@gmail.com.

Note :
  1. If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger or re-download it then you can upload the updates one (only for Creating Website and Johny Simple Magazine templates).
  2. And for Johny Portal, Creating Website and Johny Magazine user template, change this code (post body close to the header):
    #crosscol-wrapper{margin:0 auto;padding:0 auto}
    Into :
    #crosscol-wrapper{margin:0 auto;padding:5px}

Label:

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 :
johny magazine
  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 :
    <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
  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 :
    <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.
  4. 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 :

    tabber maskolis

    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 :

    tabber kanan maskolis

    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>
  5. 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.
Label:

Johny Magazine, Template Magazine untuk Blog Berita

Satu lagi template hasil utak-atik saya dari template luar biasa yang bernama Minima. Walaupun sederhana ternyata template ini bisa dengan mudah dimodifikasi sehingga menjadi template yang multifungsi. Template yang saya buat eh maaf yang saya modifikasi ini saya beri nama Johny Magazine, karena memang tampilan pada homepage penuh dengan artikel-artikel inti dari keseluruhan konten dari sebuah blog.

Untuk para master blogger sebelumnya saya minta maaf, bukannya saya sok pintar karena sudah berhasil memodifikasi template sederhana menjadi template yang multi fungsi ini, karena saya baru proses belajar membuat template jadi kalau ada kode-kode atau script yang kurang berguna dan semestinya tidak dipakai mohon sarannya ya...

Template Johny Magazine ini mempunyai 3 kolom di hompage, kolom pertama terdapat slider content di bagian paling atas, walaupun ukurannya kecil tapi cukup untuk mempercatik tampilan. Artikel-artikel terbaru saya letakkan di tengah atau pada kolom kedua dan di bawahnya saya tambah satu lagi widget yang terserah nanti mau diisi apa. Pada kolom ketiga atau sebelah kanan saya bagi menjadi dua baris, pada baris pertama bagian atas terdapat sidebar tabber yang hanya saya munculkan pada homepage saja. Untuk lebih jelasnya lihat screenshot bagian header dan footer (klik gambar untuk memperbesar).

Bagian Header


Bagian Footer


Pada postpage atau halaman postingan terdapat dua kolom, sengaja memang tidak ditambahkan apa-apa paling cuma fitur kotak komentar yang lebih menarik itu saja. Kalau ada yang menambahkan dengan related post bisa juga diletakkan di bawah postingan atau di sidebar kanan. Pada bagian footer, nah ini kelemahan saya, saya kurang bisa memodifikasi dengan sentuhan warna-warna yang memukau paling cuma modifikasi gambar dari internet pakai photoshop sederhana.

Langsung saja daripada berbusa-busa ngomong nggak karuan di bawah ini ada link demo untuk melihat lebih jelas tentang Johny Magazine template ini, dan yang pasti saya sertakan juga link downloadnya siapa tahu ada temen-temen yang tertarik untuk memakainya paling tidak ada perasaan bangga juga sih template hasil utak-atik sendiri dipakai sama orang lain.... hehehehehe. Jangan lupa lihat juga template hasil modifikasi saya yang lain Johny Portal atau template Creating Website modifikasi. Untuk tutorial lengkap Johny Magazine template ini silahkan baca Tutorial Widget Johny Magazine Template.

UPDATES :

Jika ada yang menginginkan slider template ini bekerja secara otomatis, templates ini sudah saya updates dan bisa di download ulang disini. Untuk menampilkan postingan pada slider, Anda hanya mencari kode berikut label1 = "misteri", misteri adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan. Untuk lebih jelasnya bisa dibaca pada artikel Membuat Image Slider Berdasarkan Kategori Tertentu.

Updates :
Karena sesuatu hal, tempat penyimpanan saya di google code tidak bisa dibuka. Oleh karena itu news ticker pada template ini tidak bisa berjalan seperti semula. Untuk mengatasinya Anda harus mengganti kode berikut ini pada posisi edit HTML, kemudian 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'/>

Terakhir save templates

Note :
  1. If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger 
  2. And for Johny Portal, Creating Website and Johny Magazine user template, change this code (post body close to the header):
    #crosscol-wrapper{margin:0 auto;padding:0 auto}
    Into :
    #crosscol-wrapper{margin:0 auto;padding:5px}

Label:

Template Creating Website Modifikasi

Berawal dari seorang sahabat Maspena kalau nggak salah namanya, dia menanyakan template yang saya pakai dan boleh minta nggak? Tentu saja boleh, disini saya ingin berbagi tapi sabar dulu ya, saya lagi memodifikasi template tersebut sehingga cocok dipasang untuk blog dengan konten apapun. Template blog ini aslinya adalah techstop. Tapi menurut saya template ini kurang fleksibel karena hanya bisa digunakan untuk blog dengan konten tutorial atau semacam catatan harian. Sehingga banyak sekali bagian yang mesti dimodifikasi.

Untuk itu saya mencoba mencari template yang simple saja untuk memodifikasi template yang mirip dengan yang saya pakai sekarang ini. Template Creating Website Modifikasi yang sudah jadi sekarang ini awalnya adalah template Minima dengan dua kolom, kemudian saya bagi menjadi 3 kolom di bagian homepage, dan hanya 2 kolom di bagian post dan page. Tujuan saya membagi menjadi 3 kolom di homepage agar lebih fleksibel, jadi bisa juga dipakai temen-temen yang mempunyai blog dengan konten berita misalnya. Berikut ini screenshot bagian homepage dan postpage (klik gambar untuk memperbesar) :

homepage creating website

postpage creating website

Ada beberapa perbedaan tampilan template ini dengan yang saya pakai, selain bagian homepage, kotak berlangganan feedburner juga saya rubah sehingga  sekarang mejadi satu bagian dengan fitur related post. Jadi lebih memberikan ruang kosong di bagian sidebar. Untuk bagian sidebar lebar, sengaja di bagian bawah tidak saya bagi lagi menjadi dua karena sudah saya sediakan sidebar kecil di bagian homepage.

Oke sekarang saya akan berikan beberapa kode yang mesti dipasang di bagian sidebar sehingga tampilannya mirip dengan blog yang saya pakai sekarang ini :
  1. Translate gambar bendera (sidebar lebar atas)
    Sebenernya tutorialnya sudah banyak beredar di internet, tapi daripada anda susah-susah nyarinya langsung saja saya berikan kode scriptnya untuk dipasang :
    <style>
    .google_translate img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border:0;
    }
    .google_translate:hover img {
    filter:alpha(opacity=30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;
    }
    .google_translatextra:hover img {
    filter:alpha(opacity=0.30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;
    }
    </style>
    <div>
    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy8qgIMUewN7Fdh3_pjzSEs15AAyMEE2LKsZklyELw3b_fJnI9eyN5ZaD4DGCgsM2_GHhKXcWyEx9zxpUB9gBxsNKTZXCYapaSXho6RoF9rGPRSqJyIkqjs9PMX0W0cciAP9GitFGuxe0/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="French"><img align="absbottom" alt="French" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28EjuTseuo7L3RPLKDqFYPm_VILCCzUY9Kd7FtK-nFSuG5tw4ownm8-aj7zZhlPzRL5EHtkp4lvm1ZGpCQ9t2BlXUAz6qpCN1jJj5gDtl-YDHhptG-HNVo_bvuxVjSRhclfi5qps3Bxc/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="French" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYYlijYFOYTZrsBwyZtUqOCRKwOubA69-0ZJT0OyGAZzwTxZBCxaX6cDzZMzz-0G15Ti2M3Ro2cZQAG9chMv0a4dgJ10KDihMoOe1_LYP12b3jnsP06s-06tXn_9AEU-fLcUVIH7YEhnlN/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRwCoo_FB8EKB69KX0QmBBdMtAL9udXaRmwI8sS2GmASqTF36jNk5IqUVF-dwKm9EabTjgUK-LCR-3_CuD6bmortcswhU2qBN4lXso4QknFUAttGxcGwOi0SsdsCXXjAgB5oaRYPQlLA/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe_owMyyrihwk_EONRs9Kr1kzlLGKeehlzx-VgNCHZgvTIatyRvb3xMWp9dMtJSHk1z7X8MmDLwMIeokBhi-Cob20IJ67pkooe9vRVG_gb13YVBQUsBfXSs98qZTYuq905YWQK5wxMI4U/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCQyMJYqyVgvKWAi6pYvgiNuneAqtWqOEbbhUTH-LHNl4nJAIBtlWUQRbM3kTday_c4-qIwLLXkWk1tHus9P0PjAGOsM0AbHh4XYePoUki1oKIdcZM571E_Tz3pCxOZRzFcHuBb_XuVmdV/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJBZPDqY_UlCWQBMDEnS6G3unlvXT72w_EpI3i0qmHaOuyBtifKqq9pSSyTLqYdotk9-rol2ErvvxnXM8UhWSH-V9IrXHX9_z1tlAN1ISKHgU3DWxPNU8McDeU0I1i3WejO7q-J9srG4E/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvyXqzZtfgOZwRxr1VRA-t0Ur8cbnGH08IJj2p_RWrcLvuuQ37KOno7xVUWOpKBJ0P7xYRCKidtcomxSMnfobTcWzVarFRK8rGlimiy9XVt_HLTevqneYrGdN5IC9UGrlywoFagOOD5D0/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="24" /></a></div>
  2. Tab View
    Pada bagian ini, tab view yang saya pakai masih manual, sekarang sudah banyak cara membuat tab view yang lebih gampang misalnya dengan menambah sentuhan jQuery. Tapi nggak ada salahnya jika kode script yang saya pakai di blog ini saya bagikan kepada anda (Untuk lebih jelasnya bisa dibaca pada tutorial membuat tab view):
    <style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 92px;
    height: 22px;
    text-align: center;
    margin: 5px 0px 0px 3px;
    background-color:#999999;
    padding-top: 6px;
    border: 1px solid #ffffff;
    border-bottom: 1px solid #ccc;
    font-family: "Arial, Helvetica, sans-serif", Arial;
    font-weight: 900;

    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #444343; }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc;
    overflow: hidden;
    background-color: #F2F2F2;
    }
    div.TabView div.Pages div.Page
    {
    padding: 2px;
    height: 100%;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    .list {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkA9POJnXDbNGlRk6ddQMrbV5srvy4GltOzXqTyeIj-KpjeDvGY_Mhzrzor4LHuPHPwLeSayiV6JGoWrdVw-CLe3gbj6JZzSl6RyQjOmXH3i9DxT5dhwhVhe5t_OAzqoLH1LRuq3kmiqkI/") no-repeat left center;
    border-bottom:1px dotted #7f7f7f;
    line-height:1.5em;
    padding:3px 0px 3px 20px;
    }
    </style>

    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 298px;">
    <a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Tutorial Blog</span></a>
    <a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Wordpress</span></a>
    <a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Joomla</span></a></div>
    <div class="Pages" style="height: 200px; width: 298px;">

    <div class="Page">
    <div class="Pad">
    <div class="list">
    <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
    <div class="list">
    <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
    <div class="list">
    dan seterusnya ............................................................... </div>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    <div class="list">
    <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
    <div class="list">
    <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
    <div class="list">
    dan seterusnya ............................................................... </div>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    <div class="list">
    <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
    <div class="list">
    <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
    <div class="list">
    dan seterusnya ............................................................... </div>
    </div>
    </div>
    </div>
    </div>
    </form>

    <script src="http://johnytemplate.googlecode.com/files/tab_view.js">
    </script>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
  3. Artikel Terbaru
    Kode script yang dipasang :
    <div style="background: none repeat scroll 0% 0% rgb(242, 242, 242); border: 1px solid rgb(204, 204, 204); height: 200px; overflow: auto; padding: 10px;">
    <span id="pbl_labels"></span>
    <div id="pbl_posts">
    Recent Posts </div>

    <script type="text/javascript">
    var jumlah_maksimum_post = 10;
    var dengan_ringkasan = true;
    var jumlah_karakter_ringkasan = 100;
    </script>

    <script src="http://kauman.googlecode.com/files/recentpostsbylabel.js">
    </script>

    <script src="http://creatingwebsite-maskolis.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed">
    </script></div>
    Di bagian paling bawah, ganti URL nya dengan URL blog anda
  4. Untuk membuat huruf awal dalam postingan menjadi besar seperti dalam postingan ini sangat mudah, silahkan baca tutorialnya tentang Membuat Huruf Besar (Drop Cap) pada Awal Postingan.
Sepertinya hanya itu yang mesti dipasang agar mirip dengan blog yang saya pakai ini, untuk bagian lain Anda bisa berkreasi sendiri atau memodifikasi sendiri sesuai dengan selera.  Wah iya hampir lupa di bawah ini saya sertakan link dimana anda bisa melihat demo dan bisa mendownloadnya secara gratis.

NB :
  • Buat yang menginginkan tampilan template ini dua kolom seperti yang saya pakai, silahkan menuju link ini.
  • Setelah anda download dan filenya diekstrak, terdapat dua file xml yang satu dengan menggunakan show/hide comment dan satu lagi tanpa show/hide comment
  • Jika ada masalah dengan link downloadnya bisa tanyakan ke kotak komentar atau konfirmasi ke johnytemplate@gmail.com.
  • Untuk tutorial Johny Portal masih dalam perbaikan, jadi mohon untuk bersabar
Note :
  1. If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger or re-download it then you can upload the updates one (only for Creating Website and Johny Simple Magazine templates).
  2. And for Johny Portal, Creating Website and Johny Magazine user template, change this code (post body close to the header):
    #crosscol-wrapper{margin:0 auto;padding:0 auto}
    Into :
    #crosscol-wrapper{margin:0 auto;padding:5px}

Label:
Langganan: Postingan (Atom)