Thursday, December 20, 2012

Cara Tambah Widget Sosial Rounded Slide Hover


Cara Tambah Widget Sosial Rounded Dengan Slide Hover

Cara Tambah Widget Sosial Rounded Slide HoverApakah Anda bosan dengan widget Jejaring Sosial yang anda pasang di blog anda?
Mau tampil beda dan terlihat profesional layaknya situs besar?
Seperti yang kita semua sadari fakta bahwa situs Jejaring Sosial memainkan peran penting dalam mengembangkan blog anda terutama untuk menjaring visitor sebanyak-banyaknya, jadi sangatlah penting untuk memiliki widget Follower Sosial yang elegant . Ada beberapa gadget sosial yang memiliki fitur yang cukup mengesankan, tapi terlalu berat untuk dimasukkan dalam sebuah blog karena dapat mempengaruhi kecepatan dari sebuah blog. Hari ini di artikel ini, kami akan berbagi Widget SharingSosial dengan Efek yang begitu mengesankan.
Silahkan Lihat demonya dulu

Bagaimana sobat, sangat menarik bukan?

Mengapa menggunakan Widget ini untuk Blog Anda?
Selain Ringan widget ini juga dapat membuat blog jadi elegan dgn gaya yang menarik dan membuat pengunjung penasaran untuk mengclicknya dan ini menjadi salah satu keuntungan, karena sedikit tidak mereka akan mengikuti di Jejaring social Anda terutama yakni Google+ | Facebook | Twitter.

Cara Install | Pasang di Blogger?
Ikuti langkah-langkah berikut dengan benar.

Langkah # 1: Menambahkan CSS :

Pergi ke Blogger.com lalu Click Template Pilih Edit HTML + Lanjutkan

