Monday, October 19, 2009

Integrasi Anchor Link Otomatis pada Artikel

Memasang anchor link pada kata kunci (keyword) tertentu merupakan salah satu teknik SEO, hal ini bertujuan untuk meningkatkan posisi blog pada mesin pencari (SERP). Mesin pencari akan dengan mudah menemukan kata kunci tertentu yang didalamnya mengandung anchor link dan meng-index-nya pada database mesin pencari mereka. Selain itu anchor link juga mempermudah pembaca setia blog kita untuk menemukan artikel yang terkait dengan artikel yang sedang dibaca, sehingga mereka tidak perlu repot untuk mencari-cari artikel yang mereka butuhkan.
Tetapi pekerjaan ini tidaklah mudah, kita harus mempersiapkan link-link yang akan kita letakan pada kata kunci tertentu dan memasukannya dengan cara manual. Pada tips trik blogger hack kali ini Blogger Tune-Up akan berbagi teknik pembuatan anchor link secara otomatis tanpa perlu memasukan satu persatu secara manual.

Integrasi Link Otomatis Pada Artikel

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" baru tanpa judul dengan tipe "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada isi/konten gadget yang baru saja kita buat:
<script src="http://URL/autolink.js">
</script>
<script type="text/javascript">
var f = new autoLink();
f.add("keyword 1", "http://URL.com");
f.add("keyword 2", "http://URL.com");
f.add("keyword 3", "http://URL.com");
f.add("keyword 4", "http://URL.com");
// dan seterusnya...
f.startScript();
</script>
Langkah 5
Simpan gadget tersebut dan preview blog...

Keterangan:
  • Ubahlah keyword 1, keyword 2, keyword 3, keyword 4 dengan kata kunci tertentu. Tetapi hati-hati antara kata kunci yang kita buat pada script auto link dengan kata kunci pada artikel harus sama persis (case sensitive). Misal; kita membuat kata kunci "Blogger Hack" pada script auto link tetapi kita menuliskannya pada artikel kata kunci tersebut adalah "blogger hack" maka auto link tidak akan mengenalinya dan kata kunci blogger hack tidak akan menjadi anchor link secara otomatis.
  • Ubahlah http://URL.com sesuai dengan link tujuan dari kata kunci yang dibuat. URL bisa berupa kategori dan artikel dari blog kita atau link situs/blogger lain.
  • Kata kunci ini tidak terbatas, tergantung keinginan kita. Untuk menambahkan kata kunci lain, ikuti script diatasnya atau script ini; f.add("keyword 5", "http://URL.com");
Selamat mencoba dan semoga berhasil. Tinggalkan jejak anda pada kotak komentar jika mengalami kegagalan atau sekedar ucapan terima kasih. Happy Blogging... :) Jika gagal baca Update! Integrasi Anchor Link Otomatis

Saturday, October 17, 2009

Membuat Gadget Terapung (Floating Widget)

Sebelumnya Blogger Tune-Up pernah membahas cara membuat Menu Navigasi Terapung dan Float Nav Bar. Pada artikel kali ini merupakan pengembangan dari trik-trik blogger hack yang pernah dibahas, yaitu kita akan membuat gadget terapung yang tidak terpengaruh oleh scrollbar dan selalu dalam posisi tetap.
Mungkin teman-teman pernah jalan-jalan ke blog orang lain dan menemukan sebuah tombol di pinggir halaman yang jika di klik akan menampilkan sesuatu (misal; shoutbox, buku tamu, subscriber, dan lain sebagainya) dan posisinya selalu tetap walaupun halaman tersebut kita geser atas bawah kiri kanan. Sebenarnya hal tersebut pada dasarnya adalah sebuah gadget yang diatur seakan-akan mengapung atau menempel pada halaman. Sebagai contoh Blogger Tune-Up menggunakan gadget terapung ini untuk menempatkan ShoutMix yang sudah lama hilang pada sebelah kanan atas dengan tombol bertuliskan "PESAN".

Langkah integrasi gadget terapung (floating widget)

Langkah 1
Login ke blogger
Langkah 2
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" Baru dengan tipe "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada isi/konten gadget yang baru kita buat:
<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #A5BD51;background:#CCFFFF;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">
<!-- Kode Isi Gadget Terapung -->
<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://modification-blog.blogspot.com/2009/10/gadget-terapung-floating-widget.html" target="_blank">Widget by Blogger Tune-Up</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>
Langkah 5
Ganti <!-- Kode Isi Gadget Terapung --> dengan kode yang akan kita tampilkan pada gadget terapung.
Langkah 6
Simpan Gadget dan Preview blog

