Friday, October 23, 2009

Beberapa saat yang lalu, Blogger TuneUp pernah membahas tips trik blog tentang "Fasilitas AutoLoad pada Mesin Pencari Blog". Pada tips trik kali ini masih berhubungan dengan fasilitas pencarian artikel pada blog kita menggunakan Google Ajax Custom Search sebagai pengembangan dari Google Custom Search.
Google Custom Search adalah salah satu fasilitas yang disediakan oleh Google sebagai suatu mesin pencari yang dapat disesuaikan dengan keinginan para penggunanya. Sehingga Google Custom Search mampu diarahkan untuk mencari sesuatu yang lebih terarah, terperinci dan disesuaikan dengan kebutuhan pencarian tertentu. Google memberikan kebebasan kepada penggunanya untuk membuat target pencarian terarah pada situs tertentu, sesuai keyword tertentu dan atau sesuai kategori tertentu.
Ajax adalah salah satu bahasa pemrograman turunan dari JavaScript yang mampu melakukan beberapa perintah sekaligus dengan cepat, ringan dan dengan hasil akhir yang hampir mendekati maksud dan tujuan para penggunanya. Google sebagai salah satu developer JavaScript telah mengintegrasikan bahasa pemrograman Ajax pada beberapa aplikasi buatannya, salah satunya dengan mengintegrasikan Ajax dengan Google Custom Search, sehingga proses pencarian akan lebih cepat, tepat, ringan dan tidak memakan banyak tempat (space) untuk menampilkan hasil pencariannya.
Telah lama blogger mendukung Google Custom Search melalui tersedianya gadget Google Custom Search tetapi tidak menggunakan Ajax, sehigga proses pencarian bekerja lebih lama serta hasil pencarian akan ditampilkan dalam lembar yang terpisah. Hal ini membuat proses pencarian artikel blog sangat tidak nyaman bagi mereka yang tidak terbiasa menggunakan Google Custom Search.
Tapi dengan terintegrasinya Google Custom Search dengan Ajax API membuat proses pencarian artikel pada blog kita menjadi lebih cepat, tepat tanpa perlu membuka halaman baru untuk menampilkan hasil pencarian artikel pada blog kita, hal ini membuat hasil pencarian Google Custom Search merupakan bagian dari blog kita. Selain itu Google Ajax Custom Search bisa dintegrasikan dengan Google Adsense bagi mereka yang sudah bergabung dengan program penerbit Adsense. Makin lengkap saja fasilitas mesin pencari pada blog. Untuk mencobanya silahkan gunakan Google Ajax Custom Search diatas
Google Ajax Custom Search
Kode Google Ajax Custom Search tersedia pada Google Web Element dengan 3 pilihan, yaitu:
  • Pencarian artikel blog kita secara otomatis
  • Pencarian artikel blog kita dan menggunakan Adsense untuk pencarian
  • Menggunakan Custom Search Engine milik kita
Untuk menampilkan iklan Adsense maka kita harus memilih opsi 2 dan opsi 3. Jika kita memilih opsi yang kedua maka kita harus menyediakan ID Penerbitan Adsense kita (yang berformat pub-xxxxxxxx). Jika menggunakan opsi yang ketiga maka kita harus menyediakan Custom ID, yang bisa kita peroleh dari kode Google Custom Search.

Mengambil Kode Google Ajax Custom Search

Langkah 1
Kunjungi Google Web Element disini.
Langkah 2
Pilih opsi yang sesuai dengan keinginan kita. Jika ingin menggunakan opsi kedua siapkan terlebih dahulu ID penerbit Adsense kita, jika memilih opsi ketiga siapkan Custom Search ID kita. Opsi kedua dan ketiga hanya untuk blogger yang sudah bergabung dengan program penerbitan Google Adsense, jika anda belum mempunyai ID penerbit Adsense maka cukup menggunakan/memilih opsi kesatu.
Langkah 3
Ambil (copy) kode yang telah tersedia pada kotak dibawah kalimat "Copy and paste this snippet code into your webpage"

Pemasangan Google Ajax Custom Search Pada Blogger

