site stats
Aug 31, 2018
192 Views

Cara Membuat Floating Social Bookmark Dengan Efek Easing di Blogger

Written by

Kali ini admin akan bagikan Cara Membuat Floating Social Bookmark Dengan Efek Easing di Blogger. pastinya kebanyakan dari anda belum tau untuk tutorial ini. nah silakan ikuti langkah – langkah atau tutorial di bawah ini untuk melakukannya. selamat mencoba

Login ke dashboard blogger andaBerikut langkah-langkah pembuatannya :

  1. Masuk ke template >>> Edit HTML
  2. CTRL+F cari script ]]></b:skin> : Copykan CSS di atas nya
Berikut Kode nya :

.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/-zt3csy2DqGo/U661h1iTakI/AAAAAAAAAFc/v5tUjZIJDHs/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;
}
Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut di atas </head>
<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>

Untuk Selanjutnya, masukkan kode HTML di bawah ini diatas tag <body>


<code><div class=’social-buttons button-right hidden-phone hidden-tablet’>


<a class=’itemsocial’ href=’https://www.facebook.com/your FB’ 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/your twitter’ 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/your G+’ 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/your 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/your 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/your feed’ id=’rss-btn’ target=’_blank’><span class=’social-icon’><span class=’social-text’>Follow via RSS</span></span></a>
</div>

Kemudian klik Simpan Template

nah itu dia cara untuk membuat Floating Social Bookmark Dengan Efek Easing di Blogger jika anda kesulitan atau belum memahami anda bisa langsung mengirimkan komentar di bawah ini.. terima kasih telah berkunjung di website kami.

Article Categories:
Blogger

Leave a Comment

Your email address will not be published. Required fields are marked *