Keterangan:
  • Jika ingin membuat kotak pesan seperti pada blog ini, silahkan buat account di ShoutMix dan ambil kode yang diberikan, masukan kode tersebut menggantikan kode <!-- Kode Isi Gadget Terapung -->.
Selamat mencoba dan semoga berhasil, jangan lupa tinggalkan jejak dengan mengisi komentar dibawah. Happy Blogging... :)

Wednesday, October 7, 2009

Church Template Blogger

Akhirnya beres juga konversi template Church buatan Brian Gardner untuk Wordpress ke template versi Blogger. Sungguh sangat melelahkan mempelajari dan mengkonversi template Wordpress buatan Brian Gardner ini. Walaupun masih ada beberapa kelemahan tetapi tidak terlalu bersifat dasar. Bagi teman-teman blogger yang ingin mencoba template ini, tunggu beberapa hari lagi, soalnya sedang dibuat tutorialnya terlebih dahulu.
Supaya nanti pada saat pemasangan tidak begitu banyak persoalan, mudah, lancar dan tidak mengecewakan. Untuk versi Wordpress silahkan lihat demonya disini, tapi jangan berharap gratis. Untuk demo versi Blogger lihat disini. Bagaimana ada komentar, caci maki, saran, kritik atau hujatan? Silahkan tinggalkan pada komentar dibawah. Dan mohon bantuannya untuk menge-check pada browser yang berbeda, maklum tidak punya komputer sendiri (hehehe...).
Church Template Blogger

Menambahkan Tombol Tweet

Salah satu cara untuk meningkatkan backlink (Link Balik) terhadap blog kita adalah dengan berkomentar pada blog lain, bertukar link dengan sesama blogger dan masih banyak cara yang telah dibahas oleh para master SEO (Search Engine Optimization). Kali ini kita akan mencoba bantuan salah satu situs social networking yang cukup terkenal yaitu Twitter dengan bantuan situs agregator TweetMeme.
Tekniknya sederhana, para pemilik blog cukup menambahkan tombol twitt pada blog agar para pembaca dengan mudah memilih artikel yang menarik pada blog kita yang kemudian akan di bookmark pada Twitter dengan bantuan situs agregator TweetMeme. Dengan teknik seperti ini, para pengunjung akan dengan mudah merekomendasikan suatu artikel yang menarik kepada temannya melalui Twitter dan mem-bookmark-nya pada TweetMeme miliknya sehingga jika suatu hari pembaca tersebut lupa maka dengan mudah akan ditemukan pada kumpulan bookmark-nya di TweetMeme. Prinsip kerjanya hampir mirip dengan RSS tetapi keuntungan dengan teknik ini artikel yang telah di Twit oleh pembaca akan secara otomatis tersebar melalui jaringan Twitter pembaca tersebut. Semakin banyak hits Twit maka semakin banyak pula backlink terhadap blog kita, hal ini secara otomatis akan menaikkan posisi blog kita pada mesin pencari. Begitulah kurang lebihnya...

Integrasi Tombol Tweet pada Artikel Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<data:post.body/>
Langkah 5
Masukan (copy paste) kode Tweet dibawah ini tepat diatas kode pada langkah 4:
<div style='float:right; padding:10px 0 0 5px'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
tweetmeme_service = 'bit.ly';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
Langkah 6
Simpan template dan preview

Keterangan:
Dibawah ini penjelasan dari TweetMeme:
TweetMeme adalah layanan yang mengumpulkan semua link yang populer pada Twitter untuk menentukan link yang populer. TweetMeme mengumpulkan link tersebut ke dalam Kategori, Sub Kategori dan Saluran, sehingga mudah dalam menyaring kekeliruan untuk menemukan apa yang menarik menurut Anda.
Untuk lebih jelasnya silahkan baca penjelasan dari situs TweetMeme.

Saturday, October 3, 2009

Membuat Daftar Isi Pada Halaman Artikel

Semakin banyak cara untuk membuat daftar isi pada blogger, mungkin diantaranya ada yang pernah mencoba "Memanajemen Arsip Blog" atau "Membuat Tabel Daftar Isi" atau bahkan "Artikel Terbaru dengan Google Dynamic Feeds" hanya sekedar untuk menampilkan daftar artikel yang telah kita buat. Sebenarnya semua tergantung selera kita tentang pembuatan Daftar Isi ini. Dan salah satu dari sekian metode pembuatan Daftar Isi, mungkin teknik yang sekarang akan kita bahas adalah metode yang paling sederhana. Metode ini sebenarnya pengembangan dari tips trik "Membuat Artikel Daftar Isi".

