Jumat, 25 Mei 2012

Edit Template Jadi SEO Friendly

Diposting oleh Tebe Mukri di Jumat, 25 Mei 2012 ~ 17.46.00

Optimalisasi SEO pada blog memang sangat penting agar blog kita menjadi nomor satu di google. Karena dengan mengoptimalkan SEO di blog kita maka akan maka blog kita akan mudah untuk mendapatkan pengunjung dari dunia maya ini.

Salah satu cara untuk mengoptimalkan SEO di blog kita adalah mengedit template blog kita sedemikian rupa agar SEO friendly. Sebenarnya sudah banyak beredar template yang SEO friendly di luar sana, tetapi bagi anda yang merasa template anda sayang untuk diganti, maka dengan cara mengedit template menjadi seo friendly ini menjadi salah satu solusinya.

Dan berikut ini rentetan cara agar template blog anda menjadi SEO friendly.

1.Page Title.

Pada postingan teman-teman blogger sudah menjelaskan secara gamblang tentang page title ini. Biasanya format page title pada blogspot adalah Judul blog : Judul posting, agar template kita di sukai oleh mesin pencari, maka kita harus merubah format page title nya menjadi Judul posting | Judul blog . Untk cara mengeditnya anda bisa megunjungi link ini Mengubah Page Title Pada blog.

2. Meta Keyword dan Deskripsi.

