Johny Portal 2, Elegan Template for Your Site

Template ini merupakan lanjutan dari versi pertama, Johny Portal. Seperti template terdahulu pada home page template ini dibagi menjadi 3 kolom dan 2 kolom pada post page. Template ini hanya berkapasitas 76.0 kb mungkin agak ringan menurut saya, karena tidak banyak fitur yang saya pasang kali ini. Di bawah ini screenshot dari template Johny Portal 2 :

Fitur-fitur yang ada pada template ini antara lain :

Slider Image Otomatis
Untuk mengganti image pada slider, cari kode berikut :
```
numposts1 = 5;
label1 = "sport";
```
Keterangan :
Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. Sport adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan.
Kategory dengan thumbnail (Category with thumbnail)
Letaknya di sidebar kiri, 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/-/news?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://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=6&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 »</a>
Keterangan :
Warna biru : 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.
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('http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' 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.
Latest Post
Untuk mengatur lates post yang ada di homepage caranya sebagai berikut :
Di dashboard blogger pilih setting, kemudian klik formatting. Pada bagian paling atas pilih berapa posts yang ingin ditampilkan pada homepage.
Untuk mengatur jarak antara akhir postingan dengan kotak komen, yang biasanya terlalu lebar caranya adalah klik design, biarkan pada posisi page element setelah itu anda pilih blog post (kolom paling besar) kemudian klik edit. Setelah terbuka halaman baru centang hanya tanggal, comments dan label biarkan yang lain kosong.
Untuk membuat widget yang ada di bawah latest post, Anda tinggal memasukkan script yang sudah saya sertakan jika anda sudah mendownloadnya.
Satu lagi hampir lupa, template ini tanpa disertai dengan fitur static page (halaman statis). Karena memang tidak ada script summary and thumb pada template ini. Jika diantara Anda ada yang bisa menambahkan fitur static page pada template ini saya akan sangat berterima kasih.
Satu lagi ada yang lupa, untuk mengaktifkan fungsi reply pada kotak komentar, cari kode ini pada edit HTML template :
<a expr:href='"https://www.blogger.com/comment.g?blogID=7984474047226005820&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
Perhatikan kode yang berwarna merah, itu adalah ID blog demo template ini. Anda harus ganti dengan ID blog anda yang terletak pada browser.

Pada dasarnya semua script yang saya jelaskan sudah ada jika anda download template ini. Anda tinggal memasukkan ke dalam kotak HTML/javascript. Jika masih ada yang kurang paham bisa ditanyakan pada kotak komentar. Dan jika ada yang tertarik untuk mencobanya silahkan klik link download yang ada di bawah.

Demo | Download

Updates :
Jika page navigasi dan related post di bawah postingan tidak muncul silahkan download ulang template ini disini.