Cara Zone

Portal online Tips dan tutorial

Dapatkan tutorial terupdate gratis dengan berlangganan artikel

Tuesday, August 26, 2014

Cara Membuat Professional Social Sidebar Blogger

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.

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

8 comments:
Silahkan komentar
  1. Hasilnya mirip sama script dari addthis ya mas, keren manstab abiez, lanjuuuttt :)

    ReplyDelete
  2. kalau ditambah kaya widget gitu pengaruh gak mas buat loading nya ?

    ReplyDelete
  3. Trims Sangat Bermanfaat Gan,

    ReplyDelete
  4. Siip Gan., KEEREN., TERIMAKASIH.,

    ReplyDelete
  5. i like it cara zone, but how can i change it to share button

    ReplyDelete

Silahkan Follow atau Like FP Cara Zone
Join Our Newsletter