Menambah Animasi Tampilan Blogger

Artikel kali ini bener-bener bingung membuat judulnya, tapi yang jelas para pengunjung bisa melihat animasi bendera Merah Putih pada blog ini, entah sebelah mana ya? dan entah apa disebutnya. Tips ini termasuk sederhana dalam penerapan pada template blogger. Mau coba manambah animasi pada tampilan blogger kita? silahkan ikuti langkah berikut ini.

Langkah Menambah Animasi Tampilan Blogger

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 dibawah ini tepat diatas Langkah 3 :
#animasi_gambar {
position:fixed;_position:absolute;top:0px; left:0px;
clip:inherit;
_top:expressionundefineddocument.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expressionundefineddocument.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
Langkah 5
Cari lagi kode dibawah ini yang paling bawah dari template :
</body>
Langkah 6
Masukan kode dibawah ini tepat dibawahnya :
<div id='animasi_gambar'>
<a href='http://modification-blog.blogspot.com'>
<img border='0' src='http://URL.com/gambar_animasi.gif'/></a>
</div>
Langkah 7
Klik "SIMPAN TEMPLATE"

Perhatian!
  • Ubah URL pada Langkah 6 (baris 2) sesuai dengan alamat blog kita
  • Gantilah animasi pada Langkah 6 (baris 3) sesuai dimana URL tempat kita menyimpan animasi
  • Animasi harus berformat GIF
  • Background Animasi GIF harus transparant
  • Ubah kode pada pada Langkah 4 (berwarna biru) untuk menempatkan posisi gambar, top=atas, bottom=bawah, left=kiri, right=kanan

Read More
Labels:

Memanajemen Arsip Blog

Memanajemen arsip blog sangatlah penting, karena pengunjung akan merasa nyaman dan betah berlama-lama mengunjungi blog kita jika navigasi dalam blog kita mudah dicerna, menarik dan cepat dalam proses pencarian artikel. Manajemen arsip blog sangat cocok digabungkan dengan artikel sebelumnya "Menampilkan Judul Artikel Tanpa Isi Halaman", mudah-mudahan sudah memahami dan menerapkan trik blog tersebut. Manajemen arsip memudahkan pengunjung untuk menemukan arsip artikel yang dicari. Ketika pengunjung mencari artikel sesuai dengan kategori/label, biasanya blog akan menampilkan artikel secara keseluruhan (baca: judul artikel dan isi halaman artikel) dan dalam jumlah yang sudah kita set, hal ini akan memperlambat loading page halaman blog kita dan hal ini akan membuat pengunjung malas meneruskan pencarian artikel dalam blog kita. Mencegah pengunjung kabur dari blog kita, ikutilah trik mamanjemen Arsip blog berikut.

Membuat Daftar Isi Artikel Blog
Layaknya sebuah buku, kadang kita merasa malas harus membuka halaman satu persatu untuk mencari artikel yang kita inginkan pada sebuah buku jika jumlah halamannya banyak. Untuk mencari sebuah artikel dalam sebuah buku biasanya kita akan melihat daftar isi, membaca judul dan melihat halaman artikel tersebut, lebih cepat dan efektif. Begitupun dengan blog, kita buatkan pengunjung daftar isi supaya mereka mudah dalam proses pencarian artikel yang dibutuhkan, tapi sebelumnya blog kita sudah menerapkan "Menampilkan Judul Artikel Tanpa Isi Halaman", jika tidak "Manajemen Arsip Blog" tetap tidak akan efektif bahkan akan jadi bumerang bagi kita pemilik blog, pengunjung kabur dan trafik anjlok. Kalau sudah seperti itu "Tamatlah Riwayat Blog" kita.
Berikut langkah pembuatan daftar isi artikel blog :
Langkah 1
Login ke Blogger
Langkah 2
Masuk kebagian "Tata Letak - Elemen Halaman" dan buatlah "LinkList"
Langkah 3
Masukan Link dibawah ini pada LinkList :
http://ALAMAT-BLOG.blogspot.com/search?max-result=300
Jangan lupa beri nama link tersebut (misal: Daftar Isi)
Langkah 4
Klik "Tambah URL" dan klik tombol "SIMPAN"

Keterangan :
  • Ganti ALAMAT-BLOG dengan url blog anda.
  • Angka 300 menunjukan jumlah artikel yang akan ditampilkan, ubahlah sesuai keinginan anda.
  • Jangan lupa blog anda harus sudah menerapkan "Menampilkan Judul Artikel Tanpa Isi Halaman" sehingga ketika pengunjung meng-klik Link "Daftar Isi" maka blog hanya akan menampilkan judul artikelnya saja.

Membuat Daftar Isi per Kategori/Label
Label atau kategori ibarat BAB didalam buku, didalam BAB tersebut terdapat sub BAB dan seterusnya. Dengan mengatur jumlah artikel per kategori/label, proses pencarian artikel lebih cepat, karena blog akan menampilkan artikel sesuai kategori/label yang pengunjung inginkan serta jumlah artikel yang akan ditampilkan bisa kita atur.
Berikut langkah pembuatan daftar isi per kategori/label :
Langkah 1
Login ke Blogger
Langkah 2
Masuk kebagian "Tata Letak - Edit HTML" dan "Expand Template Widget" (Jangan lupa untuk mem-backup template terlebih dahulu)
Langkah 3
Cari kode dibawah ini :
data:label.url
Langkah 4
Tambahkan kode dibawah ini (berwarna biru) :
data:label.url + &quot;?max-results=300&quot;
Langkah 4
Klik "SIMPAN TEMPLATE"

Keterangan :
  • Ubahlah angka 300 untuk menentukan jumlah artikel yang akan ditampilkan
  • Kode pada langkah 3 biasanya ada sekitar 3 kode, tambahkanlah seluruh kode seperti pada langkah 4

Membuang Header Tanggal Artikel
Sebenarnya dengan tidak membuang header tanggal artikel juga tidak menjadi masalah, tapi bagi yang ingin blognya terlihat rapi silahkan ikuti trik blog dibawah ini. Header tanggal artikel akan ikut ditampilkan jika pengunjung melihat daftar isi. Hal ini akan membuat ruang halaman blog menjadi bertambah dan terlihat tidak rapi, apalagi bagi blogger yang update blognya tidak teratur, maka pada saat menampilkan daftar isi judul artikel akan terselipi header tanggal artikel.
Untuk membuang header tanggal artikel ikuti langkah berikut :
Langkah 1
Login ke Blogger dan "Backup Template"
Langkah 2
Masuk kebagian "Tata Letak - Edit HTML" dan "Expand Template Widget" (Jangan lupa untuk mem-backup template terlebih dahulu)
Langkah 3
Cari kode dibawah ini dan buang/delete:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Atau jika hanya ingin menyembunyikan (tanpa membuang) tambahkan kode (warna biru) seperti dibawah ini :
<!--<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>-->
Langkah 4
Klik "SIMPAN TEMPLATE"

Happy Blogging...:)

Read More
Labels:

Menampilkan Komentar dengan Grazr

Komentar dari para pengunjung itu kadang membuat kita tersenyum, marah atau biasa-biasa saja. Tapi terkadang kita jenuh harus scroll jauh-jauh karena yang memberi komentar banyak, coba silahkan berkunjung ke Ningtyas, Lyla atau Fatamorgana, jujur saja aku sampai males harus baca komentar-komentar para pengunjung. Supaya komentar-komentar tersebut terlihat rapi dan mudah dibaca (baca:mudah dalam navigasi) kita bisa menggunakan fasilitas gratis yang telah diberikan oleh Grazr. Sebelum memasang pada blogger silahkan lihat hasilnya disini.

Pemasangan Komentar Grazr
Langkah 1
Login ke Blogger
Langkah 2
Tambah Gadget HTML/JavaScript
Langkah 3
Masukan kode dibawah ini pada bagian konten :
<center><div style="height:150px;width:99%;"><a href="http://grazr.com/read?view=s&theme=default&file=http://NAMA-BLOG.blogspot.com/feeds/comments/default"><img alt="Grazr" style="border:none" src="http://static.grazr.com/images/grazrbadge.png"/></a><script src="http://static.grazr.com/gzloader.js?view=o&amp;theme=default&amp;addbar=on&amp;file=http://NAMA-BLOG.blogspot.com/feeds/comments/default" defer="defer" type="text/javascript"></script><br/><a href="http://modification-blog.blogspot.com/2008/11/menampilkan-komentar-dengan-grazr.html" target="_blank">Grab this widget</a></div></center>

Keterangan :
  • Ubah NAMA-BLOG dengan nama/alamat url blog anda
  • Ubah height:150px untuk menentukan tinggi widget
  • Ubah width:99% untuk menentukan lebar widget atau ubah 99% dengan px
  • Ubah view=o menjadi s atau 3p untuk menentukan cara pemunculan isi komentar; o=outline, s=slider dan 3p=3pane
  • Ubahlah theme=default untuk menentukan theme, ada sekitar 14 theme
  • Buanglah kode addbar=on jika kita tidak ingin menampilkan link url komentar blog kita
Theme Komentar Grazr :
  • Default = default
  • Default Big Title = default_big_title
  • Gloss Black = gloss_black
  • Gloss Blue = gloss_blue
  • Gloss Red = gloss_red
  • Gloss Silver = gloss_silver
  • Home Silver = home_silver
  • Milk Coco = milk_coco
  • Milk Pink = milk_pink
  • Milk White = milk_white
  • Sateen Black = sateen_black
  • Sateen Blue = sateen_blue
  • Sateen Green = sateen_green
  • Sateen Red = sateen_red

Read More
Labels:

Widget Google Translator untuk Blogger

Google tidak henti-hentinya melakukan perbaikan dan penambahan fasilitas, salah satunya Google Translator. Walaupun belum semua bahasa didukung dan masih ada beberapa bahasa dalam versi beta. Dengan adanya fasilitas Google Translator maka seluruh pengunjung dari berbagai belahan dunia (baca: yang didukung Google Translator) akan dengan mudah memahami detail artikel yang kita tulis. Beberapa waktu kebelakang Google Translator belum mendukung Bahasa Indonesia, tapi kini (walaupun terlambat) Google Translator telah mendukung Bahasa Indonesia, makanya bagi para pemilik blog/website memasang Google Translator adalah menjadi keharusan supaya pembaca setianya tidak berasal dari lokal saja (satu daerah atau satu keturunan atau satu bahasa).
Pada artikel ini kita akan mencoba membahas tiga jenis Google Translator, yaitu :

Google Translator Widget (W3C Recommended)
Google translator jenis ini menurut informasi telah diakui oleh W3C (World Wide Web Consortium), artinya sudah disahkan dan sudah tidak terdapat kesalahan dalam script Google Translator tersebut dan merupakan widget yang paling mudah dalam pemasangan pada blogger.
Langkah pemasangan Google Translator Widget (W3C Recommended) :
Langkah 1
Tambah Gadget - HTML JavaScript silahkan baca disini
Langkah 2
Masukan (copy paste) kode dibawah ini :
<script src=http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=en&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js></script>
Atau klik tombol "Tambah Widget Google Translator" dibawah ini :

Google Translator Widget Menu Dropdown
Widget yang satu ini sangat sederhana dalam tampilan tapi cukup lengkap dengan beberapa bahasa yang didukung, lebih dari 30 bahasa.
Langkah pemasangan Google Translator Widget Menu Dropdown :
Langkah 1
Tambah Gadget - HTML JavaScript silahkan baca disini
Langkah 2
Masukan (copy paste) kode dibawah ini :
<form action='http://translate.google.com/translate_c?' target='_blank'>
<table id='gotrans'>
<tr><td> <select name='tl' style='width: 15em;'>
<option value='ar'>Arabic</option>
<option value='bg'>Bulgarian</option>
<option value='ca'>Catalan</option>
<option value='zh-cn'>Chinese undefinedSimplified)</option>
<option value='zh-tw'>Chinese undefinedTraditional)</option>
<option value='hr'>Croatian</option>
<option value='cs'>Czech</option>
<option value='da'>Danish</option>
<option value='nl'>Dutch</option>
<option selected='en'>English</option>
<option value='tl'>Filipino</option>
<option value='fi'>Finnish</option>
<option value='fr'>French</option>
<option value='de'>German</option>
<option value='el'>Greek</option>
<option value='iw'>Hebrew</option>
<option value='hi'>Hindi</option>
<option value='it'>Italian</option>
<option value='ja'>Japanese</option>
<option value='ko'>Korean</option>
<option value='lv'>Latvian</option>
<option value='lt'>Lithuanian</option>
<option value='no'>Norwegian</option>
<option value='pl'>Polish</option>
<option value='pt'>Portuguese</option>
<option value='ro'>Romanian</option>
<option value='ru'>Russian</option>
<option value='sr'>Serbian</option>
<option value='sk'>Slovak</option>
<option value='sl'>Slovenian</option>
<option value='es'>Spanish</option>
<option value='sv'>Swedish</option>
<option value='uk'>Ukrainian</option>
<option value='vi'>Vietnamese</option>
</select>
<script language="JavaScript">
<!--
document.write undefined'<input name=u value='+location.href+' type=hidden>')
// -->
</script>
<input name='sl' type='hidden' value='id'/>
<input name='hl' type='hidden' value='en'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input style='width: auto;' type='submit' value='Translate'/>
</td></tr></table></form>
Atau klik tombol "Tambah Widget Google Translator" dibawah ini :

Google Translator Widget Mini Flags
Jenis ini paling banyak diminati, karena lebih bagus dalam hal tampilan. Terdapat bendera yang mewakili bahasa tertentu sehingga pengunjung tinggal memilih bendera untuk menentukan bahasa yang dikehendakinya.

