Home » » Cara Membuat Widget Social Media di Blog

Cara Membuat Widget Social Media di Blog

Written By AiRa LoKa on Rabu, 15 Mei 2013 | 19:20


      Hai semua... Kalau sebelumnya ada Social Profile Widget Metro UI, sekarang saya mau kasih yang lebih simpel lagi nih... walaupun simpel, yang penting bisa digunakan untuk mendatangkan traffik. Widget social media juga dapat kita jadikan sebagai sarana mempercantik penampilan blog, dengan icon-icon social media yang berwarna-warni kita dapat memberikan suatu daya tarik tersendiri kepada pengunjung, dan juga didukung dengan efek hover style yang menawan pada widget visitor friendly ini. Nah, bagi yang mau pasang, Langsung saja..
Check It Out......


1.  Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Gadget > HTML/Javascript.

2.  Pada kolom konten, pastekan script dibawah ini
<style>
    .SocialButtonsBorder {
    margin:0 auto;
    padding:5px;
    width:auto;
    border-radius:5px;
    border: 1px #BBBBBB solid;
    }
    #SexySocialButtons{
    list-style:none;
    text-decoration:none;
    font-size:0.9em;
    font-family:trebuchet ms,sans-serif;
    }
    #SexySocialButtons a{
    text-decoration:none;
    font-family:trebuchet ms,sans-serif;
    }
    #SexySocialButtons li{
    position:relative;
    height:38px;
    cursor:pointer;
    padding: 0 !important;
    }
    #SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
    position:relative;
    z-index:5;
    display:block;
    float:none;
    margin:5px 0 0;
    width:210px;
    height:38px;
    border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.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;
    }
    #SexySocialButtons li:after{
    position:absolute;
    top:0;
    left:50px;
    z-index:2;
    display:block;
    height:38px; color:#ffffff;
    content:attr(data-alt);
    line-height:32px;
    }
    #SexySocialButtons .icon{
    overflow:hidden;
    color:#fafafa;
    }
    #SexySocialButtons .facebook{
    width:32px;
    height:32px;
    background-color:rgba(59,89,152,0.42);
    background-position:0 0;
    }
    #SexySocialButtons .twitter{
    width:32px;
    height:32px;
    background-color:rgba(64,153,255,0.42);
    background-position:0 -33px;
    }
    #SexySocialButtons .googleplus{
    width:32px;
    height:32px;
    background-color:rgba(228,69,36,0.42);
    background-position:-3px -66px;
    }
    #SexySocialButtons .YouTube{
    width:32px;
    height:32px;
    background-color:rgba(174,45,39,0.42);
    background-position:-2px -95px;
    }
    #SexySocialButtons .rss{
    width:32px;
    height:32px;
    background-color:rgba(255,102,0,0.42);
    background-position:-3px -126px;
    }
    #SexySocialButtons li:hover .icon,
    .touch #SexySocialButtons li .icon{
    width:210px;
    }
    .touch #SexySocialButtons li .facebook, #SexySocialButtons li:hover .facebook{
    background-color:rgba(59,89,152,1);
    }
    .touch #SexySocialButtons li .twitter, #SexySocialButtons li:hover .twitter{
    background-color:rgba(64,153,255,1);
    }
    .touch #SexySocialButtons li .googleplus, #SexySocialButtons li:hover .googleplus{
    background-color:rgba(228,69,36,1);
    }
    .touch #SexySocialButtons li .YouTube, #SexySocialButtons li:hover .YouTube{

    background-color:rgba(174,45,39,1);
    }
    .touch #SexySocialButtons li .rss, #SexySocialButtons li:hover .rss{
    background-color:rgba(255,102,0,1);
    }
    </style>
    <br />
<div class="SocialButtonsBorder">
<ul id="SexySocialButtons">
<li data-alt="Like us on Facebook"><a class="icon facebook" href="https://www.facebook.com/airalokablogspotcom">Like us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/airaloka29">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/105117023814492818484">Follow us on Google+</a></li>
<li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="https://youtube.com/airaloka">Subscribe us on YouTube</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/airaloka">Subscribe with RSS</a></li>
</ul>
</div>
3.  Simpan

Selamat mencoba!

8 komentar:

  1. icon sosial medianya kok kagak ada ya gan?

    BalasHapus
  2. Mohon maaf saya numpang promosikan blog saya
    http://pakettourumrohasyik.blogspot.com/

    BalasHapus
  3. Mantap Widgetnya , Ini Bikin blog jadi berat ga ya? come back..

    BalasHapus
  4. wah CSS nya panjang banget nih, tapi tak apalah, ijin pake ya mas CSS nya.. terima kasih. ^^

    BalasHapus
  5. Info bagus mas, terima kasih yaaaa... btw, ada yg hrs di rubah ga mas???

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Setelah membaca artikel ini, silahkan tinggalkan komentar. Bagi yang mau meninggalkan url blognya, silahkan saja. Asalkan anda tidak memberikan komentar dengan kata-kata yang tidak sopan. Terima kasih telah mengunjungi blog ini.

AiRa LoKa - Blog of tutorials

Konversi Kode di Sini!

 
Support : Blogger | Google | KlikSaya
Copyright © 2013. AiRa LoKa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger