Floating Sosial Bookmark Keren Karya Maskolis

Floating Sosial Bookmark Keren Karya Maskolis - pada saat berkunjung ke situs Maskolis seorang master Seo dan Jagonya pembuat template Indonesia, Chinot tertarik dengan salah satu widget buatan Maskolis yaitu Floating Sosial Bookmark yang sekarang dipake pada blog chinot ini. Dengan tampilan yang keren Floating Sosial ini sangat menarik untuk dipasang pada blog. Floating Sosial Bookmark tentu sangat berguna untuk kemajuan sebuah blog atau website, karena dengan adanya Floating Sosial Bookmark para pengunjung blog akan lebih mudah menemukan kita di situs Jejaring Sosial seperti Facebook, Google+, dan lain sebagainya. Nah dikarenakan Floating Sosial Bookmark ini sangat berguna maka dari itu chinot rasa tidak ada salahnya kalau chinot berbagi kembali kepada teman teman blogger.

nah sekarang Bagaimana Cara Memasang Floating Sosial Bookmark Keren Karya Maskolis ini ? Caranya cukup mudah ko, teman teman silahkan ikuti saja langkah langkah bverikut ini :

• Login ke Blogger
• Pilih Template
• Lalu Edit HTML
• Setelah itu cari kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas ]]></b:skin>

.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 lagi kode </head> setelah ketemu copy kode dibawah ini dah letakan tepat diatas kode </head>

<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>

• Tahap Akhir untuk menampilkan Floating Sosial Bookmark karya Maskolis ini silahkan cari kode </body> dan letakan kode dibawah ini tepat diatasnya.

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/FB KAMU' 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 KAMU='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/G+ KAMU='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/ID KAMU='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/ID YOUTOBE='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/FEED KAMU='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a></div>

• Tulisan yang berwarna biru silahkan teman teman ganti sesuai dengan ID teman teman.
• Simpan template dan lihatlah hasilnya.

NB : Untuk menghindari eror sebaiknya teman teman save terlebih dahulu template teman, dan apabila terjadi kesalahan maka bisa dikembalikan seperti semula.

Floating Sosial Bookmark Keren Karya Maskolis - terimakasih sudah membaca artikel chinot, apabila ada pertanyaan silahkan untuk diposkan kedalam kotak komentar dibawah ini.

Sumber : http://www.maskolis.com/2013/03/floating-social-bookmark-dengan-efek.html