News Update :
Blog ini doFollow Loh !

Inilah Dua Template Johny Asal Jadi

Judulnya keren ya, Dua Template Asal Jadi, ya inilah dua template yang saya buat sambil sedikit pusing karena banyaknya kerjaan. Yang pertama namanya Johny Backup, saya juga tidak tahu dapat nama ini darimana tapi yang jelas template ini terinspirasi dari tampilan template Joomla Sportapolis yang dibuat pada tahun 2009 oleh shape5.com. Template yang kedua Johny Bingung, bingung karena mau dikasih nama apa. Kedua template ini seperti biasa dilengkapi dengan slider otomatis, anda tidak perlu lagi memasukkan satu-persatu URL dan keterangan post ke dalamnya. Dan tentu saja saya bagikan secara cuma-cuma kepada teman-teman blogger semua, sekalian buat melengkapi koleksi template Anda. 

Johny Backup

johny backup


Template ini seperti dijelaskan diatas, tampilannya hampir sama dengan template Joomla Sportapolis, tapi lebih sederhana karena banyak fitur yang saya kurangi karena keterbatasan saya dalam mengolah sebuah template. Untuk pemasangan widgetnya pertama anda harus perhatikan struktur layoutnya seperti gambar berikut :


Perhatikan keempat angka diatas, berikut cara pengisiannya :
  1. Kolom widget nomer 1, adalah slider. Masukkan kode berikut ini ke dalamnya :
    <div id='featured'>
    <ul class="ui-tabs-nav">
    <script>
    document.write("<script src=\"/feeds/posts/default/-/play station?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
    </script>
    </ul>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/play station?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
    </script>
    </div>
    Keterangan :
    Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti dengan label Anda.
  2. Kolom widget nomer 2, adalah label category otomatis di sebelah slider. Anda tinggal memasukkan/ketik label anda pada kotak tersebut, seperti gambar dibawah ini :

    Dari gambar diatas hot games adalah label yang saya masukkan ke dalam widget tersebut, silahkan Anda ganti dengan label Anda.
  3. Widget nomer 3 dan 4, adalah widget category thumbnail biasa yang masih semi otomatis. Saya buat demikian agar tampilannya agak berbeda dan tidak monoton. Untuk menampilkannya masukkan kode dibawah ini pada kotak HTML/Javascript nomer 3 dan 4 :
    <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/-/play station?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    <script type="text/javascript">
    function recentpostslist(json) {
     document.write('<ul>');
     for (var i = 1; i < json.feed.entry.length; i++)
     {
        for (var j = 1; 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://johny-backup.blogspot.com/feeds/posts/summary/-/play station?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
    <a href="http://johny-backup.blogspot.com/search/label/play station" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
    Keterangan :
    Warna merah : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
    Warna biru : Ganti URL dengan URL blog anda.
  4. 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.
  5. Untuk mengganti iklan yang ada di bawah postingan, masuk ke Edit HTML lalu cari kode berikut (kode ini tidak akan muncul jika anda tidak mencentang kotak expand widget templates) :
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='font:normal 12px Georgia;font-style:Italic;padding:8px 10px 8px 70px;font-weight:normal;color:#333;margin-top:10px;'>
    &lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
    google_ad_client = &quot;ca-pub-9608487840337104&quot;;
    google_ad_host = &quot;pub-1556223355139109&quot;;
    /* jamumartin */
    google_ad_slot = &quot;9319314062&quot;;
    google_ad_width = 468;
    google_ad_height = 60;
    //--&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>
    </b:if>
    Tulisan warna biru diatas adalah kode iklan yang ada di bawah postingan blog demo, silahkan Anda ganti dengan iklan Anda ukuran 468 x 60 px.
Johny Bingung

johny bingung


Template ini saya desain khususnya untuk konten review film atau game, tapi Anda bisa juga memakainya untuk konten lain. Template sama namanya nggak nyambung blasss..... Namanya juga orang bingung jadi ya terserah mau dikasih nama apa... hehehehehe. Untuk pemasangan widget perhatikan layout template ini seperti gambar di bawah :

  1. Pada template ini hanya ada tiga widget yang perlu diperhatikan, widget nomer satu adalah slider atau di layout namanya Featured content slider. Cara pemasangannya anda tinggal memasukkan atau ketik label yang ingin ditampilkan, seperti pada nomer 2 diatas :

    Label yang saya masukkan disini adalah review, silahkan diganti dengan label anda sendiri.
  2. Untuk widget nomer 2 dan 3, cara pemasangannya sama dengan langkah nomer 3 pada template Johny Backup diatas. Demikian juga untuk mengganti email berlangganan, sama seperti langkah nomer 4 diatas.
  3. Karena 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=4900105838884725772&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. 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.

Itu tadi dua template asal jadi yang saya bagikan kepada teman-teman blogger pada pagi hari ini, mohon maaf sebelumnya kalau tidak begitu menarik, Jika ada pertanyaan silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga bermanfaat.

Dua Template Gratis dengan Slider Otomatis

Malam ini saya akan sharing lagi dua template gratis serba otomatis, maksudnya anda tidak perlu lagi susah-susah untuk memasukkan kode script ke dalam kotak HTML/Javascript tinggal ketik label di dalam kotak HTML/Javascript maka slider dan label per kategori akan muncul disana. Sebenarnya template ini hanya modifikasi template yang sudah ada, karena banyak yang meminta slidernya dibuat otomatis, saya utak-atik kembali templatenya biar jadi lebih gampang buat pengguna dalam memakainya.

Johny Simplemag

Template ini modifikasi dari Johny Magazine 2 yang masih memakai slider Yahoo yang manual, Johny Simplemag saya buat sedemikian rupa sehingga semua widget yang ada lebih dinamis dan otomatis dengan masih memasang slider Yahoo. Slider Yahoo disini saya buat lebih sederhana, karena hanya 4 post yang bisa ditampilkan pada slider tapi secara tampilan masih sama.

johny simplemag


Sekarang langsung saja pada pemasangannya :
Slider

slider yahoo

Di dashboard masuk ke layout
Kemudian pilih featured today yang ada di layout


Setelah itu masukkan atau ketik label yang ingin ditampilkan pada slider contohnya seperti gambar di bawah ini :


Keterangan :
Ganti sport dengan label yang Anda inginkan (ingat besar kecil huruf harus sama dengan label yang sudah anda buat)
Demikian juga untuk judul widget, anda bisa menggantinya sesuaikan dengan label.
Label 1 - Label 6


Untuk memasang Label 1 sampai dengan Label 6 caranya sama seperti diatas, Anda tinggal mengetikkan label yang ingin ditampilkan pada widget tersebut. Lihat gambar dibawah ini :


Keterangan :
Ganti news dengan label Anda, dan ganti judul widget (label 1) dengan judul yang sesuai dengan label.

Penting :

Karena dari template yang kemarin masih ada yang error dalam penataan widget, isi semua Label 1 sampai dengan Label 6 dan  usahakan dalam meletakkan label, pilih yang jumlahnya minimal 5. Sehingga untuk blog yang baru dan belum memiliki banyak postingan,  penataan widget akan tersusun ke bawah, jadi perbanyak postingan dan label terlebih dahulu sebelum mengajukan pertanyaan.

New Johny Darkgamer

new johny darkgamer


Template ini sudah lama, tapi ternyata peminatnya masih banyak. Kemarin ada yang meminta untuk dibuatkan template Johny Darkgamer tapi dengan fitur slider Carousel otomatis. Tampilan hampir sama dengan Johny Darkgamer lama, saya hanya menambahkan fitur label per kategori diatas blog post dan merubah warnanya menjadi biru.

Slider


Masuk ke Layout kemudian pilih kotak slider


Caranya seperti pemasangan slider pada template Johny Simplemag diatas, anda tinggal ketikkan label yang ingin anda tampilkan dalam slider carousel ini, seperti gambar dibawah :


Demikian juga dengan Label 1 dan Label 2 yang ada di layout template ini, masukkan labelnya kemudian save/simpan.

Itu tadi dua template gratis yang saya bagikan kepada teman-teman blogger kali ini,  selamat mencoba dan semoga bermanfaat.

Pesan dari bang Johny :

Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah sebelah kanan, kalau yang kiri ada tiga itu silahkan diganti dengan bloglist Anda nggak apa-apa

Salam - Johny Template

Gamer Darkpaper, The Best Template Gamer I Ever Made

Sekali-kali judulnya pakai bahasa Inggris biar keren, dan mohon maaf kalau judulnya agak sedikit narsis. Karena memang template ini template terbaik yang pernah saya buat, itu dari sudut pandang saya sendiri, entah bagaimana pandangan teman-teman semua. Sebenarnya saya sempat bingung, template ini sudah jadi sejak kemarin. Saya mau cerita sebentar, ternyata template ini ada yang mau beli, tapi dengan syarat template ini tidak dishare secara gratis di internet, tapi kalau ada orang lain yang mau beli lagi baru boleh, alias template ini mesti dibuat premium pemakainya mesti bayar.

gamer darkpaper

Setelah saya pikir-pikir, kesepakatan gagal. Saya tetap mau share template ini secara gratis. Itu cerita sore tadi, sekarang langsung saja tentang template ini. Namanya Gamer Darkpaper, terus terang saya asal kasih nama ke template ini, lagi nggak ada ide. Secara tampilan sama persis dengan template Mas Paper magazine 2 yang membedakan hanya warna dominan yang ada pada template. Dengan warna dasar hitam dan merah membuat template ini kelihatan lebih hidup daan menyala, biar orang yang melihat ngantuknya jadi ilang. Template ini saya desain khususnya untuk para pecinta games (seperti saya) tapi kalau mau diisi dengan konten lain silahkan saja. Fiturnya juga sama persis yang membedakan hanya pada kotak feedburner dan related artikel yang ada di bawah postpage.  Saya akan ulang lagi tutorialnya disini

Fitur :
  1. Slider carousel dan featured slider otomatis
  2. Multi level drop down menu.
  3. Automatic widget per category
  4. Pagination ready
  5. Ads ready dan widget twitter
  6. Dan masih banyak lagi
Slider

Menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>
Keterangan :
Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan.

Widget Label

Perhatikan layout template diatas, untuk kolom Your label here, Label 1, Label 2, Label 3 sampai dengan Label 6 Anda tinggal masukkan label pada kotak HTML/Javascript seperti contoh gambar di bawah ini :
Untuk contoh dari gambar diatas, label 3 Anda ganti dengan judul widget. entertainment silahkan diganti dengan label Anda sendiri. Perlu diingat besar kecil huruf harus sama dengan label yang sudah Anda buat sebelumnya. Jadi disini anda tinggal memasukkan label bukan kode script, misalnya sport, news, culture dan lain-lain ke dalam kotak HTML/Javascript, kemudian sve lihat hasilnya.

Twitter Widget

Twitter widget untuk template ini sedikit berbeda dengan versi sebelumnya, tapi pemasangannya sama. Untuk membuat twitter widget masukkan kode di bawah ini pada kotak HTML/Javascript :
<div style="background:#cc0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZlTrVd9a6piUxlIsj_rRUjJOjaYNvJtgM0iDwaEBixl1PsyREVfRMOUZSv5zy4CXuTezqGYKWDuzTM3S7t6fJuhLrkNak1YVvoE5XkUjUEoptWIuWBPyFwc9uUfUuk7E-VLGZaIWnepc/s1600/twitter+me.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: '#cc0000'
}
},
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.


Kotak feedburner 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.
Ganti juga URL feed http://feeds.feedburner.com/blogspot/htbgh dengan URL feed Anda.

Saran saya, dalam menggunakan template ini. Buka  xml template ini, terus copy ke notepad kemudian buka Edit HTML template, kemudian copykan yang ada di notepad kesitu. Setelah itu save templates >> deleted widget. Langkah selanjutnya masuk ke layout, kosongkan semua widget kecuali, Your label here, Label 1 sampai dengan Label 6 jangan dihapus. setelah itu preview template. Hal ini dilakukan agar kode bawaan template lama tidak ikut sehingga mempersulit dalam penataan widget nantinya. Baru kemudian pasang widgetnya satu persatu. Setelah normal silahkan template ini dimodifikasi sesuka hati. Dan yang perlu diingat template ini banyak sekali menggunakan kode javascript, jadi jika Anda ingin memasukkan widget baru yang juga menggunakan javascript, lihat dulu apakah ada kode yang sama meskipun serinya berbeda. Pakai saja salah satunya. Selamat mencoba dan semoga bermanfaat...... happy weekend

Iklan template baru, kalau ada yang mau dishare kalau nggak ada dipakai sendiri (serba otomatis dari mulai slider sampai ke recent categories_tinggal masukin label ke widget)

Pesan dari bang Johny :
Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah sebelah kanan, kalau yang kiri ada tiga itu silahkan diganti dengan bloglist Anda nggak apa-apa

Salam - Johny Template

Penting :

Karena dari template yang kemarin masih ada yang error dalam penataan widget, isi semua Label 1 sampai dengan Label 6 dan  usahakan dalam meletakkan label, pilih yang jumlahnya minimal 5. Sehingga untuk blog yang baru dan belum memiliki banyak postingan,  penataan widget akan tersusun ke bawah, jadi perbanyak postingan dan label terlebih dahulu sebelum mengajukan pertanyaan.

Mas Paper Magazine 2 Blogger Template



Fitur :
  1. Slider carousel dan featured slider otomatis
  2. Multi level drop down menu.
  3. Automatic widget per category
  4. Pagination ready
  5. Ads ready dan widget twitter
  6. Dan masih banyak lagi
Slider

Menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>
Keterangan :
Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan.

Widget Label

Perhatikan layout template diatas, untuk kolom Your label here, Label 1, Label 2, Label 3 sampai dengan Label 6 Anda tinggal masukkan label pada kotak HTML/Javascript seperti contoh gambar di bawah ini :
Untuk contoh dari gambar diatas, label 3 Anda ganti dengan judul widget. entertainment silahkan diganti dengan label Anda sendiri. Perlu diingat besar kecil huruf harus sama dengan label yang sudah Anda buat sebelumnya.

Twitter Widget

Untuk membuat twitter widget masukkan kode di bawah ini pada kotak HTML/Javascript :
<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYZEUYzHqk8kw90F-aoz-9uxlmM5wydqi8rfhatxNiJH7ieJl0XLIQSa4yT9mup7sybSvSfQ9ERh0Q3RREtcM_FIXOLE6s-Z6wenD487X9fkp3fi0MUHgGMBrmSXp0G9bTZ-Hyr_IPrK8/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.

Mohon maaf sebelumnya karena buru-buru soalnya disuruh bos ke bandara jemput tamu penting katanya. jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Sementara itu aja dulu, nanti malam disambung lagi.

Penting :

Isi semua Label 1 sampai dengan Label 6 dan  usahakan dalam meletakkan label, pilih yang jumlahnya minimal 5. Sehingga untuk blog yang baru dan belum memiliki banyak postingan,  penataan widget akan tersusun ke bawah, jadi perbanyak postingan dan label terlebih dahulu sebelum mengajukan pertanyaan lainnya.

Pesan dari bang Johny :
Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah sebelah kanan, kalau yang kiri ada tiga itu silahkan diganti dengan bloglist Anda nggak apa-apa

Salam - Johny Template

Template Mas Paper 2 warna yang gelap, baru diproses

Dua Template Gratis Untuk Pecinta Music dan Game

Di malam yang dingin ini saya akan kembali berbagi kepada teman-teman blogger semua, dua buah template warna hitam gratis. Template pertama saya namakan Johny Darkmusic dibuat khusus untuk teman blogger yang mempunyai blog konten musik atau selebritis. Dan template kedua Johny Darkgamer 2 sesuai namanya template ini cocok untuk blog yang mempunyai konten game atau sejenisnya.

Kedua template ini saya lengkapi dengan fitur slider carousel otomatis, anda tinggal memasukkan kode script yang sudah saya siapkan di bawah pada kotak HMTL/Javascript. Slider carousel yang saya gunakan disini adalah Tiny Carousel dari Maarten Baijs yang sudah dimodifikasi oleh seorang master blogger Indonesia Taufik Nurrohman, sehingga kita tidak perlu lagi memasukkan keterangan dan URL slider satu persatu. Baiklah, langsung saja karena saya juga sudah ngantuk berat, berikut ini kedua template tersebut :

Johny Darkmusic

johny darkmusic


Template ini saya buat bagi Anda yang suka dengan konten music atau selebritis. Template ini bertipe magazine, terdapat 3/4 kolom sidebar. Fitur-fitur yang terdapat pada template ini antara lain :
  1. Slider Carousel
    Untuk mengganti slider anda hanya perlu memasukkan kode di bawah ini pada kotak HTML/Javascript. Di dashboard masuk ke layout kemudian pilih kolom kosong di bawah header >> add gadget >> HTML/Javascript :
    <script type="text/javascript">
        showPostDate_g  = false;
        showComm_g      = false;
        slideOpenNewTab = true;
        idMode          = true;
        slidebyLabels   = false;
    var slideLabelName  = "label",
        pBlank          = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJhTopTRDCcSPJB_VYvFfq5XdcJzkoamcJUh5U2Z7-YuRO-dHwltRMWXEAeJoa2l9WIM0quknE9SifJlzj-qUKyl4h15Vo268XVXJp_krWDiQQL3eZRLF3a7GjT5-eEjPiKMSfhMMRzr4/s1600/no+image.jpg",
        text            = "comment",
        numposts_g      = 12,
        numchars_g      = 0,
        showText        = "Show at",
        postText        = "Posts",
        tinyprevNav     = "&lt;",
        tinynextNav     = "&gt;",
        home_page       = "http://johnydarkmusic.blogspot.com/";
    </script>
    <script src="http://jamu-martin.googlecode.com/files/tinycarousel.js" type="text/javascript"></script>
    Ganti URL warna biru diatas dengan URL blog Anda, kemudian save.
  2. Kategory dengan thumbnail (Category with thumbnail)
    Letaknya di sidebar tengah (satu thumbnail), cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
    <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/-/jazz?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://johnydarkmusic.blogspot.com/feeds/posts/summary/-/jazz?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
    <a href="http://johnydarkmusic.blogspot.com/search/label/jazz" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
    Keterangan :
    Warna biru (jazz) : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
    Warna merah : Ganti URL dengan URL blog anda.
  3. Latest Post
    Untuk mengatur latest post yang ada di homepage caranya adalah, di dashboard blogger pilih setting, kemudian klik posts and comments. Pada bagian paling atas (Show at most) pilih berapa posts yang ingin ditampilkan pada homepage. Kemudian masuk ke Language and formatting, agar blog Anda seperti pada demo template ini pada Timestamp format pilih hanya jam/waktu (00:00).
  4. Kotak feedburner 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.
    Ganti juga URL feed http://feeds.feedburner.com/blogspot/htbgh dengan URL feed Anda.
  5. Headline News (Di bawah navigasi menu atas atau news ticker)
    Untuk menggantinya di dashboard pilih template kemudian klik Edit HTML jangan lupa centang expand widget templates kemudian cari dengan menggunakan control + F URL http://johnydarkmusic.blogspot.com ganti dengan blog URL anda.
Johny Darkgamer 2

johny darkgamer 2


Sesuai namanya template ini adalah versi kedua dari serial template Johny Darkgamer.  Dengan warna dasar hitam dan hijau pada bagian navigasi menu, template ini sangat cocok untuk konten game. Fitur-fitur yang terdapat pada template ini hampir sama dengan template Johny Darkmusic, malah lebih sederhana pada hompage hanya terdapat 3 kolom sidebar yang tidak terlalu sulit untuk memasang widget yang ada disitu. Cara memasang slider pada template ini sama dengan template Johny Darkmusic, anda tinggal memasukkan kode script pada langkah nomer satu ke kotak HTML/Javascript. Demikian juga dengan kotak Feedburner yang ada di bawah postingan cara untuk menggantinya sama pada langkah nomer 4.

Kedua template ini support dengan halaman statis (static page) klik sample page yang terdapat pada navigasi menu atas. Dan juga template ini sudah dilengkapi dengan fitur threaded comment dengan fungsi reply bawaan dari blogger, anda bisa modifikasi sesuai keinginan. Kekurangan template ini belum ada fitur kotak pencari (search box), saya yakin Anda semua pasti bisa untuk menambahkan kotak pencari pada kedua template ini terserah mau memakai bawaan dari blogger atau memodifikasi sendiri.

Tutorial untuk pemasangan fitur-fitur yang ada pada kedua template diatas saya asumsikan Anda memakai blogger new interface bagi yang masih memakai old interface saya kira juga gampang dan mudah dimengerti, sampai disini dulu mas/mbak sudah larut malam selamat mencoba dan semoga bermanfaat.

Dua Template Hitam Elegan Untuk Gallery dan Berita

Sebelumnya saya minta maaf dulu karena beberapa hari ini hujan dan angin yang terjadi di daerah saya membuat aktivitas online jadi terganggu. Listrik di rumah suka mati kalau ada hujan apalagi ditambah kemarin ada pohon tumbang di jalan masuk menuju rumah jadi ya harap maklum. Buat teman-teman yang belum terjawab pertanyaannya saya harap bersabar dulu. Walaupun begitu saya akan berbagi lagi kepada teman-teman blogger semua meskipun harus menuju warnet, template ini hasil dari utak-atik saya di kantor tadi, mumpung big bos lagi keluar kota. Jadilah dua template warna dasar hitam yang berbeda fungsi, template pertama khusus untuk gallery template dan template kedua tidak ada spesifikasi khusus untuk konten jadi terserah Anda semua mau diisi apa.

MARTIN TEMPLATE
Template pertama ini saya beri nama Martin Template, di design khusus untuk blog dengan konten galery template tapi jika ada mau isi dengan gellery photo juga silahkan.

martin template

  1. Slider Image Otomatis
    Untuk menampilkan slider di homepage, cari kode berikut :
    numposts1 = 6;
    label1 = "magazine";
    Keterangan :
    Angka 6 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. magazine adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan.
  2. Kotak feedburner 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.
  3. Ganti URL feed http://feeds.feedburner.com/blogspot/htbgh dengan URL feed Anda.
BLOGPRESS FREE

Tidak ada spesifikasi khusus pada template ini kalau template pertama warna dasar hitam dan kuning untuk memperindah tampilan. Blogpress free template warna dasar hitam dan biru gambarnya seperti di bawah :

blogpress free template


Untuk pemasangan slider dan mengganti kotak feedburner hampir sama dengan template pertama, jadi tidak ada yang perlu dijelaskan lagi lebih jauh, karena pada dasarnya template ini sangat sederhana seperti pada template-template lain pada umumnya.

Kelebihan dari kedua template ini antara lain Pertama, Navigasi Menu (top menu) paling atas statis maksudnya jika anda scroll ke bawah maka navigasi menu itu akan mengikuti. Kedua lebar kolom post di home page dengan di post page berbeda. Jika anda melihat di homepage agak lebih sedikit sempit dan coba sekarang anda buka di post page, kolom postingan menjadi lebih lebar tetapi dengan sidebar yang lebih kecil. Ketiga, kedua template ini dilengkapi dengan fitur static page (halaman statis), klik sample page pada demo kedua template ini untuk melihat contoh dari static pagenya.

Terus  terang saya tidak bisa membuat atau memodifikasi kotak komentar yang keren, jadi kotak komentar seperti pada template-template saya sebelumnya belum menggunakan thread comment. Silahkan modifikasi sendiri sesuai dengan selera. Banyak sekali tutorial dalam memodifikasi kotak komentar blogger di internet anda tinggal pilih sesuai keinginan.

Sepertinya itu dulu yang mau saya share pada sore hari ini, nanti kalau listrik di rumah sudah nyala kita bertemu lagi maklum ini dari warnet sepulang dari kantor. Jadi jika ada pertanyaan mengenai kedua template di atas harap sabar, tapi saya janji sebisa mungkin saya jawab, sekian dan selamat mencoba semoga bermaanfaat maaf kalau kedua template ini jelek dan kesannya asal-asalan.... happy blogging.

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

johny papers magazine


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiSPVSqqXq0kV0BdS8eYufBdJwG_OU-lZJ0UNxbTOsJSywe0ZyHdLgHqFOM8Ec-P1OJ6PLhyphenhyphenJjSCUASfdpKiS5Ls4y7QZBuINM0gTyUnsXfsLKjz6zVCGXyDOtV5KWd-xENy0k7uLe0qY/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

gallery johny template


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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivnFYTovigWiyzzmD9lCB_qqZlHINfU6dz8RexpQp8r38bYLNe46_jtKOeMFcp4jHkvHurPKUOytWVXwK2wgaoV9E8y2BgnJfY2kbVHzzg1FcQazp8shDF0A645z5Xc88oLUJWCo5v7Qn5/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA5KKGP5nHfWNt3pPhm6clhTCPbJXaXpRB_JN18BSt7L2JiE6sQhyphenhyphenK-QHjQiTK74aWl42POzebAMhB5LzxFy2WzrnPmFVJxqaa1_io3Qicm0jXkHD155O5EPASYcmra6iSS2rqM-oxtU67/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1XQdegwMNtnURXgti05afkCQYY20ruiw3Rz9XkQ0sqCiNqkBV3uS2s0GnvNd3M9zhm5SN7ClcGy9k0s63nZ3Hp2-OJo4yg4Yys1nsEwZT1Mh2uXYv0g7GK5dVUQQz4AmDyevzrY51Go8f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1XQdegwMNtnURXgti05afkCQYY20ruiw3Rz9XkQ0sqCiNqkBV3uS2s0GnvNd3M9zhm5SN7ClcGy9k0s63nZ3Hp2-OJo4yg4Yys1nsEwZT1Mh2uXYv0g7GK5dVUQQz4AmDyevzrY51Go8f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1XQdegwMNtnURXgti05afkCQYY20ruiw3Rz9XkQ0sqCiNqkBV3uS2s0GnvNd3M9zhm5SN7ClcGy9k0s63nZ3Hp2-OJo4yg4Yys1nsEwZT1Mh2uXYv0g7GK5dVUQQz4AmDyevzrY51Go8f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1XQdegwMNtnURXgti05afkCQYY20ruiw3Rz9XkQ0sqCiNqkBV3uS2s0GnvNd3M9zhm5SN7ClcGy9k0s63nZ3Hp2-OJo4yg4Yys1nsEwZT1Mh2uXYv0g7GK5dVUQQz4AmDyevzrY51Go8f/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

johny soulmater


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 :
 
Chenkgelate - All right reserved
Chenkgelate dot com | Personal Blogging Free Sharing Inform
© Template by :Idblogportal 2011 - 2012
Copyright © 2011 - 2012 SMA NEGERI 1 CIOMAS SERANG - All rights reserved