First of All

Senin, 13 Juli 2009

Cara Membuat Efek Zoom Gambar pada Postingan

Trik yang satu ini pasti anda tidak akan lewatkan karena kali ini kita akan membuat efek zoom pada gambar. Gambar akan diperbesar apabila cursor anda berada diatasnya. Trik ini mungkin jarang digunakan, namun jika blog anda memiliki beragam animasi dan gambar tentunya trik ini perlu dicoba. Kali ini blog trik dan tips akan memberikan tutorial cara membuat efek zoom gambar pada postingan. Jika sobat mau tau gimana cara membuatnya ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode ini ]]></b:skin>
4. Paste kode dibawah ini diatas kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

5. Simpanlah template sobat

Tiap kali anda mengarahkan cursor mouse pada gambar di dalam posting blog maka animasi zoom akan muncul. Selamat mencoba trik diatas, good luck!!

ReadFull Article ..

Cara Menambah Icon Smiley di Shoutmix

Mungkin sobat sudah pernah melihat kotak shoutmix pada blog yang sobat kunjungi. Shoutmix juga sering disebut dengan istilah buku tamu. Pengunjung biasanya akan memberikan pesan singkat pada kotak shoutmix. Shoutmix memiliki fungsi untuk menjalin pertemanan, berbagi link dan informasi, serta memberikan pesan-pesan kunjungan lainnya. Jika sobat ingin menambah trafik dan mempercantik blog maka jangan lupa untuk menambahkan widget ini.

Pada kotak shoutmix kita tidak hanya bisa berbagi pesan singkat namun kita juga dapat menyertakan karakter smiley yang telah tersedia. Namun karena sedikitnya beberapa karakter smiley pada shoutmix, maka sobat dapat menambahkan lebih banyak karakter smiley lainnya secara manual. Untuk membuat trik yang satu ini ikuti langkah dibawahnya:

1. Masuk ke website ini ...http://www.getsmileyface.com/
2. Jika anda ingin menambahkan emoticon smiley klik link "smiley"
3. Klik gambar yang anda sukai
4. Pada bagian kotak diatas akan muncul url gambar smiley, langsung saja dikopi.
5. Selanjutya anda buka windows baru dan pergi ke situs Shoutmix
7. Setelah login pada Shoutmmix, pAda menu tab klik setting sehingga muncul kotak pilihan.
8. Klik link "Smiley"
9. Pada kotak dibawahnya disitu anda akan dimintai url gambar smiley. Jadi langsung saja paste url gambar smiley yang tadi anda kopi kemudian klik "add"
10. Jika anda ingin tambah icon smiley, kopi gambar yang lain dan paste pada kotak tersebut.
11. Terakhir jangan lupa untuk menyimpan setting anda..

Cobalah buka kotak smiley, maka anda sudah bisa melihat icon smiley yang baru....selamat mencoba!

ReadFull Article ..

Minggu, 12 Juli 2009

Menampilkan Icon Bergambar Sebelum Judul Posting

Blogging adalah salah satu aktivitas menulis atau berbagi informasi untuk tujuan komersil, personal dan lain sebagainya. Bentuk informasi yang disajikan juga beragam tergantung dari tujuan penulis blog tersebut. Untuk itu sangat penting bagi sobat dalam menjaga penampilan blog agar terlihat lebih menarik. Kebetulan pada kesempatan ini saya akan berbagi trik untuk membuat tampilan blog anda lebih menarik. Kali ini kita akan menambahkan icon sebelum judul posting blog. Jika sobat ingin tau caranya ikuti langkah dibawah ini:

1. Carilah gambar yang anda ingin tampilkan.
2. Atur ukuran gambar sehingga ukurannya 50 x 50 pixel, kemudian upload file gambar ke file hosting kalian dan kopi url link gambar.
3. Masukkan url link gambar sobat dikode berwarna merah dibawah ini:

<img src="URL-LINK-GAMBAR" style="border-width: 0px;" />

3. Login ke blogger
4. Masuk ke Rancangan -- Edit HTML, kemudian centang Expand Widget Template.
5. Carilah kode berikut ini <b:if cond='data:post.url'>
6. Letakkan kode HTML yang anda kopi tadi diatas kode <b:if cond='data:post.url'> sehingga terlihat seperti ini

<img src="http://www.blogger.com/LINK%20TO%20YOUR%20IMAGE%20HERE" style="border-width: 0px;" />

<b:if cond='data:post.url'>

7. Simpanlah template anda.

Kini sobat dapat melihat icon bergambar sebelum judul posting. Selamat mencoba dan good luck!!!

ReadFull Article ..

Menampilkan Twitter Status Update dengan Javascript

Jika sobat memiliki blog dan juga mempunyai akun Twitter, maka mungkin sobat ingin menambahkan status twitter pada sidebar blog anda. Dengan menampilkan status twitter update, maka akan memancing pengunjung untuk mengikuti status blog anda di twitter. Status twitter tidak hanya dapat mempercantik tampilan blog namun mengajak follower ikut serta membagikan status twitter anda ke teman-teman mereka. Status twitter update dapat kita buat dengan menggunakan javascript. Caranya sangat mudah, ikuti saja langkah berikut ini:

1. Login ke blogger.
2. Pilih Rancangan -- Elemen Laman
3. Tambahkan gadjet anda
4. Klik HTML JavaScript
5. Tambahkan kode dibawah ini:

<div style="background:#fff url(http://4.bp.blogspot.com/-lyshwq5tQvc/T7mN15chH2I/AAAAAAAADSA/3y8pgPVkUQo/s400/Widget%2BTwitter%2BBlog.png) no-repeat;padding-top:45px;padding-left:8px">
<script src="http://defecafe-blogspot.googlecode.com/files/widget_twitter.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 285,
height: 123,
theme: {
shell: {
background: 'transparent',
color: '#000000'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#135a9e'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('defecafe').start();
</script>
</div>

Keterangan:
- Isi kode berwarna biru diatas dengan ID twitter anda
- Kode berwarna merah andalah kotak twitter.
- Kode berwarna hijau adalah pengaturan lebar dan tinggi status pada kotak twitter

6 Langkah terakhir adalah simpan gadjet anda

ReadFull Article ..

Cara Membuat Tombol Digg pada Blog

Situs Social Bookmarking mempunyai bagian yang penting dalam meningkatkan trafik dan Page Rank blog sobat. Sobat sebaiknya menggunakan icon social bookmarking pada setiap posting blog sehingga pengunjung dapat berbagi posting yang sobat tulis ke situs social networking yang mereka gunakan.

Tombol Digg adalah adalah tombol social bookmarking yang cukup populer saat ini dan dapat meningkatkan banyak trafik untuk blog anda. Jika sobat ingin membuat posting blog lebih dikenal maka sebaiknya tambahkan tombol ini. Menambahkan tombol Digg pada blogger cukup mudah, berikut adalah caranya:

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Back-up template sobat
4. Centang Expand widget template
5. Cari kode ini <data:post.body/>
6. Tambahkan kode dibawah ini sebelum kode diatas:

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://defecafe-blogspot.googlecode.com/files/tombol_digg.js' type='text/javascript'/>
</div>

7. Simpan template sobat lalu lihat hasilnya!

ReadFull Article ..

Menambahkan Tombol Twitter pada Posting

Ada berbagai cara untuk kita bisa mempromosikan blog dan meningkatkan trafik. Tetapi sebenarnya untuk meningkatkan trafik blog tidak hanya sekedar mempromosinya, namun sobat perlu meningkatkan kualitas posting atau isi dari artikel yang sobat tulis. Sobat bisa mempromosikan blog dengan menambahkan icon sosial bookmarking sehingga artikel sobat dapat disebarkan dengan mudah dan efisien. Disini saya akan memberikan tips bagaimana membuat tombol Twitter pada posting blog sobat. Jika seseorang menyukai posting anda, mereka akan mengklik pada tombol Twitter untuk memposting topik anda pada akun mereka sehingga teman mereka akan mendapatkan informasi tentang topik anda. Ada dua jenis tombol twitter yang tersedia yang sobat dapat menempatkan pada posting blog. Berikut akan ajarkan cara menempatkan membuat dan menempatkan tombol ini pada posting sobat

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand Widget Template
4. Cari kode ini: <data:post.body/>
5. Tambahkan kode dibawah ini sebelum atau sesudah kode diatas:

Untuk tombol Twitter Full seperti diatas tambahkan kode ini

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>Retweet this button on every post blogger
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script>

Sedangkan tombol Twitter Compact tambahkan kode ini:

<script type="text/javascript">
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

6a. Jika sobat ingin menempatkan tombolnya disisi kanan gunakan kode ini:

<div style='float:right; margin-left:10px;'>
Retweet Button Code Here
</div>

6b. Jike anda ingin menempatkan tombol di sisi kanan pakai kode ini:

<div style='float:right; margin-left:10px;'>
Retweet Button Code Here
</div>

7. Hapus kode berwarna merah lalu masukkan kode Twitter
8. Simpan template sobat lalu lihat hasilnya. Selamat mencoba! good luck!

ReadFull Article ..

Cara Pasang Snapshots pada Blog

Apa yang sobat tau tentang snapshot? Snapshot adalah semacam screen shot ketika cursor anda berada diatas sebuah link. Blogger memang tidak memiliki fasilitas ini, namun kita bisa membuatnya sendiri. Ingin tau gimana cara membuatnya? Ikuti saja langkah berikut ini:

1. Daftarkan diri anda pada Snapshot atau klik disini http://account.snap.com/signup.php
2. Klik tombol Continue
3. Kita bisa melakukan pengaturan untuk snap shots, mulai dari tema (theme), logo, dan bahasa (language) yang akan digunakan. Jika anda tidak ingin mengaturnya klik Skip.
4. Isi formulit pendaftaran dengan lengkap dan beri tanda centang pada I agree to Terms & Condition Above.
5. Klik Continue

6. Setelah itu akan tampil halaman untuk menginstal Snapshot pada blogger kemudian klik tombol Instal Now
7. Anda akan diiringi ke situs Blogger lalu login ke blog anda
8. Tambahkan widget Snapshot pada blog anda

Sekarang coba lihat blog anda. Jika muncul screen shot, maka pengaturannya berhasil. Met mencoba dan good luck!

ReadFull Article ..