Cara Membuat Widget Socia Profile dengan efek Balon

Caranya :

1. Login Blogspot > Bloger Dashboard > Template > Edit HTML 
2. Carilah kode ]]></b:skin>
3. Pastekan kode di bawah ini ke atas kode ]]></b:skin>
   
   .nav-tt{
    padding: 50;
    width: 70%;
    height: 70px;
    margin: 80px auto 30px auto;
   }
   .nav-tt li{
    float: left;
    list-style: none;
   }
   .nav-tt li a{
       display: block;
       width: 40px;
       height: 40px;
       margin: 0 2px;
       outline: none;
    position: relative;
    z-index: 2;
       text-indent: -9000px;
       text-decoration: none;
   }
   .nav-tt li .gplus{
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKYjl513TE5XNzlNzlnpNfEbH1aV-SjOpLo8_9KC0xFR8XOlTT9y0TJVP75muJP9Uldsr_im9b05PdHy3toDosbE9SWUi439-pG7V96iRvn77Q3E1edLyszTgefhKUFRXxquOgUI6csGY/s128/google_plus.png) no-repeat;
   }
   .nav-tt li .twitter{
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHiunjifNwFy0YNCPHlPxvF2tvpvp0bayLDdzbK_p4QP2ByKV64Gr7yoGTTWJo_cQDh4rRmJzKI90ftEzcbdxTG4eJshXHSZBqNfXFJp6dSiRXBoApPRgFas2qJrvBETpv3bYsRYSvWMVK/s128/twitter_1.png) no-repeat;
   }
   .nav-tt li .pinterest{
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEindRDShcwgsm0a4gjZHyr_LWv2gv5R_oyJCeQdNl3r6b4PbgpQigDqhludG6zZ_fUXHYVq3mNlV2KgJD8P5LVeso9chY8DUdtScB6dToIJqm-L1SV1H7NNd8-PKvU7dyuZlmwWWB5pHQ0w/s128/pinterest.png) no-repeat;
   }
   .nav-tt li .facebook{
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZE9fJPueeiJ8Pg8b0e6162LvWCBwWV1FeqfE8IGlU0KI-OJonEXIYHUdL8quEiv8rg6ONCELjYaKurs4gCVa51tKq9fZ70vehRhN6BnYoYqxI7ZAeRCzpPzvZ0YSVDxDljIdAw7E6CkBt/s128/fb_1.png) no-repeat;
   }
   .nav-tt li .linkedin{
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcugiTH7uaeIOgGnxSL5gjsHy6UNTRak3pnULKP4Do-5mEly8ujqF168MfFNLXwRbLnRNOL6GerLquZYjupv6dWHWON6wnEjCYlRFj3dDHn5R-5doqikOrxINNCrXuwlYI1WNcApzpzhc_/s128/linkedin.png)no-repeat;
   }
   .nav-tt li .tumblr{
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IFiSDqgQYFYwA2n_5cNYxEvTQru44PtNjCGP0zHG2NJPbiYDI6Gh3xBZ18bnkEFIcbpWStWcwk1dOgWs_-WqV7DKHq6zJg2wDUCwvBMvKbYspkZWvN68bxu4dnqsvFSbmde5eWa_Ir4U/s128/tumblr.png) no-repeat;
   }
   .nav-tt li .youtube{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJR3kk_kwX3HJipxpLJL_3V0FSlgKQuS5bJtLrOOOSdarBoOENdjRHWB8jTMGTuQlQPFevv453FybrP2_BLX6qgXQkEHCr3CE932mI0BoV2mpMrs91J3vv07qKp3xIPlLm6o6PDFSBQDxs/s128/you_tube.png) no-repeat;
   }
   .nav-tt li .mail{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-QSiS7A1kEf8_MWdRZoMchwno78_JLNjL8A4O4jqh00TtYGA0twAlyEpWDq0jFr5s6mGCSL_qY0ElD1ogJkVZCWTtiWTcUFVytnKBNdGfwNp2dmoS9JUqbu3tETbI8BjYkrgOiLiqARyh/s32/email.png) no-repeat;
   }
   .nav-tt li .rss{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQjUln3vk_muiI8vnARc1-we5jJT3WIAx03dKCDhOdOhL8K92P7k_wQ89PHwzTcKP4LZaGTGGvpluPWOOpo73h6xLt8mbhKuA95zOew-i63mPTVeIRgtBYPeUINrOw1J0E2CKAOH3MDtS/s128/rss.png) no-repeat;
   }
   .nav-tt li a span{
    width: 80px;
    height: 80px;
    line-height: 80px;
    padding: 10px;
    left: 50%;
    margin-left: -60px;
    font-family: 'Alegreya SC', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #719DAB;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 5px solid #ffffff;
    background: rgba(255,255,255,0.5);
    text-indent: 0px;
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    bottom: -40px;
    opacity: 0;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
   }
   .nav-tt li a span:before,
   .nav-tt li a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 11px solid rgba(0,0,0,0.1);
   }
   .nav-tt li a span:after{
    bottom: -13px;
    margin-left: -10px;
    border-top: 10px solid #ffffff;
   }
   .nav-tt li a:hover span{
    opacity: 0.9;
    bottom: 50px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
   }
   
4. Klik save
5. Klik Tata Letak > Add Gadget > Edit HTML / JavaScrip
6. Pastekan kode dibawah ini kedalamnya
   
   <div class="lordbuttons">
   <ul class="nav-tt">
   <li><a class="twitter" href="#" target="_blank"><span>Twitter</span></a></li>
   <li><a class="gplus" href="#" target="_blank"><span>Google Plus</span></a></li>
   <li><a class="facebook" href="#" target="_blank"><span>Facebook</span></a></li>
   <li><a class="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li>
   <li><a class="tumblr" href="#" target="_blank"><span>Tumblr</span></a></li>
   <li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li>
   <li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li>
   <li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li>
   <li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li>
   </ul></div>
   
7. klik Save.
   
   
   Semoga Tips saya hari ini bermanfaat bagi anda semua.
    
   • Catatan : ganti kode # dengan url anda. :-)