Template Blog SEO Terbaik dan Terpopuler 2016

Template Blog SEO Terbaik dan Terpopuler 2016

Malam Guys gua akan post Template Blog SEO Terbaik dan Terpopuler 2016. Gua juga pake template Invision 
1. Invision Responsif Blogger
Template ini buatan mbak arlina, template ini sangat baru karena dibuat awal 2016, responsive SEO friendly dan salah satu fitur unggulannya adalah format komentar yang sudah terintegrasi dengan disquis, klik demo untuk melihat fitur unggulan tersebut .
4 Template Blog Keren SEO Friendly Gratis Terbaik 2016




2. Invert Responsive and SEO Friendly Blogger
Template ini juga buatan mbak arlina,keren full image,cukup ringan responsive dan SEO friendly juga sudah dilengkapi fitur ajax search box, ini salah satu template pavorite saya.
4 Template Blog Keren SEO Friendly Gratis Terbaik 2016




3. Dynamic Mag Blogger Template
Template dengan konsep mag ini cukup populer dan banyak yang memakainya, desainya simple tetapi elegan dan tetap fast loading.
4 Template Blog Keren SEO Friendly Gratis Terbaik 2016




4. Blogku Blogger Template
Template ini sangat cocok untuk blog personal, sangat simple tapi penuh SEO dan responsive, template ini buatan mas sugeng.
4 Template Blog Keren SEO Friendly Gratis Terbaik 2016




Sekian artikel Template Blog SEO Terbaik dan Terpopuler 2016, saran dari saya jangan hapus link credit pada template blog untuk menghargai pembuatnya, semoga bermanfaat.
Cara Memasang Simple Share Button Responsif Untuk Blog

Cara Memasang Simple Share Button Responsif Untuk Blog

Lalu lintas yang ramai pada blog adalah impian semua blogger. Lalu bagaimana cara membuat traffik blog meningkat? Selain artikel yang berkualitas dan backlink, peranan lalu lintas dari sosial media juga memiliki peran yang sangat vital. Bagi seorang blogger yang baru saja terjun di dunia per-blogan ini tidak akan langsung mendapatkan pengunjung organik begitu saja. Apa itu pengunjung organik? Pengunjung organik adalah pengunjung yang datang langsung dari Mesin Pencari.

Yap, sosial media akan menjadi pilihan lain sebelum para pengunjung blog datang dari google, yahoo ataupu mesin pencari lainnya. Untuk itu anda memerlukan apa itu yang namanya “Share Button”

Share Button atau juka di terjemahkan dalam bahasa indonesi adalah Tombol Bagikan. Fungsi dari tombol bagikan ini adalah untuk membagikan/share artikel anda ke sosial media sehingga artikel anda akan dibaca pengunjung yang melihat artikel anda di sosial media.

Sayangnya saat ini banyak sekali Share Button yang ada di Internet tidak Responsif. Sehingga share button yang dibuka dengan perangkat lain akan hancur atau memiliki bentuk yang berbeda.
Selain itu, banyak juga share button yang tidak valid HTML.

Untuk itu, akan gua bagikan share button yang Super Simple dan Responsif sehingga akan menyesuaikan jika dibuka dengan berbeda perangkat selain itu, tentunya juga valid HTML.
Berikut adalah tampilan Share button yang akan gua bagikan.

Kenapa gua memilih Facebook, Twitter dan Google+? Tentunya karena ketiga sosial media ini memiliki pengguna terbanyak sehingga akan memaksimalkan artikel yang ingin anda share untuk mendapatkan pembaca.

Langsung saja, berikut adalah cara memasang Share Button keren ini pada blog agan.

1. Masuk terlebih dahulu pada blog anda.
2. Pilih menu Template, pada dashbor, kemudian Klik “Edit HTML”



3. Masukkan kode dibawah ini tepat di atas ]]></b:skin>
* Share Button */
#button-share{display:block;text-align:center;margin: 5px 0 0;padding: 5px 0 0;}
#button-share a {color:#fff;position: relative;display:inline-block;font: normal 13px Verdana;text-transform:capitalize;margin:5px;padding:0;border-radius:3px}
#button-share a.fb {background:#3b5998;padding:7px}#button-share a.tw {background:#01BBF6;padding:7px}#button-share a.gp {background:#D54135;padding:7px}#button-share a.lm {background:#fb8938;padding:7px}#button-share a.share {background:#fff;color:#000;padding:7px}
4. Setelh itu cari kode di seperti dibawah ini <data:post.body/>

  • Kurang lebih tampilannya seperti dibawah ini

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
.....
 </article>
</b:includable>
5. Jika sudah ketemu, letakkan script HTML ini di atas kode tersebut jika anda ingin posisi share button di atas artikel atau dibawah jika anda ingin posisi share button di bawah artikel.
<div id='button-share'>
<span style='float:left;margin:10px 12px 40px 0px;font-weight:bold'>SHARE ON:</span>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Facebook'>Facebook</a>
<a class='tw' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Twitter'>Twitter</a>
<a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Google+'>Google+</a></div>
6. Simpan template dan lihat Hasilnya.

NOTE:
Jika anda ingin menggan ti Share Button lama anda, anda cukup menghapus script HTML pada kkajk dan menggantinya dengan kode HTML diatas.
Cara memasang page number di blogger

Cara memasang page number di blogger



PANDUAN cara menampilkan, memunculkan, atau membuat Navigasi Halaman dengan Nomor/Angka (Numbered Page Navigation)


Tips ini sekaligus mengganti teks "Newer Posts" (Posting Terbaru), "Home" (Beranda), dan "Older Posts" (Posting Lama) yang biasa muncul di halalaman depan dan/atau halaman Label/Kategori konten blog.


Cara Membuat Navigasi Halaman Blog Pake Angka/Nomor

1. Template > Edit HTML
2. Cari (Ctrl+F) kode </body> (Ada di bagian bawah banget).
3.  Copy kode berikut ini dan paste di atas kode </body> tadi:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>


4. Cari (Ctrl+F) kode ]]</b:skin>
5. Copy kode berikut ini dan paste di atas kode ]]</b:skin> tersebut:



#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}



6. Save Template!

Kini Navigasi Halaman blog Anda berubah jadi nomor, dari yang tadinya Newer, Older, dan Home, menjadi angka seperti tampak di halaman depan blog ini.