BACA PANDUAN DI BAWAH INI:
Perhatian! Contoh blog demo menggunakan desain warna yg suram, yaitu hitam dan ungu. Anda dapat mengubah desain ini sesuka hati, sebab gambar header, gambar slider, gambar latar, warna teks, dan warna link dapat diubah sesuka hati.... jadi buat desain sesuka hati anda.
Untuk membantu anda mendapatkan hasil optimal dari blog ini, maka ada 3 hal yg perlu saudara ketahui. Ketiga hal itu adalah:
- Fitur Template Blog SEO Friendly 2013 RP0113
- Hal-Hal yg Perlu Diperhatikan Dari Template Blog
- Caranya Memodifikasi Template Blog SEO friendly ini
Fitur Template Blogspot SEO Friendly 2013 RP0113
Tentunya template blogspot ini Musti memenuhi beberapa kriteria untuk dapat disebut SEO friendly. Kaprikornus berikut ini daftar fitur dari template ini....
- Title tag tentunya sudah dinamis dan menampilkan judul Maknakel di setiap halaman Maknakel
- Dilengkapi auto meta description, sebab dari pengalaman aku 30% saja blogger yg mau repot mengatur meta description
- Menu dan Header belum terpasang jadi tampilan dasar sangat sederhana dan cukup ringan. Perhatikan trik dan syarat pemasangan di bawah untuk hasil yg optimal
- Judul header blog dengan tag h1 dan sudah dinamis mengikuti judul Maknakel
- Mudah Mengubah gambar header
- Bisa Mengubah gambar latar
- Bisa Mengubah jenis dan ukuran abjad serta warna abjad dari body text
- Judul Maknakel sudah diberi tag h2
- Dilengkapi dengan breadcrumbs
- Sudah dilengkapi dengan panel yg meminta pembaca menyumbang klik Google +. Jika belum tahu Mengapa Google Plus penting silahkan baca di sini....
- Dilengkapi dengan related Maknakel untuk mengajak pembaca membaca Maknakel lainnya
- Dilengkapi dengan rich snippet review bintang 5 untuk penampilan lebih atraktif di hasil pencarian Google
- Dual heading widget. Anda dapat memAgarkan 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 bakal aktif
Fitur-fitur di atas ini sudah cukup memenuhi syarat template ini untuk disebut SEO friendly. Bakal tetapi ada beberapa hal yg Musti saudara perhatikan dalam memasang template blog ini semoga fungsinya dapat berjalan dengan optimal.
Hal-Hal yg Perlu Di Perhatikan Dari Template Blog
Komponen SEO Friendly Auto meta description
Komponen ini Musti dihapus Jika anda ingin memasukkan manual meta description ke dalam Maknakel. Jika anda belum tahu trik menghapus auto meta description silahkan baca di pecahan trik memodifikasi template blog di bawah. Jika anda belum tahu trik memasukkan manual meta description, silahkan baca Maknakel trik Memasang meta description
Gambar Header dan Slider Sangat Besar
Karena dimensi gambar yg disedikan sangat besar yaitu 1000x230 untuk header dan 1000x300 untuk slider, maka anda Musti mengkompresi setiap gambar sampai berukuran sekitar 30 kb, tapi tetap cukup baik untuk dilihat. Jika anda tidak tahu Caranyanya maka template bakal sangat berat. SEBAIKNYA JANGAN GUNAKAN SLIDER JIKA ANDA BELUM TAHU Caranya MEMPERKECIL UKURAN FILE GAMBAR.
Masalah Auto Read More Pada Template Blog
Auto read more yg terpasang bakal bermasalah Jika anda mengetik Maknakel anda pada ms.word sebelum lalu diterbitkan di blog. Untuk mengatasi ini ada dua trik yg dapat anda tempuh.
- Pindahkan dulu Maknakel ke notepad setelah itu gres dicopy paste ke blog
- Hapus auto read more dan gunakan jump break sebagai pembatas Maknakel.
Pelajari trik menghapus read more dari template blog seo friendly RP0113 di bawah ini
Caranya 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
- Bakal ditampilkan beberapa kategori gambar latar. Silahkan dipilih sesuai selera
- Klik SELESAI
- Klik tombol jingga TERAPKAN KE BLOG
Caranya alternatif:
- Masuk ke sajian TEMPLATE
- Klik EDIT HTML
- Gunakan CTRL+F untuk mencari aba-aba background: $(body.background);
- Ganti $(body.background) dengan url(URL GAMBAR)
- Jika gambar yaitu kecil dan butuh perulangan (tile mode) tambahkan aba-aba 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 yg bakal dijadikan background dalam ukuran panjang 1000px dan lebar 230px
- Masuk ke sajian TATA LETAK
- Cari Widget HEADER yg 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 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 sajian TATA LETAK
- Cari widget MASUKKAN KODE SLIDESHOW DI.... dan klik EDIT
- Masukkan aba-aba di bawah ini....
<center><div style="border-bottom:10px solid #000000; width:1000px; background: #bbbbbb;">
<ul class="slideshow">
<li><a href="URL MaknaKEL 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 MaknaKEL 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 MaknaKEL 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 MaknaKEL 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 ubah URL MaknaKEL dengan link ke Maknakel yg anda inginkan terhubung dengan gambar slideshow
- Ganti juga URL GAMBAR semoga slider menampilkan gambar yg diinginkan.
- Ganti JUDUL GAMBAR dan DESKRIPSI GAMBAR sebab ini yaitu teks yg bakal ditampilkan di caption yg 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 aba-aba sajian apa saja dapat dipasang pada template ini. Tapi Jika 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 aba-aba 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 aba-aba sajian di atas bukanlah dropdown menu. Jika anda butuh dropdown sajian coba baca di sini.
Menghapus Auto Meta Description
- Masuk ke sajian TEMPLATE
- Klik EDIT HTML
- Cari aba-aba berikut dan hapus
<meta expr:content='data:blog.pageName + " dari blog " + data:blog.title + " dengan judul " + data:blog.pageName' name='description'/>
- Jika sudah klik SIMPAN TEMPLATE
Jika anda sudah menghapus fitur auto meta description dari template ini, maka anda Musti/harus memasukkan seCaranya manual meta description Saat menciptakan Maknakel baru.
Menghapus Read More & Aktifkan Threaded Comment
- Jika 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 aba-aba 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 aba-aba di atas dihapus silahkan cari aba-aba 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 == "item"'><data:post.body/></b:if>
- Hapus aba-aba di atas dan ubah dengan aba-aba <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 bakal berfungsi
Mengubah heading widget jadi h4
- Masuk ke sajian TEMPLATE
- Klik EDIT HTML dan centang EXPAND WIDGET TEMPLATE
- Cari semua aba-aba <h2><data:title/></h2> dan ubah menjadi <h4><data:title/></h4>
- Cari juga semua aba-aba <h2 class='title'><data:title/></h2> dan ubah menjadi <h4 class='title'><data:title/></h4>
- Klik SIMPAN TEMPLATE
- Silahkan masuk ke sajian TEMPLATE
- Klik SESUAIKAN
- Klik sajian TINGKAT LANJUT pada sidebar kiri
- Silahkan ubah parameter apa saja yg anda inginkan
- Jika sudah final klik tombol jingga TERAPKAN KE BLOG
0 comments:
Post a Comment