Google Translator Widget Mini Flags Bujur Sangkar :
Langkah pemasangan Google Translator Widget Mini Flags Bujur Sangkar:
Langkah 1
Tambah Gadget - HTML JavaScript silahkan baca disini
Langkah 2
Masukan (copy paste) kode dibawah ini :
<table width="99%" border="0" bgcolor="#00FFFF">
<tr>
<td width="99%">
<center>Translate this blog!<br/>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cen&amp;hl=en&amp;ie=UTF8'); return false;" title="English"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="English" src="http://dedehendriono.googlepages.com/UnitedKingdomGreatBritain.png" height="32" title="English"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Car&amp;hl=en&amp;ie=UTF8'); return false;" title="Arabic"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Arabic" src="http://dedehendriono.googlepages.com/SaudiArabia.png" height="32" title="Arabic"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cvi&amp;hl=en&amp;ie=UTF8'); return false;" title="Vietnamese"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Vietnamese" src="http://dedehendriono.googlepages.com/VietNam.png" height="32" title="Vietnamese"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Ces&amp;hl=en&amp;ie=UTF8'); return false;" title="Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Spanish " src="http://dedehendriono.googlepages.com/Spain.png" height="32" title="Spanish "/></a>
<br/>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en&amp;ie=UTF8'); return false;" title="Chinese undefinedSimplified)"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Chinese undefinedSimplified)" src="http://dedehendriono.googlepages.com/China.png" height="32" title="Chinese undefinedSimplified)"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cfr&amp;hl=en&amp;ie=UTF8'); return false;" title="French "><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="French " src="http://dedehendriono.googlepages.com/France.png" height="32" title="French "/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cde&amp;hl=en&amp;ie=UTF8'); return false;" title="German"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="German" src="http://dedehendriono.googlepages.com/Germany.png" height="32" title="German"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cit&amp;hl=en&amp;ie=UTF8'); return false;" title="Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Italian" src="http://dedehendriono.googlepages.com/Italy.png" height="32" title="Italian"/></a>
<br/>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cja&amp;hl=en&amp;ie=UTF8'); return false;" title="Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Japanese BETA" src="http://dedehendriono.googlepages.com/Japan.png" height="32" title="Japanese BETA"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cko&amp;hl=en&amp;ie=UTF8'); return false;" title="Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Korean BETA" src="http://dedehendriono.googlepages.com/SouthKorea.png" height="32" title="Korean BETA"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cru&amp;hl=en&amp;ie=UTF8'); return false;" title="Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Russian BETA " src="http://dedehendriono.googlepages.com/RussianFederation.png" height="32" title="Russian BETA "/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://modification-blog.blogspot.com'); return false;" title="Grab this widget"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Grab this widget" src="http://dedehendriono.googlepages.com/hendriono.png" height="32" title="Grab this widget"/></a></center></td></tr>
</table>
Atau klik tombol "Tambah Widget Google Translator" dibawah ini :

Google Translator Widget Mini Flags Memanjang :
Langkah pemasangan Google Translator Widget Mini Flags Bujur Memanjang:
Langkah 1
Tambah Gadget - HTML JavaScript silahkan baca disini
Langkah 2
Masukan (copy paste) kode dibawah ini :
<form action="http://translate.google.com/translate_c?" target="_blank">
<script language="JavaScript">
<!--
document.write undefined"<input name=u value="+location.href+" type=hidden>")
// -->
</script>
<input name="hl" value="id" type="hidden">
<input name="ie" value="UTF8" type="hidden">
<input name="langpair" value="" type="hidden">
<input name="langpair" value="id|en" title="English" src= "http://dedehendriono.googlepages.com/UnitedKingdom24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|fr" title="French" src= "http://dedehendriono.googlepages.com/France24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|de" title="German" src= "http://dedehendriono.googlepages.com/Germany24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|it" title="Italian" src= "http://dedehendriono.googlepages.com/Italy24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|pt" title="Portuguese" src= "http://dedehendriono.googlepages.com/Portugal24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|es" title="Spanish" src= "http://dedehendriono.googlepages.com/Spain24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|ja" title="Japanese" src= "http://dedehendriono.googlepages.com/japan24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|ko" title="Korean" src= "http://dedehendriono.googlepages.com/SouthKorea24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|zh-CN" title="Chinese Simplified" src= "http://dedehendriono.googlepages.com/China24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair2" value="id|ar" title="Arabic" src= "http://dedehendriono.googlepages.com/SaudiArabia24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24" />
</form>
Atau klik tombol "Tambah Widget Google Translator" dibawah ini :
Happy Blogging :)
Read More
Labels:

Memasang Favicons Pada Blogger

