Johny Portal, Template untuk Situs Berita Johny Portal, Template untuk Situs Berita

Untuk temen-temen yang ingin membuat blog/situs berita, saya ada satu template keren yang mungkin cocok dipasang di blog anda. Langsung saja ya, karena sudah malem ngantuk nih besok mesti kerja. Di bawah ini screenshotnya (klik gambar untuk memperbesar) :

Bagian Header

Bagian Footer

Cara pasangnya sangat mudah tinggal filenya diekstrak dulu, kemudian upload. Jika ada yang masih bingung nanti saya buat tutorialnya. Malam semua.... zzzzzzzzzzzzzzzzzzzz.

Kode script untuk slider

<div class="img400" id="gal1" style="display: none;">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-_ZEAo0OVDP4/TvzO8LGCdbI/AAAAAAAAAF8/0cS-zTHZ62I/s1600/woman-drinking-water.jpg&amp;cat=1&amp;pid=2107&amp;cache=false" /></div>

<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/drinking-8-glasses-of-water-day-is.html">Drinking 8 Glasses Of Water A Day Is ‘Nonsense,’ Doc Says</a>

</div>
<div class="summary">
The health recommendation to drink six to eight glasses of water a day is “thoroughly debunked nonsense,” a doctor wrote this week in a commentary...... <a href="http://johnypaper.blogspot.com/2011/12/drinking-8-glasses-of-water-day-is.html">Read Full Post</a></div>
</div>
</div>
</div>

<div class="img400" id="gal2">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-jix-0-LKBeY/Tv1Xj1a0TPI/AAAAAAAAAGI/YdT9M9yyLhs/s1600/watermelon_slice.jpg&amp;cat=1&amp;pid=2107&amp;cache=false" /></div>

<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/what-to-eat-to-beat-skin-cancer.html">What to Eat to Beat Skin Cancer</a></div>
<div class="summary">
You got the pale-is-the-new-tan memo years ago and have the sun smarts to prove it. Skin cancer is the most common cancer in the United States, and women age 39 and under have a higher....... <a href="http://johnypaper.blogspot.com/2011/12/what-to-eat-to-beat-skin-cancer.html">Read Full Post</a></div>
</div>
</div>
</div>


<div class="img400" id="gal3" style="display: none;">

<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-ZjafkrVQpPg/Tv1XlJTtLxI/AAAAAAAAAGQ/kolxM1NCKv4/s1600/floyd-money-mayweather-415x301-1.jpg&amp;cat=1&amp;pid=2107&amp;cache=false" /></div>

<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/get-in-fighting-shape-with-mayweather.html">Get in Fighting Shape with Mayweather and Mosley</a></div>
<div class="summary">
Floyd Mayweather was dressed in a nice suit, standing on a stage in Manhattan in front of journalists and fans. His soon-to-be opponent Shane Mosley, was equally..... <a href="http://johnypaper.blogspot.com/2011/12/get-in-fighting-shape-with-mayweather.html">Read Full Post</a></div>
</div>
</div>
</div>


<div class="img400" id="gal4" style="display: none;">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-0yMJYPvnpfI/Tv1Xl_EbrlI/AAAAAAAAAGY/ha44RdLAoE4/s1600/India-doesnt-let-blasts-derail-Pakistan-talks.jpg&amp;cat=1&amp;pid=2107&amp;cache=false" /></div>

<div class="min250">

<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/india-doesnt-let-blasts-derail-pakistan.html">India doesn’t let blasts derail Pakistan talks</a></div>
<div class="summary">
India brushed off speculation tying the Mumbai bombings to Pakistan and said Friday it remained committed to recently renewed peace talks with its rival neighbor. The moves showed how little......<a href="http://johnypaper.blogspot.com/2011/12/india-doesnt-let-blasts-derail-pakistan.html">Read Full Post</a></div>
</div>
</div>
</div>

<div class="img400" id="gal5" style="display: none;">
<div class="h250">
<img alt="" src="http://4.bp.blogspot.com/-t5-_jkUlhWU/Tv1Xn8mzP0I/AAAAAAAAAGg/Wb3apNMv5yo/s1600/Mexican-authorities-find-massive-marijuana-plantation.jpg&amp;cat=1&amp;pid=2107&amp;cache=false" /></div>
<div class="min250">