Langkah 4
Login ke Blogger
Langkah 5
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 6
"Tambah Gadget" baru dengan tipe HTML/JavaScript
Langkah 7
Masukkan kode Google Ajax Custom Search yang sudah kita peroleh pada konten/isi gadget baru
Langkah 8
Atur tata letak gadget tersebut pada lokasi yang cukup lebar (rekomendasi diatas posting) hal ini agar iklan ditampilkan dalam ruangan yang cukup (khusus bagi yang menggunakan kode opsi kedua dan ketiga)
Langkah 9
Simpan gadget baru tersebut, preview blog dan tes Google Ajax Custom Search milik kita.

Keterangan:
Bagaimana menarik bukan? Selamat mencoba dan semoga berhasil. Tinggalkan jejak, saran dan kritik melalui kotak komentar dibawah. Happy blogging... :)

Tuesday, October 20, 2009

Fasilitas AutoLoad pada Mesin Pencari Blog

Posted by dav On 5:44 AM
Pada artikel sebelumnya Blogger Tune-Up pernah membahas tips trik membuat Mesin Pencari 4 dalam 1. Dalam artikel kali ini kita akan mencoba menambah fasilitas AutoLoad yaitu fasilitas yang secara otomatis mencari dan menemukan artikel sesuai dengan kata kunci (keyword) yang kita masukan tanpa harus meng-klik tombol "Search".
Pada saat kita memasukan kata kunci tertentu pada kotak pencarian maka secara otomatis judul artikel akan ditampilkan pada bagian bawah kotak kata kunci kemudian kita dapat melihat rangkuman artikel dengan meng-klik bullet segitiga pada artikel, hal ini bermanfaat untuk mempercepat proses pencarian. Dan jika artikel yang di-load tidak sesuai dengan yang dimaksud baru kita mencoba meng-klik tombol "Search". Fasilias AutoLoad ini masih tetap menggunakan kode JavaScript dengan core json yang memanfaatkan feed default dari blogger. Jika ingin mencoba fasilitas ini silahkan coba ketikan kata kunci tertentu pada fasilitas mecin pencari lokal pada blog ini dan perhatikan hasil AutoLoad dibawahnya. Menarik bukan????
Pencarian Artikel AutoLoad

Penambahan Fasilitas AutoLoad Pada Mesin Pencari Blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 3
Klik "Edit Gadget" pada Gadget Pencarian yang pernah kita buat
Langkah 4
Isi kode dari Gadget Pencarian tersebut seperti dibawah ini (lihat artikelnya disini):
<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://modification-blog.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="27" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="modification-blog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>
Langkah 5
Tambahkan kode dibawah ini pada kode langkah 4:
onclick="ts_loadFeed()" onkeyup="ts_titleSearch(this.value)"
Sehingga menjadi seperti kode dibawah ini:
<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://modification-blog.blogspot.com/search" method="get">
<input id="pm-f-h" onkeyup="ts_titleSearch(this.value)" value="" name="q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" onkeyup="ts_titleSearch(this.value)" value="" name="as_q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" onkeyup="ts_titleSearch(this.value)" value="" name="as_q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" onkeyup="ts_titleSearch(this.value)" name="s" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="modification-blog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>
Langkah 6
Masukan kode dibawah ini setelah kode pada langkah 5 yang telah dimodifikasi:
<div id="ts_content_list" onclick="this.innerHTML+=ts_http.readyState"></div>
<script type="text/javascript">
var ts_summary_length = 150;
var ts_blog_url = "http://modification-blog.blogspot.com";
var ts_NO_RESULTS = "Tidak ditemukan";
var ts_SEE_SUMMARY = "Tampilkan rangkuman";
var ts_HIDE_SUMMARY = "Sembunyikan rangkuman";
var ts_LOADING = "Loading...";
var ts_TYPE_KEYWORDS = "Masukan kata kunci";
</script>
<script src="http://hensblog.googlecode.com/files/custom_search_v1.1.js"/></script>
Sehingga secara keseluruhan kode yang telah dimodifikasi dan telah ditambahkan kode menjadi seperti dibawah ini:
<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://modification-blog.blogspot.com/search" method="get">
<input id="pm-f-h" onkeyup="ts_titleSearch(this.value)" value="" name="q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" onkeyup="ts_titleSearch(this.value)" value="" name="as_q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" onkeyup="ts_titleSearch(this.value)" value="" name="as_q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" onkeyup="ts_titleSearch(this.value)" name="s" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="modification-blog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>
<div id="ts_content_list" onclick="this.innerHTML+=ts_http.readyState"></div>
<script type="text/javascript">
var ts_summary_length = 150;
var ts_blog_url = "http://modification-blog.blogspot.com";
var ts_NO_RESULTS = "Tidak ditemukan";
var ts_SEE_SUMMARY = "Tampilkan rangkuman";
var ts_HIDE_SUMMARY = "Sembunyikan rangkuman";
var ts_LOADING = "Loading...";
var ts_TYPE_KEYWORDS = "Masukan kata kunci";
</script>
<script src="http://hensblog.googlecode.com/files/custom_search_v1.1.js"/></script>
Langkah 7
Simpan Gadget dan preview blog