Suatu mesin telusur/pencari seperti google sangat menyukai blog yang sesuai tema dan isi conten nya. Jadi anda harus menambahkan suatu tag yang namanya meta tag. Caranya adalah dengan menambahkan kode dibawah ini sebelum kode <b:skin>< ![CDATA[/* .

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Deskripsi Blog anda" />
<meta name="keywords" content="Kata kunci , kata kunci, kata kunci, kata kunci , kata kunci" />
</b:if>

Catatan : Tulisan kata kunci, isikan dengan kata kunci yang anda incar, dan kata kunci itu harus sesuai dengan tema blog kita.

Kalau sudah yakin, save template anda.

3. Memasang Menu Navigasi Breadcrumbs.

Menu navigasi breadcrumbs sangat penting untuk melengkapi navigasi blog kita. Dan dengan cara ini maka mesin pencari seperti google akan menyukai blog kita. Fungsi dari navigasi breadcrumbs ini adalah untuk memudahkan pengunjung suatu blog untuk kembali ke halaman sebelumnya dan mengetahui halaman-halaman apa yang telah mereka kunjungi. Untuk memasang menu navigasi breadcrumbs ini sobat bisa mengunjungi link ini : Cara Membuat Navigasi Breadcrumbs Pada Blog.

4. Memasang Related posts.

Related posts sangat penting untuk SEO, dan berguna untuk pengunjung. Jadi tunggu apalagi silahkan untuk memasang related posts di blog anda. Bagi yang ingin memasang related posts di blog nya dan ingin tahu fungsinya, anda bisa mengunjungi link ini : Cara Membuat Related Posts Di Bawah Posting.

5. Mematikan setinggan Arsip.

Karena google sangat benci sama yang namanya duplikat konten. Ada sebuah kejadian yang seperti ini. Anda membuat sebuah blog di blogger, jadi ketika kita mengaktifkan menu arsip dan anda membuat postingan 3 buah posting per hari, maka di halaman utama blog anda akan muncul tiga posting dan sebuah link arsip seperti ini http://blogagan.blogspot.com/2007_03_01_archive.html, dan pada link arsip tersebut akan memunculkan tiga postingan yang sama dengan postingan yang ada dihalaman utama blog anda. Intinya adalah dua buah link yang menuju dua halaman yang berbeda tetapi memiliki isi konten yang sama. Bagi mesin telusur apalagi google, ini adalah masalah yang sangat serius. Maka dari itu kita harus me-nonaktifkan opsi arsip, dengan cara : Klik tab setting > Archiving > pada bagian Archiving frequency ubah menjadi no archive kalau sudah simpan settingan anda.

Atau jika anda tidak ingin menonaktifkan opsi arsip anda juga bisa menambahkan kode ini di bawah kode <head>.

<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex' name='robots'/>
</b:if>

6. Menambahkan Kode 'rel =canonical'

Fungsinya adalah untuk menghindari konten ganda, yang tidak disukai oleh google. Untuk memasang nya sobat tinggal menambahkan kode ini di bawah kode <head>.

<link expr:href='data:blog.url' rel='canonical' />

7. Tag Heading.

Google sangat menyukai tulisan atau judul sebuah postingan dengan menggunakan tag H1. caranya adalah sebagai berikut.

Cari kode yang kira-kira mirip seperti ini.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Pada beberapa template mungking menggunakan H2 atau H3. Jadi sesuaikan dengan template sobat. kalau sudah ketemu, sobat ganti kode h2 atau h3 nya dengan kode h1. Kalau sudah anda cari kode ]]></b:skin> dan letakkan kode dibawah ini sebelum kode ]]></b:skin>.

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em;
}

Nah begitulah pengetahuan yang saya dapat dari blognya para master seo, Jika anda ingin mengutarakan pendapatan anda pada postingan Cara Mengedit Template Menjadi SEO Friendly kali ini, silahkan untuk mengutarakan pendapatnya dengan cara berkomentar. Terimakasih.

Kamis, 24 Mei 2012

Membuat Read More

Diposting oleh Tebe Mukri di Kamis, 24 Mei 2012 ~ 23.06.00

Otomatis Hack Baca lebih lanjut [Hack Otomatis Read more] Untuk Blogger Dengan Thumbnail yaitu hack posting diperluas untuk blogger dengan thumbnail dari gambar yang digunakan dalam posting blogger dan semua pekerjaan ini dilakukan oleh script secara otomatis, Anda tidak perlu mencari gambar, script akan melakukan semua pekerjaan secara otomatis. Yang pasti Anda harus menulis posting dan mempublikasikannya dengan satu gambar dalam posting terkait.

Sekarang cara mengisikan Hack Otomatis Reademore Untuk Blogger amat mudah sekali tinggal copy paste saja. Mari kita mulai dengan instalasi: - . Sekarang Login ke Blogger Pergi ke Layout>> Edit HTML di dashboard Blogger Anda dan periksa "memperluas template widget" kotak Cari penutupan tag </head> pada template blog Anda, dan paste bagian kode berikut segera sebelumnya:

<script type='text/javascript'> var thumbnail_mode = "no-float";
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://contents-ente.googlecode.com/files/suar.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
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>

Catatan: Dalam kode di atas kita dapat mengubah angka numerik sesuai dengan kebutuhan kita, summary_noimg = 430; adalah memotong ketinggian posting tanpa gambar summary_img = 340; adalah memotong ketinggian posting dengan gambar img_thumb_height = 100; adalah thumbnail gambar tinggi img_thumb_width = 120; adalah lebar gambar thumbnail.

Sekarang cari kode <data:post.body/> dalam template Anda dan menggantinya dengan kode di bawah ini.

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<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:right;padding-top:20px;'><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>
</b:if>

Pratinjau Template Anda setelah memasang Hack Otomatis Reademore ini, setelah yakin akan hasilnya kemudian klik Simpan.

Catatan: Untuk tampil thumbnail dipostingan, jelas harus memiliki gambar dalam setiap posting untuk itu, silahkan meng-upload file gambarnya untuk masing-masing posting. dan bila ada minat mengoleksi scrip ini silahkan upload fail.js ke server Anda dan jangan lupa untuk mengubah link dengan punya Anda dalam kode untuk membuat hack ini bekerja. Saya yakin semua orang akan menyukai hack ini pasti.

Buat Tombol Share Fb, Buzz, Digg, Twitter Di Blogspot

Diposting oleh Tebe Mukri di ~ 02.17.00

Bagaimana cara membuat tombol share seperti ini :

Membuat Tombol Share

Agan tertarik untuk mencobanya? baiklah kali ini saya akan bagikan salah satu rahasia para Master Blogger hehe, berhubung pengalaman ini didapat dari yang punya ilmu, yaitu para Master, maka hasilnya akan dibagikan lagi semoga berguna dan dapat dimengerti.

Seperti yang saya dengar bahwa, tombol share ini merupakan elemen yang sangat penting, sebab dapat mendatangkan pengunjung yang banyak dari luar. ga percaya? coba tengok aja blog terselubung.

Share atau berbagi saat ini merupakan hal yang penting karena itulah anda wajib memasang tombol share di blog atau web saudara :

Langkah 1

1. Langsung saja silakan copy kodenya terlebih dahulu:

<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:4px 0px 30px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;font-style:Italic;'>
Share this history on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via=' user_name ' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
</b:if>

catatan: pada kode diatas, ada tulisan user_name twitter, ganti dengan milik Anda

Langkah 2

Cari Kode <div class='post-body entry-content'>

Tips mencari kode dengan cepat: tekan ctrl+f dan masukan kode di atas, atau jika tidak ketemu musukan saja tulisan post-body kemudian cari kode yang mirip dengan yang saya sebutkan tadi di atas!. Jika sudah ketemu pastekan code yang telah Anda copy tadi tepat di atasnya <div class='post-body entry-content'> Simpan Template dan Lihat hasilnya !

Oke agan-agan cukupkan sekian dulu ya.. mudah-mudahan dengan update kali ini agan dapat menikmatinya dengan puas, dan semoga bermanfaat!

Kasih link back ya klo copy-paste hehe... selamat memebuat tombol share.

Cara Membuat Tombol Share Fb, Buzz, Digg, Twitter Di Blogspot

Selasa, 22 Mei 2012

Judul Posting Artikel Berjalan

Diposting oleh Tebe Mukri di Selasa, 22 Mei 2012 ~ 09.48.00

Kemarin pada saat saya nongkrong di blognya KR, ada salah seorang pengunjung blog yang bertanya bagaimana cara membuat judul posting berjalan. Pada awalnya saya berpikir mustahil bisa dilakukan hanya dengan menggunakan kode marquee, saya pikir mungkin itu hanya dapat dilakukan dengan menggunakan Java script. Tetapi setelah berusaha keras mengutak-atik kode HTML blog saya, akhirnya saya menemukan cara sederhana untuk membuat judul pada posting atau artikel blog berjalan. Hasil yang di dapat seperti anda membuat teks berjalan dengan kode marquee atau seperti judul blog berjalan yang menggunakan Java script.

Baiklah tanpa perlu panjang lebar saya akan memberikan triknya. Seperti biasa pertama login ke Dashboard Blogger anda kemudian klik Layout - Edit HTML. Untuk berjaga-jaga sebaiknya backup dulu template anda, lalu klik pada Expand widget templates dan carilah kode dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Kemudian pasang kode marquee sehingga kode lengkap hasil perubahan akan seperti dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3> </marquee>
</b:if>

Teks yang berwarna hijau adalah kode yang harus anda tambahkan. Anda dapat merubah arah dengan mengganti kode left menjadi right. Klik tombol Preview untuk melihat hasilnya, jika anda sudah cukup puas silahkan di simpan pekerjaan anda.

Contoh hasil seperti ini :

JUDUL POSTING BLOG ANDA

Bagaimana, mudah bukan? Selamat mencoba..