Cara Membuat Widget Social Profiles 3D

Hari ini saya akan memberitahu bagaimana caranya menambahkan tombol social profiles 3D dengan efek hover/ roll out, di tombolnya sendiri ada Facebook, Twitter, RSS, Google. Untuk cara pembuatanya ikuti langkah langkah berikut ini.

1. Masuk ke Blogger Dashboard > Tata Letak > Tambahkan Widget.
2. Pilih HTML/Javascript.
3. Paste kode dibawah ini.

<style>

  .InfozGuide-flt-wdt {

    position:fixed;

    right:10px;

    top:36% ;

  }

  .InfozGuide-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;

  }

  .InfozGuide-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="InfozGuide-flt-wdt">

  <style>

    .InfozGuide1 {

      display: block;

      width: 64px;

      height: 64px;

      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW6BIat45IadFTf78ExsF8_yQ3u-sEEwnHj5Y6J-gUUYaFR7bGnZ4yRNaaxcqKgQ8MXd0otBkFkJjfywLFOkijmc2-oJibMQ43D6ysuJf8UlHq2arETXhfIQeidkdzUUlXoz8PsRuyKi9a/s1600/Facebook+Icon.png') bottom;

      text-indent: -99999px;

    }

    .InfozGuide1:hover {

      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL9uXPmR8po6PKaNdLrK0i6IKwvoLXDAhMW6PvjF5AZ0KsaSID3N2nR4Gi6x9ZF_1GxKWf4f0L0igmKbch_H818qN6peA5dB7Soyn_uET83x521tJWKmzUyt48iD0WmQZmq80l6bPpO9Ej/s1600/Facebook+Rollout+Image.png') bottom;

      height: 64px;

    }

  </style>

  <a class="InfozGuide1" href="Link Facebook mu disini">

  </a>

  <style>

    .InfozGuide2 {

      display: block;

      width: 64px;

      height: 64px;

      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxs9M1bVlWwAfhYTlbbDY_4MxbEzPJ4Y3tQs9oW3NXNXXeUuxWrZrYCwPJQcJwYy_YWWiBNb_qItAcgg21RKDCTByFB37o4uI8xly0SelN6GgfIE-e7fPTygrU-4chC3X82liAJQ_riLE/s1600/Twitter+Icon.png') bottom;

      text-indent: -99999px;

    }

    .InfozGuide2:hover {

      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidoXrN8p34cEPTFHLHEZfk-HYMp_YQiQwvn_6041rZrZQsfW14BDnryknuq9mvVr4wZmGOT_Kk8xPFRpdzUak7rwJmE8c7_8Oj_6co1Q5fj6tf0fIQMr4_WhMpljGIHPngsfh-bMG-RlY4/s1600/Twitter+Rollout+Image.png') bottom;

      height: 64px;

    }

  </style>

  <a class="InfozGuide2" href="Link Twitter mu disini">

  </a>

  <style>

    .InfozGuide3 {

      display: block;

      width: 64px;

      height: 64px;

      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYORxmIbDy-7PdOpChhdsUxVrCxaP-vDZQ6P-tVmjpnSEC_yWdfG0JGYBcSyluE67LuM34h7APs6XOgAen0eTxdJN2TmU3MbKcxVc8_6sbe6TnNn-nKivmt8_yDIbWmlhe4UE0APhuHdDc/s1600/Feedburner+Icon.png') bottom;

      text-indent: -99999px;

    }

    .InfozGuide3:hover {

      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0eu-4x1eX47Mq99TBVExyzZjwL3yxEaQSuW2JqoT_PCUpZzkPBHjjaN3ntE4yIWPg0ddn8_8l2xL5XJilmzAU5K_syhWgdxuX8lbZrs2FzpoBmqUldOFc4eDSTMssTMmXR9zVyMHEYxq7/s1600/Feedburner+Rollout+Image.png') bottom;

      height: 64px;

    }

  </style>

  <a class="InfozGuide3" href="Link RSS mu disini">

  </a>

  <style>

    .InfozGuide4 {

      display: block;

      width: 64px;

      height: 64px;

      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYPQAEDRwqlc67tamzJHigpUY3zc2SbqKnfwUZHIlCSQSgzUO_fDGlEMhI6yXMDZwHp1Z5j8h8U-QKkVnSEXvL2MMMzwkfsESFxtYuF0FQ9JF4yDgU5zAGo8H_7Q6Uh5ZQxktcDkf37kln/s1600/Google+Icon.png') bottom;

      text-indent: -99999px;

    }

    .InfozGuide4:hover {

      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjju_5YCj4k3ZSrlQo3VWnhv3pWhAe_vMj9nkw4QTp60Jx0pi9lP8zL1UYrQt-NYloYpmmazRUhohC4s3BDlSNyCBdLr1hat6x7HYlbss4205Z8bWGRhnAyarhGLryDbvvQU-YWaA0vCPG4/s1600/Google+Rollout+Image.png') bottom;

      height: 64px;

    }

  </style>

  <a class="InfozGuide4" href="Link Google Plus mu disini">

  </a>

</div>

<!-- End -->

Catatan: Untuk yang saya beri tanda merah, silahkan diganti dengan link yang sesuai.

Sumber