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="kumpulancara@gmail.com" 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="kumpulancara@gmail.com" 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 kumpulancara@gmail.com 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 10out of 10 ratings.
Powered by Blogger.