Template Blog Seo Friendly Terbaru 2013 Rp0113

Template blog SEO friendly terbaru tahun 2013 ini sedikit kompleks jadi harap baca petunjuknya untuk mendapat 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 dapat mengubah desain ini sesuka hati, alasannya yakni gambar header, gambar slider, gambar latar, warna teks, dan warna link dapat diubah sesuka hati.... jadi buat desain sesuka hati anda.

Untuk membantu anda mendapat 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 dapat disebut SEO friendly. Makara berikut ini daftar fitur dari template ini....

• Title tag tentunya sudah dinamis dan menampilkan judul artikel  di setiap halaman artikel
• Dilengkapi auto meta description, alasannya yakni dari pengalaman aku 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 aksara serta warna aksara 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 dapat membiarkan heading widget tetap h2 atau mengubahnya menjadi h4, tanpa kuatir merusak tampilan blog. Tapi saran aku sebaiknya ubah heading widget jadi h4.
• Sidebar dapat 1 kolom dan 2 kolom
• Footer dapat 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 biar fungsinya dapat berjalan dengan optimal. 

Hal-Hal Yang Perlu Di Perhatikan Dari Template Blog

Komponen SEO Friendly Auto meta description

Komponen ini harus dihapus kalau anda ingin memasukkan manual meta description ke dalam artikel. Jika anda belum tahu cara menghapus auto meta description silahkan baca di bab 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 sampai 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 kalau anda mengetik artikel anda pada ms.word sebelum lalu diterbitkan di blog. Untuk mengatasi ini ada dua cara yang dapat anda tempuh.

1. Pindahkan dulu artikel ke notepad sehabis itu gres 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 dapat diubah sesuka hati pada template seo friendly ini. 
• Untuk mengubah gambar latar silahkan masuk ke sajian TEMPLATE
• Klik tombol jingga SESUAIKAN
• Pada sidebar editor ada sajian 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 sajian TEMPLATE
• Klik EDIT HTML
• Gunakan CTRL+F untuk mencari isyarat background: $(body.background);
• Ganti $(body.background) dengan url(URL GAMBAR)
• Jika gambar yakni kecil dan butuh perulangan (tile mode) tambahkan isyarat 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 sajian TATA LETAK
• Cari Widget HEADER yang menampilkan judul blog dan klik EDIT
• Pada pilih GAMBAR, anda dapat mengambil dari komputer atau dengan memasukkan URL Gambar
• Pastikan opsi Di balik judul dan keterangan terpilih
• Klik SIMPAN

Sekarang gambar header sudah terpasang dengan sempurna pada template blog ini kalau 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 sajian TATA LETAK
• Cari widget MASUKKAN KODE SLIDESHOW DI.... dan klik EDIT
• Masukkan isyarat 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="Template Blog SEO Friendly Terbaru 2013 RP0113 " alt="Template blog SEO friendly terbaru tahun Template Blog SEO Friendly Terbaru 2013 RP0113 "/></a></li>
<li><a href="URL ARTIKEL 2" target="_blank"><img src="URL GAMBAR 2" title="Template Blog SEO Friendly Terbaru 2013 RP0113 " alt="Template blog SEO friendly terbaru tahun Template Blog SEO Friendly Terbaru 2013 RP0113 "/></a></li>
<li><a href="URL ARTIKEL 3" target="_blank"><img src="URL GAMBAR 3" title="Template Blog SEO Friendly Terbaru 2013 RP0113 " alt="Template blog SEO friendly terbaru tahun Template Blog SEO Friendly Terbaru 2013 RP0113 "/></a></li>
<li><a href="URL ARTIKEL 4" target="_blank"><img src="URL GAMBAR 4" title="Template Blog SEO Friendly Terbaru 2013 RP0113 " alt="Template blog SEO friendly terbaru tahun Template Blog SEO Friendly Terbaru 2013 RP0113 "/></a></li>
</ul></div></center>

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

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

Memasang sajian header

• Sebenarnya isyarat sajian apa saja dapat dipasang pada template ini. Tapi kalau mau memasang sajian bawaan dari template ini, ikuti saja mekanisme berikut:
• Masuk ke sajian TATA LETAK
• Cari widget MASUKKAN KODE MENU DI SINI dan klik EDIT
• Setelah itu masukkan isyarat 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 final mengedit silahkan klik SIMPAN

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

Menghapus Auto Meta Description

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

• Masuk ke sajian TEMPLATE
• Klik EDIT HTML
• Cari isyarat 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 dikala menciptakan artikel baru.

Menghapus Read More & Aktifkan Threaded Comment

• Kalau anda tidak suka dengan read more dan lebih suka menggunakan jump break, maka silahkan dihapus saja read more pada template ini. Masuk ke sajian TEMPLATE, klik EDIT HTML dan centang EXPAND WIDGET TEMPLATE
• Cari isyarat 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 isyarat di atas dihapus silahkan cari isyarat 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 isyarat di atas dan ganti dengan isyarat <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 dapat mengubah heading dari judul widget dengan isyarat h4. Caranya adalah....

• Masuk ke sajian TEMPLATE
• Klik EDIT HTML dan centang EXPAND WIDGET TEMPLATE
• Cari semua isyarat <h2><data:title/></h2> dan ubah menjadi <h4><data:title/></h4>
• Cari juga semua isyarat <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 sajian TEMPLATE
• Klik SESUAIKAN 
• Klik sajian TINGKAT LANJUT pada sidebar kiri
• Silahkan ubah parameter apa saja yang anda inginkan
• Jika sudah final klik tombol jingga TERAPKAN KE BLOG

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

Share this post