Favicon merupakan salah satu style/gaya sebuah website dan sekaligus sebagai suatu ciri khas bagi pada pemilik website atau blogger. Walaupun sederhana tetapi setiap pengunjung secara tidak langsung akan menandai sebuah blog melalui Favicon, selain itu juga memperindah boorkmark pada browser, sehingga ketika kita akan berkunjung kembali ke website tersebut kita tidak perlu membaca alamat link yang bersangkutan cukup dengan melihat sepintas Favicon.
Pada saat yang lalu saya mencoba memasang Favicons pada blog saya tetapi selalu gagal. Favicon yang saya masukan pada template selalu diganti/replace dengan Favicon default blogger. Sebenarnya dimana letak kesalahan pemasangannya. Ternyata setelah ditelaah dengan melihat source code asli tampilan blog kita, blogger secara default memasang favicon dengan alamat dibawah ini :
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
Sangat mudah untuk memperbaiki hal tersebut, ikuti langkah berikut :
Langkah 1
Siapkan favicon yang akan kita gunakan, jika ingin mencari inspirasi silahkan kunjungi link dibawah ini :
Jika malas anda tinggal arahkan mouse pada favicon yang kita sukai pada website diatas, klik kanan dan save as.
Langkah 2
Simpan favicon tersebut pada webhosting kita (misal googlepages)
Langkah 3
Login ke Blogger
Langkah 4
Masuk ke "Tata Letak - Edit HTML" dan cari kode dibawah ini :
</head>
Langkah 5
Letakan kode dibawah ini tepat diatas kode Langkah 4 :
<link href='http://alamat-url.com/favicon.png' rel='shortcut icon'/>
<link href='http://alamat-url.com/favicon.png' rel='icon'/>
Langkah 6
Simpan Template

Perhatian!
  • Gantilah alamat-url dengan alamat url tempat kita menyimpan Favicon
  • Kita bisa menggunakan favicon dengan format .ico, .png atau .gif
Happy blogging :)
Read More
Labels:

Mengganti Komentar Default Blogger dengan HaloScan

Sesuai janji saya pada posting Apa dan Siapa HaloScan, sekarang kita akan mencoba memasangnya pada Blogger. Tapi harap diperhatikan resiko yang bakal kita tanggung, saya mencoba mengulangi resiko yang akan kita tanggung :
  • Kehilangan komentar default yang pernah ada sebelum pemasangan HaloScan dan otomatis kita kehilangan linkback.
  • Setiap komentar yang diberikan oleh blogger lain secara otomatis hanya akan dilinkback ke HaloScan bukan ke blogger kita, ini justru akan meningkatkan trafik ke HaloScan.
  • Komentar yang sudah ada ketika HaloScan sudah terpasang akan dihapus total karena database disimpan pada HaloScan bukan disimpan pada blog kita. Ini berarti ketika kita menghapus HaloScan yang akan muncul adalah komentar sebelum pemasangan HaloScan sedangkan komentar sesudah pemasangan HaloScan akan dihapus.
Berikut langkah pemasangan komentar dari HaloScan :
Langkah 1
Login ke Blogger
Langkah 2
Backup/Download terlebih dahulu template anda melalui menu "Tata Letak - Edit HTML" dan klik link "Download Template Lengkap" kemudian simpan dalam komputer anda.
Langkah 3
Buatlah Account baru di HaloScan disini, kemudian pilih Signup Now!. Isi data-data yang diperlukan.
Langkah 4
Loginlah ke HaloScan dengan Account yang baru saja anda buat lalu klik "Install"
Langkah 5
Klik "Blogger or Blogspot (New Version / Google Login) - NEW Automatic install available!". Hilangkan tanda Check "Display trackback code" dan "Display rating stars". Kemudian Klik "Next>>"
Langkah 6
Masukan template yang sudah kita download (lihat Langkah 2) melalui tombol "Choose..." dan klik "Upload Blogger Template", tunggu beberapa saat, HaloScan sedang melakukan pemasangan Script pada template blog kita.
Langkah 7
Klik "Download New Template" dan simpan pada komputer kita. (Minum dulu...)
Langkah 8
Login kembali ke blogger (jika tadi sudah Logout)
Langkah 9
Masuk lagi ke menu "Tata Letak - Edit HTML", klik tombol "Browse" dan kemudian klik tombol "Unggah". Tunggu proses pemasangan template modifikasi dari HaloScan sampai keluar "Perubahan telah disimpan". Sampai disini anda sudah berhasil.
Langkah 10
Check komentar anda, jika tampil kotak komentar dibawah artikel berarti anda sudah berhasil...
Perhatian!
  • Ingatlah bahwa kekuatan blog bukan hanya pada komentar tetapi pada kekuatan konten/isi materi blog kita, komentar hanya sebagai penunjang trafic.
  • HaloScan menurut websitenya menggunakan Plugin Akismet yang biasa digunakan pada Wordpress yang sudah teruji kekuatannya untuk menghalau Spam.
  • Meningkatkann trafic blog bukan seberapa jumlah komentar yang ada tetapi seberapa banyak orang mengunjungi blog kita.
  • Komentar dari HaloScan lebih mudah dimanajemen karena merupakan fasilitas yang terpisah dari blogger.
  • Semua diatas berlaku pada baru-baru ini, entah kedepan jika telah diadakan penyempurnaan oleh pihak HaloScan.
Dalam artikel mendatang kita akan bahas cara mengembalikan blogger template setelah pemasangan HaloScan secara manul. Happy Blogging :)
Read More
Labels:

Formulir Komentar Di Bawah Posting/Artikel

