Catatan Galung: Juni 2007

Sabtu, 30 Juni 2007

Tips Menghilangkan Border Image

Bagi sobat yang gemar memasang gambar ataupun emoticons pada postingan, sering kali menghadapi sedikit ganjalan yaitu gambar yang di pasang mempunyai border/bingkai gambar berbentuk kotak. nah bagi sobat yang ingin menghilangkan border ini, saya ada sedikit tips untuk menghilangkannya.

Contoh gambar yang mempunyai border :

Atau seperti ini :

Bandingkan dengan yang ini :

Atau seperti ini :

Lebih asyik bukan jika gambar yang kita posting tidak mempunyai border/bingkai. Cara untuk menghilangkan border adalah sobat harus membiasakan diri menambahkan kode border="0" pada setiap gambar yang di pasang. Sebagai contoh saya mempunyai alamat gambar seperti ini :

http://amen24.googlepages.com/face5.gif

Untuk membuat gambar, bisakan menyisipkan kode border="0", contohnya :

<img src="http://amen24.googlepages.com/face5.gif" border="0">

Bagaimana jika sobat sudah menambahkan kode border="0", akan tetapi gambar masih tetap mempunyai border/kotak. Nah untuk kejadian yang satu ini, maka style sheet css sobat ada yang harus di modifikasi. Silahkan ikuti langkah-langkah berikut ini!

Untuk yang memakai template klasik :

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode HTML template sobat, lalu paste pada notepad, kemudian save untuk backup apabila ada kesalahan editting

Cari kode berikut pada css sobat (ini contoh saja):

.post img

Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :

klik tombol Simpan Perubahan Template
Selesai.

Untuk yang memakai template baru :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Cari kode berikut pada css sobat (ini contoh saja):

.post img

Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :

Klik tombol SIMPAN TEMPLATE

Selesai.

Bagaimana sobat, mudah-mudahan expresi sobat lebih bebas karena sudah tidak di ganggu lagi dengan adanya border.

Salam buat blogger semua.

Membuat Banner Bertaburan

Pernah melihat blog yang terdapat banner bertaburan di halamannya? ingin mengetahui cara membuatnya? jika tertarik silahkan baca artikel di bawah ini sampai selesai !.

Untuk membuat banner bertaburan, yang akan saya gunakan adalah memakai perintah marquee. Tentang marquee sudah saya bahas pada postingan terdahulu dan kali ini akan saya bahas variasi lain dari perintah marquee ini.

Agar banner yang di gunakan lebih menarik untuk di lihat, maka sebaiknya kita menggunakan banner yang berisifat animasi. Animasi ini bisa berupa putaran, terbalik atau mungkin dalam bentuk terbang. Untuk membuat animasi, sobat bisa menggunakan berbagai software pembuat animasi semisal Ulead cool 3D ataupun program yang lainnya. Sedikit kabar gembira, bagi sobat yang belum mempunyai software Ulead cool 3D sobat bisa mendowload secara gratis di blog miliknya bang iwan yaitu di http://free7.blogspot.com .

Bagi sobat yang sudah terbiasa dengan program-program animasi, tentu tidak akan menemui masalah dalam hal membuat banner animasi, akan tetapi bagi sobat yang sama
seperti saya ini yakni masih banyak bingungnya kalau membuat animasi maka ada jalan
lain yakni kita bisa mencari situs-situs penyedia animasi. Bagaimana cara mencarinya?
ini hal yang mudah, pada akhir artikel ini saya sediakan search engine dari google.
Tugas sobat hanya mengisi kotak isian dengan keyword yang di inginkan, misal : free animation,
animasi gratis, Free banner animation atau keyword lain yang sekiranya
bisa memunculkan berbagai situs penyedia animasi gratis, kemudian setelah kotak isian
di tulis silahkan klik tombol search maka nanti akan keluar ratusan atau bahkan ribuan situs penyedia animasi, silahkan sobat cari sendiri mana yang cocok.

OK kita kembali ke.....topik bahasan tentunya. Sebagai contoh saya telah mendapatkan sebuah file banner animasi, tugas selanjutnya adalah mengupload file tersebut ke hosting penyimpan gambar. Ambil contoh, saya telah mengupload banner animasi di google pages dan mempunyai alamat seperti ini :

http://amen24.googlepages.com/face5.gif

Untuk membuat gambar ini bisa tampil kodenya seperti ini :

<img src="http://amen24.googlepages.com/face5.gif">

