SEOFastBlogger Resposive Blogger Template

Pada kesempatan kali ini saya mau berbagi template paling keren menurut saya, dan saya pun menggunakannya, yaitu SEOFastBlogger Responsive Blogger Template. Tampilan yang begitu simpel dan minimalis membuat mata kamu sangat betah berlama-lama di blog.

Ada beberapa fitur template blog bawaan yang di hapus, seperti komentar blogger. Tetapi kita bisa menggunakan Komentar Disqus untuk alternatif lainnya. Ada beberapa kelebihan komentar disqus, seperti desain yang pas untuk template ini tentunya, dan fitur lazy load disqus dengan klik, ini supaya tidak mengganggu kecepatan load blog nya.

Berdasarkan pengalaman saya menggunakan template ini, skor di gtmetrix memang sangat memuaskan, PageSpeed Score dan YSlow Score-nya juga mempunyai nilai yang tinggi, lihat gambar dibawah.

Score nya hampir 100% di PageSpeed dan 88% di YSlow.

Template ini juga sudah valid Feed, HTML5, CSS3 di w3c validator, yang mungkin menurut saya ini adalah template pertama yang valid fitur tersebut. Jadi kamu tidak perlu lagi mensetting optimalisasi template. Kamu hanya perlu bikin posting, optimalisasi penempatan iklan adsense, dan melakukan SEO Off page. Keren bukan?

Untuk Fitur Lengkapnya Silahkan Cek Di Table berikut:

Fitur	Free	Premium
Responsive Design		Cek Fitur
Custom Mobile		Cek Fitur
Mobile Friendly		Cek Fitur
Valid Scheme.org		Cek Fitur
Valid CSS3		Cek Fitur
Valid HTML5		Cek Fitur
Valid Feed		Cek Fitur
Fast Load Performance		Cek Fitur
Disqus Comment
High CTR
2 Kolom
Adsense Ready
Popular post
Related post
Simple Recent Post
Snippet with thumbnail
Breadcrumbs
Responsive Video
Responsive Image
Responsive Table
Responsive Dropdown Menu
Flat button
Search box
CSS pre and kbd
CSS Anti Klik Kanan
Page Number Navigation
Custom Box Subscriber	(Feedburner)	(Feedburner)
Social share button
Label Widget
List Link Widget
Remove Footer Credit
No Encrypted Scripts
No Minify CSS
Sale Template

Demo Download Versi Pro($7)

Untuk Konfigurasi silahkan ikuti cara dibawah ini:

1. Untuk pemasangan template silahkan cek disini.
2. Selanjutnya nontaktifkan mode mobile kamu di setting template tersebut.
3. Terakhir konfigurasi SEOFastBlogger Resposive Blogger Template.

Silahkan anda edit template anda, Masuk ke blogger -> template -> Edit HTML Cari kode:

<!-- Ganti dengan aplikasi ID facebook anda sendiri -->
<meta content='226875977396331' property='fb:app_id'/>
<!-- Ganti dengan twitter username anda sendiri xxx ganti dengan @xxx -->
<meta content='xxx' name='twitter:site'/>
<meta content='xxx' name='twitter:creator'/>
<!-- ganti kode https://plus.google.com/+AAGian dengan url google plus anda -->
<link href='https://plus.google.com/+AAGian/about' rel='author'/>
<link href='https://plus.google.com/+AAGian/posts' rel='publisher'/>
<link href='https://plus.google.com/+AAGian/' rel='me'/>

Keterangan:
1. 226875977396331 Ganti dengan App Id kamu, kamu bisa menggunakan tools ini kalo masih bingung cari id nya.
2. +AAGian ganti dengan google plus milik kamu.

Konfiguasi Komentar Disqus
Sebelum jika anda belum punya akun disqus anda bisa mendaftarnya di https://disqus.com/.
Masih di edit HTML. Cari kode berikut

var disqus_shortname = 'demogianmr';

Keterangan:
Ganti tulisan  tulisan demogianmr dengan shortname disqus website anda sendiri.

Konfigurasi box subscriber dibawah postingan
Masih di edit HTML silahkan anda cari kode berikut:

<b:includable id='subscribebox' var='post'>
 <div class='gmr-subscribebox'>
  <h4>Subscribe via Email</h4>
  <form action='http://feedburner.google.com/fb/a/mailverify' onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=gianmr", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' method='post' target='popupwindow'>
   <input name='email' type='text' id='gmr-subscribe-input' placeholder='Email Address..'/>
   <input value='gianmr' name='uri' type='hidden'/>
   <input name='loc' type='hidden' value='en_US'/>
   <input class='gmr-btn gmr-btn-orange gmr-btn-block' type='submit' value='Subscribe Now'/>
  </form>
 </div>
</b:includable>

Keterangan:
Silahkan anda ganti kode gianmr dengan nama feedburner anda sendiri, biasanya link feedburner adalah http://feeds.feedburner.com/namafeedanda maka anda tinggal mengganti kode gianmr dengan namafeedanda

Memasukan kode banner atau adsense sebelum dan setelah artikel.
Masih di edit HTML cari kode berikut:

<!-- Adsense before article -->
<data:post.body/>
<!-- Adsense after article -->

Keterangan:
Untuk memasukkan adsense sebelum artikel silahkan anda masukkan kode hasil konversi di <!-- Adsense before article --> untuk memasukkan setelah artikel anda bisa taruh kode di <!-- Adsense after article -->.

Setting Menu atau Top Navigasi
Silahkan anda setting widget atau gadget anda, masuk ke blogger -> Tata Letak
Lalu edit gadget navigasi:

Masukkan kode berikut:

<!-- Menu toggle -->
<a href='#gmrmenu' id='gmrmenuLink' class='menu-link' title='Open Menu'>
 <!-- Hamburger icon -->
 <span></span> Menu
</a>
<div id='gmrmenu'>
 <ul>
  <li itemprop='url'><a expr:href='data:blog.homepageUrl' title='Home' itemprop='name'>Home</a></li>
  <li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>
  <li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>
  <li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>
   <li itemprop='url'>
    <a class='submenus' href='#' title='Menu' itemprop='name'>Menu</a>
    <ul class='menus'>
    <li itemprop='url'><a href='#' itemprop='name' title='SubMenu'>SubMenu</a></li>
    <li itemprop='url'><a href='#' itemprop='name' title='SubMenu'>SubMenu</a></li>
    </ul>
   </li>
  <li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>
         </ul>
</div>

Keterangan:
Ganti kode # dengan URL anda, ganti tulisan Menu dengan nama menu anda, ganti tulisan SubMenu dengan nama submenu anda.
Biarkan struktur HTML seperti diatas, jangan mengganti class atau lainnya. Atau tampilan menu anda tidak akan seperti demo. cukup mengganti href, dan judul menunya saja, kalau mau menambahkan menu anda bisa memasukkan kode:

<li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>

Konfigurasi lainnya:
Silahkan anda lihat settingan widget lainnya:

Keterangan gambar diatas:

- Untuk menambahkan Adsense setelah menu anda bisa menambahkan langsung di HeaderBanner, untuk menambahkan Adsense di sidebar anda bisa menambahkan di widget Adsense 300x250, untuk menambahkan banner di footer anda bisa menambahkan Adsense di FooterBanner. Jika anda tidak ingin menambahkan widget maka biarkan saja apa adanya.
- Untuk popular post seperti demo, settingan widgetnya seperti ini:

- Silahkan anda isi semua gadget atau widget di footer, tidak ada settingan khusus di footer widget, untuk demo widget label anda setting seperti ini:

Jika ada yang ingin kamu tanyakan, silahkan berkomentar.