Banyak yang mencoba atau bahkan hanya berkhayal (hati-hati bukan hal yang berbau pornograpi, bugil, sexy atau apalah namanya) untuk menempatkan kotak/form komentar dibawah posting/artikel. Sebenarnya hal ini gampang-gampang susah artinye banyak yang gagal tapi tidak sedikit yang berhasil. Mau mencoba? Silahkan ikuti langkah dibawah ini...
Langkah 1
Login ke Blogger Draft disini
Langkah 2
Masuklah ke tab "Pengaturan" dan pilih tab "Komentar". Cari "Penempatan Formulir Komentar" ubahlah menjadi "Disemat di bawah entri", lihat gambar dibawah ini
Langkah 3
Simpan Setelan
Langkah 4
Masuklah ke tab "Tata Letak", pilih tab "Edit HTML" (jangan lupa Backup template terlebih dahulu)
Langkah 5
Aktifkan "Expand Template Widget"
Langkah 6
Cari kode dibawah ini :
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
Langkah 7
Gantilah/Replace kode diatas (Langkah 6) dengan kode dibawah ini :
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>
</p>
Langkah 8
Simpanlah Template Blogger, semoga berhasil....:)
Read More
Labels:

Apa dan Siapa HaloScan

HaloScan.com adalah website penyedia layanan resource blog, terdapat 4 layanan gratis resource blog dari HaloScan yaitu ; komentar, rating, trackback dan polls. 4 layanan tersebut benar-benar gratis tanpa iklan-iklan yang berbau hot, sexy, bugil, atau pun porno (**biasa nembak keyword hehehe..). Semua layanan tersebut dapat dengan mudah kita gabungkan/pasangkan pada blog kita tanpa kita harus memahami kode-kode HTML ataupun kode-kode JavaScript karena HaloScan sendiri yang akan memasangnya. Untuk menggunakan/memasangkan layanan HaloScan pada blogger akan dibahas dalam artikel mendatang (sekarang baru ngambil screenshot).
Berikut fitur yang disediakan HaloScan...
Fitur Komentar (Comments) :
  • Mudah dalam instalasi pada setiap weblog atau halaman Web
  • Mendukung semua platform blog
  • Moderasi komentar
  • Ban komentar yang tidak sopan dengan satu IP atau sebuah rentang (range) IP
  • Mudah untuk menyesuaikan jendela komentar
  • Ratusan template untuk dipilih
  • Zona waktu di seluruh dunia dan dukungan bahasa
  • RSS - XML feed / sindikasi
  • Mengelola komentar dan trackback
  • Komentar dashboard
  • Backup Komentar/fitur ekspor
  • Komentar Bisa dipasang berupa baris / tertanam
  • Didukung Gravatar
  • Email pemberitahuan jika ada komentar baru
  • Filter Komentar spam
  • Dukungan Email
  • Dan lainnya, selengkapnya baca disini
Resiko menggunakan HaloScan :
  • Semua komentar sebelum pemasangan HaloScan akan dihapus, hal ini sangat merugikan kita dan para pengunjung setia blog kita, linkback otomatis akan dihapus, nah kalo sudah begini traffic blog kita jelas jungkir balik. Apalagi bagi para Pemula SEO ini sangat merugikan.
  • HaloScan tidak memberikan informasi yang jelas asal para pemberi komentar.
  • Dan yang terparah menurut beberapa pengguna HaloScan traffic blog jadi menurun drastis.
Tapi semua terserah para penggunanya sendiri. Sampai ketemu di cara memasang komentar dari HaloScan.

Screenshot ini diambil dari blognya kakaku Fatamorgana
Read More
Labels: •

Readmore Peekabo V.S. Readmore Standar (HTML)

Beberapa saat yang lalu aku pernah membuat artikel tentang readmore, ada 2 jenis readmore yaitu Readmore Peekabo dan Readmore Standar HTML. Dari kedua jenis Readmore tersebut memiliki kekurangan dan kelebihan masing-masing, berikut perbandingannya :
Readmore Peekabo :
  • Kelebihan ; loading page per artikel cepat, fleksible dan terlihat profesional
  • Kekurangan ; rumit dan sulit dalam pemasangan karena menggunakan code JavaScript, sering terjadi kegagalam pemenggalan dan atau kurang rapi
Readmore Standar :
  • Kelebihan ; sederhana dan mudah dalam pemasangan, loading page per artikel lama
  • Kekurangan ; kurang fleksibel dan kurang terlihat profesional
  • Pada artikel kali ini kita akan menggabung kedua jenis readmore tersebut (sebenarnya hanya memodifikasi readmore peekabo).