hasilnya seperti ini :

Atau sobat bisa memperbesar atau memperkecil animasi ini dengan mengatur tinggi serta lebar gambar, contoh di perbesar :

<img src="http://amen24.googlepages.com/face5.gif" width="100" height="100">

hasilnya akan seperti ini :

contoh di perkecil :

<img src="http://amen24.googlepages.com/face5.gif" width="30" height="30">

hasilnya akan seperti ini :

Langkah selanjutnya adalah membuat variasi perintah marquee, saya berikan contoh perintahnya seperti ini :

<marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14">

<img src="http://amen24.googlepages.com/face5.gif">

</marquee>

Agar lebih faham, saya bahas sedikit tentang fungsi-fungsi dari atribut yang saya berikan :

behavior="scroll" --> behavior atribut untuk mengatur perilaku gerakan. scroll
perilaku yang di pilih yaitu teks atau image bergerak berputar/berulang-ulang.

direction="down" --> direction atribut untuk mengatur arah gerakan teks/image. down
arah yang di pilih adalah ke bawah, sobat bisa merubah arah ini sesuai keinginan, tinggal ganti
dengan Up untuk keatas, Left untuk ke pinggir dan right untuk ke kanan.

style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" -->
position: absolute; posisi yang di pilih adalah absolut atau tersendiri.
right: 1100px; posisi terletak sebesar 1100 pixel diukur dari sebelah kanan layar.
top: 52px; posisi juga terletak pada 52 pixel di ukur dari sebelah atas layar.
width: 100px; lebar untuk tempat gambar sebesar 100 pixel. height: 900px;
tinggi untuk tempat gambar sebesar 900 pixel.

scrollamount="14" --> scrollamount atribut untuk mengatur kecepatan gerakan. 14 adalah kecepatan yang dipilih, silahkan ganti nilainya, semakin kecil nilai maka gerakan semakin lambat, semakin besar nilainya maka gerakannya semakin cepat.

Contoh di atas merupakan hanya untuk satu gambar animasi saja, biar lebih menarik dan supaya gambarnya banyak bertebaran maka perintah yang di buat harus beberapa perintah, akan tetapi posisinya harus di bedakan agar terlihat bertebaran. Dan ada yang harus di ingat yaitu kita harus membuat posisi yang kira-kira tidak mengganggu pembaca yakni tidak menutupi artikel yang kita posting. Contoh perintahnya seperti ini :

<marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14">

<img src="http://amen24.googlepages.com/face5.gif" width="100" height="100"/>

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px; height: 450px;" scrollamount="5">

<img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" />

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; right: 441px; top: 55px; width: 60px; height: 250px;" scrollamount="9">

<img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" />

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; right: 498px; top: 53px; width: 60px; height: 380px;" scrollamount="6">

<img src="http://amen24.googlepages.com/face5.gif" />

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; right: 800px; top: 51px; width: 60px; height: 350px;" scrollamount="7">

<img src="http://amen24.googlepages.com/face5.gif" />

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; right: 390px; top: 55px; width: 60px; height: 450px;" scrollamount="5">

<img src="http://amen24.googlepages.com/face5.gif" />

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; right: 749px; top: 54px; width: 60px; height: 250px;" scrollamount="5">

<img src="http://amen24.googlepages.com/face5.gif" />

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; right: 325px; top: 52px; width: 60px; height: 300px;" scrollamount="10">

<img src="http://amen24.googlepages.com/face5.gif" />

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; right: 600px; top: 49px; width: 60px; height: 350px;" scrollamount="8">

<img src="http://amen24.googlepages.com/face5.gif" />

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; right: 873px; top: 52px; width: 60px; height: 400px;" scrollamount="3">

<img src="http://amen24.googlepages.com/face5.gif" />

</marquee>

<marquee behavior="scroll" direction="down" style="position: absolute; right: 50px; top: 55px; width: 60px; height: 700px;" scrollamount="12">

<img src="http://amen24.googlepages.com/face5.gif" />

</marquee>

Contoh gambar animasi diatas adalah memakai gambar milik saya, silahkan sobat ganti dengan gambar yang sobat sukai.

Cara memasang kode-kode diatas, silahkan ikuti langkah berikut ini :

Untuk template klasik :

Klik menu Template

Klim menu Edit HTML

Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template

Simpan kode berikut antara kode <body> ........ </body> :

Klik tombol Pratinjau untuk melihat perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Untuk template baru :

