Cara Membuat Widget Social Media di Blog

     Cara Membuat Widget Social Media - Hai semua AiRa LoKa best friend... kali ini saya mau bagi-bagi tutorial tentang Cara Membuat Widget Social Media di Blog.

      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......

DEMO

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!