Trilogi Template Johny, Tiga Template Gratis Sekaligus

Hari ini saya akan berbagai template kepada teman-teman blogger semua tiga template sekaligus, dengan tiga model konten yang berbeda-beda tapi masih dalam satu kompisisi warna yang sama, yaitu putih dan biru. Sengaja saya buat tiga untuk memenuhi permintaan teman-teman blogger via email dan semoga berkenan. Ketiga template ini di bagian header dan footer hampir sama. dengan kombinasi warna biru dan putih dengan sedikit tambahan warna abu-abu untuk memperindah tampilan. Baiklah langsung saja berikut ini ketiga template tersebut :

Johny Papers Magazine

Demo | Download

Template pertama ini saya desain terutama untuk untuk blog yang memiliki konten berita, dan seperti template magazine saya yang lain tidak ada fitur static page atau halaman statis. Cara pemasangan widget-widget yang ada  pada template ini adalah :

1. Latest Post
   
   Letaknya di sebelah kiri, fitur ini otomatis, maksudnya jika anda membuat postingan terbaru maka artikel itu akan muncul otomatis pada latest post. Cara setting agar seperti dalam demo template sebagai berikut (blogger new interface) :
   Di dashboard pilih setting kemudian klik formatting and language kemudian pada timestamp format pilih hanya jam saja, karena lebar pada timestamp di latest post saya setting untuk tampilan jam (lihat demo). Untuk mengatur jumlah post yang akan ditampilkan masih pada setting, pilih post and comment >> show at most pilih berapa post yang akan ditampilkan pada kolom latest post.
2. Slider
   Untuk mengganti image pada slider, cari kode berikut :
   

   numposts1 = 7;
   label1 = "kesehatan";

   Keterangan :
   
   Angka 7 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. kesehatan adalah label atau kategori yang ditampilkan pada slider, silahkan Anda ganti dengan label yang ingin ditampilkan pada slider (Ingat hurufnya harus sama dengan label yang sudah Anda buat).
3. Label 1, label 2 dan label 3
   Letaknya di bawah banner 468 x 69 dan twitter follow. Untuk menampilkannya pada widget masukkan kode berikut pada layout >> add gadget pilih HTML/Javasxript  :
   
   <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
   
   <script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
   
   <script type="text/javascript">
   function recentpostslist(json) {
    document.write('<ul>');
    for (var i = 0; i < json.feed.entry.length; i++)
    {
       for (var j = 0; j < json.feed.entry[i].link.length; j++) {
         if (json.feed.entry[i].link[j].rel == 'alternate') {
           break;
         }
       }
   var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
   var entryTitle = json.feed.entry[i].title.$t;
   var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
    document.write(item);
    }
    document.write('</ul>');
    }
   </script>
   <script src="http://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
   <a href="http://johnyportal2.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
   Keterangan :
   
   Warna biru : adalah label atau kategori yang ditampikan pada widget. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
   Warna merah : Ganti URL dengan URL blog anda.
   
4. Label 4 dan label 5
   Masukkan kode di bawah ini :
   
   <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 = 100;
   </script>
   <script src="/feeds/posts/default/-/serba serbi?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript">
   </script>
   <a href="http://test-maskolis.blogspot.com/search/label/serba serbi" style="float:right;font:normal 10px Arial;padding:5px 0;">More on this category</a>
   Warna merah : adalah label atau kategori yang ditampikan pada widget. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
   Warna biru : Ganti URL dengan URL blog anda.
   
5. Tab view menu
   
   Letaknya pada sidebar sebelah kanan atas, Anda tinggal membuat 4 widget yang ingin dipasang otomatis akan menjadi tabber sidebar, saya sarankan untuk diberi judul pada widget tersebut.