Sig in di blogger dengan id sobat

Klik menu layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

Copy kode di bawah lalu paste pada kotak yg tersedia, jangan lupa ganti alamat gambarnya dengan yang sobat miliki

Klik tulisan Lihat Blog untuk melihat hasilnya

Selesai.

Sebagai contoh saya sudah membuat blog dengan perintah ini, silahkan klik disini untuk contoh yang arah ke bawah, dan klik di sini untuk contoh yang arah ke atas.

Jangan lupa sobat, untuk mencari situs penyedia animasi, silahkan gunakan search engine di bawah biar saya dapet komisi dari google ya

dan yang pasti sobat tidak usah repot-repot buka browser baru bukan

Selamat mencoba !

Kamis, 28 Juni 2007

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 :

Klik menu Template

Klim menu Edit HTML

Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template

Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;

Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :

border:1px solid #eee;

border-width:1px 1px 0;

border:1px solid #eee;

border-width:0 1px 1px;

Klik tombol Pratinjau untuk melihat perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;

Klik tombol Pratinjau untuk melihat perubahan yang ada

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Langkahnya diatas sama dengan yang di template klasik.

Cara kedua :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

cari kode berikut pada template sobat :

Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

Klik menu Elemen Halaman

KLik tulisan Edit yang ada pada elemen Header

Tunggu beberapa saat

Pilih radio button yang ada di samping tulisan dari komputer Anda

Klik tombol Browse...

Pilih banner yang telah di buat yang ada pada komputer sobat

Tunggu beberapa saat sampai proses selesai.

Gambar banner sobat akan di tampilkan

Klik tombol SIMPAN PERUBAHAN

Selesai.

Nah silahkan sobat lihat hasilnya!

jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja
langkah-langkah di atas.

Ok sobat, mungkin pembahasan tentang cara mengganti banner sudah selesai, untuk melihat contoh blog yang sudah saya tambahkan banner silahkan klik di sini.
Pembahasan diatas adalah untuk menambahkan hanya satu banner saja, apabila sobat tertarik membuat banner yang bisa berubah-ubah, silahkan baca di sini. Untuk melihat contohnya silahkan klik di sini

Selamat mencoba sobat !

Selasa, 26 Juni 2007

Pasang Feed di Blog

Mengutip sebuah permintaan yang saya kutif dari shoutbox yang kira-kira seperti ini :

"aku mau tiap ada artikel baru di blog ni aku bisa tahu diblog aku"

Permintaan tersebut melukiskan keinginan untuk selalu mengetahui apakah ada artikel baru atau tidak di blog ini dengan tidak harus bercape ria bolak-balik membuka browser. Bila ada pertanyaan apakah bisa kita memasang sesuatu di blog milik sendiri agar mengetahui perkembangan atau update terbaru dari blog yang kita senangi? jawabannya bisa, bahkan banyak cara yang bisa di tempuh.

Agar tidak terlalu memakan space, saya akan menerangkan hanya dengan satu cara yaitu memakai RSS feed. Apa itu RSS? RSS singkatan dari Rich Site Summary atau jika dalam bahasa indonesia adalah ringkasan dari isi sebuah situs (blog juga termasuk di dalamnya). Tapi dalam postingan kali ini saya tidak akan menerangkan secara gamblang tentang RSS feed tadi, bagi yang ingin tahu lebih jauh tentang ini sobat bisa baca di wiki indonesia.

Dari mana kita mengetahui alamat RSS feed blog milik kita? biasanya untuk alamat di blogger ditambah dengan --> atom.xml , jadi alamat feed untuk blog ini adalah :

http://kolom-tutorial.blogspot.com/atom.xml

Sekarang bagaimana cara memasang kode feed di blog milik kita? bagi sobat yang menggunakan template baru alias new blogger template cara nya sangat mudah. Silahkan ikuti langkah-langkah berikut ini :

Sig in di blogger dengan id sobat

Klik menu layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol TAMBAHKAN KE BLOG di bawah tulisan Feed

Tulis alamat ini pada kotak di samping tulisan URL feed --> http://kolom-tutorial.blogspot.com/atom.xml

Klik tombol SIMPAN PERUBAHAN

Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki

Klik tombol SIMPAN

Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat

Selesai

Untuk melihat contoh, judul postingan terbaru pada blog ini bisa muncul di blog lain, silahkan klik di sini !

Ada satu lagi bagi sobat yang lebih mengutamakan penampilan, spring widget telah membuat suatu panel yang sangat unik sehingga akan bisa di jadikan sebagai aksesori blog. Contoh dari panelnya adalah seperti di bawah ini :

Bagaimana lebih menarik bukan di banding dengan tadi yang hanya menampilakan judul artikel saja. Bila tertarik memasang ini silahkan ikuti langkah-langkahnya.

Untuk template klasik :

Klik menu Template

Klik menu Edit HTML

Copy kode berikut, lalu paste pada sidebar

Klik tombol Pratinjau, lihat hasilnya. jika sudah OK klik tombol Simpan Perubahan Template

Selesai.

Untuk yang template baru :

Klik menu layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

Copy kode berikut, lalu paste pada kotak yang ada :

Klik tombol SIMPAN PERUBAHAN

Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki

Klik tombol SIMPAN

Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat

Selesai.

Untuk contoh bisa di lihat di sini !

Ada satu hal penting yang saya lupa, sobat harus mengatur menu setting agar bisa di menampilkan feed. Langkah-langkahnya yaitu :

Sig in

Klik menu layout (untuk template baru), atau klik menu Template (untuk template klasik)

Klik menu Pengaturan

Klik menu Feed situs

Klik menu dropdown di samping tulisan Ijinkan Feed blog

Pilih yang Penuh

Klik tombol Simpan Setting

Selesai.

Bagaimana sobat? mudah-mudahan dengan ini sobat tidak perlu bolak-balik karena setiap ada postingan terbaru akan langsung bisa di lihat di blog milik sobat sendiri.

Selamat mencoba !!!

Senin, 25 Juni 2007

Pasang Link di New Blogger Template

Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan.

Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu :

http://rubrik-elektronik.blogspot.com

http://www.rohman24.co.nr

http://jaya-example.blogspot.com

http://user-online.blogspot.com

http://amen24.googlepages.com/koded%27treemenu

Untuk membuat kode link yang arah vertikal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>

 

<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>

 

<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>

 

<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>

 

<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Hasilnya akan seperti ini :

Rubrik Elektronik

Free blog template

Rotating banner blog

User Online status

Kode menu d tree

kode yang saya tuliskan di atas merupakan kode atau tag untuk memindahkan link ataupun tulisan berpindah satu line break kebawah. Jika sobat tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya akan berdempetan kepinggir. satu kode/tag adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal , atau , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Untuk membuat kode link yang arah horizontal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>

 

<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>

 

<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>

 

<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>

 

<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Maka hasilnya akan seperti ini :

Rubrik Elektronik Free blog template Rotating banner blog User Online status Kode menu d tree

kode   yang saya tuliskan di atas merupakan kode untuk memindahkan link ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap berdempetan. satu kode   adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal    , atau     , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira jawabannya melalui contoh saja.

Ambil contoh blog yang ingin di link adalah seperti berikut ini :

http://sncepuspiritualsciencequantum.blogspot.com --> Abu Amin

http://adry-fx.blogspot.com --> Adryy-fx

http://belati.blogspot.com --> Belati

http://benhardleroy.blogspot.com --> Benhard Journey

http://melileagroup.blogspot.com --> Capunk

http://catatanpojok.blogspot.com --> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini :

:::A:::

 

<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

 

<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>

 

:::B:::

 

<a href="http://belati.blogspot.com" target="_blank">Belati</a>

 

<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>

 

:::C:::

 

<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>

 

<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

:::A:::

Abu Amin

Adryy-fx

:::B:::

Belati

Benhard Journey

:::C:::

Capunk

Catatan pojok

Untuk membuat link yang arah horizontal seperti ini :

:::A:::

  

<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

  

<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>

  

:::B:::

  

<a href="http://belati.blogspot.com" target="_blank">Belati</a>

  

<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>

  

:::C:::

  

<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>

  

<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

maka hasilnya akan seperti ini :

:::A::: Abu Amin Adryy-fx :::B::: Belati Benhard Journey :::C::: Capunk Catatan pojok

Pemakaian tag ... adalah agar karakter yang ada diantara tag tersebut menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa yang ada di keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat lebih menarik.

Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan.

contoh untuk arah vertikal :

<< A >>

 

• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

 

• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>

 

<>

 

• <a href="http://belati.blogspot.com" target="_blank">Belati</a>

 

• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>

 

<< C >>

 

• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>

 

• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

<< A >>

• Abu Amin

• Adryy-fx

<>

• Belati

• Benhard Journey

