Cara Membuat Social Bookmark di Samping Blog

Cara Membuat Social Bookmark di Samping Blog - Sebelum ane nonton anime, mending posting dulu dah biar ngga ketinggalan :D, ok kali ini ane share Social Bookmark di Samping Blog keren nih sob, selain dgn efek halus, simple, widget ini juga tidak terlalu berat sob. kode nya ane dapat dari blog Hack4rt sob, katanya sih dia ngambil diam diam wkwkwk ._.
Langusng aja ke tutorialnya, soalnya banyak daftar anime yg belum ditonton ._.
1. Buka blogger

2. Klik Template -> Edit HTML


3. Cari kode ]]></:bskin>
4. Lalu copy dan paste kode dibawah ini di atas kode ]]></:bskin>

/* Social button SCH-XP */
.staticbar {position: fixed;right: 0;top: 35%;width: 25px;animation:static-bar .8s;-moz-animation:static-bar .8s; -webkit-animation:static-bar .8s;}
.staticbar:hover {z-index: 1000;}
.rt-social-buttons a, .loginbtn {background: none repeat scroll 0 0 rgb(34, 34, 34);background-repeat: no-repeat;display: block;height: 20px;margin-bottom: 3px;padding: 4px 0 4px 4px;right: 0px;width: 140px;position: relative;-moz-border-radius: 3px 0px 0px 3px;-webkit-border-radius: 3px 0px 0px 3px;-khtml-border-radius: 3px 0px 0px 3px;border-radius: 3px 0px 0px 3px;background-position: 4px 4px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;border:1px solid rgb(51, 51, 51)}
.rt-social-buttons span, .loginbtn span {background-repeat: no-repeat;color: #FFFFFF;display: block;font-size: 10px;height: 18px;letter-spacing: -1px;line-height: 1.9em;padding-left: 10px;text-transform: uppercase;text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);}
.rt-social-buttons a:hover, .loginbtn:hover {background: none repeat scroll 0 0 rgb(150, 0, 0);border:1px solid rgb(70, 0, 0);
right: 119px;}
.rt-social-buttons a#rt-buzz-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_1omM-cENx5JtDIEbReRlW1aHXsWm1J5lrdduVHV-vtpiylvWNDqVlXyJhhQQkOwyDm0TnLTAVKo3uGbp41jqLDuuN0rAIIFEbJsDBqp5una_L9G4c97pEuAdAhepCw7LgQcHDPvgLc/s1600/socialsprite.png);background-position:-2px -68px;}
.rt-social-buttons a#rt-twitter-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_1omM-cENx5JtDIEbReRlW1aHXsWm1J5lrdduVHV-vtpiylvWNDqVlXyJhhQQkOwyDm0TnLTAVKo3uGbp41jqLDuuN0rAIIFEbJsDBqp5una_L9G4c97pEuAdAhepCw7LgQcHDPvgLc/s1600/socialsprite.png);background-position:-2px -24px;}
.rt-social-buttons a#rt-facebook-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_1omM-cENx5JtDIEbReRlW1aHXsWm1J5lrdduVHV-vtpiylvWNDqVlXyJhhQQkOwyDm0TnLTAVKo3uGbp41jqLDuuN0rAIIFEbJsDBqp5una_L9G4c97pEuAdAhepCw7LgQcHDPvgLc/s1600/socialsprite.png);background-position:-2px -46px;}
.rt-social-buttons a#rt-rss-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_1omM-cENx5JtDIEbReRlW1aHXsWm1J5lrdduVHV-vtpiylvWNDqVlXyJhhQQkOwyDm0TnLTAVKo3uGbp41jqLDuuN0rAIIFEbJsDBqp5una_L9G4c97pEuAdAhepCw7LgQcHDPvgLc/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_1omM-cENx5JtDIEbReRlW1aHXsWm1J5lrdduVHV-vtpiylvWNDqVlXyJhhQQkOwyDm0TnLTAVKo3uGbp41jqLDuuN0rAIIFEbJsDBqp5una_L9G4c97pEuAdAhepCw7LgQcHDPvgLc/s1600/socialsprite.png);background-position:-2px 0px;}
@keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-moz-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-webkit-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}

5. Lalu cari kode </body>
6. Paste kode dibawah tepat diatas </body>

<div class='staticbar'>
<div class='login'>
<div id='rt-login-button'>
<a class='loginbtn buttontext' href='http://blogger.com' rel='nofollow' target='_blank' title='Login Blogger'>
<span class='desc'>Blogger Login</span></a>
</div>
<div class='clear'/>
</div>
<div class='rt-social-buttons'>
<a class='lightbox' data-options='{&quot;width&quot;:420, &quot;height&quot;:405, &quot;iframe&quot;: true}' href='http://twitter.com/666_WTF ' id='rt-twitter-btn' rel='nofollow' title='Twitter SCH-XP '>
<span>Follow Me On Twitter</span></a>
<a class='lightbox' data-options='{&quot;width&quot;:300, &quot;height&quot;:430, &quot;iframe&quot;: true}' href='http://facebook.com/rivaillee' id='rt-facebook-btn' rel='nofollow' title='Facebook SCH-XP '>
<span> Facebook Fanspage</span></a>
<a href='https://plus.google.com/101461963743509825679/posts' id='rt-buzz-btn' rel='nofollow' target='_blank' title='Google Plus SCH-XP '>
<span>Circle Me On Google Plus</span></a>
</div>
</div>
<script src='http://ganteng-project.googlecode.com/svn/trunk/om-dayz/panelticon.js' type='text/javascript'/>

Keterangan :
Ganti tulisan berwarna merah sesuai keinginan agan :)
source script