Keterangan:
  • Ubahlah URL http://modification-blog.blogspot.com sesuai dengan alamat blog anda.
  • Kode pada langkah 6 sebenarnya bisa di letakan pada widget/gadget HTML/JavaScript yang terpisah (berdiri sendiri), dan gadget tersebut merupakan gadget yang akan menampilkan AutoLoad hasil pencarian.
Jika blog anda telah menggunakan mesin pencari berjenis Google Custom Search, lakukan modifikasi seperti dibawah ini jika ingin menambahkan fasilitas AutoLoad.
Langkah A
Perhatikan kode Google Custom Search dibawah ini:
<form action='http://www.google.co.id/cse' id='cse-search-box' target='_blank'>
<div>
<input name='cx' type='hidden' value='partner-pub-XXXXXXXXXX'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='s' name='q' style='height:30px' type='text'/>
<input id='searchsubmit' name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.id/coop/cse/brand?form=cse-search-box〈=in' type='text/javascript'>
Langkah B
Tambahkan kode dibawah ini:
onclick="ts_loadFeed()" onkeyup="ts_titleSearch(this.value)"
Sehingga menjadi seperti dibawah ini:
<form action='http://www.google.co.id/cse' id='cse-search-box' target='_blank'>
<div>
<input name='cx' type='hidden' value='partner-pub-XXXXXXXXXX'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='s' name='q' onclick="ts_loadFeed()" onkeyup="ts_titleSearch(this.value)" style='height:30px' type='text'/>
<input id='searchsubmit' name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.id/coop/cse/brand?form=cse-search-box〈=in' type='text/javascript'>
Langkah C
Tambahkan kode pada langkah 6 diatas, dibawah kode pada langkah B. Sehingga menjadi seperti dibawah ini:
<form action='http://www.google.co.id/cse' id='cse-search-box' target='_blank'>
<div>
<input name='cx' type='hidden' value='partner-pub-XXXXXXXXXX'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='s' name='q' onclick="ts_loadFeed()" onkeyup="ts_titleSearch(this.value)" style='height:30px' type='text'/>
<input id='searchsubmit' name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.id/coop/cse/brand?form=cse-search-box〈=in' type='text/javascript'>
<div id="ts_content_list" onclick="this.innerHTML+=ts_http.readyState"></div>
<script type="text/javascript">
var ts_summary_length = 150;
var ts_blog_url = "http://modification-blog.blogspot.com";
var ts_NO_RESULTS = "Tidak ditemukan";
var ts_SEE_SUMMARY = "Tampilkan rangkuman";
var ts_HIDE_SUMMARY = "Sembunyikan rangkuman";
var ts_LOADING = "Loading...";
var ts_TYPE_KEYWORDS = "Masukan kata kunci";
</script>
<script src="http://hensblog.googlecode.com/files/custom_search_v1.1.js"/></script>

Keterangan:
  • partner-pub-XXXXXXXXXX adalah kode yang anda peroleh dari Google Custom Search.
  • Jika kode Google Custom Search tidak ingin disatukan dengan kode langkah 6, "Tambah Gadget" Baru dengan tipe HTML/JavaScript lalu masukan kode (langkah 6) pada bagian konten/isi gadget baru tersebut (tanpa judul gadget).
Selamat mencoba dan semoga berhasil. Tinggalkan jejak anda dengan memberikan komentar atau sekedar saran pada kotak komentar dibawah ini. Happy Blogging... :)

Monday, October 19, 2009

Integrasi Anchor Link Otomatis pada Artikel

Posted by dav On 5:29 AM
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)

Posted by dav On 11:59 PM
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

Posted by dav On 10:13 PM
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

Posted by dav On 9:29 AM
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

Posted by dav On 10:58 AM
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

Posted by dav On 6:11 PM
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.