Template Blog Supervba Gratis SEO Fast Loading

Template gratis merupakan incaran semua orang yang punya blog. Kalau ada yang gratis, kenapa harus beli, hehe.

Template bagi sebuah blog memang sangat penting. Template merupakan penunjang untuk semua hal dari blog tersebut. Tinggal kita saja, template blog seperti apa yang kita butuhkan.

Dalam memakai template blog, kita tidak boleh sembarangan. Untuk memilih template bagi blog, kita harus memperhatikan beberapa hal. Berikut beberapa hal yang saya sarankan untuk diperhatikan saat memilih template blog. Jadi, pilihlah:
1. Template yang SEO
2. Template blog yang Fast Loading
3. Template Blog yang Responsive
4. Template blog yang memiliki struktur HTML/Meta Tag yang baik.

Apakah template blog yang kita gunakan sekarang sudah memenuhi saran saya di atas?. Kita dapat melakukan pengecekan terhadap template blog dengan menggunakan beberapa tools berikut ini.
1. Cek SEO dengan Chkme.
2. Cek Fast Loading dengan PageSpeed Insights dan GTMetrix.
3. Cek Responsive dengan troy.
3. Cek Meta Tag dengan Structured Data Testing Tools dan Meta Tag Analyzer.

Supervba kali ini akan membagikan template blog yang sudah maupun sedang digunakan. Silahkan lakukan tes terlebih dahulu terhadap blog kami apakah template yang kami gunakan sudah cukup memenuhi kriteria di atas. OK, berikut ini 2 tipe template blog Supervba yang dapat dicoba pada blog anda.

Template Blog Supervba dengan Tabs pada Sidebar

Unduhan

 Silahkan unduh template berikut.

1. SuperTM - Blogger Template Free No Tabs

2. SuperTM - Blogger Template Free With Tabs

Berikut hasil tes dari template di atas menggunakan GTMetrix.

Sebelum menggunakan template ini, kami harap untuk tidak menghilangkan link/URL kami : Supervba. Anda bebas mendesign dan mendistribusikannya kembali secara gratis (free).

Set Meta Tag HTML

<!-- SEO Meta Tag Start -->
<meta content='YOUR VERIFICATION CODE' name='google-site-verification'/>
<meta content='YOUR VERIFICATION CODE' name='msvalidate.01'/>
<meta content='YOUR NAME' name='Author'/>
<meta content='YOUR EMAIL' name='Email'/>
<meta content='YOUR NATION' name='geo.placename'/>
<!-- SEO Meta Tag end -->

<!-- SEO Title Tag -->
<title><data:blog.pageTitle/> | YOUR BLOG TITLE</title>
<meta content='YOUR KEYWORDS' name='keywords'/>

Untuk Tag Meta deskripsi blog, karena deskripsi blog muncul otomatis, silahkan isi deskripsi blog melalui dasbord blogger>>setelan>>preferensi penelusuran>>deskripsi. Sedangkan untuk deskripsi blog pada bagian bawah nama blog, silahkan ke dashboard blogger>>setelan dasar>>deskripsi. Isi deskripsi blog kita.

Set Menu Blog

Untuk bagian menu atas, silahkan ganti tanda # dengan alamat URL kita.

<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>

<li><a class='fcb' href='#' target='_blank'><i class='fa fa-facebook-square fa-2x'/></a>
</li>
<li><a class='gpl' href='#' target='_blank'><i class='fa fa-google-plus-square fa-2x'/></a>
</li>
<li><a class='twt' href='#' target='_blank'><i class='fa fa-twitter-square fa-2x'/></a>
</li>
<li><a class='ytb' href='#' target='_blank'><i class='fa fa-youtube fa-2x'/></a>
</li>

Begitupula untuk menu berikut, silahkan ganti tanda # dengan alamat URL kita. Kemudian ganti nama menu sesuai kebutuhan.

<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>Office</a>
<li><a href='#'>Powerpoint</a></li><li><a href='#'>Excel</a></li>
<li><a href='#'>Word</a></li>
<li><a href='#'>Printer</a></li>
<li><a href='#'>VBA</a>
<li><a href='#'>VBA Powerpoint</a></li><li><a href='#'>VBA Excel</a></li>
<li><a href='#'>Game</a></li>
<li><a href='#'>Video Tutorial</a></li>
<li><a href='#'>Media</a>
<li><a href='#'>Video Pembelajaran</a></li>
<li><a href='#'>NgeBlog</a></li>

Set Laman Error 404

Untuk pesan error 404, silahkan ke dasbord blogger>> setelan>>preferensi penelusuran. Perhatikan menu kesalahan dan pengalihan. Pada pesan untuk laman yang tidak ditemukan klik edit. Kemudian tambahkan kode htmlnya. Caranya silahkan baca Cara Membuat dan Redirect Laman Error 404 Blog Fast Loading

Set Template Versi Mobile

Untuk mengatur tampilan template ini pada versi mobile, silahkan ke dasbord blogger>>template. Pada tampilan seluler, klik ikon gear untuk menampilkan menu. Silahkan setting seperti gambar berikut.

Set Halaman Navigasi Blog

Untuk mengatur navigasi blog (blog pager), silahkan ke dashboard blogger>>tata letak (layout). Kemudian klik tambah gadget>>html/javascript pada sidebar yang diinginkan. Kemudian tambahkan kode html berikut pada bidang htmlnya.

<style type="text/css">
.home-link{display:none}
#blog-pager-newer-link {font-size:13px;width:300px;float:left; text-align:left;font-family:Fjala One, Arial, sans-serif;}
#blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;font-family:Fjala One, Arial, sans-serif;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + "" );//rgt
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text("" + newerLinkTitle);
});
});
</script>

Set Sematan Video Youtube pada Postingan

Template SuperTM ini menggunakan kode html yang responsive untuk penambahan objek video dalam postingan blog. Pada template SuperTM ini, sematan video Youtube tidak menggunakan iFrame. Sehingga sangat membantu dalam meningkatkan SEO blog.

OK, untuk postingan yang menggunakan video Youtube, silahkan gunakan kode html berikut untuk menambahkan sematan video pada postingan kita.

<div class="videoyoutube">

<div class="video-responsive">

<div class="video-youtube loader" data-src="https://www.youtube.com/embed/kodeVideoAnda">
</div>

</div>

</div>

Widget Supercounters Untuk Statistik Pengunjung Blog

Untuk memasang widget pengunjung blog yang sedang online, kita bisa menggunakan widget dari Supercounters. Untuk memasangnya, silahkan ke tata letak (layout) blog>>tambah gadget>>html/javascript. Kemudian tambahkan kode html berikut.

<!-- BEGIN: Powered by Supercounters.com -->
<center><script type="text/javascript" src="http://widget.supercounters.com/online_i.js"></script><script type="text/javascript">sc_online_i(1055965,"ffffff","788ff5");</script><br /><noscript><a href="http://www.supercounters.com/">Free Tumblr Online Counter</a></noscript>
</center>
<!-- END: Powered by Supercounters.com -->

Semoga postingan kali ini bermanfaat. Ikuti informasi perkembangan blog kami melalui fanspage facebook kami di Supervba. Selamat mencoba.