<< C >>

• Capunk

• Catatan pojok

Untuk arah horizontal :

<< A >>

 

• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

  

• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>

  

<>

 

• <a href="http://belati.blogspot.com" target="_blank">Belati</a>

  

• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>

  

<< C >>

 

• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>

  

• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Hasilnya akan seperti ini :

<< A >> • Abu Amin • Adryy-fx <> • Belati • Benhard Journey << C >> • Capunk • Catatan pojok

Bagaimana lebih menarik bukan?

Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan link, ini bisa di lakukan dengan hanya mengganti kode • diatas dengan kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam bentuk bulatan dan mempunyai alamat gambar sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif

Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar, yaitu :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif">

hasilnya akan seperti ini :

Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya misalkan jadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="12" hight="12" border="0">

hasilnya akan seperti ini :

Nah, tugas sobat hanya mengganti kode • diatas dengan kode ini :

misalkan :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="10" hight="10" border="0"> <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

Maka hasilnya akan seperti ini :

Abu Amin

Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan terdahulu, silahkan baca saja ya.

Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode   di antara gambar link tadi. misal saya punya alamat gambar butto seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif

http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif

Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog milik saya yang lain :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif" border="0"></a>

  

<a href="http://www.rohman24.co.nr" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif" border="0"></a>

Hasilnya akan seperti ini :

jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa sisipkam kode   agar ada jarak antara buttonnya.

Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode link-link yang telah saya contohkan diatas ke dalam blog.

Yoi...sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah berikut berlaku bagi yang memakai template baru alias new blogger template :

Sig in di blogger dengan id sobat

Klik menu Layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar link

Beri judul link yang sobat kehendaki. contoh : link temanku :

Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersedia

Klik tombol SIMPAN PERUBAHAN

Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki

Klik tombol SIMPAN

Selesai.

Akhirnya selesai juga postingan ini. Mudah-mudahan penjelasan diatas mudah untuk di mengerti.

Selamat mencoba !

Minggu, 24 Juni 2007

Cara membuat kategori (label)

Menanggapi beberapa pertanyaan dari para sobat yang di ajukan baik melalui
shoutbox, kotak komentar dan bahkan ada yang melalui yahoo messenger menyoal tentang
bagaimana cara membuat kategori dari artiekl-artikel yang telah di posting. Memang
betul, tentu dengan adanya pengkategorian atau pengelompokan artikel yang telah di
posting oleh pemilik blog dapat lebih mempermudah bagi para pembaca untuk memilih
artikel mana yang ingin dibaca.

Di blogger.com fasilitas ini sebenarnya sudah di sediakan, akan tetapi walaupun
fasilitas tersebut telah tersedia tentu saja jika kita tidak mengetahui cara menggunakannya akan menjadi tidak berguna. Untuk membuat kategori, di blogger.com di kenal dengan istilah Label. Dengan adanya fasilitas ini kita sebagai pemilik blog hanya tinggal mengisi kotak label yang di sedikan pada setiap posting artikel, sangat simpel dan sederhana.

Agar tidak membingungkan, silahkan sobat lihat pada akhir postingan artikel ini.
Disana ada tulisan seperti ini : Labels : Blog tutorial, membuat label.
Nah berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Blog tutorial dan kategori membuat label. Untuk melihat fungsi dari label ini silahkan sobat klik label yang bertuliskan Blog tutorial, maka secara otomatis seluruh postingan yang saya beri label Blog tutorial akan di tampilkan dan siap untuk di baca oleh pengunjung.

Bagaimana cara membuat label?

Untuk membuat sebuah kategori atau label, sobat hanya tinggal mengisi kotak kosong
di samping tulisan Label untuk postingan ini : (karena sekarang blogger sudah
ada yang berbahasa indonesia) yang berada di bawah kotak tempat membuat artikel.
Isi kotak tersebut dengan kategori yang kira-kiracocok untuk postingan yang kita buat. Contoh : liburan musim dingin. Satu postingan
tidak hanya terpatok hanya pada satu kategori saja, akan tetapi satu postingan bisa
mempunyai beberapa kategori. untuk membuatnya tinggal di pisahkan dengan tanda koma ( , )saja, misal untuk postingan artikel blog ini ada yang ber label Blog tutorial, blog tools, aksesori blog, karena postingan tersebut memang cocok dan masuk kedalam ketiga kategori tersebut.

Apakah kategori (label) bisa di tampilkan di sidebar?

