Widget Blog : Tombol Jejaring Sosial Facebook dan Twitter dengan CSS 3
- Seperti yang kita ketahui bahwa facebook dan twitter merupakan
jejaring sosial yang paling banyak di gemari terutama oleh kalangan
remaja, dengan situs tersebut memudahkan kita untuk berinteraksi secara
gratis dan menarik.
Untuk kali ini saya akan berbagi script Widget Blog Facebook dan Twitter dengan CSS 3
yang jika di sorot dengan pointer maka gambar tersebut akan membesar,
penasaran seperti apa penampakannya berikut adalah screenshot Widget Blog Facebook dan Twitter dengan CSS 3:
Screenshot :
INI Script WidgetNya :
<!--Social Network Buttons Widget By SalamSuksesBoys.blogspot.com-->
<style>
/* MoreBlogTools.com */
.MBT-bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.MBT-bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.MBT-bubblewrap li img{
width: 40px; /* width of each image.*/
height: 40px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.MBT-bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="MBT-bubblewrap">
<li><a target="_blank" href="http://facebook.com/NilaiLahhAkku">
<img src="http://3.bp.blogspot.com/-luB94ORNgho/UHwO4URAQoI/AAAAAAAAAME/MS5Jf7ombVo/s1600/facebook%252BMoreBlogTools.png" title="I Am On Facebook (Add)" /></a></li>
<li><a target="_blank" href="https://twitter.com/BoysDhika">
<img src="http://1.bp.blogspot.com/-lC9tpit-g2k/UHwO7AHPOfI/AAAAAAAAAMc/VLrKnEd_VRw/s1600/twitter%252BMoreBlogTools.png" title="I Am On Twitter (Follow)" /></a></li>
<li><a target="_blank" href="http://feeds.feedburner.com/SalamSuksesBoys">
<img src="http://2.bp.blogspot.com/-6W5sXShR7BA/UHwO6ZyGT6I/AAAAAAAAAMU/OQIhH7bcTX0/s1600/rss%252BMoreBlogTools.png" title="I Am On RSS Feed (Click)" /></a></li>
</ul>
<!--Social Network Buttons Widget By SalamSuksesBoys.blogspot.com-->
Catatan : Anda Bisa ubah URL facebook, URL twitter dan URL feedburner Menggantinya dengan URL milik anda sendiri tentunya. :)
Cara Pemasangan :
- Masuklah ke Akun Blogger.com milik anda
- Pergi ke TATA LETAK Ingat bukan ==>> HTML
- Tambah Widget dan pilih HTML/Javascript
- Copy/Paste Kode yang diatas.
- Terakhir Lalu Simpan.
Comments
Post a Comment
Syarat-syarat Berkomentar:
☻) Berkomentarlah Dengan Bahasa Yang Sopan;
☻) Berkomentarlah Dengan Bijak;
☻) Berkomentarlah Dengan Komentar Yang Berhubungan Dengan Postingan Ini;
☻) Dilarang Berkomentar Yang Berhunbungan Dengan PORNO/SARA
☻) Dilarang Berkomentar SPAM
NB: Jika sahabat melanggar syarat-syarat diatas maka Komentar sahabat akan dihapus.
Terima Kasih.