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!!

Read More

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!

Read More

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!!!

Read More

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://blogtrikdantips-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('blogtrikdantips').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

Read More

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://blogtrikdantips-blogspot.googlecode.com/files/tombol_digg.js' type='text/javascript'/>
</div>

7. Simpan template sobat lalu lihat hasilnya!

Read More

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 = &#39;<data:post.url/>&#39;;
</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!

Read More

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!

Read More

Cara Mendaftar Domain Gratis co.cc di Blogger

Apakah anda tahu bahwa anda bisa memiliki domain baru yang gratis yaitu co.cc. Dengan co.cc domain anda akan lebih mudah dikenal, selain itu anda bisa mengontrol DNS Records, A, MX, dan CNAME records. Apakah sobat udah bosan domain yang sekarang dan ingin beralih ke domain seperti ini....

Caranya mudah saja....ikuti aja langkahnya berikut ini. Langkah ini saya akan golongkan ke dalam 2 tahap yang berbeda, yaitu tahap 1 dan tahap 2.

Tahap I
1. Klik di sini co.cc
2. Klik "Create an account now"
3. Kemudian anda akan disuruh untuk mengisi formulir pendaftaran. Isi formulir pendaftaran dengan lengkap dan jangan lupa klik tanda centang pada I accept the Terms of Service yang artinya anda menyetujui ketentuan layanan mereka.
4. Sobat akan diiringi ke halaman selanjutnya dan klik pada "Getting A New Domain"
5. Cek domain yang tersedia dengan memasukan nama domain yang sobat inginkan, klik tombol Check Availability.
6. Jika domain tersedia maka akan tertulis Domain Available jika gak tersedia atau Unavailable cobalah cari domain baru.
7. Klik Continue to registration.
8. Klik Set Up untuk melanjutkan setting pada hostnya.
9. Klik pada Please Domain Setup Now
10. Kita akan menggunakan hosting domain gratisan, maka sobat klik Zone Record,
11. Isi nama domain sobat kemudian isi data sebagai berikut TTL = 1 D, type = CNAME, value = ghs.google.com,
12. Setelah itu klik Setup dan akan ada pemberitahuan bahwa domain baru akan aktif kurang lebih 2 hari.

Tahap II
1. Login ke blogger
2. Klik "Pengaturan" dan klik lagi pada Publikasikan
3. Klik pada tulisan Berpindah ke custom domain
4. Kemudian klik Beralihlah ke Pengaturan Lanjut
5. Isi domain anda yang tadi didaftar di co.cc
Nah sudah selesai langkah diatas. Mudah bukan? he3 met mencoba dan good luck....!!!!

Read More

Cara Membuat Dock Menu Horizontal di Blog

Dock Menu adalah pilihan menu navigasi animasi dengan efek zoom. Efek zoom ini membuat icon berubah dari ukuran normal ke ukuran yang lebih besar apabila cursor mouse berada diatas icon dock menu. Dock Menu dapat juga kita jumpai pada windows desktop, maupun OS lainnya. Kali ini blog trik dan tips akan memberikan trik cara membuat dock menu vertikal pada blog. Jika sobat tertarik untuk membuatnya ikuti aja trik berikut ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Klik Expand Widget Template
4. Tambahkan kode dibawah ini dibawah kode <head>

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/jquery.js' type='text/javascript'></script>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/interface.js' type='text/javascript'></script>

5. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

/* CSS Dock Menu
------------------------ */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{

height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}

6. Langkah selanjutnya yaitu kita menempatkan dock menu dibawah header blog, caranya cari kode dibawah ini:

<div id='header-wrapper'>
.........
.........
</b:section>
</div>

7. Setelah ketemu kode diatas letakkan kode berikut ini dibawah kode diatas

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i37.tinypic.com/a0kq39.jpg' width='30'/><span>Comment RSS</span></a>

</div>
</div>
<script type='text/javascript'>
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)
}
);
</script>

7. Terakhir simpan template sobat....

Selamat mencobanya dan Good Luck!!!!

Read More

Cara Mudah Memasang Widget Social Bookmarking

Saat browsing di internet pasti sobat pernah berjumpa dengan tombol-tombol social bookmarking widget. Tombol tersebut ada yang ditempatkan dibawah judul posting atau pada akhir posting. Social bookmarking dapat memudahkan membagikan artikel blog anda ke beberapa situs jejaring social dan lain-lain.

Tentunya manfaatnya yaitu pengunjung akan lebih mudah mengenal dan menjangkau blog anda, serta meningkatkan trafik blog. Jika anda belum tau tentang tombol social bookmarking, sobat bisa mengunjungi Social Bookmarking Widget Provider. Berikut ini saya akan memberikan trik bagaimana memasang tombol social bookmarking pada blog sobat dengan cara yang mudah:

1. Masuk ke website Addthis.com
2. Daftarkan diri anda lalu isi data-data yang diperlukan dan klik create account
3. Kemudian klik Get Your Button
4. Kopi kode Social Bookmarking Widget tersebut
5. Login ke blogger.
6. Masuk ke Rancangan -- Edit HTML
7. Klik expand widget template
8. Cari kode ini <b:includable id='post' var='post'> dan paste kode social bookmarking widget dibawahnya
9. Simpan template sobat

Sekarang sobat coba lihat hasilnya, Selamat mencoba!

Read More