» »

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:

— — 15 Comments — ,

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

  1. Mamzerd24 March 2013 at 21:08

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

    ReplyDelete
    Replies
    1. Dandi Saseno24 March 2013 at 21:11

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

      Delete
  2. Ril Anwar25 March 2013 at 14:22

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

    ReplyDelete
  3. PawankCrew Version's25 March 2013 at 17:24

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

    ReplyDelete
  4. Tips Trik SEO Blogger Pemula26 March 2013 at 16:15

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

    ReplyDelete
  5. Dandi Saseno26 March 2013 at 17:24

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

    ReplyDelete
  6. Dandi Saseno26 March 2013 at 21:01

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

    ReplyDelete
  7. Unknown2 April 2013 at 07:37

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

    ReplyDelete
  8. Dandi Saseno2 April 2013 at 14:50

    @Afdi : yap, kapan" saya share ^_^

    ReplyDelete
  9. Juju Onyols - Sikonyols6 April 2013 at 14:03

    MANTAP BRO (Y)

    ReplyDelete
  10. anrhy22 April 2013 at 01:36

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

    ReplyDelete
  11. Unknown12 May 2013 at 08:44

    Kerenn, Thx gan :D

    ReplyDelete
  12. Unknown20 June 2013 at 14:01

    Gan Cssnya di taruh mana...?

    ReplyDelete
    Replies
    1. Dandi Saseno20 June 2013 at 15:02

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

      Delete
  13. Anonymous25 October 2013 at 06:25

    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.

Subscribe to: Post Comments (Atom)