Kumpulan Puisi Dan Tutorial Blog: November 2010

Membuat Objek Melayang

13.55 |

Jika anda sering melakukan blogwalking maka anda akan melihat ada beberapa blog yang memasang objek melayang. Objek melayang adalah objek yang selalu berada dilayar meskipun scrollbar digulung keatas ataupun kebawah. Sehingga objeknya selalu tampak oleh pengunjung. Objek ini bisa berupa teks, gambar, link, iklan, widget, flash, dll.

Nah berikut saya akan memberikan tutorial membuat objek melayang dengan fungsi redup atau opacity. Bagi anda yang pernah menggunakan photoshop pasti sudah tahu apa itu opacity. Sebagai gambaran silahkan lihat disini lalu arahkan mouse anda ke Music Player yang berada di pojok. Maka musik playernya akan menjadi visible.

Ok sudah jelas ya? Nah bagi anda yang ingin mencobanya. Berikut caranya:

1. Login ke Blogger. Lalu klik Design -> Edit HTML

2. Letakkan kode dibawah ini diatas kode ]]></b:skin>

#float {
opacity: 0.6;
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

#float:hover {
opacity: 1.0 }

Keterangan:
0.6 merupakan tingkat keredupannya. Semakin rendah nilainya semakin redup objeknya. (nilainya mulai dari 0.1 - 1)

Tulisan yang dicetak tebal merupakan posisi objek. Jika anda ingin meletakkan diatas maka gantilah bottom dengan top. Jika anda ingin meletakkan objeknya disebelah kanan maka gantilah left dengan right.

Jika anda ingin meletakkan objek ditengah maka aturlah nilai bottom atau left-nya. Semakin tinggi nilainya semakin ketengah objeknya.

3. Setelah itu, letakkan kode berikut diatas </body>

<div id='float'>letakkan konten anda disini</div>

Silahkan ganti tulisan yang berwarna merah dengan teks, link, gambar, iklan, atau widget anda.

4. Jika sudah simpan template anda dan lihat hasilnya

»» Read More =>

Read User's Comments0

Membuat Link Warna Warni Atau Rainbow Link Pada Blog

13.50 |

Rainbow link atau link pelangi merupakan suatu link dimana jika mouse pointer kita diarahkan ke link tersebut maka linknya akan berkedip warna-warni seperti warna pelangi.

Jika anda masih bingung. Silahkan berkunjung kesini lalu arahkan kursor mouse anda ke salah satu link untuk melihat hasilnya. Gmn menarikkan? Nah untuk memasang link warna-warni ini caranya sangat mudah. Anda cukup memasukkan kode javascript-nya pada blog anda maka efeknya akan langsung berfungsi. Biar lebih mudah. Silahkan ikuti cara berikut ini:

1. Seperti biasa, login ke blogger. Kemudian pada menu Edit HTML

2. Letakkan kode dibawah ini diatas kode <body>

<script src='http://hermanblog.googlecode.com/files/link_pelangi.js'/>

3. Klik Save Template.

4. Selesai. Silahkan liat hasilnya.

»» Read More =>

Read User's Comments0

Menambah/ Memasang Emoticon di Kotak Komentar

13.45 |

Dengan memasang emoticon di kotak komentar maka para komentator akan lebih mudah untuk mengekspresikan perasaannya. Selain itu, juga akan membuat blog kita lebih ekspresif bukan?

Nah untuk memasang emoticon dikotak komentar. Anda harus men-setting kotak komentar agar muncul dibawah postingan terlebih dahulu. Contohnya seperti di blog ini. Jika kotak komentar anda berada dalam halaman pop-up seperti gambar dibawah ini maka anda tidak bisa memasang emoticon pada kotak komentar.

pop-up comment

Bagi anda yang kotak komentarnya berada pada halaman pop-up. Silahkan diatur dulu agar kotak komentarnya muncul di bawah postingan. Kalau anda tidak tahu caranya, baca membuat kotak komentar tampil dibawah postingan.

1. Jika sudah klik Design -> Edit HTML
2. Beri tanda centang pada "Expand Widget Templates"

3. Cari kode </body>
4. Lalu letakkan script dibawah ini diatas kode </body>

<script src='http://hermanblog.blogspot.googlecode.com/files/yemoticon.js' type='text/javascript'/>

5. Trus cari kode berikut 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>

6. Kalau tidak sama, cari yang paling mendekati. Kemudian letakkan kode berikut ini dibawah <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b>