Ikuti langkah pemasangan readmore modifikasi berikut :
Langkah 1
Login ke Blogger
Langkah 2
Masuk kebagian "TATA LETAK" dan pilih tab "Edit HTML"
Langkah 3
Klik "Expand Template Widget" dan cari kode dibawah ini :
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini tepat dibawah kode diatas (langkah 3):
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var fade = false;
function showFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined&#39;span&#39;);
for undefinedvar i = 0; i &lt; spans.length; i++) {
if undefinedspans[i].id == &quot;fullpost&quot;) {
if undefinedfade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appearundefinedspans[i]);
} else spans[i].style.display = &#39;inline&#39;;
}
if undefinedspans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;none&#39;;
if undefinedspans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;inline&#39;;
}
}
function hideFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined&#39;span&#39;);
for undefinedvar i = 0; i &lt; spans.length; i++) {
if undefinedspans[i].id == &quot;fullpost&quot;) {
if undefinedfade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fadeundefinedspans[i]);
} else spans[i].style.display = &#39;none&#39;;
}
if undefinedspans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;inline&#39;;
if undefinedspans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;none&#39;;
}
post.scrollIntoViewundefinedtrue);
}
function checkFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined&#39;span&#39;);
var found = 0;
for undefinedvar i = 0; i &lt; spans.length; i++) {
if undefinedspans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if undefinedundefinedspans[i].id == &quot;showlink&quot;) &amp;&amp; undefinedfound == 0))
spans[i].style.display = &#39;none&#39;;
}
}
</script>
</b:if>
Langkah 5
Simpan terlebih dahulu template
Langkah 6
Cari kode dibawah ini :
<p><data:post.body/></p>
Langkah 7
Gantilah/replace kode diatas (langkah 6) dengan kode dibawah ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>[Selengkapnya...]</a>
</span>
<script type='text/javascript'>
checkFullundefined&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>
Langkah 8
Periksa secara keseluruhan kode menjadi seperti dibawah ini (warna biru kode tambahan):
<div class='post-header-line-1'>
</div>

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>[Selengkapnya...]</a>
</span>
<script type='text/javascript'>
checkFullundefined&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
Langkah 9
Sampai disini "SIMPAN TEMPLATE" karena modifikasi template sudah selesai dan minum dulu
Langkah 10
Masukan kode dibawah pada setiap posting/artikel yang akan di publish
<span id="fullpost">
Isi posting yang disembunyikan
</span>
Langkah 11
Selesai.......!!!!

Perhatian!
  • Posting/artikel yang terletak di antara kode langkah 10 itulah yang terpenggan dan akan ditampilkan jika pengunjung mengklik Readmore... atau Selengkapnya...
  • Lihat langkah 7 dan cari kata Selengkapnya.... anda dapat mengubahnya dengan kalimat apapun (misal; baca terus...)
  • Masukan kode pemenggalan (Langkah 10) pada mode Edit HTML

Read More
Labels:

Fasilitas Pencarian Artikel 1

Sebelumnya saya telah membahas bagaimana memasang mesin pencari 4 dalam 1, dan widget tersebut sebenarnya sudah lengkap. Tetapi mungkin diantara para blogger ingin membuat fasilitas pencarian artikel/posting yang lebih sederhana. Fasilitas pencarian artikel memudahkan para pengunjung untuk mencari artikel yang diinginkan sesuai kata kunci yang digunakan. Hal ini memberikan nilai lebih pada blog kita dalam hal navigasi karena menurut para pakar blog salah satu kelebihan blog yang profesional adalah kemudahan navigasi.
Berikut langkah pembuatan fasilitas pencarian :
Langkah 1
Login ke Blogger
Langkah 2
Masuk kebagian "Tata Letak - Elemen Halaman" dan "Tambah Gadget" atau baca disini
Langkah 3
Masukan (copy paste) kode dibawah ini pada bagian konten :
<div align="center">
<form id="searchthis" action="http://NAMA-BLOG.blogspot.com/search" style="display: inline;" method="get">
<tr>
<td nowrap="nowrap" valign="top" height="16" align="left">
<input id="b-query" maxlength="255" class="textinputsearch" value="Search..." name="q" size="30" type="text"/>
<input id="b-searchbtn" alt="Search" width="18" src="http://hendriono.googlepages.com/search.gif" height="19" align="top" type="image"/>
</td></tr></form>
</div>
Langkah 4
Simpan Gadget baru tersebut

Keterangan :
  • Gantilah NAMA-BLOG dengan nama/alamat blog anda
  • Gantilah angka 30 untuk menentukan lebar kotak keyword (kata kunci)
  • Ganti kata Search... sesuai keinginan anda (misal : Cari...)

Read More
Labels:

Statistik Blog Widget

