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 Professional 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.

Silahkan Lihat demonya dulu :

Lihat Demo

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 ke akun Blogger
• Silahkan Pilih blog yang akan dipasangkan widget
• Klik template
  
  
• Klik Edit HTML
  
  
• Sekarang klik Ctrl + F pada keyboard agar mudah mencari kode ]]></b:skin>
  Setelah muncul search paste ]]></b:skin>
  maka sobat langsung ditunjunjukkan letak ]]></b:skin>
• Jika sudah ketemu silahkan Copy dan Paste Kode berikut tepat 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: 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/AVvXsEg6E87mIj39h4RaIOSChUR0niiGkNEy9893g_rtaz4qBEc4lgziT3H-Z9amhOvSissRcPWyGe_ec3WVjBvrDFXRk5Uz-5VZO3YZG_rSDeBSwXmM2Vyguba7pKNy_S96Z7opvfb02Wn3hTE/s1600/bubble_facebook_share_button.png);
  }
  .mblsocialshare.bubble .msb_network_button.google
  {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZ7fF0l0k-VgR8Xt9dWJswfaa17bImAo1ER6t3BWMmHCgGLlAtsvpRFQNxvdQchii9WuVkgUxV5xotwzCsOfjoRFEaPdy84mgAcWOCDNbHFVMFoZZQGcq2hv0NB2N5RZCCnZ6D4lUvuQ/s1600/bubble_googleplus_share_button.png);
  }
  .mblsocialshare.bubble .msb_network_button.twitter
  {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6A_TFcrCOjhnCBlC8bLemaoh3wMwlnbPp5GZP-FeglrO4QB6fne51n4UjBxZv8lJM4kyattciXP9y0RYazt__Q6Pw49eQAwKI-RlNegKU4q8fK424F5vTiyUVS1geuWdv-GitJPcw5Q/s1600/bubble_twitter_share_button.png);
  }
  .mblsocialshare.bubble .msb_network_button.pinterest
  {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTv5VQEFt7Jaa_g8xFEmKagpK7SPWNHGI-i3jdzhfqWZi2GghA4h1mVlyacHsCOfk73NhbyrU2kCjeCsCwPRCsNp41twIjxMbmubBsNt1UxaXNdFi30Q-KqC1mhA6yzLWL_QVucJzLOsk/s1600/bubble_pinterest_share_button.png);
  }
  .mblsocialshare.bubble .msb_network_button.email
  {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWYkJlm6BO3TMTSRe772M-REibHxo1qyeGAiJBY369SLxOF5CxoC9YLSsLVQGxth7Gn2uCARqK13WWy5KBD4Pzog7XyXhwwOD5M2fDFCFhOQzEuz6RGYDIjlE_qnQjkF_gl9CKxEyLOU/s1600/bubble_email_share_button.png);
  }
  .mblsocialshare.bubble .msb_network_button.youtube
  {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSh2BaFHGOI6Ml3MZ6oyVYBd7gwyDWPx_IGujQDbtsa0glo_1bkFlJStrMrLUVZWS4CyIp7pubPXAxrv0U5NakImLT2SLcZ0uS_PUvcJOaxB7xl-8IjKC2Pu-BUj638f9q62LTRiTwIso/s1600/bubble_youtube_share_button.png);
  }
  .mblsocialshare.bubble .msb_network_button:hover
  {
  background-position:0 -46px;
  }
  
  

Silahkan Simpan

Langkah # 2: Menambahkan Widget Sosial Rounded di Blogger

Silahkan Klik Tata Letak >>Tambah Widget>> HTML/Javasript

Sekarang silahkan Copy dan Paste Kode berikut pada form widget
Beikut kodenya :

<!-- CaraZone 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="blabla@gmail.com" data-facebook-handle="carazonecom" data-google-handle="113065071007966297445" data-image-type="facebook" data-networks="facebook,twitter,email,pinterest,google,youtube" data-picture="daenkrhapy" data-pinterest-handle="carazone" data-twitter-handle="zonecara" data-youtube-handle="carazonefull"></div>

Kustomisasi:
Ganti carazonecom Dengan Nama Facebook Anda atau Fanpage
Ganti zonecara dengan Twitter anda.
Ganti 113065071007966297445 Dengan ID Profil Google+ Anda.
Ganti Nama carazone dengan Pinterest Anda.
Ganti carazonefull dengan Username atau saluranYoutTube Anda
Ganti blabla@gmail.com dengan Email Anda

Selamat Mencoba dan semoga Bermanfaat