Untuk sobat para pengguna template baru, Label (kategori) bisa di tampilkan
di sidebar, dan biasanya element label ini sudah tersedia ketika baru memasang template. Jika element label belum tersidia, sobat bisa membuatnya sendiri, silahkan ikuti langkah - langkah berikut ini :

Sig in di blogger dengan id sobat

Klik menu Layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol yang bertuliskan TAMBAHKAN KE BLOG yang berada di bawah tulisan Label

Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya

Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A --> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)

Klik tombol yang bertuliskan SIMPAN PERUBAHAN

Selesai.

Sangat mudah bukan?

Sedikit pengumumam, karena blogger sekarang sudah ada yang berbahasa indonesia, maka
mulai sekarang dalam memandu mengikuti dengan memakai yang berbahasa indonesia.

Selamat mencoba !

Senin, 18 Juni 2007

Random Banner Header

Menjawab pertanyaan mba Ati beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton seperti blog saya ini

, tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian

.

Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :

Langkah pertama

Langkah pertama yang harus dilakukan tentunya sobat wajib membuat beberapa banner, bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan sobat. Untuk membuatnya sobat bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya. Jika sobat ingin berkonsultasi mengenai program adobe photoshop, silahkan kunujungi http://jaloee.blogspot.com miliknya kang jaloee, beliau ini pakarnya kalau masalah photoshop.

langkah kedua

Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh www.photobucket.com untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik di sini.

Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk di masukan kedalam kode/script yang akan saya berikan.

Langkah ketiga

Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :

   <script type="text/javascript">

var banner= new Array()

banner[0]="bannerURL0"

banner[1]="bannerURL1"

banner[2]="bannerURL2"

banner[3]="bannerURL3"

banner[4]="bannerURL4"

banner[5]="bannerURL5"

banner[6]="bannerURL6"

banner[7]="bannerURL7"

banner[8]="bannerURL8"

banner[9]="bannerURL9"

