Professional Social Sidebar Widget for Blogger and Website 2015 ~ [Url]Rhenaldy

Professional Social Sidebar Widget for Blogger and Website 2015

Blogger, CSS dan HTML, Media Sosial, berbagi sosial, Tutorial, Widget dan Plugin

Banyak orang berpikir bahwa Blogger kurang dalam semua barang tambahan yang dapat Anda tambahkan ke platform lain seperti WordPress, tapi itu hanya tidak benar. Dengan menggunakan widget Anda dapat menyesuaikan blog Anda sebanyak yang Anda inginkan dengan hanya menambahkan potongan kecil kode untuk sidebar.

Hari ini aku menerbitkan Sidebar Widget Profesional Sosial untuk Blogger. Ini sangat menarik dan indah widget sosial. Ini menghubungkan posisi widget sosial di sidebar dan termasuk geser keluar menghubungkan options.

[DEMO]

CARA PEMAKAIANNYA :

Masuk Blogger >>> Blogger
Masuk Template Lalu Edit HTML
Cari kode <body> untuk mempercepat pencarian gunakan Ctrl+f, Letakan Kode di bawah ini tepat setelah Kode <body>.

<div id='social-sidebar'>
   <ul>
    <li>
     <a class='entypo-twitter' href='https://twitter.com/Username' target='_blank'>
      <span>Twitter</span>
     </a>
    </li>
    <li>
     <a class='entypo-gplus' href='http://dribbble.com/Username' target='_blank'>
      <span>google+</span>
     </a>
    </li>
    <li>
     <a class='entypo-tumblr' href='http://www.tumblr.net/Username' target='_blank'>
      <span>tumblr</span>
     </a>
    </li>
<li>
     <a class='entypo-facebook' href='http://www.facebook.net/Username' target='_blank'>
      <span>facebook</span>
     </a>
    </li>
        <li>
     <a class='entypo-rss' href='http://feeds.feedburner.com/Username' target='_blank'>
      <span>feedburner</span>
     </a>
    </li>
   </ul>
  </div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.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,#social-sidebar ul li,#social-sidebar ul li a {
 list-style: none;
 margin: 0;
 padding: 0;
}
 
/* ---------- Social Sidebar ---------- */
#social-sidebar {
    left: 0;z-index:999;
 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>

Setelah itu simpan Template. Selesai sudaj kalian memiliki Sosial sidebar Profesional di Blog & Website kalian. Jangan lupa lihat cara penerapannya seperti Gif di bawah ini :