Template Blog SEO Friendly Terbaru 2013 RP0113

Template blog SEO friendly terbaru tahun 2013 ini sedikit kompleks jadi harap baca petunjuknya untuk mendapatkan hasil yang optimal. Template blog ini dirancang dengan gambar header yang besar, disertai dengan slider yang juga sangat besar.

LIHAT BLOG DEMO
DOWNLOAD TEMPLATE BLOG

LIHAT KOLEKSI TEMPLATE BLOG SEO FRIENDLY LAINNYA

BACA PANDUAN DI BAWAH INI:
Perhatian! Contoh blog demo menggunakan desain warna yang suram, yaitu hitam dan ungu. Anda bisa mengubah desain ini sesuka hati, karena gambar header, gambar slider, gambar latar, warna teks, dan warna link bisa diubah sesuka hati.... jadi buat desain sesuka hati anda.

Untuk membantu anda mendapatkan hasil optimal dari blog ini, maka ada 3 hal yang perlu saudara ketahui. Ketiga hal itu adalah:

• Fitur Template Blog SEO Friendly 2013 RP0113
• Hal-Hal Yang Perlu Diperhatikan Dari Template Blog
• Cara Memodifikasi Template Blog SEO friendly ini

Fitur Template Blogspot SEO Friendly 2013 RP0113

Tentunya template blogspot ini harus memenuhi beberapa kriteria untuk bisa disebut SEO friendly. Jadi berikut ini daftar fitur dari template ini....

• Title tag tentunya sudah dinamis dan menampilkan judul artikel  di setiap halaman artikel
• Dilengkapi auto meta description, karena dari pengalaman saya 30% saja blogger yang mau repot mengatur meta description
• Menu dan Header belum terpasang jadi tampilan dasar sangat sederhana dan cukup ringan. Perhatikan cara dan syarat pemasangan di bawah untuk hasil yang optimal
• Judul header blog dengan tag h1 dan sudah dinamis mengikuti judul artikel
• Mudah mengganti gambar header
• Bisa mengganti gambar latar
• Bisa mengganti jenis dan ukuran huruf serta warna huruf dari body text
• Judul artikel sudah diberi tag h2
• Dilengkapi dengan breadcrumbs
• Sudah dilengkapi dengan panel yang meminta pembaca menyumbang klik Google +. Jika belum tahu kenapa Google Plus penting silahkan baca di sini....
• Dilengkapi dengan related artikel untuk mengajak pembaca membaca artikel lainnya
• Dilengkapi dengan rich snippet review bintang 5 untuk penampilan lebih atraktif di hasil pencarian Google
• Dual heading widget. Anda bisa membiarkan heading widget tetap h2 atau mengubahnya menjadi h4, tanpa kuatir merusak tampilan blog. Tapi saran saya sebaiknya ubah heading widget jadi h4.
• Sidebar bisa 1 kolom dan 2 kolom
• Footer bisa 1 kolom dan 2 kolom
• Jika READ MORE dihapus, THREADED COMMENT akan aktif

Fitur-fitur di atas ini sudah cukup memenuhi syarat template ini untuk disebut SEO friendly. Akan tetapi ada beberapa hal yang harus saudara perhatikan dalam memasang template blog ini agar fungsinya bisa berjalan dengan optimal. 

Hal-Hal Yang Perlu Di Perhatikan Dari Template Blog

Komponen SEO Friendly Auto meta description

Komponen ini harus dihapus jika anda ingin memasukkan manual meta description ke dalam artikel. Jika anda belum tahu cara menghapus auto meta description silahkan baca di bagian cara memodifikasi template blog di bawah. Jika anda belum tahu cara memasukkan manual meta description, silahkan baca artikel cara pasang meta description

Gambar Header dan Slider Sangat Besar