Sekarang Silahkan Cari ]]></b:skin>
Letakkan Code berikut diatas ]]></b:skin>
Berikut Kodenya :
.mbl_container {
        width: 780px;
        height: 285px;
        margin: 0 auto;
        position: relative;
    }
    img {
        display: block;
        float: left;
    }
    .mblsocialshare.bubble {
        position: absolute !important;
        top: 50%;
        left: 50%;
        margin-top: -46px;
        margin-left: -32px;
    }
    .mblsocialshare.bubble.left {
        left: 200px;
        margin-left: 0;
    }
    .mblsocialshare.bubble.right {
        left: auto;
        right: 200px;
        margin-left: 0;
    }

    .mblsocialshare.bubble{display:block;width:72px;height:72px;position:relative;z-index:1;}.mblsocialshare.bubble .msb_main{display:block;width:64px;height:64px;position:absolute;top:0;left:0;z-index:2;cursor:pointer;text-indent:-9999px;border:4px solid #FFF;box-shadow:0 0 5px #DDD;border-radius:36px;}.mblsocialshare.bubble .msb_main img{width:64px;height:64px;cursor:pointer;border-radius:32px;border:none;}.mblsocialshare.bubble .msb_main:hover{box-shadow:0 0 5px #BBB;}.mblsocialshare.bubble .msb_network_button{width:46px;height:46px;position:absolute;top:9px;left:9px;z-index:1;cursor:pointer;text-indent:-9999px;display:none;background:no-repeat;}.mblsocialshare.bubble .msb_network_button.facebook{background:url(http://2.bp.blogspot.com/-PYOmLy_kMpY/UMHmaQPNAsI/AAAAAAAAJF8/AbVEi4JTU9E/s1600/bubble_facebook_share_button.png);}.mblsocialshare.bubble .msb_network_button.linkedin{background:url(http://2.bp.blogspot.com/-uhQksrg6Uo8/UMHmc2EbaZI/AAAAAAAAJGU/8wkwkAJs3Lw/s1600/bubble_linkedin_share_button.png);}.mblsocialshare.bubble .msb_network_button.google{background:url(http://3.bp.blogspot.com/-r2sOIv37AZo/UMHmbBFdDBI/AAAAAAAAJGE/ZgMrTsu0zX8/s1600/bubble_googleplus_share_button.png);}.mblsocialshare.bubble .msb_network_button.twitter{background:url(http://1.bp.blogspot.com/-Uc4JxM4m1ns/UMHmeSKJ8_I/AAAAAAAAJGo/ABarAgXUFtE/s1600/bubble_twitter_share_button.png);}.mblsocialshare.bubble .msb_network_button.pinterest{background:url(http://2.bp.blogspot.com/-5peN56JgMkk/UMHmdhTOClI/AAAAAAAAJGc/JBRG7vandN4/s1600/bubble_pinterest_share_button.png);}.mblsocialshare.bubble .msb_network_button.dribbble{background:url(http://1.bp.blogspot.com/-vWRUhJ0CTxI/UMHmYm7_QMI/AAAAAAAAJFw/18txFcdjch8/s1600/bubble_dribbble_share_button.png);}.mblsocialshare.bubble .msb_network_button.email{background:url(http://4.bp.blogspot.com/-eVGk-gusiVk/UMHmZWLw2WI/AAAAAAAAJF0/K1wgVtYEEkE/s1600/bubble_email_share_button.png);}.mblsocialshare.bubble .msb_network_button.instagram{background:url(http://4.bp.blogspot.com/-ZaC-h51VQsk/UMHmbyjGbXI/AAAAAAAAJGM/-9XezvChTe0/s1600/bubble_instagram_share_button.png);}.mblsocialshare.bubble .msb_network_button.youtube{background:url(http://3.bp.blogspot.com/-7bYPwV2QHeg/UMHmf6racyI/AAAAAAAAJGw/XjvyHmWB6_8/s1600/bubble_youtube_share_button.png);}.mblsocialshare.bubble .msb_network_button.vimeo{background:url(http://4.bp.blogspot.com/-9t14ct5HfsU/UMHmgQf0FYI/AAAAAAAAJG4/HGj794WCOls/s1600/man.png);}.mblsocialshare.bubble .msb_network_button:hover{background-position:0 -46px;}

Lalu silahkan Click Simpan

Langkah # 2: Menambahkan Widget Sosial Rounded di Blogger:

Sekarang itu sepenuhnya tergantung pada anda di mana ingin menempatkan Widget ini. Tempat yang ideal untuk menu ini yakni tepat di bawah header atau di atas footer. Silahkan paste coding berikut di mana saja Anda ingin melihat menu ini di situs Anda.

Dengan Cara pergi ke Tata Letak + Tambah Gadget Pilih HTML/JavaScript

Berikut Codenya
<!-- kumpulancara Social Rounded Widget For Blogger -->

<script src="http://daenk.googlecode.com/files/jquery.js" type="text/javascript"> </script> 
<script src="http://daenk.googlecode.com/files/MySocialShare.js" type="text/javascript"> </script> 

<div class="mbl_container">

<!-- Horizontal Social Share Code -->
<div class="mblsocialshare right" data-email-handle="[email protected]" data-facebook-handle="kumpulancara" data-google-handle="112764290697005874210" data-networks="facebook,twitter,email,pinterest,google" data-orientation="line" data-picture="http://1.s3.envato.com/files/42962442/assets/images/share_core_square.jpg" data-pinterest-handle="rhapy" data-twitter-handle="daenkblog">
</div>

<!-- Rounded Social Share Code -->
<div class="mblsocialshare left" data-arc-length="360" data-email-handle="[email protected]" data-facebook-handle="kumpulancara" data-google-handle="112764290697005874210" data-image-type="facebook" data-networks="facebook,twitter,email,pinterest,google,youtube" data-picture="daenkrhapy" data-pinterest-handle="rhapy" data-twitter-handle="daenkblog" data-youtube-handle="mrrhapy">
</div>
</div>

Kustomisasi:
Ganti kumpulancara Dengan Nama Facebook Anda.
Ganti daenkblog dengan Twitter anda.
Ganti 112764290697005874210 Dengan ID Profil Google+ Anda.
Ganti Nama rhapy dengan Pinterest Anda.
Ganti mrrhapy dengan Username YoutTube Anda
Ganti [email protected] dengan Email Anda

Selamat Mencoba dan semoga Bermanfaat
Mohon dukungan dengan menyebar Artikel ini dengan Click Tombol Google+

Cara Tambah Widget Sosial Rounded Slide Hover Rating: 4.5 Diposkan Oleh: Sarjana Cebong

15 komentar:

  1. boleh juga niiihh infonya..maksih bnyak gan..

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. wah bermanfaat sekali gan infonya mkasih

    ReplyDelete
  4. Wah ini nih yang aku cari.. lumayan untuk tampilan widget di blog.
    Matur nuwun sangat gan. Bermanfaat sekali infonya!

    ReplyDelete
  5. Keran Euyyy.... enaknya ditaruh di sebelah mana di blog kita ya?

    ReplyDelete
  6. keren nih tampilan widget nya.. tq dah udah mau share gan

    ReplyDelete
  7. boleh nih..tapi saya lebih terkesan dengan plugin addtoany apakah itu ssama saja gan ??

    ReplyDelete
  8. widgetnya keren.... bikin ngiler ei...

    ReplyDelete