Cara Membuat Social Media Button Keren di Blog

Social Media Button
Feature : 
  1. Meliputi empat yang paling sering digunakan tombol jejaring sosial ditambah ikon RSS
  2. Halus memperluas di hover
  3. Penggunaan CSS sprite
  4. Sangat rapi dan bersih
  5. Tidak Menggunakan JavaScript dan Jquery, Full CSS
Penasaran kan ? oke langsung saja ke cara" nya..
Langkah pertama, Login ke www.blogger.com , kemudian ke Dashbor > Tata Letak > Tambahkan Gadget / Add a Gadget, kemudian copy code dibawah ini taruh ke gadgetnya...

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcoShOY0HtTufoxnsdVgWpZLPfqAe54Ju1I3IAfyN3nRXoj4C08WcQqSnKIuev8T6Hn7H3PdkJgkkN8HK63od2SRFWRlqIr_Bbb-m-RFCG1Aro2WwJoPEF1hOT_9cQ3e3PTMQFUQ0UJfA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
Tanda # Yang berwarna MERAH kamu ganti dengan link" mu,..
jika ingin memakai cara yg di EDIT HTML udah ada nih dibawah... kalo CSS taruh di atas kode ]]></b:skin> kalo HTML taruh dibawah kode <body>
HTML
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
CSS 
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcoShOY0HtTufoxnsdVgWpZLPfqAe54Ju1I3IAfyN3nRXoj4C08WcQqSnKIuev8T6Hn7H3PdkJgkkN8HK63od2SRFWRlqIr_Bbb-m-RFCG1Aro2WwJoPEF1hOT_9cQ3e3PTMQFUQ0UJfA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
Nah gimana ? Bagus kan, kalo udah jadi akan menjadi seperti ini...
DEMO 


Postingan terkait:

17 Tanggapan untuk "Cara Membuat Social Media Button Keren di Blog"

  1. Kurang keren ah ... soalnya kga ada ngakaknya :v

    ReplyDelete
    Replies
    1. lu aja yg nambahin ngakak :v, biar tambah keren nyahahahaha...
      ayo ketawa lo mana, gue udah tuh :v

      Delete
  2. Izin nyoba sob
    #comment back
    http://didil-cyber.blogspot.com

    ReplyDelete
  3. jajal sob
    please coment back ya
    http://pawankcrew.blogspot.com/2013/03/tanpa-modal-dapat-penghasilan-100.html

    ReplyDelete
  4. Bg...
    Makasih ya Tips nya
    saya nyari sana sini,
    Eh
    Rupanya jumpa di XPress
    Makasih Comment back http://alvincelebration.blogspot.com/2013/03/cara-cepat-dan-termudah.html

    ReplyDelete
  5. wah...gampang tipsnya... keren nih kalau dipasang di blog

    ReplyDelete
  6. Iya sob hehehe,..
    kalo ga gampang ga saya share :p

    ReplyDelete
  7. Buset, Ganti Template lagi dia
    Download dimana

    ReplyDelete
  8. @Alvin Shisui : download dari Damzaky.blogspot.com, dan pertamanya juga bukan gini, pertamanya biasa aja, terus saya edit" jadi gini :)

    ReplyDelete
  9. Kalau Mau Buat Sidebar kyk di blog sobat ini gimana ???
    tolong kasih tau y

    ReplyDelete
  10. @Afdi : yap, kapan" saya share ^_^

    ReplyDelete
  11. mntap gan...dah terpasang rapi di blogq!
    http://anrhy.blogspot.com

    ReplyDelete
  12. Gan Cssnya di taruh mana...?

    ReplyDelete
    Replies
    1. coba baca yang teliti gan, kayaknya disitu ada deh.. -_-

      Delete
  13. udah dicoba diblog saya, tapi kok , icon sosial medianya kagak ada ya sob???

    ReplyDelete

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.