Sang SEO Responsive Blogger Template

DEMO || DOWNLOAD

Template blogger yang saya share sebelumnya yaitu SimpleSangat High CTR Adsense Blogger Template buatan AAGian, kali ini berbeda. Saya akan membagikan template buatan +Kang Mousir yaitu Sang SEO Responsive Blogger Template template gratis namun powerfull dan sangat cocok untuk dipasangkan Google AdSense, template ini sengaja dibuat sederhana agar loading blog menjadi lebih ringan. Template ini tidak diragukan lagi pokoknya, dijamin SEO dan template ini juga Responsive sesuai dengan namanya Sang SEO Responsive Blogger Template.

Fast Loading

Template ini memiliki kecepatan yang luar biasa alias loading pagenya ringan, jadi cocok untuk Internet Indonesia yang lemot.

Webmaster Structured Data

Untuk melengkapi fitur SEO Saya menambahkan struktur yang disarankan webmaster, dengan adanya struktur ini tentunya robot pencari akan lebih mudah menjelajahi bagian - bagian template Kalian.

Fiture Template

1. 100% Responsive - Cek
2. Valid HTML5 ( All Page ) - Cek
3. Valid CSS3 ( All Page ) - Cek
4. Valid Author Rich Snippet - Cek
5. SEO Friendly - Cek
6. User Friendly
7. Fast Loading
8. Webmaster Structured Data
9. Clean Design
10. HCard Author and Update ( Home Page, Post Page and Satic Page )
11. Auto Readmore
12. Breadcrumbs
13. Related Posts
14. Cool Threaded Comment
15. Share Button
16. Page Navigation
17. Custom Error Page
18. Custom Deleted Comment
19. Custom Navigation In Post Page
20. Custom Popular Post
21. Custom Label
22. Full Title Tag
23. Ads Ready
24. Dropdown Menu - new
25. Search button - new
26. Back Top Top Button - new
27. Recent Post By Tag - new
28. Navigation Menu With Social Icon - new
29. And more.

Pengaturan Template

Setelah kalian menggunakan template Sang SEO Responsive Blogger Template ada yang perlu kalian harus edit agar kinerja template bekerja dengan baik.

1. Ganti ID dan NAMA

Masuk ke blogger -> template -> edit html cari kode berikut, ganti sesuai intruksi.

<meta content='ID Google Webmaster Verfikasi' name='google-site-verification'/>
<meta content='ID Bing Verification' name='msvalidate.01'/>
<meta content='ID Alexa Verification' name='alexaVerifyID'/>
<link href='https://plus.google.com/ID Google Plus/posts' rel='publisher'/>
<link href='https://plus.google.com/ID Google Plus/about' rel='author'/>
<link href='https://plus.google.com/ID Google Plus' rel='me'/>
<meta content='Nama Author' name='Author'/>
<meta content='ID Facebook' property='fb:admins'/>

Keterangan :

- Ganti ID Google Webmaster Verfikasi dengan ID Google Webmaster yang kalian dapat setelah submit Blog/Web ke Google webmaster.
- Ganti ID Bing Verification dengan ID Bing yang kalian dapat setelah submit Blog/Web ke Bing.
- Ganti ID Alexa Verification dengan ID Alexa yang kalian dapat setelah memverifikasi Blog/Web kalian ke Alexa Rank.
- Ganti ID Google Plus dengan ID Google+ kalian.
- Ganti Nama Author dengan Nama Kalian.
- Ganti ID Facebook dengan Username facebook kalian.

2. Meta Tag
Masuk ke blogger -> Setelan -> preferensi penelusuran -> meta tag -> Deskripsi, buatlah Deskripsi sepanjang 150 karakter s/d 160 karakter.

3. Non-aktifkan Mobile Version
Silahkan non-aktifkan fitur Mobile Version agar fitur Responsive bawaan template dapat bekerja dengan baik.
Masuk ke blogger -> template -> klik icon gerigi pada Seluler -> Pilih Tidak. Tampilkan template seluler di perangkat seluler -> Simpan.

4. Navigation Menu dan Social Icon
Masuk ke blogger -> template -> edit html. Cari kode di bawah dan ganti sesuai dengan intruksi.

<nav class='menus'>
<ul class='nav-menus'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
<div id='social-list'>
<ul class='socmed'>
<li><a class='facebook' href='#' title='Facebook'>Facebook</a></li>
<li><a class='twitter' href='#' title='Twitter'>Twitter</a></li>
<li><a class='plus' href='#' title='Google Plus'>Google Plus</a></li>
<li><a class='linkedin' href='#' title='Linkedin'>Linkedin</a></li>
<li><a class='pinterest' href='#' title='Pinterest'>Pinterest</a></li>
<li><a class='youtube' href='#' title='YouTube'>YouTube</a></li>
<li><a class='rss' href='#' title='RSS Feed'>RSS</a></li>
</ul>
</div>
</nav>

Keterangan :
- Ganti # dengan link yang dituju sesuai dengan Menu.

5. Dropdown Menu
Masih di menu Edit HTML. Cari kode di bawah ini dan ganti sesuai dengan intruksi.

<div id='navitions'>
<div class='isi'>
<nav class='navix' id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div id='searching'>
<form action='/search' id='search-buttons' method='get'>
<input name='q' placeholder='Search...' type='text'/><input id='search-button-top' type='submit' value=''/></form>
</div>
<a href='#' id='mobilenav'>Select Menu</a>
<ul class='menu' id='menunav'>
<li><a class='home' href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='/p/about.html'>Static Page</a></li>
<li><a href='#'>With Sub Menu</a>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Sub Menu</a>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
  <li><a href='/error.html'>Error 404</a></li>
</ul>
<script type='text/javascript'>
//<![CDATA[
menunav (jQuery);
//]]>
</script>
</nav>
</div></div>

Keterangan :
- Ganti kode yang sudah saya beri tanda merah dengan link yang ingin di tuju sesuai dengan menu.

6. Memasang Recent Post by Tag
Masuk ke blogger -> tata letak -> tambah gadget -> HTML/JavaScript, pasangkan kode berikut ini pada blog kalian.

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Blogger?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

Keterangan :
- Angka 5 adalah jumlah postingan yang ingin ditampilkan pada widget recent post, silahkan ganti angka 5 jika kalian ingin menampilkan post lebih/kurang dari 5.
- var showpostthumbnails = true pilih true untuk menampilkan gambar, ganti dengan false untuk menghilangkan gambar.
- var showpostdate = true pilih true untuk menampilkan tanggal, ganti dengan false untuk menghilangkan tanggal.
- Ganti Blogger dengan label yang ingin kalian tampilkan pada widget recent post by tag.

7.Validasi HTML5 Widget
Masuk ke blogger -> template - edit html. Silahkan cari kode <b:include name='quickedit'/> dan hapus agar blog kalian Valid HTML5. Kode tersebut biasanya akan muncul ketika menambahkan gadget/widget baru.

[X] Catatan: Dilarang menghapus atau mengubah credit