Cara Membuat Floating Social Media di Blog

> > Cara Membuat Floating Social Media di Blog
22.34 Diposting oleh Unknown



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.

Anda membaca artikel Cara Membuat Floating Social Media di Blog dan anda bisa menemukan Anchor Text artikel dengan url http://gudang-gw.blogspot.com/2013/03/cara-membuat-floating-social-media-di.html.


Backlink here..

Description: Cara Membuat Floating Social Media di Blog Rating: 5 Reviewer: Unknown - ItemReviewed: Cara Membuat Floating Social Media di Blog


Mbah Budi - 22.34
Tags:


Share your views...

0 Respones to "Cara Membuat Floating Social Media di Blog"

Posting Komentar

Langganan: Posting Komentar (Atom)
 

© 2013 BLOGSPOT GW All Rights Reserved