6. Twitter Widget
   
   Untuk membuat twitter widget seperti pada demo masukkan kode di bawah ini pada kotak HTML/Javascript :
   <div style="background:#fff url(http://2.bp.blogspot.com/-CLBGzLyi1so/T1UPEFQD_oI/AAAAAAAAFuI/dTa03s7vVYg/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px">
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>
   new TWTR.Widget({
   version: 2,
   type: 'profile',
   rpp: 10,
   interval: 3000,
   width: 285,
   height: 123,
   theme: {
   shell: {
   background: 'transparent',
   color: '#000000'
   },
   tweets: {
   background: 'transparent',
   color: '#000000',
   links: '#135a9e'
   }
   },
   features: {
   scrollbar: false,
   loop: true,
   live: true,
   hashtags: true,
   timestamp: true,
   avatars: true,
   behavior: 'default'
   }
   }).render().setUser('maskolis').start();
   </script>
   </div>
   Ganti maskolis dengan twitter username anda.
   
7. Untuk mengganti iklan atau adsense yang ada di bawah postingan disamping related articles pada Edit HTML (centang expand widget templates) cari kode berikut :
   <div id="banner-ads">
   

   <script type='text/javascript'><!--

   google_ad_client = "ca-pub-9608487840337104";

   google_ad_host = "pub-1556223355139109";

   /* johny samping */

   google_ad_slot = "1127342458";

   google_ad_width = 300;

   google_ad_height = 250;

   //-->

   </script>

   <script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>

   </script>
   Ganti kode warna biru diatas dengan kode script iklan Anda.

Gallery Johny

Demo | Download

Template kedua dari trilogi template Johny ini saya beri nama Gallery Johny, sesuai dengan namanya template ini khusus untuk blog yang berisi gallery template maupun theme. Template ini juga tidak ada fitur static page (halaman statis), tidak ada fitur khusus yang terdapat pada template ini yang perlu diperhatikan adalah cara dalam membuat postingan agar seperti terlihat pada blog demo. 

1. Untuk membuat postingan pastikan Anda dalam posisi HTML (bukan compose). Di bawah ini adalah contoh dalam membuat postingan pada template Gallery Johny ini :
   
   <div align="center">
   </div>
   <div class="badge sblogger">
   </div>
   <img class="latest_img" height="250" src="http://4.bp.blogspot.com/-vAQCTVY56RQ/T1C97oUO9DI/AAAAAAAAFrY/2qFu-uMpN4k/s1600/Johny+Darkmovie.jpg" width="310" />
   <div class="fullpost">
   <ul class="postbuttons">
   <li><a class="livedemo" href="http://johny-darkmovie.blogspot.com/" rel="nofollow" target="_blank">Live Demo</a> </li>
   <li><a class="download" href="http://www.box.com/s/qjhv758fzmne8lt3xpa8" rel="nofollow" target="_blank">Download Theme</a></li>
   </ul>
   </div>
   <b>TEMPLATE FEATURES</b>
   Silahkan diisi deskripsi template atau terserah anda.........
   Perhatikan kode script yang saya beri warna diatas :
   
   Warna hijau : adalah URL gambar yang harus anda ganti. Setalah gambar anda upload masukkan URL gambar pada kode yang berwana hijau.
   Warna biru : adalah URL blog demo
   Warna merah : URL untuk download
   