var random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header {");

document.write(' background:url("' + banner[random] + '") no-repeat top left;');

document.write(" }");

document.write("</style>");

</script>

Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang sobat inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.

Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif

http://i162.photobucket.com/albums/t253/rohman24/banner5.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif

dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :

Contoh script dari banner-banner ini adalah :

   <script type="text/javascript">

var banner= new Array()

banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"

banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"

banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"

banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"

banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"

banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"

banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"

banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"

banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"

banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"

var random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header {");

document.write(' background:url("' + banner[random] + '") no-repeat top left;');

document.write(" }");

document.write("</style>");

</script>

Untuk caranya silahkan ikuti langkah-langkah berikut ini.

Klik menu layout

Klik menu Page Elements

Klik tulisan Add a Page Element

Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript

Copy paste kode berikut kedalamnya

   <script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Klik tombol SAVE CHANGES

Selesai.

Sekedar tambahan (padahal masih banyak

), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.

Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :

 @media all { 

#header { 

width:660px; 

margin:0 auto 10px; 

border:1px solid #ccc; 

}

Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :

 @media all { 

#header { 

width:660px; 

height:150px;

margin:0 auto 10px; 

border:1px solid #ccc; 

}

Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.

Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat di sini

Selamat mencoba !!!!

Jumat, 15 Juni 2007

Text Berjalan di Bar menu

Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis
seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

Klik menu Template

klik menu Edit HTML

Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula

Copy kode berikut ini lalu paste di atas kode </head>



<script language='javascript'> 

message = "Tulis text pertama yang ingin muncul disini ^" + 

"Tulis text kedua disini ^" + 

"Tulis text ketiga disini ^" + 

"Tulis text keempat disini ^" 


scrollSpeed = 130 

lineDelay = 0 


// Do not change the text below // 


txt = "" 


function scrollText(pos) { 

if (message.charAt(pos) != '^') { 

txt = txt + message.charAt(pos) 

status = txt 

pauze = scrollSpeed 

} 

else { 

pauze = lineDelay 

txt = "" 

if (pos == message.length-1) pos = -1 

} 

pos++ 

setTimeout("scrollText('"+pos+"')",pauze) 

} 

scrollText(0) 

</script>

Klik tombol Save Template Changes

Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template, lalu save data tersebut.
Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template

Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates

Tunggu beberapa saat sampai proses selesai

Simpan kode berikut di bawah kode </body> ,
kode ini letaknya berada paling bawah sebelum kode </html>



<script language='javascript'> 

message = "Tulis text pertama yang ingin muncul disini ^" + 

"Tulis text kedua disini ^" + 

"Tulis text ketiga disini ^" + 

"Tulis text keempat disini ^" 


scrollSpeed = 130 

lineDelay = 0 


// Do not change the text below // 


txt = "" 


function scrollText(pos) { 

if (message.charAt(pos) != '^') { 

txt = txt + message.charAt(pos) 

status = txt 

pauze = scrollSpeed 

} 

else { 

pauze = lineDelay 

txt = "" 

if (pos == message.length-1) pos = -1 

} 

pos++ 

setTimeout("scrollText('"+pos+"')",pauze) 

} 

scrollText(0) 

</script>

Klik tombol SAVE TEMPLATE

Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut
harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin
besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.

Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.

Selamat mencoba !!!

Kamis, 14 Juni 2007

Pasang Recent Comments

Kemarin lusa saya iseng-iseng buka email, dan ternyata ada kiriman email dari salah satu sobat saya yaitu sobat Aulia. Sobat Aulia ini menanyakan perihal cara membuat Recent comment atau komentar terbaru untuk new blogger template. Sebenarnya pertanyaan itu sudah saya jawab melalui email juga, akan tetapi saya pikir-pikir ada baiknya kalau topik ini saya bahas di blog ini, barangkali ada di antara sobat sekalian yang sama-sama tertarik ingin memasang Recent comment di sidebar blog sobat.

Untuk membuat recent comment pada new blogger template tidaklah sulit, karena saat ini sudah ada Recent comments widget creator dari hans
serta hackosphere yang bekerja secara otomatis, tugas sobat hanya login di blogger.com, pilih blog yang mau dipasang trus add widget, selesai. Sangat gampang tanpa harus bersusah payah menambahkan berbagai kode kedalam template sobat. Untuk membuatnya silahkan sobat klik tombol di bawah ini :

Rasanya kurang seru kalau artikelnya cuma begitu ya.

Ok, setelah sobat klik tombol diatas, maka nanti akan muncul gambar seperti ini :

Agar lebih jelas, silahkan ikuti langkah-langkah berikut ini :

Silahkan klik kotak di atas atau bisa juga klik di sini

Tulis judul Recent Comments dengan yang sobat inginkan. contoh : "komentar terbaru". atau biarkan saja juga boleh

Ganti nama beautifulbeta di samping tulisan http dengan nama blog sobat. contoh : kolom-tutorial

Tulis angka banyaknya komentar yang diinginkan di samping tulisan Number of comments

Beri tanda centang pada kotak di samping tulisan Show comment date jika komentarnya ingin ada tanggalnya

Beri tanda centang pada kotak di samping tulisan Show posttitle jika komentarnya ingin ada judul postingan

Tulis jumlah karakter hurup yang diinginkan di samping tulisan Summary size

Untuk styling silahkan pilih yang mana saja

Klik tombol bertuliskan Customize

Klik tombol bertuliskan Add Widget To My blog

Silahkan sign in dengan id sobat

Pilih blog sobat yang ingin ada Recent comments nya di samping tulisan select a blog

Klik tombol bertuliskan ADD WIDGET

Secara otomatis Recent comment widget sudah di tambahkan ke blog sobat

Pindahkan elements Recent comment yang baru dibuat pada tempat yang sobat suka

Selesai.

Bagaimana sobat, gampangkan? so pasti gampang donk

Tapi ada satu lagi kabar gembira nih buat para sobat. Bagi sobat yang blog nya memakai bahasa indonesia tentu
saja akan sedikit janggal, karena recent comment diatas memakai bahasa inggris. Apakah recent comments tersebut
bisa menjadi bahasa Indonesia? jawaban nya bisa. Jika sobat tertarik silahkan ikuti langkah-langkah berikut ini :

Klik menu Layout pada blog yang ingin di rubah

Klik menu Page Elements

Klik tulisan Edit pada element Recent Comments yang tadi dibuat

Akan muncul kode-kode seperti ini :



<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/showrecentcomments2.js">

</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://YourBlogName.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>



http://amen24.googlepages.com/showrecentcomments.js

Klik tombol SAVE CHANGES

Selesai.

Untuk melihat contoh Recent comments yang berbahasa indonesia,
silahkan klik disini.
Jangan lupa klik di sini juga ya

Selamat mencoba !!!!

Senin, 11 Juni 2007

Cara Membuat Favicon

Update : Artikel ini sudah tidak up to date dan telah saya perbaharui, silahkan baca di sini!

Sabtu, 09 Juni 2007

Menu Dropdown dengan JavaScript (2)

Melanjutkan Postingan kemarin lusa yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :

Maka kali ini saya akan memberi contoh banner seperti ini :

Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :

Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.

Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini.
Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif

Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template

Tambahkan kode berikut di bawah kode <head> dan sebelum kode
</head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title> :



<script> 


var last_expanded = ''; 


function showHide(id) 


{ 


var obj = document.getElementById(id); 


var status = obj.className; 


if (status == 'hide') { 


if (last_expanded != '') { 


var last_obj = document.getElementById(last_expanded); 


last_obj.className = 'hide';
 

} 


obj.className = 'show'; 


last_expanded = id; 

} else { 

obj.className = 'hide'; 

} 

} 




</script>

Masukan kode berikut diatas kode ]]></b:skin>









