Membuat Widget Sosial Media Hover Keren Untuk Blog ~ Ron1st Blog

langsung saja kita mulai

Pertama masuk ke Blogger.com, dengan akun anda
Terus, Klik ''Tata letak''
Klik ''Tambah Gadget''
Pilih Gadget ''HTML/JavaScript'' dan masukkan kode dibawah ini di dalam gadget tersebut

<style>

.StarsBloggingSocialButtonsBorder {

margin:0 auto;

padding:5px;

width:auto;

border-radius:5px;

border: 1px #BBBBBB solid;

}

#bloggertrix-SexySocialButtons{

list-style:none;

text-decoration:none;

font-size:0.9em;

font-family:trebuchet ms,sans-serif;

}

#bloggertrix-SexySocialButtons a{

text-decoration:none;

font-family:trebuchet ms,sans-serif;

}

#bloggertrix-SexySocialButtons li{

position:relative;

height:38px;

cursor:pointer;

padding: 0 !important;

}

#bloggertrix-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;

}

#bloggertrix-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;

}

#bloggertrix-SexySocialButtons .icon{

overflow:hidden;

color:#fafafa;

}

#bloggertrix-SexySocialButtons .facebook{

width:32px;

height:32px;

background-color:rgba(59,89,152,0.42);

background-position:0 0;

}

#bloggertrix-SexySocialButtons .twitter{

width:32px;

height:32px;

background-color:rgba(64,153,255,0.42);

background-position:0 -33px;

}

#bloggertrix-SexySocialButtons .googleplus{

width:32px;

height:32px;

background-color:rgba(228,69,36,0.42);

background-position:-3px -66px;

}

#bloggertrix-SexySocialButtons .YouTube{

width:32px;

height:32px;

background-color:rgba(174,45,39,0.42);

background-position:-2px -95px;

}

#bloggertrix-SexySocialButtons .rss{

width:32px;

height:32px;

background-color:rgba(255,102,0,0.42);

background-position:-3px -126px;

}

#bloggertrix-SexySocialButtons li:hover .icon,

.touch #bloggertrix-SexySocialButtons li .icon{

width:210px;

}

.touch #bloggertrix-SexySocialButtons li .facebook, #bloggertrix-SexySocialButtons li:hover .facebook{

background-color:rgba(59,89,152,1);

}

.touch #bloggertrix-SexySocialButtons li .twitter, #bloggertrix-SexySocialButtons li:hover .twitter{

background-color:rgba(64,153,255,1);

}

.touch #bloggertrix-SexySocialButtons li .googleplus, #bloggertrix-SexySocialButtons li:hover .googleplus{

background-color:rgba(228,69,36,1);

}

.touch #bloggertrix-SexySocialButtons li .YouTube, #bloggertrix-SexySocialButtons li:hover .YouTube{

background-color:rgba(174,45,39,1);

}

.touch #bloggertrix-SexySocialButtons li .rss, #bloggertrix-SexySocialButtons li:hover .rss{

background-color:rgba(255,102,0,1);

}

</style>

<div class="bloggertrixSocialButtonsBorder">

<ul id="bloggertrix-SexySocialButtons">

<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/Username">Follow us on Facebook</a></li>

<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/tesBlogs">Follow us on Twitter</a></li>

<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/108021608037797119476">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/GhiyatsBlogs">Subscribe with RSS</a></li></ul></div>