17 Styles Animated (On Hover) Floating Twitter Follow Me Badge

Untuk post ini sy ingin berkongsi satu badge animasi untuk pengguna twitter.Untuk pengetahuan, sy bukanlah pengguna twitter. Sy baru saja daftar twitter minggu lepas dan belum mula menggunakannya. Sy google pasal twitter terjumpalah bende alah ni. Tutorial ini diperkenalkan oleh http://loneeagle110.blogspot.com/. Sy tgk macam best je. Anda dah tekan blog tersebut? blog tersebut dalam bahasa india. Agak2 korang faham x? haha.. xpe2.. yang penting kodingnya masih dalam bahasa inggeris.

Untuk membuatnya

1 Pergi ke Dashboard > Design > Edit Html.

2 Back up Template terlebih dahulu. tekan Download Full Template.

3 Cari </head> dan pastekan koding dibawah sebelum </head>



<style type='text/css'>
.feedbacktw {
width: 31px;
height: 116px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:20%;
right:2px;
}

.feedbacktw:hover {
width: 31px;
height: 116px;
display: block;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/xpu99c.jpg);
position:fixed;
top:20%;
right:10px;
}
</style>


4 Save kan Template

5 Pergi kepada Design > Page Elements > Add a gadget

6 Pilih Html/Javascript dan pastekan koding dibawah


<a style="display:scroll;" href="http://twitter.com/thalhah_amir" class="feedbacktw"> </a>


7 Tukarkan http://twitter.com/thalhah_amir dengan twitter anda. 2 twitter sy 2. addla kalau mahu. hehe..

8 Save

Menukar Gambar Badge

Direct link image	On Hover Direct link
01. http://i42.tinypic.com/353cvh4.jpg	http://i42.tinypic.com/212en7t.jpg
02. http://i40.tinypic.com/j65sts.jpg	http://i44.tinypic.com/2cncvq1.jpg
03. http://i40.tinypic.com/x283dc.jpg	http://i43.tinypic.com/m9sj5y.jpg
04. http://i42.tinypic.com/30kf7mp.jpg	http://i42.tinypic.com/330ab9s.jpg
05. http://i43.tinypic.com/20hwowl.jpg	http://i41.tinypic.com/i1mauo.jpg
06. http://i43.tinypic.com/x5nygw.jpg	http://i43.tinypic.com/2nk2qn9.jpg
07. http://i44.tinypic.com/1zqsowk.jpg	http://i39.tinypic.com/33nukja.jpg
08. http://i43.tinypic.com/24c8jm9.jpg	http://i39.tinypic.com/14112c7.jpg
09. http://i44.tinypic.com/r8ug3o.jpg	http://i43.tinypic.com/18nf54.jpg
10. http://i44.tinypic.com/2rz7u9s.jpg	http://i44.tinypic.com/2gxmamx.jpg
11. http://i44.tinypic.com/6jozr4.jpg	http://i43.tinypic.com/25iaycy.jpg
12. http://i39.tinypic.com/2a68u1k.jpg	http://i42.tinypic.com/2rnk9py.jpg
13. http://i43.tinypic.com/34zjfo5.jpg	http://i43.tinypic.com/a4ak2v.jpg
14. http://i43.tinypic.com/8wjfbs.jpg	http://i41.tinypic.com/5wbecx.jpg
15. http://i42.tinypic.com/23uucco.jpg	http://i43.tinypic.com/fee7ht.jpg
16. http://i41.tinypic.com/dcfzag.jpg	http://i44.tinypic.com/200g0w4.jpg
17. http://i41.tinypic.com/2quhswn.jpg	http://i42.tinypic.com/f5a83s.jpg

Blog
Gadget

Jika anda sukakan article ini,linkkan kembali...

<a href="https://syoknyerblogging.blogspot.com/2011/01/17-styles-animated-on-hover-floating.html">17 Styles Animated (On Hover) Floating Twitter Follow Me Badge</a>