Karena dimensi gambar yang disedikan sangat besar yaitu 1000x230 untuk header dan 1000x300 untuk slider, maka anda harus mengkompresi setiap gambar hingga berukuran sekitar 30 kb, tapi tetap cukup baik untuk dilihat. Jika anda tidak tahu caranya maka template akan sangat berat. SEBAIKNYA JANGAN GUNAKAN SLIDER JIKA ANDA BELUM TAHU CARA MEMPERKECIL UKURAN FILE GAMBAR.

Masalah Auto Read More Pada Template Blog

Auto read more yang terpasang akan bermasalah jika anda mengetik artikel anda pada ms.word sebelum kemudian diterbitkan di blog. Untuk mengatasi ini ada dua cara yang bisa anda tempuh.

1. Pindahkan dulu artikel ke notepad setelah itu baru dicopy paste ke blog
2. Hapus auto read more dan gunakan jump break sebagai pembatas artikel.

Pelajari cara menghapus read more dari template blog seo friendly RP0113 di bawah ini

Cara Memodifikasi Template Blog SEO FRIENDLY RP0113

Mengubah gambar background

• Gambar background bisa diubah sesuka hati pada template seo friendly ini. 
• Untuk mengubah gambar latar silahkan masuk ke menu TEMPLATE
• Klik tombol jingga SESUAIKAN
• Pada sidebar editor ada menu LATAR BELAKANG,....silahkan diklik
• Disamping thumbnail latar ada sebuah tombol berbentuk panah kecil, silahkan diklik
• Akan ditampilkan beberapa kategori gambar latar. Silahkan dipilih sesuai selera
• Klik SELESAI
• Klik tombol jingga TERAPKAN KE BLOG

Cara alternatif:

