New Johny Wuss - SEO Fast Responsive Blogger Template
Johny Wuss dikenal SEO Friendly banget dan Fast Loading. Lebih OK lagi, ketika Johny Wusss ini dimodif menjadi Responsif (Responsive). Skor SEO-nya , versi CHKME, mencapai nilai sempurna: 100% !!!
Fitur Baru New Johny Wusss
Fitur Baru New Johny Wuss di antaranya:1. Mengubah fitur menu navigasi menjadi lebih simple
2. Menambah fitur Featured Post
3. Menambah kode khusus agar template ini responsif
4. Mengubah dominasi warna dari biru menjadi hitam.
5. Menambah kode agar muncul deskripsi posting saat di-share ke Facebook
6. Dll.
Jika Anda ingin juga menggunakan template New Johny Wuss, silakan ke demo blog New Johny Wuss. Di sana juga ada link downloadnya.
Skor SEO
Skor SEO Template New Johny Wuss ini mencapai nilai SEMPURNA: 100%. WOW 'kan..??? Silakan cek sendiri.
Skor SEO sempurna 100% juga dimiliki blog CB ini karena menggunakan template New Johny Wusss ini.
Soal Warna
Anda masih bisa utak-atik warna (kalau tidak suka hitam) dengan warna lain dengan menggunakan Kode Warna HTML.
Featured Post
Selain soal pewarnaan yang jadi dominasi hitam dan responsif, pembeda utama New Johny Wuss dengan Johny Wuss asli adalah adanya kotak Featured Post di halaman depan.
Anda tinggal menambah Label Featured (ingat: huruf F-nya kapital ya....!! di posting yang ingin ditampilkan di sana. Cukup satu saja, biar gak pengaruhi loading, ganti-ganti aja tiap minggu.
Kode skripnya ini:
<script>
document.write(" <script src=\"/feeds/posts/default/-/Featured?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
Jika Anda ingin yang tampil di Featured Post itu Posting Terbaru, maka:
1. Template > Edit HTML
2. Temukan kode di atas
3. HAPUS saja bagian /-/Featured sehingga menjadi begini:
<script>
document.write(" <script src=\"/feeds/posts/default/-/Featured?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
Kecepatan Loading New Johny Wuss
Test Kecepatan Loading Template Blog ini silakan lakukan sendiri di GT Metrix. Hasilnya akan beda-beda soalnya, tergantung settingan dan gambar yang Anda upload ke blog.
document.write(" <script src=\"/feeds/posts/default/-/Featured?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
document.write(" <script src=\"/feeds/posts/default/-/Featured?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
Recent/Latest Posts/Posting Terbaru
Johny Wuss --tepatnya Johny Wusss (tiga "s")-- adalah template blog yang menjadi favorit banyak blogger karena SEO Friendly dan Fast Loading.
Banyak juga blogger yang memodifikasinya sesuai dengan selera mereka, tanpa mengubah ke-SEO-an dan ke-Fast Loading-an template karya Mas Template alias Maskolis ini. Good Luck!New Johny Wuss - SEO Fast Responsive Blogger Template
DEMO
DOWNLOAD
DOWNLOAD
Update!
Kini hadir New Johny Wuss Versi 2
DEMO
Cek Juga: New Johny Wuss Versi 3 (New!)
Panduan Instal & Setting Template New Johny Wuss V3
Hasil modifikasi Johny Wusss sebelumnya adalah New Johny Wuss V1dan New Johny Wuss V2.
Berikut ini cara setttingnya, setelah Anda upload menjadi template blog terbaru Anda. (Yang belum bisa cara ganti template, silakan ke TKP: Ganti Template Blog.)
Panduan Instal & Setting Template New Johny Wuss V3
- Klik "Template" > "Edit HTML" > Cari (Ctrl+F) kode <div id='homepage'>
- Ganti siteUrl = "http://newjohnywussv3.blogspot.com/p/sitemap.html" dengan Url Sitemap/Daftar Isi Blog Anda!
1. FEATURED POST!
Tambahkan LABEL Featured pada posting yang akan ditampilkan di "Featured Post" halaman depan paling atas.
2. UBAH juga dengan versi Anda:
Template > Edit HTML > temukan kode <span class='fn author'> . Lihat di bawahnya dan ganti yang berwarna merah dengan versi Anda.Tambahkan LABEL Featured pada posting yang akan ditampilkan di "Featured Post" halaman depan paling atas.
2. UBAH juga dengan versi Anda:
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'>Contoh Blog - Tips SEO, Desain, Free Template! </span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'>Contoh Blog - Tips SEO, Desain, Free Template!</span></span>
</b:if>
</b:if>
</span>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'>Contoh Blog - Tips SEO, Desain, Free Template! </span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'>Contoh Blog - Tips SEO, Desain, Free Template!</span></span>
</b:if>
</b:if>
</span>
3. Ubah <!-- Title Tags -->
<title><data:blog.pageTitle/> | Best SEO Friendly Blogger Template</title>
<meta content='new johny wuss, seo template, responsive theme, fast loading' name='keywords'/>
<meta content='new johny wuss, seo template, responsive theme, fast loading' name='keywords'/>
4. Ubah juga Link di <div class='right'>.
Link yang di atasnya (credit link footer) TIDAK BOLEH DIUBAH!!! Hanya bagian ini yang boleh diubah:
<div class='right'>
Links: <a href='#'>Your Link1 Here</a>. <a href='#'>Your Link2 Here</a>. <a href='#'>Your Link3</a>. <a href='#'>Your Link4</a><br/>
<!-- Yang di bawah ini boleh diubah, boleh juga dibiarkan saja -->
Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a> & <a href='http://www.google.com' target='_blank'>Google</a>. <a href='http://www.sepakbolamagz.com' target='_blank'>Football Mania</a>
Links: <a href='#'>Your Link1 Here</a>. <a href='#'>Your Link2 Here</a>. <a href='#'>Your Link3</a>. <a href='#'>Your Link4</a><br/>
<!-- Yang di bawah ini boleh diubah, boleh juga dibiarkan saja -->
Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a> & <a href='http://www.google.com' target='_blank'>Google</a>. <a href='http://www.sepakbolamagz.com' target='_blank'>Football Mania</a>
5. KODE KOTAK PENCARIAN
1. Layout > Add a Gadget > Pilih "Javascript/HTML"
2. Masukkan kode berikut ini di "content"
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form{height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text{font-size: 14px;color: #ddd;border-width: 0;background: transparent;}
#search-box input[type="text"]{width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;} <div style='display:none'><a href='http://contohblognih.blogspot.com' target='_blank'>CB Desain Seacr Box</a></div></style><div id='search-box'><form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>
<br/>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form{height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text{font-size: 14px;color: #ddd;border-width: 0;background: transparent;}
#search-box input[type="text"]{width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;} <div style='display:none'><a href='http://contohblognih.blogspot.com' target='_blank'>CB Desain Seacr Box</a></div></style><div id='search-box'><form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>
<br/>
6. HAPUS KODE IKLAN GOOGLE!
Cari kode <div class='post-footer-line post-footer-line-3'>
di bawahnya ada kode iklan Google seperti ini dan HAPUS semuanya atau ganti dengan kode Adsense Anda!
<br/>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-99362565352XXXX";
/* 300x250 Teks & Gambar */
google_ad_slot = "9008658208";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-99362565352XXXX";
/* 300x250 Teks & Gambar */
google_ad_slot = "9008658208";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
UPDATE!
Jika tampilan "Layout" di Dashboar tampak tidak rapi alias acak-acakan, tambahkan kode berikut ini:
body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:300px;float:left;margin-top:30px}
body#layout #header2 {width:500px;float:right}
body#layout .main-wrapper {width:550px}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:300px;float:right}
body#layout #footer {width:970px}
.footer {width:215px;float:left}
body#layout ul {display: none}
body#layout .content-wrapper {width:970px}
body#layout #header {width:300px;float:left;margin-top:30px}
body#layout #header2 {width:500px;float:right}
body#layout .main-wrapper {width:550px}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:300px;float:right}
body#layout #footer {width:970px}
.footer {width:215px;float:left}
body#layout ul {display: none}
di atas kode
#navbar-iframe{height:0;visibility:hidden;display:none}
MEMUNCULKAN BLOG PAGER
Di halaman depan, ada menu See All Posts yang mengarah ke Daftar Isi.
Anda bisa menggantinya dengan Blog Pager atau Menu Halaman Biasa (Older Posts) dengan mengganti kode antara
<b:includable id='nextprev'> dan <div class='clear'/>
dengan kode berikut ini:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
Demikian Panduan Instal & Setting Template New Johny Wuss V3. Good Luck!!!
Link DOWNLOAD NJW V3
WARNING!!!!
Jangan Hapus atau Ubah Credit Link maskolis & cb blogger di Footer. Jika menghapus atau mengubahnya, Google DMCA akan memasukkan blog Anda ke Google SandBox
