The-Bhuz.Com: Cara Membuat Floating Social Media di Sisi Blog

Cara Membuat Floating Social Media di Sisi Blog

Posted by under Bloger, Tutorial

Cara Membuat Floating Social Media di Sisi Blog

Pada artikel ini saya membahas tentang Cara Membuat Floating Social Media di Sisi Blog.
Floating social media ini nantinya berisikan 6 jejaring sosial beserta iconya, antara lain facebook, twitter, rss pump, google+, pinterest, dan youtube. Social bar ini juga sudah di desain untuk mengikuti layar monitor, jadi jika pengunjung scroll mouse ke bawah, maka widget ini akan mengikuti gerak layar monitornya. Well, bagi anda yang berminat dan tertarik untuk memasang widget ini di blog anda, silahkan disimak yang berikut ini.

Login ke Blogger.
Pilih Template.
Pilih Edit HTML.
Centang box 'Expand Template Widget'.
Cari kode ]]></b:skin> menggunakan CTRL+F, lalu letakkan kode di bawah ini tepat diatasnya.

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
    }
    .button-left {
    left: 0;
    }
    .button-right {
    right: 0;
    }
    .social-buttons #twitter-btn .social-icon,
    .social-buttons #facebook-btn .social-icon,
    .social-buttons #google-btn .social-icon,
    .social-buttons #rss-btn .social-icon,
    .social-buttons #pinterest-btn .social-icon,
    .social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
    }
    .button-left #facebook-btn span {
    background-position: right 10px;
    }
    .button-left #twitter-btn span {
    background-position: right -35px;
    }
    .button-left #google-btn span {
    background-position: right -127px;
    }
    .button-left #rss-btn span {
    background-position: right -80px;
    }
    .button-left #pinterest-btn span {
    background-position: 11px -177px;
    }
    .button-left #youtube-btn span {
    background-position: 11px -223px;
    }
    .button-right #facebook-btn span {
    background-position: 12px 10px;
    }
    .button-right #twitter-btn span {
    background-position: 11px -35px;
    }
    .button-right #google-btn span {
    background-position: 10px -127px;
    }
    .button-right #rss-btn span {
    background-position: 11px -80px;
    }
    .button-right #pinterest-btn span {
    background-position: 11px -177px;
    }
    .button-right #youtube-btn span {
    background-position: 11px -223px;
    }
    .social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
    }
    .social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
    }
    .social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
    }
    .social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
    }
    .social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
    }
    .social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
    }
    .social-buttons a:hover .social-text {
    display: block;
    }
    .button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
    }
    .button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
    }
    .button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
    }
    .button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
    }
    .social-buttons .social-text {
    color: #FFFFFF;
    }

Selanjutnya, cari kode </head> , lalu letakkan kode di bawah ini tepat diatasnya

Keterangan: Jika pada template anda sudah terpasang Javascript seperti kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> diatas, dihapus saja.

Masih di Edit HTML, cari kode </body>, letakkan kode di bawah ini tepat diatasnya.

<div class='social-buttons button-right hidden-phone hidden-tablet'>
 <a class='itemsocial' href='https://www.facebook.com/Facebook ID' id='facebook-btn' target='_blank'>Follow via Facebook</a>
 <a class='itemsocial' href='https://twitter.com/Twitter ID' id='twitter-btn' target='_blank'>Follow via Twitter</a>
 <a class='itemsocial' href='https://plus.google.com/Google+ ID' id='google-btn' target='_blank'>Follow via Google</a>
 <a class='itemsocial' href='http://pinterest.com/Pinterest ID' id='pinterest-btn' target='_blank'>
 Follow via Pinterest</a>
 <a class='itemsocial' href='https://www.youtube.com/user/Youtube ID' id='youtube-btn' target='_blank'>Follow via Youtube</a>
 <a class='itemsocial' href='http://feeds.feedburner.com/Feedburner ID' id='rss-btn' target='_blank'>Follow via RSS</a>
 </div>

Keterangan :

Ganti kode

Facebook ID

Twitter ID

Google+ ID

Pinterest ID

Youtube ID

Feedburner ID

dengan ID jejaring social anda

Klik 'save template', dan selesai. Bagaimana? mudah bukan membuat floating social media bar di blog. Demikian tutorial blog tentang Cara Membuat Floating Social Media di Sisi Blog, semoga bermanfaat, dan selamat mencoba.

Terimakasih sudah Berkunjung, jangan Lupa Meninggalkan komentar

Posted by : The-Bhuz.Com http://visitors2cash.com/ref.php?refId=127284

Artikel Cara Membuat Floating Social Media di Sisi Blog diposting oleh The-Bhuz.Com . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan melalui kotak komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog Sobat, hanya saja mohon sertakan link sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Selamat bersenang-senang.

a href="http://the-bhuz.blogspot.com/2013/06/cara-membuat-floating-social-media-di.html" target="_blank">Cara Membuat Floating Social Media di Sisi Blog

Bloger

Tutorial