Cara Buat Widget Social Slide Hover Keren

Memperindah blog terutama blogspot tentu sudah tidak asing lagi bagi sobat blogger, salah satunya yakni menambah widget social slide hover. Widget ini akan membuat blog kita makin keren, karena tampil beda dengan widget-widget social network lainnya. Beberapa hari lalu kami juga membuat tutorial Cara Membuat Profesional Social Sidebar Blogger sobat bisa coba karena selain terlihat profesional juga lumayan ringan.

Kembali ke topik, Mau widget Social Network 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 widget 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 Social Slide dengan Efek yang begitu mengesankan.

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 :

• Login Blogger
• Lalu masuk ke Template >>> Edit HTML
• Lalu kamu Cara Kode ]]></b:skin> , Untuk mempercepat pencarian kamu Tekan ctrl+F pada Keyboard kalian.
• Copy & Paste kan Kode di bawah ini tepat di atas Kode ]]></b:skin> 

.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: 100px;
margin-left: 0;
}
.mblsocialshare.bubble.right
{
left: auto;
right: 400px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTXCnhAP8eg5KJNo4cs4L-IGHSMIjBQ7CLvQz_7J7PSrPOZAxWaav5CrFBlJpJhAKxarjWJVSBnUfuyUVntpj97-wiI7kpraY7h2orCAjJQW4mOJ_Bj_K6p8tc78Z7Is6v40EIaEnpvKY/s1600/bubble_facebook_share_button.png);
}
.mblsocialshare.bubble .msb_network_button.google
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb31x7V7kTM4IKO5MiIuo_eQo2IuSzP7bVWUEEHPgyju1iEyEOS160bSy2gJ71I1IbF9bc1a5rkIUw4zDuufRGbkfWYYxjOgLYdCC8YmpnsQrsrRIFplln2PgQmV8F8Dv8ZXTDUrpZlhk/s1600/bubble_googleplus_share_button.png);
}
.mblsocialshare.bubble .msb_network_button.twitter
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnwP2o2HkEg8e_5pvpgYdSfLbBei31J-8m-3oJJSgI3B08n2XfUAbfBtlb6DH7VhYCQ5h6b4Hd6rwDyF3KHwj8G2Rlikz0ssgARvFdGlYzExR21VRg6sqPcVMgukCAdKD_HTUfQHjFHTQ/s1600/bubble_twitter_share_button.png);
}
.mblsocialshare.bubble .msb_network_button.pinterest
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd3I01Mdhxg1hSq6S_7ULrilqf8zkOXrassyIEwbRHCaJZYwcc-LsY9-OkBxhqqHBxLPlbYORj1O7RuWwJM_Nh29plCn_E1AgCT4u0OWjm2pUj8adOJOM5b03y_DEzdklTt9u0NKht4iA/s1600/bubble_pinterest_share_button.png);
}
.mblsocialshare.bubble .msb_network_button.email
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJRhimVK_RxjLAZtZy33hbZtK4KlU1TOn0ikS20_osa4xj2r2V5hw5RgLNk5r6E2kIN6bwM3DsgxCcDQF29DfosGLOb1Wuu06vWj7Ld4VQSaDalmGrdGv5TXMrMvcdtZyMNVWC95f-No/s1600/bubble_email_share_button.png);
}
.mblsocialshare.bubble .msb_network_button.youtube
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijf-mcOM_Km5EVkzT7KaT_9jZQ6DrvBsA9SOH4OAhbANPNUldCJ5pNbT1I2EMwUSHVNnydY1u08aPsyh3c0Fb1sMD4VbDZ1O1A33jipSyGp37JfZU8hyphenhyphenZ5yMC7SsYNAW8xwwUgBaCt1ZE/s1600/bubble_youtube_share_button.png);
}
.mblsocialshare.bubble .msb_network_button:hover
{
background-position:0 -46px;
}

• Lalu Sinpan Template nya.
• Langkah selanjutnya kamu Masuk Tata Letak >>> Tambeh Gadget >>> HTML/JavaScript
• Copy & Paste kan Kode di bawah ini :

<!—Url-Rhenaldy Widget Social Slide Hover Keren-->
<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>
<!-- Rounded Social Share Code -->
<div class="mblsocialshare left" data-arc-length="360" data-email-handle="Rhenaldy12@gmail.com" data-facebook-handle="bucikeh" data-google-handle="105331123587240119358" data-image-type="facebook" data-networks="facebook,twitter,email,pinterest,google,youtube" data-picture="daenkrhapy" data-pinterest-handle="#" data-twitter-handle="Rhe_Naldy" data-youtube-handle="https://www.youtube.com/channel/UCaNauc9Q93WpzgavWeYImUQ"></div>

NOTE :
Ganti bucikeh Dengan Nama Facebook Anda atau Fanpage.
Ganti Rhe_Naldy dengan Twitter anda.
Ganti 105331123587240119358 Dengan ID Profil Google+ Anda.

Ganti Nama # dengan Pinterest Anda.

Ganti https://www.youtube.com/channel/UCaNauc9Q93WpzgavWeYImUQ dengan Username atau saluranYoutTube Anda
Ganti rhenaldy12@gmail.com dengan Email Anda.

SELAMAT MENCOBA.... Jangan Lupa Berkomentar ya...

Share :

Tweet

✚

Related Post