Cara Mudah Buat Butang Sosial 3D Hover Efeck

butang sosial 3D ia terletak pada bahagian sebelah kanan blog anda dan apabila anda menggerakkan tetikus anda ke atas butang,butang akan menaik secara automatik.Butang sosial ini menarik minat pelawat anda blog anda untuk mengklik kerana keunikanya.


1-Pergi Ke Blogger Dashboard> Layout> Add Widget.
2-Pilih HTML / Javascript widget.
3-Sekarang Masukan kod di bawah di dalamnya,

<!-- ABT 3D Social Widget Code -->
<style> .TNT-flt-wdt { position:fixed; right:10px; top:36% ; } .TNT-flt-wdt img { float:right; clear:right; margin:1px; -webkit-transition: all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .TNT-flt-wdt img:hover { -moz-transform: scale(1.2) rotate(6deg); -webkit-transform: scale(1.2) rotate(6deg);  -o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg);  } </style> <div class="TNT-flt-wdt">
<style> .TNT1 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhECgtlgJEEYt-xBPVX-nOqPtTGXUfk8PnYPQhwPFS4bLzE08FZmXKiVEXsc1v-82l8VIjpySGVC0LYEz3kNQd49TtUgtX2PB8uPSo20arFRxjuci4kFQu5CRPR96PDn7Zbs_bbreCN6pMD/s1600/Facebook+Icon.png') bottom;  text-indent: -99999px; } .TNT1:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONZV-ZDZZUPvJmnu0JnXu6z8Rc5BIHdrku0Udy3EQgDmbkT5vsjpN1Cmflb6mHDFFBEk7jIJqr1pkRB6-hGjy64zdISpdLf0xO5OW59r5c8MCZKrxwgcfoitAAG1y0ZswmUcKODh77t5J/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT1" href="YOUR FACEBOOK LINK HERE"></a>

<style> .TNT2 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGUcc7h5ksJFIOr3QGhLBbEy78cy_JEoIeAwX4gtNJFxF7_QCQKTCpp_E92PVizMx6jDsur3stwoilmnwOsYcIaeDY77k5AyDl3YwEXRxP-Pfw5mkLRk58GtNm-GJqSzv6580KwLaS85bb/s1600/Twitter+Icon.png') bottom;  text-indent: -99999px; } .TNT2:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4VxtaJgebFRwgkNej_GFAFgpblj81eQKRGPuAaYlsyv-kj_9qgDV1glgJsAnj6seNvE1-VMHXwVtFacRPeEHPLgW9NzLLgfSUCJ2BxsPT_lAE7_clVRsGUzrbUuI074Ba0pAawCu0FHGB/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT2" href="YOUR TWITTER LINK HERE"></a>

<style> .TNT3 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgszyV5S58Mpgh4uDZJRnaUExinZPgWcITwbi5arHqipxa5ZhxgUJXIDSsj84pY8qEsVqjKgzrPAlBnDkt9JpjQyNsSta5M0h3mOshAFd2ZDr9Wbiyi_TPpuYFwTKZ0n7Ms0nUfMad5xYqV/s1600/Feedburner+Icon.png') bottom;  text-indent: -99999px; } .TNT3:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYXDKKkQ_TrR6KLWE4OjNO2CfilDl-VXts9SCvW6a73BjEIShEBtUrVk0NRaYiS7WdrW6B7TyQ3lCJ-tvn7Y81xqbopWVmNZDieJngSH4hW43xmzpw7g5DPIS6PD9uVHP1NsLmaz5DByD/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT3" href="YOUR RSS FEED LINK HERE"></a>

<style> .TNT4 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1E0xfDGHXwhmbIajmQUBqXQO7PHSgU-nQq6FPg2-2ez4TReBzw0Y5EJHrPIp6U2JMdCETQufiWH8gOAskazhJO_9N6bjNXHzheqPIr5uT-rOBs5pEVan9S5dz2GZwh2q5oKcCiALSENdc/s1600/Google+Icon.png') bottom;  text-indent: -99999px; } .TNT4:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTUSUcoX98bZ7a-CWCCgJ30NJ881TwLHAjp6G63y-pXl__DVKKjejrXSjnfoIefZ-cTipjXuYTkX9PrrwmtZuLp9hAMwo8VC-MY5aHCv4g6CMUBc4i21LyNqPQgVWyoJRwnIDsQCxorCCm/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT4" href="YOUR GOOGLE PLUS LINK HERE"></a>
</div>
<!-- ABT 3D Social Widget Code -->

Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.