• Masuk ke menu TEMPLATE
• Klik EDIT HTML
• Gunakan CTRL+F untuk mencari kode background: $(body.background);
• Ganti $(body.background) dengan url(URL GAMBAR)
• Jika gambar adalah kecil dan butuh perulangan (tile mode) tambahkan kode repeat
• Contoh: background: url(http://tinypic.com/red-pattern.jpg) repeat;
• Klik tombol jingga SIMPAN TEMPLATE

Sekarang gambar latar dari template blogspot SEO Friendly ini sudah berganti sudah berganti dengan gambar pilihan anda.

Memasang gambar header

• Buat dulu gambar yang akan dijadikan background dalam ukuran panjang 1000px dan lebar 230px
• Masuk ke menu TATA LETAK
• Cari Widget HEADER yang menampilkan judul blog dan klik EDIT
• Pada pilih GAMBAR, anda bisa mengambil dari komputer atau dengan memasukkan URL Gambar
• Pastikan opsi Di balik judul dan keterangan terpilih
• Klik SIMPAN

Sekarang gambar header sudah terpasang dengan tepat pada template blog ini jika ukurannya benar 1000px x 230px

Memasang gambar Slider 

• Buat 4 gambar dengan ukuran 1000 x 300 pixels
• Pastikan ukuran setiap gambar hanya berkisar 30 kb
• Setelah itu masuk ke menu TATA LETAK
• Cari widget MASUKKAN KODE SLIDESHOW DI.... dan klik EDIT
• Masukkan kode di bawah ini....

<center><div style="border-bottom:10px solid #000000; width:1000px; background: #bbbbbb;">
<ul class="slideshow">
<li><a href="URL ARTIKEL 1" target="_blank"><img src="URL GAMBAR 1" title="JUDUL GAMBAR 1" alt="DESKRIPSI GAMBAR 1"/></a></li>
<li><a href="URL ARTIKEL 2" target="_blank"><img src="URL GAMBAR 2" title="JUDUL GAMBAR 2" alt="DESKRIPSI GAMBAR 2"/></a></li>
<li><a href="URL ARTIKEL 3" target="_blank"><img src="URL GAMBAR 3" title="JUDUL GAMBAR 3" alt="DESKRIPSI GAMBAR 3"/></a></li>
<li><a href="URL ARTIKEL 4" target="_blank"><img src="URL GAMBAR 4" title="JUDUL GAMBAR 4" alt="DESKRIPSI GAMBAR 4"/></a></li>
</ul></div></center>

• Silahkan ganti URL ARTIKEL dengan link ke artikel yang anda inginkan terhubung dengan gambar slideshow
• Ganti juga URL GAMBAR agar slider menampilkan gambar yang diinginkan.
• Ganti JUDUL GAMBAR dan DESKRIPSI GAMBAR karena ini adalah teks yang akan ditampilkan di caption yang berwarna hitam semi transparan
• Setelah selesai mengedit silahkan klik SIMPAN.

Dengan ini slider sudah terpasang dan template blog SEO friendly anda terlihat lebih atraktif.

Memasang menu header

• Sebenarnya kode menu apa saja bisa dipasang pada template ini. Tapi kalau mau memasang menu bawaan dari template ini, ikuti saja prosedur berikut:
• Masuk ke menu TATA LETAK
• Cari widget MASUKKAN KODE MENU DI SINI dan klik EDIT
• Setelah itu masukkan kode HTML berikut ke dalamnya

<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Beranda</a></li>
<li><a href="#">Hobby</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Layanan Jasa</a></li>
<li><a href="#">Tentang Saya</a></li>
<li><a href="#">Hubungi</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
</div>

• Ganti tanda pagar dengan URL link, dan edit nama link sesuai kebutuhan anda.
• Jika sudah selesai mengedit silahkan klik SIMPAN

Sekarang menu sudah terpasang pada template blog anda. Perhatikan bahwa kode menu di atas bukanlah dropdown menu. Jika anda butuh dropdown menu coba baca di sini.

Menghapus Auto Meta Description

Jika anda mau memakai fitur meta description dari blogger sebagaimana pernah saya bahas di artikel meta description, maka anda harus menghapus fitur auto meta description. Caranya....

• Masuk ke menu TEMPLATE
• Klik EDIT HTML
• Cari kode berikut dan hapus

<meta expr:content='data:blog.pageName + &quot; dari blog &quot; + data:blog.title + &quot; dengan judul &quot; + data:blog.pageName' name='description'/>

• Jika sudah klik SIMPAN TEMPLATE

Jika anda sudah menghapus fitur auto meta description dari template ini, maka anda wajib memasukkan secara manual meta description saat membuat artikel baru.

Menghapus Read More & Aktifkan Threaded Comment

• Kalau anda tidak suka dengan read more dan lebih suka memakai jump break, maka silahkan dihapus saja read more pada template ini. Masuk ke menu TEMPLATE, klik EDIT HTML dan centang EXPAND WIDGET TEMPLATE
• Cari kode berikut dan hapus

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

• Setelah kode di atas dihapus silahkan cari kode berikut....

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Hapus kode di atas dan ganti dengan kode <data:post.body/>
• Kode di atas ada dua di dalam template jadi ulangi proses penggantian kodenya sekali lagi. 
• Klik SIMPAN TEMPLATE
• Jika read more sudah dihapus, fitur threaded comment akan berfungsi
  

Mengubah heading widget jadi h4
Supaya template lebih SEO friendly, kita juga bisa mengubah heading dari judul widget dengan kode h4. Caranya adalah....

• Masuk ke menu TEMPLATE
• Klik EDIT HTML dan centang EXPAND WIDGET TEMPLATE
• Cari semua kode <h2><data:title/></h2> dan ubah menjadi <h4><data:title/></h4>
• Cari juga semua kode <h2 class='title'><data:title/></h2> dan ubah menjadi <h4 class='title'><data:title/></h4>
• Klik SIMPAN TEMPLATE

Mengubah warna, jenis, dan ukuran teks

• Silahkan masuk ke menu TEMPLATE
• Klik SESUAIKAN 
• Klik menu TINGKAT LANJUT pada sidebar kiri
• Silahkan ubah parameter apa saja yang anda inginkan
• Jika sudah selesai klik tombol jingga TERAPKAN KE BLOG

Mungkin ini saja dulu, jika masih ada lagi yang perlu dimodifikasi akan ditambahkan kemudian....