Widget Jejaring Sosial Melayang di Blog

Halo sobat blogger ! Baru ketemu lagi nii hehe ..
Udah lama ga posting karena keenakan edit tampilan blog kesayangan hehe :D

Kali ini saya mau posting nii tentang Widget Jejaring Sosial yang simple banget tampilannya ..
Jejaring sosial apa aja sih yang ada di widget ini ?
Jejaring sosial yang ada di widget ini yaitu diantaranya: Facebook, Twitter, Google+, Youtube, dan RSS.

Sebenarnya penting ga sih widget jejaring sosial ?
Kalo menurut saya sih penting sobat dan banyak kelebihannya, karena agar pengunjung lebih mudah mengetahui kontak blog kita, aktifitas blog kita, dan lebih mudah terhubung ke jejaring sosial. Dan yang paling penting yaitu mempercantik blog hehe.

Kaya gini nih sobat penampakan widgetnya ..

Langsung aja yuk sobat kita pasang widgetnya.
1. Login ke blogger sobat.
2. Ke Menu Dashboard, lalu pilih Tata Letak.
3. Klik tombol "Tambahkan Gadget".
4. Pilih widget HTML/Javascript.
5. Copy code semua dibawah ini, lalu paste di widget HTML/Javascript tersebut.
    (Saran saya jangan diberi judul di widgetnya, karena widget tersebut akan melayang)

<style>
    .SocialButtonsBorder {
    margin:0 auto;
    padding:5px;
    width:auto;
    }
    #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 style="position: fixed; top: 0px; left: 10px;width:150px;height:130px;">
<div class="SocialButtonsBorder">
<ul id="SexySocialButtons">
<li data-alt=""><a class="icon facebook" href="https://www.facebook.com/pages/Dhamar-Tekaje/499037430211123">Follow us on Facebook</a></li>
<li data-alt=""><a class="icon twitter" href="https://twitter.com/DhamarWorsnop">Follow us on Twitter</a></li>
<li data-alt=""><a class="icon googleplus" href="https://plus.google.com/u/0/104833090593743949208">Follow us on Google+</a></li>
<li data-alt=""><a class="icon YouTube" href="#">Subscribe us on YouTube</a></li>
<li data-alt=""><a class="icon rss" href="http://feeds.feedburner.com/dhamartekaje">Subscribe with RSS</a></li>
</ul>
</div>
</div>

7. Klik Simpan, Selesai !

Note:
Ganti tulisan berwarna biru dengan link URL jejaring sosial sobat.

Mudah kan sobat ?
Silahkan diterapkan di blog sobat dan semoga berhasil !
Salam Blogger !