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.
Berkomentarlah dengan sopan dan tidak menggunakan Link aktif. EmoticonEmoticon