Memasang Widget Social Media Style Ekstra Hover Di Blog

Miliki widget menarik yang satu ini. Widget yang diberi nama Widget Social Media Style Ekstra Hover untuk Blog. Widget ini terdiri dari social media facebook, twitter, RSS, G+ dan Youtube. Semuanya dimodis seperti pada gambar berikut ini:

Adapun langkah-langkah pemasangannya adalah sebagai berikut:

1. Pergi ke blogger dan klik Layout
2. Klik Tambah Gadget dan pilih HTML / Javascript
3. Paste kode di bawah ini.

<style>
.StarsBloggingSocialButtonsBorder {
margin:0 auto;
padding:5px;
width:auto;
border-radius:5px;
border: 1px #BBBBBB solid;
}
#Tblog-SexySocialButtons{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#Tblog-SexySocialButtons a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#Tblog-SexySocialButtons li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#Tblog-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;
}
#Tblog-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;
}
#Tblog-SexySocialButtons .icon{
overflow:hidden;
color:#fafafa;
}
#Tblog-SexySocialButtons .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#Tblog-SexySocialButtons .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#Tblog-SexySocialButtons .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#Tblog-SexySocialButtons .YouTube{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:-2px -95px;
}
#Tblog-SexySocialButtons .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#Tblog-SexySocialButtons li:hover .icon,
.touch #Tblog-SexySocialButtons li .icon{
width:210px;
}
.touch #Tblog-SexySocialButtons li .facebook, #Tblog-SexySocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #Tblog-SexySocialButtons li .twitter, #Tblog-SexySocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #Tblog-SexySocialButtons li .googleplus, #Tblog-SexySocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #Tblog-SexySocialButtons li .YouTube, #Tblog-SexySocialButtons li:hover .YouTube{
background-color:rgba(174,45,39,1);
}
.touch #Tblog-SexySocialButtons li .rss, #Tblog-SexySocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>
<div class="TblogSocialButtonsBorder">
<ul id="Tblog-SexySocialButtons">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/TempatBlogging">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/TempatBlogging">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/ID Google Plus">Follow us on Google+</a></li>
<li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="https://youtube.com/Username">Subscribe us on YouTube</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/TempatBlogging">Subscribe with RSS</a></li></ul></div>