Cara Membuat Professional Social Sidebar Blogger

Ingin membuat Social Sidebar blog anda tampak profesional dan elgean seperti pada web-web dengan Cms Wordpres?
Banyak orang berpikir bahwa Blogger kurang dalam semua widget ekstra seperti yang ada pada platform lainnya seperti WordPress, tetapi ini tidak benar. Dengan menggunakan widget Anda dapat menyesuaikan blog Anda sebanyak yang Anda inginkan dengan hanya menambahkan beberapa kode untuk sidebar.

Ada berbagai macam social sidebar yang tutorialnya mudah anda dapatkan di berbagai blog-blog tutorial blogspot, namun Kali ini kami mempublikasikan Sidebar Widget Profesional Sosial untuk Blogger lain dari yang lain. Ini sangat menarik dan nampak cantik untuk widget sosial, Juga karena widget ini ringan dan tidak mengganggu kecepatan loading blog anda.

Sebelumnya silahkan lihat Demonya disini :

Lihat Demo

Bagaimana menambahkannya pada blog, silahkan ikuti langkah-langkah berikut ini :

• Pertama
  Silahkan menuju blog yang ingin ditambahkan social sidebar
• Kedua
  Silahkan Klik Tambah Gatget
• Ketiga
  Silahkan Pilih HTML/JavaScript
• Keempat
  Silahkan Copy dan Pastekan kode berikut ini :
  
  <div id='social-sidebar'>
  <ul>
  <li>
  <a class='entypo-twitter' href='https://twitter.com/zonecara' target='_blank'>
  <span>Twitter</span>
  </a>
  </li>
  <li>
  <a class='entypo-gplus' href='https://plus.google.com/u/0/113065071007966297445/' target='_blank'>
  <span>google+</span>
  </a>
  </li>
  <li>
  <a class='entypo-tumblr' href='http://carazone.tumblr.com/' target='_blank'>
  <span>tumblr</span>
  </a>
  </li>
  <li>
  <a class='entypo-facebook' href='https://www.facebook.com/carazonecom' target='_blank'>
  <span>facebook</span>
  </a>
  </li>
  <li>
  <a class='entypo-rss' href='http://feeds.feedburner.com/carazone' target='_blank'>
  <span>feedburner</span>
  </a>
  </li>
  </ul>
  </div>
  <style type='text/css'>
  /*<![CDATA[*/
  @charset "utf-8";
  /* CSS Document */
  /* ---------- ENTYPO ---------- *//* ---------- Cara Zone : http://www.carazone.com/---------- */
  /* ---------- http://weloveiconfonts.com/ ---------- */
  @import url(http://weloveiconfonts.com/api/?family=entypo);
  [class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  }
  /* ---------- GENERAL ---------- */
  #social-sidebar a { text-decoration: none; }
  #social-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  /* ---------- Social Sidebar ---------- */
  #social-sidebar {
  Left: 0;
  margin-top: -75px; /* (li * a:width) / -2 */
  position: fixed;
  top: 50%;
  }
  #social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
  #social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
  #social-sidebar ul li a {
  background: #121212;
  color: #fff;
  display: block;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  position: relative;
  text-align: center;
  width: 50px;
  }
  #social-sidebar ul li a:hover span {
  left: 130%;
  opacity: 1;
  }
  #social-sidebar ul li a span {
  border-radius: 3px;
  line-height: 24px;
  left: -100%;
  margin-top: -16px;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  padding: 4px 8px;
  position: absolute;
  -webkit-transition: opacity .3s, left .4s;
  -moz-transition: opacity .3s, left .4s;
  -ms-transition: opacity .3s, left .4s;
  -o-transition: opacity .3s, left .4s;
  transition: opacity .3s, left .4s;
  top: 50%;
  z-index: -1;
  }
  #social-sidebar ul li a span:before {
  content: "";
  display: block;
  height: 8px;
  left: -4px;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 8px;
  z-index: -2;
  }
  #social-sidebar ul li a[class*="twitter"]:hover,
  #social-sidebar ul li a[class*="twitter"] span,
  #social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
  #social-sidebar ul li a[class*="gplus"]:hover,
  #social-sidebar ul li a[class*="gplus"] span,
  #social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
  #social-sidebar ul li a[class*="tumblr"]:hover,
  #social-sidebar ul li a[class*="tumblr"] span,
  #social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
  #social-sidebar ul li a[class*="facebook"]:hover,
  #social-sidebar ul li a[class*="facebook"] span,
  #social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
  #social-sidebar ul li a[class*="rss"]:hover,
  #social-sidebar ul li a[class*="rss"] span,
  #social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
  /*]]>*/
  </style>
  

Keterangan
Silahkan Ganti Alamat : Twitter, Google Plus, Tumblr, Facebook, Feed

Jika tidak punya Akun Tumblr, anda bisa menghapus
<li>
<a class='entypo-tumblr' href='http://carazone.tumblr.com/' target='_blank'>
<span>tumblr</span>
</a>

Hapus juga kode ini :
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }

Videonya bisa anda liat disini

Selamat mencoba