Kamis, 04 Juli 2013



Cara Pasang Widget Sosial Rounded Slide Hover di Blog
CaraPasang Widget Sosial Rounded Slide Hover di Blog, Anaktimor17 Blog – Sobat blogger(soger), kembali saya bagikan tips blogger nih. Nah soger kali ini saya akan membagikan tips pasang widget sosial rounded slide hover terbaru dan terkeren untuk Anda semuanya. Soger, widget sosial ini sangat besar mamfaatnya buat tampilan blog soger.
Widgetrounded slide hover ini dapat membantu kita tampil beda layaknya situs professional karena dapat menjaring visitor sebanyak mungkin. Soger semuanya pasti sudah tau kan? Situs jejaring sosialsangat besar perananya dalam mengembangkan blog kita agar dapat dikenal luas. Jadi soger sangat perlu memasang widget sosial ini.
            Kenapa harus widget rounded slide hover ini? Soger ada ribuan widget social keren lainya yang bertebaran di google, tapi widget yang satu ini terkesan elegant dan tidak berat untuk dimasukkan dalam blog jadi tidak mempengaruhi kecepatan loading blog soger. Silahkan Lihat demonya dulu
Bagaimana sobat, sangat menarik bukan?Mengapa menggunakan widget sosial rounded slide hover untuk Blog Anda?Selain Ringan widget ini juga dapat membuat blog jadi elegan dengan style yang menarik dan membuat visitor penasaran untuk mengklik-nya dan ini menjadi salah satu keuntungan, karena sedikit tidak mereka akan mengikuti di Jejaring sosial Anda terutama yakni Google+ | Facebook | Twitter.

Cara Install / Pasang pasang widget sosialrounded slide hover  di Blogger?
Soger, ikuti langkah-langkah berikut dengan benar.

Langkah # 1: Menambahkan script CSS :

Login ke akun Blogger.com, Dashboard >>  Edit HTML. Cari kode ini (tekan CTRL+F untuk mempercepat pencarian) ]]></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;}

Selanjutnya klik  SIMPAN.

Langkah # 2: Menambahkan Widget Sosial Rounded di Blogger:

Soger,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 >> HTML/JavaScript

Berikut Codenya

<!—anaktimor17 blog 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="putrakefa@gmail.com" data-facebook-handle="nilulat" data-google-handle="112136672487238015009" 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="markuskono" data-twitter-handle="markuskono">
</div>
 
<!-- Rounded Social Share Code -->
<div class="mblsocialshare left" data-arc-length="360" data-email-handle="putrakefa@gmail.com" data-facebook-handle="nilulat" data-google-handle="112136672487238015009" data-image-type="facebook" data-networks="facebook,twitter,email,pinterest,google,youtube" data-picture="daenkrhapy" data-pinterest-handle="markuskono" data-twitter-handle="markuskono" data-youtube-handle="markuskono">
</div>
</div>

Kustomisasi:
Ganti nilulat Dengan Nama Facebook Anda.
Ganti markuskono dengan Twitter anda.
Ganti 112136672487238015009 Dengan ID Profil Google+ Anda.
Ganti Nama markuskono dengan Pinterest Anda.
Ganti Makus Kono dengan Username YoutTube Anda
Ganti putrakefa@gmail.com dengan Email Anda

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

0 komentar:

Poskan Komentar