Skip to content Skip to sidebar Skip to footer
Home / Blog

Cara Membuat Floating Social Media di Blog

Beatdownx - Cara Membuat Floating Social Media di Blog - Hi, the article you are reading is Cara Membuat Floating Social Media di Blog,the information that we present as best as possible. Hopefully the contents of the post Article Blog, that we wrote according to what you are looking for, useful and can help you. all right, have a nice reading.

Cara Membuat Floating Social Media di Blog



Cara Membuat Floating Social Media di Sisi BlogCara Membuat Floating Social Media di Blog . Floating Social Media ini Display-nya sangat cocok sekali bagi anda yang mempunyai blog dengan tema minimalis maupun sederhana, iconya berwarna coklat kehitam-hitaman, dengan efek easingnya beragam jenis warna, tergantung jejaring socialnya, untuk demonya bisa dilihat disini.
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.
1. Login ke Blogger.
2. Pilih Template.
3. Pilih Edit HTML.
4. Centang box 'Expand Template Widget'.
5. 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;
}

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});  
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
Keterangan:  Jika pada template anda sudah terpasang Javascript seperti kode berwarna biru diatas, dihapus saja.
7. 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'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/Twitter ID' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/Google+ ID' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/Pinterest ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/Youtube ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/Feedburner ID' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
Keterangan: Ganti kode yang berwarna merah dengan ID jejaring social anda (ex. http://twitter.com/Erixbeatdown).

6. 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 Blog, semoga bermanfaat, dan selamat mencoba.

Article Cara Membuat Floating Social Media di Blog

Thats all Article about Cara Membuat Floating Social Media di Blog for this time, thanks for reading and dont forget to share if this article helps you.

Related Post