7. Klik Save Template.

8. Selesai. Silahkan dites di kotak komentar anda. Jika berhasil maka akan muncul icon-icon lucu di kotak komentar anda seperti ini:

Selamat mencoba..

»» Read More =>

Read User's Comments1

Cara Membuat Menu Dropdown Pada Blogger

13.41 |

Dropdown menu adalah menu yang berisi sekumpulan teks atau link yang disingkat menjadi sebuah menu tunggal.

Contoh tampilannya seperti ini:

Isinya hanya akan tampil jika anda mengklik pada menu tersebut sehingga bisa hemat ruangan blog. Cara ini bisa dijadikan sebagai alternatif blogroll atau kebutuhan lainnya.

Nah untuk membuatnya, caranya sangat mudah:

1. Login ke Blogger. Klik menu Design-> Page Elements
2. Klik Add a Gadget -> HTML/ Javascript
3. Masukkan kode dibawah ini kedalam kotak

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
<option value="http://alamatblog.com/#" selected>Blogroll</option>
<option value="http://alamatLink.com/">Nama Link</option>
<option value="http://alamatLink.com/">Nama Link</option>
<option value="http://alamatLink.com/">Nama Link</option>
</select>

Jika anda ingin menambah link baru lagi tambahkan kode

<option value="http://alamatLink.com/">Nama Link</option> diatas </select>

Ganti alamatblog dengan dengan alamat blog anda.
Ganti teks berwarna merah dengan alamat link yang ingin dipasang.
Ganti teks berwarna biru dengan nama link yang ingin ditampilkan.

4. Jika sudah klik Save. Selesai

Catatan:
kode diatas untuk membuka link dalam halaman yang sama. Jika anda ingin membuka link pada halaman baru. Ganti kode

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">

Menjadi

<select onchange="javascript:window.open(this.options[this.selectedIndex].
value);">

Selamat mencoba..

»» Read More =>

Read User's Comments0

Memasang Iklan PPC di Area Posting

13.35 |

Ada banyak cara untuk meningkatkan clickrate iklan ppc misal dengan mengatur warna iklan, menghilangkan garis tepi, menggunakan format tertentu dan menempatkan iklan di tempat yang mudah dilihat oleh pengunjung.

Salah satu tempat yang paling mudah dilihat pengujung tentu saja adalah area posting. Karena pada umumnya pengunjung yang datang ke blog adalah untuk membaca artikel maka menempatkan iklan di area posting merupakan pilihan terbaik.

Pada postingan ini saya akan menunjukkan kepada anda cara memasang iklan PPC diatas dan dibawah posting.

1. Pertama-tama, siapkan kode iklan yang mau dipasang. Iklannya bisa dari Google adsense, Adsensecamp, Kliksaya, Adbrite, Bidvertiser, dan lain-lain.

2. Setelah itu encode kode tersebut agar bisa muncul dalam postingan.

3. Untuk melakukannya, buka http://centricle.com/tools/html-entities/

4. Masukkan kode iklan kedalam kotak lalu tekan Encode

5. Setelaj itu, buka blogger. Masuk ke menu Design -> Edit HTML

6. Beri centang pada "Expand Widget templates"

7. Cari kode berikut

<data:post.body/>

8. Jika anda menemukan dua kode <data:post.body/> maka pilih yang pertama.

9. Letakkan kode PPC yang sudah di encode tadi diatas <data:post.body/> bila anda ingin memasang iklan PPC diatas postingan atau letakkan dibawah <data:post.body/> bila anda ingin memasang iklan PPC dibawah postingan.

10. Save template dan lihat hasilnya.

Selamat mencoba...!

»» Read More =>

Read User's Comments1

Memasang Label Animasi atau Tag Cloud pada Blogger

13.33 |

Ketika melakukan blogwalking, saya menemukan sebuah widget yang cukup menarik yaitu label animasi atau disebut dengan tag cloud. Label animasi ini mempunyai tampilan yang sangat menarik karena ketika kursor mouse disorot ke area tag cloud tersebut maka labelnya akan berotasi seperti orbit. Sehingga membuat blog kita terasa lebih interaktif.

Label animasi ini mempunyai fungsi yang sama dengan label standar dimana setiap kali kita memberi label pada postingan maka label tersebut secara otomatis akan muncul pada area tag cloud.

Nah bagi anda yang tertarik dengan label animasi ini. Berikut cara pemasangannya:

1. Seperti biasa. Login ke Blogger

2. Klik Download Full Template untuk membackup template anda

3. Setelah itu klik Design -> Edit HTML

4. Cari kode <b:section class='sidebar' id='sidebar' preferred='yes'>

5. Kalau sudah ketemu letakkan kode berikut tepat dibawah kode yang diatas

<b:widget id='Label88' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.hermanblog.com'>Herman Blog</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "180", "180", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Angka 180 menunjukkan panjang tag cloud dan angka 180 menunjukkan tinggi tag cloud. Silahkan diganti nilainya sesuai dengan ukuran sidebar template anda.

Sedangkan kode ffffff menunjukkan warna background dari tag clound. Angka 333333 menunjukkan warna teks dan angka 12 menunjukkan ukuran teks. Silahkan diganti sesuai keinginan.

6. Jika sudah, Klik Save Template. Selesai

Selamat mencoba.

»» Read More =>

Read User's Comments0

Memasang Status Yahoo Messenger di Blogger

13.26 |

Dengan memasang status Yahoo Messenger di blog anda maka pengunjung dapat dengan berinteraksi dengan anda karena ketika anda sign in di Yahoo messenger maka status YM akan berubah menjadi

sehingga pengunjung bisa tau jika anda sedang online pada saat itu. Dan begitu juga sebaliknya jika anda sign out dari Yahoo messenger maka statusnya akan berubah menjadi

Menarik kan? Nah bagi anda yang ingin memasangnya. Berikut caranya:

1. Login ke Blogger. Klik Design -> Page Elements

2. Klik Add a Gadget -> HTML/ Javascript

3. Copy kode dibawah ini lalu pastekan kedalam kotak

<a href="ymsgr:sendIM?yahooid"> <img src="http://opi.yahoo.com/online?u=yahooid&m=g&t=1&l=us"/>
</a>

Keterangan:
Ganti tulisan yang dicetak tebal dengan yahoo id anda.
Angka 1 bisa anda ganti dengan angka lain. Silahkan ganti angka sesuai dengan status Yahoo messenger yang ada pada tabel dibawah ini. Pilih yang anda suka yach.. hehe..

No	Status Offline	Status Online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. Kalau sudah Klik Save.

5. Selesai.

»» Read More =>

Read User's Comments2

Cara Mengganti Link Older Post dan Newer Post Dengan Icon Gambar

13.24 |

Secara default, setiap template blogger akan dilengkapi dengan link older post dan newer post yang masing-masing berfungsi untuk menampilkan postingan lama dan baru.

Nah agar tampilannya lebih menarik, anda bisa menggantinya dengan icon-icon mungil. Contohnya seperti gambar dibawah ini.

Menarik bukan? Klu anda tertarik silahkan ikuti langkah-langkah dibawah ini

1. Pada menu klik Design -> Edit HTML
2. Biar aman backup dulu template anda dengan klik Download Full Template
3. Beri tanda centang pada kotak "Expand Widget Template"
4. Lalu cari kode <data:olderPageTitle/>5. Kalau sudah ketemu ganti kode tersebut dengan kode icon dibawah ini.

kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bl8r0HK4UuDWgvohGJNd1CNs_lq_qHauwB7igDvCvvmcIST-o1KwLFo0Na9SHta4oLFWqc2I4sv_apquGmRGYVLXpkgOFWhRyymCjVwWKKoiYBSPz1aKOp1LT6v438-xvZ52z8xQixZC/" border="0" >

kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivjeo0jiBn_sMBhfrwOY1YfJV3L8W9qLkmrCiyuGZCQS5mut7uL0wnbodYFASH2zR5AqBfFPYzi_5R1SzeRy6H7PgthdooXxpWDOD8QO0ru5BPBOUkUCK6oyIkIubVk-2r4tC-y-ZU4BIN/" border="0" />

kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZSuFYTpPJ6SI-2NFJljsIQ6Q33f6cDAjLEUL2rF19alUUfKqTpB61Aq1KM3zmiuVM_8i92DVzMvhL6IVOekD66vHGCfvKHqriDI5qoZmMRaVZTnIQ3kE_imdF9k3h9CMGVB6qmmeiXZV/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF4IhTM9FMIbxiJ9o43QMlstFIQvYZw2gGvm0Aohaf8Zgj_FQ4HxUfTghBVaDMjNcVVoGLlaYpHJy58E7MaJN0YfbdfAxchH0e3MMrYHx4fFXO5uVNHqhMvQ0UV4iBOCdozY00o5b6Jlf1/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIVP_3YppHvBgm5cNDjg-sfAxuptkR-WOZDYI-U8nhqkDty5siy6vWu5MFSOT02vI4S09HxUxX5c90OnfPJBQs3Z43VPrLyx7nh-aUWNv4h2i-Th-3kuF-LMW9edNyNh3tnvKbfjpNGFSi/" border="0" />