Langkah Pembuatan Daftar Isi

Langkah 1
Login ke Blogger
Langkah 2
Buat sebuah artikel dengan masuk ke "Dasbor - Posting - Entri Baru"
Langkah 3
Judul posting bebas, (sebaiknya Daftar Isi atau Arsip).
Langkah 4
Masukan (copy paste) kode dibawah ini pada Mode "Edit HTML":
<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://ALAMAT-URL/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>
Langkah 5
Terbitkan Entri (Artikel)

Keterangan:
  • Ganti ALAMAT-URL dengan alamat blog anda.
  • Artikel ini bersumber pada blog Abu Farhan dan BloggerBuster.
  • Ingat!!! Ini bukan di pasangkan pada Template ataupun Widget, tetapi pada artikel blog kita.
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Friday, October 2, 2009

Title Blog SEO | Aregnoz SEO Tutorial

Title Blog SEO | SEO Tutorial
Title SEO adalah salah satu trik agar blog kita terindeks paling atas saat searc di google. Berikut ini adalah title Blog seo yang sudah saya coba dan hasilnya mantab gan.

Monggo di terapkan di Blog anda.
<head>


<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content='Description Blog mu' name='DESCRIPTION'/>
<meta content='Keywordmu' name='KEYWORDS'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>
</b:if>

<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<link expr:href='data:blog.url' rel='canonical'/>

<b:skin><![CDATA[
Copy script yang berwarna Kuning di bawah <head> dan di atas <b:skin><![CDATA[
Terakhir, Jangan lupa save template anda.

Wednesday, September 30, 2009

Membuat Widget Subscribe

Subscribe adalah fasilitas yang dipergunakan untuk menyebarkan artikel dari blog kita kepada mereka yang berlangganan artikel via email secara otomatis. Memang banyak website yang menyediakan fasilitas ini, tetapi FeedBurner tetap menjadi favorit selain konfigurasi yang mudah juga karena telah di ambil alih oleh Google sehingga layanan ini ada jaminan terus diberikan secara gratis dalam jangka waktu yang panjang. Salah satu dari sekian fasilitas yang diberikan FeedBurner yang terkenal adalah fasilitas subscribe, tetapi beberapa blogger kurang begitu suka dengan antar muka subscribe standar dari FeedBurner.
Pada artikel kali ini Blogger Tune-Up akan memberikan tips trik membuat antar muka FeedBurner yang lebih menarik. Hasil akhir antar muka subscribe bisa kita lihat pada screenshot dibawah ini.

Langkah pembuatan widget subscribe

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:
div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url('http://lh6.ggpht.com/_xcD4JK_dIjU/SsRNy8VKhOI/AAAAAAAADd0/ZIspMIgXEvU/d/subscribebg.png') no-repeat;
background-color : #ffffff;
overflow:hidden;
}
#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}
div#subscribe img {
float : right;
margin-top : 6px;
}
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url('http://lh4.ggpht.com/_xcD4JK_dIjU/SsRNy8mkHII/AAAAAAAADdw/X_THccX8W2Q/d/input.jpg') no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}
Langkah 5
Simpan Template
Langkah 6
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 6
Tambah sebuah gadget baru dengan type "HTML/JavaScript"
Langkah 7
Masukan kode dibawah ini didalam konten dengan judul konten bebas (misal:Subscribe):
<div id="subscribe">
<a href="http://feeds.feedburner.com/BloggerTune-up"><img src="http://feeds.feedburner.com/~fc/BloggerTune-up?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a><br/>
<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2264909', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div>
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=2264909" name="url" type="hidden"/>
<input value="Blogger Tune-Up" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>
<input src="http://lh5.ggpht.com/_xcD4JK_dIjU/SsRNzECIbOI/AAAAAAAADd4/IbXDZGxyRRo/d/subscribesubmit.png" class="subscribesubmit" type="image"/>
</div>
</form>
</div>
Langkah 8
Klik tombol "Simpan"
Langkah 9
Preview blog anda

Langkah modifikasi kode

Perhatikan langkah 7, perhatikan kode dibawah ini:
<a href="http://feeds.feedburner.com/BloggerTune-up"><img src="http://feeds.feedburner.com/~fc/BloggerTune-up?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a><br/>
<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2264909', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=2264909" name="url" type="hidden"/>
<input value="Blogger Tune-Up" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>
Ubahlah sesuai dengan link yang telah diberikan FeedBurner.

Selamat mencoba dan semoga berhasil. Happy blogging... :)