Saturday 25 August 2012

Membuat Template HTML SEO Friendly Blogger

Sebuah template blog terutama blogger template, bagi sebagian blogger adalah ibarat rumah dan jati diri mereka saat ngeblog. Sudah banyak beredar di internet seputar download template gratis yang bagus dan juga menarik serta berbagai type, baik dari segi jumlah kolom, kecepatan loading atau bahkan fitur template yang seo friendly. Namun bagi saya (mungkin ada yang sama seperti saya) ane lebih menyukai theme atau template blogger yang lain dari pada yang lain tentunya tersupport fitur seo friendly.Sejak bertahu-tahun lalu, sudah berbagai model template sudah ane jajal dan kadang masih saja kurang sreg. So di posting ane kali ini sebenarnya bukan untuk berbagi downloadan templates tapi lebih ke bagaimana membuat template sesuai selera dan tentunya seo friendly.

Type html template untuk blogspot (banyak juga di isnaini dot com) untuk blogger classic ternyata masih menyimpan rahasia onpage seo yang saya rasa masih sangat kuat bahkan termasuk super saya rasa. Sejak april 2012 ini google lebih menambah porsi untuk onpage seo alias dari blog/ web kita seperti meta, sitemap. robots.txt, hyper link yang ada judul, gambar ber alternate (alt) dan bahkan dari sisi template juga, google lebih mengawasi over optimasi. Sebagian seo'er pemain lama masih menganggap blogger classic masih lebih seo friendly dan saya juga masih sependapat,selain itu biasanya template classic memiliki kecepatan loading.

Sebelum posting ini, saya sempat mengamati pengindeks an google mengenai artikel kontes seo Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda. Ane ganti template classic dan pengindeks annya lumayan bagus. Memang efek google honemoon masih ada tapi kontribusi theme saya rasa juga tinggi.Kelebihan membuat sendiri template blogger classic ini, kita bisa lebih mengenal html, bisa memiliki template beda dari yang lain, dan blog anda bisa terlihat makin profesional karena kita memakai website template, html template dan css themes yang kebanyakan di peruntukan bagi website statis, tips ini juga sangat bagus bagi blogger yang memakai free host di blogspot untuk custom domain dan mungkin sekilas bukan host memakai blogspot.Ok, langsung saja biar ga bertele-tele

1. Tempat cari web templates Tentunya kita harus mencari template favorite dulu, dan sobat bisa ubek-ubek lacak template gratis di web berikut ini:
http://www.freecsstemplates.org/css-templates/
http://www.free-css-templates.com/free-templates.html
http://www.oswd.org/designs/browse/
http://www.openwebdesign.org/browse.php
http://www.templateworld.com/free_templates.html
http://www.ocarda.com/templates/index.htm
http://andreasviklund.com/templates/
http://www.cmgtechnologies.com/free-css-templates.php
http://www.csstemplates.net/free-css-templates.php
http://templates.arcsin.se/
http://www.opensourcetemplates.org/browse.php
http://www.styleshout.com/free-templates.php
http://www.pannasmontata-templates.net/templates/
http://www.jauhari.net/themeshttp://demusdesign.com/
http://www.templatesbox.com/templates.htm
http://www.solucija.com/home/css-templates/
http://www.opendesigns.org/view-designs/
http://www.ramblingsoul.com/free_css_templates/


2. Judul Blog
jika sudah dapat themes idolanya, selanjutnya cari kode judul di template itu <title> dan </title> sudah dapat silahkan paste kode
<$BlogPageTitle$> diantara title itu, maka akan menjadi:
<title><$BlogPageTitle$></title>

Catatan: Title yang paling atas yah (di bagian meta tag)3.

Sekarang tampilan judul di blog dan terbaca oleh visitor:
Cari kode <div id="header"> atau <div id="logo">Lalu pasang kode dibawah ini diantaranya<ItemPage><a href=”<$BlogURL$>"></ItemPage><$BlogTitle$><ItemPage></a></ItemPage>
Kira-kira seperti gambar berikut


4. Nah ini yang paling krusial yaitu body atau isi blog kita baik itu posting, page, komentar, label dan lainnya, pasang (copy paste code berikut) disiniDISINI

5 Menampilkan recent post :
Template klasik tidak ada widget jadi harus manual, jadi pasang kode recent postnya diantara tag <ul> dan </ul> . Biasanya ada lebih dari 2 tag <ul>, tinggal pilih aja di mana mau diletakkan. Hapus kode diantara <li> hingga </li> diantara <ul> dan </ul> tersebut. kemudian pastekan kode berikut:

<BloggerPreviousItems><li><a href=”<$BlogItemPermalinkURL$>”><$BlogPreviousItemTitle$></a></li></BloggerPreviousItems>


6. Pasang archive/ arsip : Caranya hampir sama dengan cara no 5, lalu paste kode arsip berikut.

<MainOrArchivePage><ul><BloggerArchives><li><a href=”<$BlogArchiveURL$>”><$BlogArchiveName$></a></li></BloggerArchives></ul></MainOrArchivePage>


7. Selesai sudah template kita.

Catatan:
Untuk CSS nya bisa di pasang langsung di template atau upload di google site dan pasang di theme kita seperti berikut:

<link rel="stylesheet" href="https://sites.google.com/file upload an kamu.css" type="text/css" media="screen" />

Biasanya ada gambar, image, picture background di template download tadi, dan di CSSnya biasanya ada keterangan gambar nomor berapa. So upload aja di blogspot kita (posting draft khusus upload gambar) lalu pasangkan di CSS themes tadi contoh:

background: #000000 url(images 2 jpg) no-repeat right top;

So ganti aja dari hasil upload image tadi di dalam image itu jadi seperti ini:
background: #000000 url(link gambar upload images 2 jpg disini) no-repeat right top;
Untuk memperkuat seo onpage nya silahkan tambahkan dan edit metanya di Meta Title Tag Seo untuk pengguna Blogger Classic

Selesai.

1 comment:

  1. klo aku tau gan,,
    bukannya di ubah H3 nza mnjadi H2??

    nice post gan,,
    salam dunia blog gan,,
    coment back za gan,,

    ReplyDelete