.raden{

background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');

text-align:center;

width:175px;

font-family: georgia, Helvetica, sans-serif;

padding-left:5px;

padding-right:5px;

padding-top:5px;

padding-bottom: 5px;

display:block;

text-decoration: none;

color: #F6E151;

}




.ogah{

background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');

text-align:center;

width:175px;

font-family: georgia, Helvetica, sans-serif;

padding-left:5px;

padding-right:5px;

padding-top:8px;

padding-bottom: 5px;

display:block;

text-decoration: none;

color: ##FAF705;

height: 18px;

}




.ogahniye{

background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');

text-align:center;

width:175px;

font-family: georgia, Helvetica, sans-serif;

padding-left:5px;

padding-right:5px;

padding-top:8px;

padding-bottom: 5px;

display:block;

text-decoration: none;

color: #0572FA;

height: 18px;

}



.hide{

display: none;

}



.show{

display: block;

}





a{cursor: hand} 








Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :








<a class="raden"><font size="5"><b>Navigasi</b></font></a>


<a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a>


<div id="ogahku1" class="hide">


<a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a>


<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a>


<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a>



<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a>


</div>



<a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a>


<div id="ogahku2" class="hide">


<a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a>


<a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a>


<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a>


<a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a>


</div>



<a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a>


<div id="ogahku3" class="hide">


<a href="http://rubrik-elektronik.blogspot.com/" class="ogahniye">Rubrik Elektronik</a>


<a href="http://rohman-freeblogtemplate.blogspot.com/" class="ogahniye">Free Blog Template</a>


<a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a>


<a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a>


</div>



<a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a>


<div id="ogahku4" class="hide">


<a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a>


<a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a>


<a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a>


<a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a>


</div>












Klik tombol Preview untuk melihat perubahan yang baru di buat



Jika sudah OK, klik tombol Save Changes Template

Selesai.





Keterangan kode-kode diatas :




kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini : 






<script> 


var last_expanded = ''; 


function showHide(id) 


{ 


var obj = document.getElementById(id); 


var status = obj.className; 


if (status == 'hide') { 


if (last_expanded != '') { 


var last_obj = document.getElementById(last_expanded); 


last_obj.className = 'hide';
 

} 


obj.className = 'show'; 


last_expanded = id; 

} else { 

obj.className = 'hide'; 

} 

} 




</script>






Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat : 








.raden


--> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . )  diepan kata yang di buat.



background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');


--> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.



text-align:center;


--> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.



width:90%;


--> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.



font-family: georgia, Helvetica, sans-serif;


--> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.



 
padding-left:5px;


--> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.




padding-right:5px;


--> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.




padding-top:5px;


--> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.




padding-bottom: 5px;


--> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.




display:block;


--> block berarti ditampilkan,jadi jangan dirubah.




text-decoration: none;


--> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.




color: #F6E151;


--> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.







.ogah


--> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.








.ogahniye


--> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.







.hide

display: none;


--> Pendifinisian untuk .hide disembunyikan (tidak tampil). 









.show

display: block;


--> Pendifinisian untuk .show ditampilkan.









a{cursor: hand} 


Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.




Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.







Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !





Diposting oleh



Unknown




di

18.35



Tidak ada komentar:
  









Kirimkan Ini lewat EmailBlogThis!Berbagi ke TwitterBerbagi ke FacebookBagikan ke Pinterest




Label:
tutorial blog




Postingan Lebih Baru


Postingan Lama

Beranda




Langganan:
Postingan (Atom)



























Tema Sederhana. Diberdayakan oleh Blogger.