6. Contohnya anda mau menggunakan icon

maka ganti kodenya dengan <img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/bt-right.png" border="0" />

7. Untuk mengganti link newer post. Cari kode <data:newerPageTitle/> lalu ganti dengan kode icon dibawah ini.

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mCs1rdyMGMXSftBNUuYrj4T3RvTAxbUsmVA60q04DzGlO7mD2bzFr4cP62fwydvGXzJAXKyAd_AXwnfIZCY7awD2Wl1-sjEGvirLzJJDM54aZx7wm1bWjN-LqDHwDD6gXF0_0OsOe7li/" border="0" /></a>

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCOPK0FpzHCh_7X75TkRCz8KD7r3bX4GWei_ohLMtWOZTkv1wuoZBPpcDCJoBqb917WgO3hz4-fO36yE3pVuDuhgqhcdUrI5eVAgKVYtIpjzHE_8Hez76nqtxera8hqXa54RYjEsSSz9QS/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKiw5SLrVCkoY3B9UuXs2n84CXXxNR-tbsETlIrtxDrGpdvAtvThYjSs0234C9EA7u8vdzew1xLxRaM4_5RixzHvq5f40cH1_5Qzk-U5NShV5Fhz7UH9v4snqQq08ETTGVPp-oniwtf_z/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieH9bKP3YkXGEXql5EzXf_7H2q5lAKp1xSByM1UPxfQaU5uRAjVkENnn4VeZpNyI0h2a7s7oPVzQu1ZGfjXL3URDtSKj1eNlwvrbLKUiQ15KnTHFurmvNGKMuUR0z1GWRLYVqYK-42LLtb/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF8j3Sni3pkZFe8LvdVkVqJ7-I8o4D430eq0MqKrch356J7hxr0PNxoedFop8BgXdM7Vk3eTZ-PMqiyGBEY-MvRUwgZdzmiG6PneYTFrbIh7QRALmEO2bOndmEeHI021GKX1Cm0YkT_gob/" border="0" />

8. Sepertinya kurang maknyus jika tidak mengganti link home-nya. Ok, untuk mengganti link home cari kode <data:homeMsg/>. Biasanya ada 2 kode yang sama. Ganti kode yang pertama dengan kode icon dibawah ini.

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJ4tSC_Iekq-Zh0UKo9ww0lVfzYOK1fNma6l3cge8CgbW8yzpElYDhyP4oWhQJh3pvWIjKM6VQRnCCIj40syWSKLg_Qfl8R_IUlUYOfyChOrFKV6CUazGkjAIvL-3uhUBZalFbOvfxWlQ/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE2KdgEXAVv2sIJqYM0u03SSwmpRslRfvCw4z1_LER5oG49rZ7AbjqU29B-najJ9wKA-iMrk2IzZ1mNMPRfeiLsB_pICzn0wx37gI_cvM2dhzM8A0Y7HTe6JLV8o15v5D_dZ0r0b0p0vHG/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2nYNCseHsQMZnlsj9C7x539KfcNIDqeozGA-E_eNXDiS9GhoQV_Ffg7h1PzkrNiMOw75qOtyPrfvPRPmwnA1j_k-yRXYkQ2WWV-_M3qs0LMim_cehls3d4A8c-bTZPGUcXTLAk-Me43f/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB1B_S3bOzhArW9_iKiKx-nJSKl68HLB9gfFC-VduEdHCaI6T8fxYMfIRy9ubIXTDasFA75u0Z52pivF3-rE5EgfOc08MCicEENGqn3uZwqzyjerD_1dO9GkTvErdQISnxKALC6fsWTVlz/" border="0" />

9. Setelah itu, klik Save Template.
10. Selesai. Silahkan klik View Blog untuk melihat hasilnya.

Untuk mendapatkan icon-icon cantik lainnya. Coba kunjungi http://www.iconarchive.com. Disana tersedia ribuan icon yang bisa anda download secara gratis.

»» Read More =>

Read User's Comments0