Statistik Blog Widget yang akan saya buat baru bisa menampilkan jumlah posting dan jumlah komentar, mungkin beberapa saat kedepan akan disempurnakan dengan statistik blog yang lain. Statistik Blog Widget cukup lumayan berguna untuk mengetahui seberapa banyak jumlah posting/artikel dalam blog kita, sehingga kita tidak usah sulit-sulit menghitungnya. Selain itu kita juga bisa memprediksi seberapa populer blog kita dengan mengetahui jumlah komentar. Mau mencoba? Silahkan ikuti langkahnya dibawah ini.
Langkah pemasangan Statistik Blog :
Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Elemen Halaman" dan "Tambah Gadget" atau baca disini...
Langkah 3
Masukan kode dibawah ini pada bagian konten:
<script src="http://dedehendriono.googlepages.com/statistic.js"></script>
<span ><b><a href="http://modification-blog.blogspot.com/" target="_blank">Statistik Blog</a></b></span>
<ul><li><script src="http://NAMA-BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="http://NAMA-BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>
Langkah 4
Simpanlah Gadget Statistik Tersebut

Keterangan :
Gantilah NAMA-BLOG dengan alamat/nama blog anda
Read More
Labels:

Membuat Daftar Judul Artikel tanpa Isi

Ada beberapa cara untuk mempercepat proses loading halaman blog salah satunya dengan pemenggalan posting, tetapi pemenggalan posting ini menjadi tidak efektif bahkan memperlambat proses loading jika kita ingin menampilkan posting sesuai label/kategori tertentu, walaupun ini juga tergantung jumlah posting dalam kategori tersebut. Seandainya kita memiliki 100 posting dalam 1 label/kategori, berapa waktu yang diperlukan untuk menampilkan seluruh isi posting dalam label tersebut. Untuk mengkali waktu loading maka kita sebaiknya hanya menampilkan judul postingnya saja tanpa isi halaman. Hal ini juga mempercepat loading halaman jika kita mencari artikel dengan kata kunci tertentu dan selanjutnya kita bisa menampilkan seluruh posting/artikel layaknya daftar isi (Table of Content).

Berikut langkah demi langkah pemasangan kode untuk membuat daftar judul artikel tanpa isi :
Langkah 1
Login ke blogger
Langkah 2
Pilih "Tata Letak" dan pilih Tab "Edit HTML"
Langkah 3
Jangan lupa "Expand Template Widget" dan cari kode dibawah ini :
<b:include data='post' name='post'/>
Langkah 4
Setelah ketemu kode diatas, gantilah/replace kode tadi dengan kode dibawah ini :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Langkah 5
Simpanlah template anda dan cobalah dengan menampilkan posting melalui label/kategori
Mudah-mudahan berhasil.... Happy blogging :)
Read More
Labels:

Berbagi Artikel Anda

Fasilitas ini diperuntukan bagi teman-teman blogger yang ingin berbagi berita, cerita, dan atau ilmu pengetahuan lain kepada para pengunjung Blogger TuneUp, silahkan isi form dibawah ini. Insya Allah dalam waktu dekat informasi artikel anda akan ditampilkan pada widget disamping...
Read More
Labels: •

Update Top Komentator

Sebenarnya artikel ini sudah pernah di bahas, silahkan anda baca "Tampilkan Top Komentator di Blogger" tetapi ada beberapa blogger yang kesulitan dalam penerapannya, maka pada artikel ini saya akan menyederhanakan teknik pemasangan widget "Top Komentator". Intinya masih menggunakan kode JavaScript yang pernah dibahas sebelumnya, tetapi sekarang saya menggunakan Aggregator Pipe sendiri fasilitas dari Yahoo. Untuk memasang Top Komentator versi update silahkan ikuti langkah berikut :

Langkah 1
Cobalah terlebih dahulu sebelum memasangnya di blogger untuk memastikan apakah berhasil atau tidak. Silahkan klik disini...
Langkah 2
Setelah halaman yahoo pipe terbuka masukan data berikut :
  • Alamat URL : masukan alamat blog anda disini, misal : http://modification-blog.blogspot.com, hati-hati jangan sampai ada tanda "/" (string) di akhir alamat URL.
  • Jumlah komentar : tentukan berapa komentator yang akan ditampikan
  • Filter nama (pisahkan dgn koma) : masukan nama yang akan difilter (tidak akan ditampilkan) dan pisahkan dengan koma tanpa spasi, misal : Anonymous,Admin
  • Klik "Run Pipe"
Langkah 3
Jika sudah selesai percobaan, sekarang kita pasang widget "Top Komentator" ke blogger, login-lah terlebih dahulu
Langkah 4
Buatlah Elemen Halaman baru dan pilihkan Gadget - HTML/JavaScript, jika belum bisa silahkan baca disini.
Langkah 5
Masukan (copy-paste) kode dibawah ini :
<script src="http://hendriono.googlepages.com/topcoment.js"></script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=4fbfe9b5207af901c578be27228186ae&filter=Anonymous&url=http%3A%2F%2FBLOGNAME.blogspot.com&num=10" type="text/javascript"></script>

Langkah 6
Simpanlah Widget baru tersebut.

Keterangan :
  • Anonymous : masukan nama yang akan difilter
  • BLOGNAME : masukan nama (alamat blog) blog anda
  • 10 : jumlah top komentator yang akan di tampilkan
Happy blogging :)
Read More
Labels: