Template Biru Modifikasi Dari Johny Wusss

Tadinya mau nungguin Maskolis untuk meminta reviewnya untuk template editan saya. Tapi kayaknya waktu bertapa Maskolis akan masih lama hehehe entah kapan mas yang satu ini akan muncul lagi. Template editan ini saya ambil dasarnya dari Johny Wusss yang sudah terbukti wuusss loadingnya hehehe....

Sehingga diharapkan template editan ini loadingnya akan seperti kakaknya hehehe... Jadi saya tidak banyak menambahkan javascript, hanya javascript untuk related post, cutter untuk thumbnail di homepage, dan paginasi homepage. Perubahan lain yang dilakukan yaitu di daerah header, footer, tampilan homepage. Dan tentunya perubahan warna template yang didominasi warna biru sehingga saya kasih title postingan ini "Template Biru Modifikasi Dari Johny Wusss".

Tampilannya seperti gambar di bawah ini.

DOWNLOAD

Untuk mendownload di DataFileHost, silahkan hilangkan tanda centang pada "Use our download manager and get recommended downloads" di bawah tombol download.

Fitur-fitur:

1. Sudah terpasang tag h1, h2, h3
2. Menu Header, Menu Statis Page, Menu Footer
3. Tombol Scroll To Top
4. Translator ringan
5. Sidebar, Footer 3 kolom
6. Slot iklan header di bawah menu

Untuk nilai SEO template ini ketika dicek di Chkme mendapat angka 100%, silahkan cek lagi oleh Anda di Chkme. Untuk validasi HTML5, hanya terdapat 2 error di homepage.

File xml-nya saya taruh di dalam notepad, jadi untuk memakainya Anda hanya perlu meng-copy seluruh kodenya dan paste di edit HTML blog Anda. Jika ada dialog box yang meminta hapus widget, silahkan hapus widget agar widget yang tampil sesuai dengan demonya.

Untuk mengganti gambar "title blog" silahkan cari kode 

#headerpic-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfugp7bNPuU6tN5nnQbE5RikjOeJoKkhaFxstGLHyxBBciPhuwehNuj0Xdj3b3FeC_UN1zmun_EAF_w3fiPoRuR_fgUFJTPlh25DTQxZGhqaS7NSxTmD5fEwuAa0Lz09Cw5ddhgn4hLEE/s1600/bg.topbar.jpg) repeat-x bottom left;height:50px;width:100%;margin:0;padding:0;border-bottom:8px solid #00477D} 

Silahkan ganti gambar background-nya dengan gambar Anda sendiri dengan dimensi 910px x 50px, upload di blog Anda dan ganti url berwarna merah di atas. Biar gampang silahkan tiru aja gambar yang sudah ada. Copy url yang berwarna merah di atas, paste di search bar browser Anda dan save gambar ke komputer Anda. Modifikasi dengan photoshop dan simpan hasilnya dengan format PNG dengan background transparant.

Untuk menu statis page akan otomatis terisi ketika Anda membuat statis page. Dan untuk menu header silahkan cari kode seperti di bawah ini.

<div id='top-menu'>
<div id='topbar'>
<ul id='top'>
<li class='home'><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a class='trigger' href='#' title='Drop menu 1'>Drop menu 1</a>
<ul>
<li><a href='/' title='Sub menu 1'>Sub menu 1</a></li>
<li><a href='/' title='Sub menu 2'>Sub menu 2</a></li>
<li><a href='/' title='Sub menu 3'>Sub menu 3</a></li>
<li><a href='/' title='Sub menu 4'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#' title='Drop menu 2'>Drop menu 2</a>
<ul>
<li><a href='/' title='Sub menu 1'>Sub menu 1</a></li>
<li><a href='/' title='Sub menu 2'>Sub menu 2</a></li>
<li><a href='/' title='Sub menu 3'>Sub menu 3</a></li>
<li><a href='/' title='Sub menu 4'>Sub menu 4</a></li>
<li><a href='/' title='Sub menu 5'>Sub menu 5</a></li>
<li><a href='/' title='Sub menu 6'>Sub menu 6</a></li>
</ul>
</li>
<li><a class='trigger' href='#' title='Drop menu 3'>Drop menu 3</a>
<ul>
<li><a href='/' title='Sub menu 1'>Sub menu 1</a></li>
<li><a href='/' title='Sub menu 2'>Sub menu 2</a></li>
<li><a href='/' title='Sub menu 3'>Sub menu 3</a></li>
<li><a href='/' title='Sub menu 4'>Sub menu 4</a></li>
<li><a href='/' title='Sub menu 5'>Sub menu 5</a></li>
<li><a href='/' title='Sub menu 6'>Sub menu 6</a></li>
<li><a href='/' title='Sub menu 7'>Sub menu 7</a></li>
<li><a href='/' title='Sub menu 8'>Sub menu 8</a></li>
</ul>
</li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
</ul>

Silahkan ganti "/" atau "#" dengan url label blog Anda. Jangan lupa untuk mengganti "title" dan Tulisan yang tampil di menu agar nilai SEO template tidak berkurang.

Untuk menu di footer silahkan cari kode di bawah ini:

<div class='menubottom'>
<ul>
  <li><a href='/' target='_blank' title='About'>About</a></li>
  <li><a href='/' target='_blank' title='Contact'>Contact</a></li>
  <li><a href='/' target='_blank' title='Chat Author'>Chat Author</a></li>
  <li><a href='/' target='_blank' title='Sitemap'>Sitemap</a></li>
  <li><a href='/' target='_blank' title='Exchange'>Exchange</a></li>
</ul>

Untuk popular post, silahkan atur di tata letak dan hilangkan tanda "centang" pada image thumbnail. Ini agar nilai Seo template tidak berkurang karena thumbnail pada popular post ternyata menyebabkan berkurangnya nilai SEO blog.

Untuk widget Recent Post silahkan copy kode di bawah ini pada tata letak atau layout pada widget Recent Post.

<div style="background:none repeat scroll 0% 0%; border: 0px; height: 250px; 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 type="text/javascript" src="http://yourjavascript.com/36152802110/recentposts.js">
</script>

<script src="http://winkom.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed">
</script></div>

Ganti tulisan yang berwarna merah dengan nama blog Anda.

Untuk widget komentar, silahkan isikan kode di bawah ini pada widget Comment di tata letak atau layout.

<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 30,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://winkom.blogspot.com/feeds/comments/default?alt=json&amp;callback=tb_recent_comments&amp;max-results=5"></script>

Ganti tulisan yang berwarna merah dengan nama blog Anda.

Untuk widget Subscribe silahkan copy kode di bawah ini pada widget Subscribe di tata letak atau layout.

<div style="background: none; border:none; padding: 4px;">
<div class='social' style='padding: 0pt 0pt 0pt 5px;'>
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=winkom' target='_blank' title='Subscribe via Email'><img alt='email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBMV9DwHQPrG9Qgc9hVbzXRH_HsZmakooPwoCzUDUmUKSwMEd03k28j0C9Lm6kpGXFUTMX4rY820i02DeScygIPRoqYgAXgEy9il83EAliAuhYEZ0F2kYo_YR-0tJefxWXaDkmApiw_4/s40/mail.png' title='Subscribe via Email'/></a> </td>
<td> <a href='http://feeds.feedburner.com/winkom' target='_blank' title='Subscribe via RSS'><img alt='rssfeed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLqv4Y5Z3L3n3QxdUL7C2MZlFQNW9ho641uirI-E1rSNdZ88zdQ4ahwtVFFiCkXGg1YBmIbujP0hYJRkExbijOuABWQ7g4U4-s7Fw7ufApEuX5mFZT1sFj8YiXGrXw2CEZ2lNlfWmOaQ/s40/rss.png' title='Subscribe via RSS'/></a> </td>
<td> <a href='http://twitter.com/suakcot' target='_blank' title='Follow on Twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB1pgOniDJS8NC4K8512vYPR9n06eTMj29n78FXDnjLQOjW8OmgulcbJCxGvjbhp6uvIOFGZT1U7USYq7xEICdxIGOaCrzHQRqXpPNmvP12FS0LCe8WvnsutY7k6dwtqt52xGgDTEUI6k/s40/twitter.png' title='Follow on Twitter'/></a> </td>
<td> <a href='http://www.facebook.com/pages/winkom' target='_blank' title=' Like me on Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8uQ0AvWXC5xOAbQK-KDCqN9cu_mKpNM3R7Cdx6lyGwZP9OGEyHD_5KPFwjmR7fPrkWUBVUHoL16f6G5od-yxvqid29KLXdhnEyXDjUE_m2tzKMTObE6cceS6fL85HmIiV19tFVyquOoY/s40/facebook.png' title=' Like me on Facebook'/></a> </td>
<td> <a href='https://plus.google.com/117950600521728942551' target='_blank' title='Follow on G+'><img alt='blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFysBVMpmF8RJEhtt1g2zqpF3ElVrOUF0NmEN8aYbyOQlt8gunQcFQrkKGR_kq-W9rUoW37J7iUf9nWSfxLoRAKFVktvocKQB5JVg-G-gEOIIFhcNRgdknj0KpLX47hykIAllDGZpPYhY/s1600/g+.png' title='Follow on G+'/></a>
</td></tr></tbody></table></div> <br/>

<div style='text-align: center;'>
<a href='http://www.blogger.com/follow-blog.g?blogID=2771657301427138693' target='_blank' title='Follow this blog'><img alt='blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgygYXxMzliMXydPObADq5gKju6qmApEhWY4eayKpoo-lsR08TWEb4aVs92vVrlsxcg3Tc40IPht6SX6T4ruArvKJj6vsZU5zFAQte505p26fd9bapXpaHCe5iPnobgQ0D8ZUiEeA62L5k/s1600/Follower.png' title='Follow this blog'/></a>
</div><br/>

<div style='text-align: center;'>
<span style='color: #555; font:bold 13px Arial;'>
If you enjoyed this article just click the icons<br/> above for subscribe to our feeds<br/> or like and follow our Facebook, Twitter,<br/> G+ and Blog to receive more<br/> great content just like it.</span><br/><br/>
<a href='http://feeds.feedburner.com/winkom' title='Readers this blog'><img alt='readers' height='26' src='http://feeds.feedburner.com/~fc/winkom?bg=000000&amp;fg=FFFFFF&amp;anim=0' width='88' title='Readers this blog'/></a></div></div>

Dan terakhir, ketika Anda mengatur setting untuk jumlah postingan yang tampil di homepage, maka Anda juga harus mengatur jumlahnya pada setting paginasi homepage. Silahkan cari kode di bawah ini di edit HTML.

<script type='text/javascript'>
    var postperpage=5;
    var numshowpage=4;
    var upPageWord =&#39;&#171; Previous &#39;;
    var downPageWord =&#39;Next &#187;&#39;;
    var urlactivepage=location.href;
    var home_page=&quot;/&quot;;
  </script>

Ganti angka 5 yang berwarna merah dengan jumlah yang Anda tentukan pada setting-an untuk jumlah postingan yang tampil di homepage.

Sepertinya hanya itu yang perlu Anda ganti atau rubah agar tampilannya sesuai dengan demonya. Seperti biasa dimohon untuk tidak menghilangkan atau merubah credit link di kanan bawah blog. Namun untuk kredit link di sebelah kiri bisa Anda rubah sesuka hati Anda.