Cara Menambahkan Emoticon di shoutbox
Apa kamu bosan dengan emoticon yang ada di shoutbox kamu? Nha biar nggak bosan kamu bisa menambahkan sendiri icon-icon (emoticon) kesayangan kamu kedalam shoutbox blog kamu. Mau tahu caranya? begini nih cara nya...
Oh ya, trik yang ini hanya untuk yang menggunakan shoutbox dari shoutmix.
Ikuti langkah-langkah berikut ini :
1. Login ke shoutmix.com
2. Trus di daerah menu "Display", klik link "Smileys"
3. Nha nanti kamu akan menjumpai tampilan seperti ini :

4. Untuk manambahkannya masukkan alamt icon kamu kedalam kotak "Smile image URL", kalo kamu tidak punya iconnya atau alamatnya kamu bisa gunakan alamat icon2 dibawah ini.
5. Trus masukkan "kode" (shorcut) kedalam kotak disebelahnya trus klik tombol "ADD"
6. Lakukan terus seperti itu sampai semua icon smile yang kamu inginkan masuk dalam daftar.
7. Kalo sudah klik tombol "Save Setting"
Nha coba kamu lihat blog kamu, trus lihat dishoutboxnya maka kamu sudah punya tambahan emoticon dalm shoutbox kamu.
Berikut ini daftar emoticon beserta alamat URL-nya :
http://kendhin.890m.com/smile/senang.gif http://kendhin.890m.com/smile/yahoo_angry.gif http://kendhin.890m.com/smile/yahoo_bigsmile.gif http://kendhin.890m.com/smile/yahoo_blush.gif http://kendhin.890m.com/smile/yahoo_cry.gif http://kendhin.890m.com/smile/yahoo_devil.gif http://kendhin.890m.com/smile/yahoo_kiss.gif http://kendhin.890m.com/smile/yahoo_laughloud.gif http://kendhin.890m.com/smile/yahoo_love.gif http://kendhin.890m.com/smile/yahoo_wink.gif http://kendhin.890m.com/smile/yahoo_party.gif http://kendhin.890m.com/smile/yahoo_pray.gif http://kendhin.890m.com/smile/yahoo_rotfl.gif http://kendhin.890m.com/smile/yahoo_sad.gif http://kendhin.890m.com/smile/yahoo_sleep.gif http://kendhin.890m.com/smile/yahoo_smiley.gif http://kendhin.890m.com/smile/yahoo_sweating.gif http://kendhin.890m.com/smile/yahoo_think.gif http://kendhin.890m.com/smile/yahoo_tongue.gif http://kendhin.890m.com/smile/yahoo_witsend.gif
Oh ya lupa, maksimal icon smile yg dapat kita tambahkan adalah 10 biji, ini buat yg gratisan, kalo buat yg premium bisa nyampe 500 biji.
22.44 | 0 Comments
Cara Pasang Read More Animasi
Caranya gampang kok
1.Bagi teman-teman yang blognya belum pake readmore,buat readmore dulu disini
2.Dihalaman Edit HTML, ganti tulisan read more ato lainya yang sobat pake buat link baca selanjutnya dengan kode berikut <img src="link gambar kamu"/>
Yang sudah pake read more langsung langkah 2 aja ya.
3.Langkah terakhir dan terpenting adalah Save Template
Kalo sobat belum punya gambar ini aku sediakan:
http://i496.photobucket.com/albums/rr329/grandisyf/th_button-green-f.gif
http://i496.photobucket.com/albums/rr329/grandisyf/th_arrow-readmore.gif
http://i496.photobucket.com/albums/rr329/grandisyf/th_more.gif
http://i496.photobucket.com/albums/rr329/grandisyf/Read-more-3_grandis.gif
http://i496.photobucket.com/albums/rr329/grandisyf/th_Readmore3.gif
Uda dulu ya,happy blogging..
22.24 | 0 Comments
Pasang Banner di Header Blog
Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :
"Bagaimana caranya menyimpan banner pada header blog"
Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.
Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.
Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.
Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.
Untuk Template Klasik
Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini :
http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif
dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):
Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :
Untuk template baru
Bagi sobat pengguna template baru, bisa menggunakan dua cara.
Cara pertama :
Langkahnya diatas sama dengan yang di template klasik.
Cara kedua :
Nah itu langkah pertama, langkah selanjutnya adalah :
22.18 | 0 Comments
Membuat Menu Dropdown
Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi? Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini:
Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah di klik, akan muncul nama bulan arsip-arsip kita.
Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru. Untuk template klasik langkahnya yaitu :
Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu : &<BloggerArchives>
<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>
</BloggerArchives>
<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION>
<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form>
Sebagai contoh untuk menu Dropdown milik saya :
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu> Hasilnya akan seperti ini :
<option>- Blog Tutorial -</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html">Membuat Blog</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">setting Blog</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih Template</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">warna & hurup</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Posting Artikel</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">Read more (1)</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Text area</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Blogger Emoticons</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Yahoo!Emoticons</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Download Gratis</option>
</select></form>
Mudah bukan? Selamat mencoba !
22.17 | 0 Comments
Membuat Read More untuk Template klasik
Wah judul yang aneh, "membuat Read More" maksudnya apa? Begini sobat, sebenarnya saya kurang setuju dengan judul tersebut, tadinya saya ingin memberi judul "Membuat menu Selengkapnya", tapi berhubung kata "Read More" yang paling di kenal di jagad blog, ya saya pun ikut-ikutan (dasar tukang ngekor). Ya sudahlah kepanjangan ngobrolnya. Kita mulai pembahasannya. Bagi para sobat yang baru mulai membuat blog, mungkin belum mengetahui informasi ini dan mudah-mudahan dengan membaca artikel ini dapat menambah pengetahuan kita tentang yang namanya nge-blog.
Sobat mungkin melihat bahwa artikel-artikel saya terlihat hanya berupa judul-judul dengan satu atau dua buah paragrap saja, dan untuk melihat keseluruhan artikel harus meng klik link yang bertuliskan >> Selengkapnya...", ini di sebut pengkaburan atau pengkamuflasean postingan (ribet banget nyebutnya). Bagi sobat yang baru posting artikel hanya satu atau dua artikel saja mungkin menganggap tidak perlu menyingkat artikel sobat, namun jika nanti artikel sobat sudah banyak, maka mungkin saja ada terbersit ingin membuat menu ini.
Oke... kelamaan ngawurnya, mending langsung saja. Untuk membuat menu Read more kita harus menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali ini, saya khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan tunggu pada postingan yang akan datang.
Silahkan ikuti langkah-langkah berikut :
<MainOrArchivePage>
div.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
div.fullpost {display:inline;}
</ItemPage>
Untuk mempercepat pencarian kode </style>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis </style> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
<MainOrArchivePage><br/> <a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>
Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis <$BlogItemBody$> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
<div class="fullpost">
</div>
Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.
Cara Posting Artikel
Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu artikel agar ada menu Readmore nya.
<div class="fullpost">
</div>
simpan artikel sobat yang ingin di tampilkan sebelum kode <div class="fullpost">, kemudian simpan sisa keseluruhan artikel setelah kode <div class="fullpost"> dan sebelum kode </div>
Agar lebih jelas, saya beri contoh, misal artikelnya begini :
Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
<div class="fullpost">
dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang bertuliskan Read more.
</div>
Hasilnya yang akan tampak pada blog kita adalah seperti ini :
Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
Read more!
Bagaimana sobat, sudah jelaskan. bila belum jelas silahkan di tanyakan kembali pada komentar.
Sedikit clue, kata Read more! sebenarnya bisa kita ganti sesuai dengan keinginan kita, misalkan kita rubah menjadi Baca selengkapnya..., Selengkapnya.., Lanjutannya... atau apa saja yang penting kata tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita ada kelanjutannya.
Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti semua kode div menjadi Span. Hasilnya akan sama, cuma bagi para sobat yang suka posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan perintah lain yang memakai kode Span.
Akhirul kata selamat mencoba !
22.15 | 0 Comments