<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/mexican-authorities-find-massive.html">Mexican authorities find massive marijuana plantation </a></div>
<div class="summary">
Hidden between tomato stalks, the Mexican army found what officials describe as the largest marijuana plantation in the nation, a top military official ...... <a href="http://johnypaper.blogspot.com/2011/12/mexican-authorities-find-massive.html">Read Full Post</a></div>
</div>
</div>
</div>

<div class="img400" id="gal6" style="display: none;">
<div class="h250">
<img alt="" src="http://3.bp.blogspot.com/-aM5ALuNLByo/Tv1XonbIqiI/AAAAAAAAAGo/WuZEntRhoMQ/s1600/President-Obama-and-Dalai-Lama.jpg&amp;cat=1&amp;pid=2107&amp;cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/dalai-lama-visit-president-obama-meets.html">Dalai Lama Visit: President Obama Meets Spiritual Leader, China Complains</a>

</div>
<div class="summary">
President Barack Obama held a White House meeting Saturday with the Dalai Lama, a fellow Nobel Peace laureate...... <a href="http://johnypaper.blogspot.com/2011/12/dalai-lama-visit-president-obama-meets.html">Read Full Post</a></div>
</div>
</div>
</div>

<div style="height: 255px; margin-top: -255px;">
<div class="page_hl pd_5" id="galtabs">
<a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&amp;postID=5854147809063596364#" rel="gal1">1</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&amp;postID=5854147809063596364#" rel="gal2">2</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&amp;postID=5854147809063596364#" rel="gal3">3</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&amp;postID=5854147809063596364#" rel="gal4">4</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&amp;postID=5854147809063596364#" rel="gal5">5</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&amp;postID=5854147809063596364#" rel="gal6">6</a> </div>
</div>
<div class="clearit">
</div>

<div class="clearit pb_10">
</div>
<script type="text/javascript">
var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(4000)
</script>

Ganti semua URL gambar dan judul dengan url yang ingin anda tampilkan dalam slideshow

Kode Script untuk Label/kategori sidebar
Masukkan kode di bawah ini ke dalam kotak HTML/Javascript :

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

Mengganti kotak pencarian (search) adsense

Anda harus membuat kotak pencarian Google Adsense terlebih dahulu di akun Adsense anda. Kemudian setelah membuatnya, cari kode di bawah ini (dibawah kode <div style="float: right; padding: 0px 6px 0pt 0pt;"> )

<form action='http://www.google.co.id/cse' id='cse-search-box' target='_blank'>
<div>
<input name='cx' type='hidden' value='partner-pub-960848xxxxxxxx:6v20u0t45ip'/>
<input name='cof' type='hidden' value='forid:10'/>
<input name='ie' type='hidden' value='iso-8859-1'/>
<input name='q' size='26' type='text'/>

<input name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.id/cse/brand?form=cse-search-box&amp;lang=in' type='text/javascript'/></script>

Ganti dengan kotak pencarian Adsense dengan yang sudah Anda buat, jangan lupa kodenya di parse dulu

Mengganti Adsense di postingan
Cari kode ini, letaknya di bawah kode ini <div style="color: #333333; font: italic 12px Georgia; margin-top: 10px; padding: 8px 10px 8px 70px;">

<script type="text/javascript"><!--
google_ad_client = "ca-pub-9608xxxxxxxxxx";
google_ad_host = "pub-15562xxxxxxxxxxxx";
/* johny mu */
google_ad_slot = "7011292523";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Setelah ketemu ganti dengan kode adsense anda ukuran 468 x 60 (kode adsense di parse dulu)

Updates :

Mohon maaf sebelumnya, karena banyak sekali kekurangan dari template ini, saya memodifikasi lagi agar lebih dinamis dan mudah dipakai. Slider pada template ini dirubah menjadi otomatis, jadi anda tidak perlu lagi untuk memasukkan keterangan dan URL nya satu persatu, tinggal mengganti kategori yang ingin dimasukkan pada slider. Untuk keterangan lebih lengkap ada disini. Pengaturan kolom juga lebih tertata rapi. Saya menghilangkan kotak feedburner dan related post di bawah postingan, karena banyak sekali pengguna yang meminta untuk dihilangkan saja. Untuk selanjutnya Anda bisa download ulang link yang ada di bawah.

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}

Demo | Download