2. Untuk menenampilkan widget share dan subscribe yang ada pada sidebar kanan atas, masukkan kode berikut pada kotak HTML/Javascript :
   <style type="text/css">.maskolis{width:288px;float:left;margin:0 0 2px;padding:0 5px;}
   .maskolis .count{margin:0px;padding:10px 0px 0px 0;}
   .maskolis .subicons{background: url(http://1.bp.blogspot.com/--XyTqUrypY8/T1YjUGN9ZbI/AAAAAAAAFuo/mttDGvPpcDU/s1600/batas.png) repeat-x scroll bottom;margin:0px 0 0px 0;float:left;width:288px;font-family:Helvetica, Arial;font-size:12px;}.maskolis .subicons a{text-decoration:none;color:#333333;}.maskolis .subicons a:hover{text-decoration:underline;color:#333333;}.maskolis .subicons .rssicon{background:url(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 28px;margin:0 0 0 5px;}.maskolis .subicons .googleicon{background:url(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 28px;margin:0 0 0 5px;}.maskolis .subicons .fbicon{background:url(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 28px;margin:0 0 0 5px;}.maskolis .subicons .twittericon{background:url(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 7px 0px 28px;margin:0 0 0 5px;}.maskolis .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.maskolis .emailsub .emailicon{background:url(http://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 20px 0px 50px;margin:0 5px;width:288px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.maskolis .emailsub .emailupdatesform{margin:15px 5px 5px 5px;width:288px;float:left;}.maskolis .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #afafaf;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.maskolis .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#b4c5fa,0),color-stop(#0f46fa,1));background:-webkit-linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:-moz-linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:-o-linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:-webkit-gradient(linear,left top,left bottom,from(#567dfc),to(#0f46fa));border:1px solid #1143a8;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}</style><div class="maskolis"><div class="subicons"><div class="rssicon">&nbsp;<a rel="nofollow" href="http://feeds.feedburner.com/Maskolis" target="_blank">  RSS</a></div><div class="googleicon">&nbsp;<a href="https://plus.google.com/u/0/ID GOOGLE +" rel="author" target="_blank"> G+</a></div><div class="fbicon"> &nbsp;<a href="https://www.facebook.com/URL Facebook" target="_blank" rel="nofollow">FB</a></div><div class="twittericon">&nbsp;<a href="https://www.twitter.com/TWITTER USERNAME" target="_blank" rel="nofollow">Twitter</a></div></div><div class="emailsub"><div class="emailicon"><p style=" width:250px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding-right:5px; margin:0;">If you enjoyed this article subscribe to receive more great content from us</p></div><div class="emailupdatesform"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Maskolis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="Maskolis" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form><div class="count"><a rel="nofollow" href="http://feeds.feedburner.com/Maskolis"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/Maskolis?bg=aeaeae&amp;fg=000&amp;anim=1" height="26" width="88" /></a></div></div></div> </div>
   Keterangan :
   
   Tulisan yang saya cetak dengan huruf tebal silahkan Anda ganti dengan ID dan username Anda.
   Tulisan warna merah (Maskolis) adalah ID feedburner blog demo, ganti dengan ID feedburner anda.
3. Untuk membuat popular post seperti pada demo, masuk ke layout >> add gadget kemudian pilih popular posts. Disini yang harus Anda centang hanya thumbnail, biarkan snippet kosong.

Johny Soulmater

Demo | Download

Template ketiga ini sangat sederhana, yang ada pada sidebar kanan hampir sama dengan Johny Papers Magazine. Pada tabber sidebar Anda tinggal memasukkan 4 widget pada sidebar. Untuk twitter widget cara pemasangannya sama dengan template Johny Papers Magazine diatas. Sedangkan untuk mengganti feedburner yang terdapat di bawah postingan, cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :

<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='JohnyTemplate'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' 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;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small>
</form>
</div>

Keterangan :
Warna biru : ganti dengan alamat feed anda.
Warna merah : ganti dengan URL anda.

Itu tadi tiga template yang saya share hari ini, jika ada yang kurang jelas dalam pemasangan widget silahkan tinggalkan pesan Anda pada kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat, maaf kalau template-template itu kurang berkenan karena kemampuan saya dalam membuat template masih segitu beda sama master-master blogger lain yang udah jagoan.... hehehehehehe

Sebagai referensi tambahan untuk sahabat blogger semua dalam kegiatan ngeblog bisa dibaca pada dua artikel di bawah ini :

• Cara Membuat Blog Yang Menarik
• Bagaimana Membuat Blog Yang Menarik?

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

Johny Papers Magazine
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

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

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