Cara Membuat Social Media Buttons Keren Melayang Di Samping Blog

Seperti biasanya, saya akan berbagi kepada kalian sebuah tutorial blogger. Kali ini adalah tutorial tentang bagaimana caranya membuat tombol sosial atau social button yang melayang di samping blog. Sosial button ini sangatlah penting bagi blog kita, oleh karena itu jika kalian belum punya di blog kalian, saya sarankan untuk mencobanya. Tenang saja, widget ini tidaklah berat alias ringan. Desainnya yang bagus ala Om-dayz.blogspot.com juga akan menunjang tampilan blog kalian. Untuk lebih jelasnya, kalian bisa melihat demonya di link di bawah ini :

Demo

Bagaimana? Bagus bukan? Kalian tertarik? Terus bagaimana cara membuatnya? Sabar. Berikut ini adalah caranya :

• Pertama, buka dulu dasboard blog kalian.
• Masuk ke menu Template.
• Pilih Edit HTML.
• Cari kode ]]></b:skin>.
• Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>.

.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 #0e0e0e;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: 20px;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 #4bb847;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/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/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/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/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/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/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/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/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;}}

Keterangan :

Kode yang berwarna BIRU adalah kode warna background tombol. Kalian bisa menggantinya sesuai keinginan.

Kode yang berwarna HIJAU adalah kode warna background tombol saat diarahi cursor. Kalian bisa menggantinya sesuai keinginan.

Untuk melihat kode warna, kalian bisa klik disini.

• Masih di Edit HTML, cari kode </body>.
• Masukkan kode di bawah ini tepat di atas kode </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>
<div class="rt-social-buttons">
<a class="lightbox" data-options="{&quot;width&quot;:300, &quot;height&quot;:430, &quot;iframe&quot;: true}" href="https://facebook.com/pages/Yondarkness/372878842803751?ref=hl" id="rt-facebook-btn" rel="nofollow" title="Facebook Yondarkness">
<span> Facebook Fanspage</span></a>
<a class="lightbox" data-options="{&quot;width&quot;:420, &quot;height&quot;:405, &quot;iframe&quot;: true}" href="https://www.twitter.com/yondarkness/" id="rt-twitter-btn" rel="nofollow" title="Twitter Yondarkness">
<span>Follow Me On Twitter</span></a>
<a href="https://plus.google.com/118163047156925704991" id="rt-buzz-btn" rel="nofollow" target="_blank" title="Google Plus Yondarkness">
<span>Circle Me On Google Plus</span></a>
  <a href="http://www.yondarkness.com/" id="rt-rss-btn" rel="nofollow" target="_blank" title="RSS Yondarkness">
<span>Subscribe To RSS Feed</span></a>
</div>
</div>

• Terakhir, tinggal kalian simpan. 

Keterangan :

Kode yang berwarna UNGU adalah url Fanspage Facebook. Kalian ganti dengan url Fanspage Facebook kalian sendiri.

Kode yang berwarna PINK adalah url Twitter. Kalian ganti dengan url Twitter kalian sendiri.

Kode yang berwarna ORANGE adalah url Google Plus. Kalian ganti dengan url Google Plus kalian sendiri.

Kode yang berwarna CYAN adalah url RSS Blog. Kalian ganti dengan url RSS blog kalian sendiri.

Bagaimana? Sudah jadi bukan? Sekian tutorial saya kali ini. Semoga bermanfaat bagi kita semua. Saya berterima kasih juga kepada blog Om-Dayz. Jangan lupa untuk mampir ke blog saya lagi, tinggalkan komentar, dan klik tombol like di bawah ini.

Share :

Facebook Google+ Twitter