Widget Social Media Style Ekstrak Hover untuk Blogger

Dalam tutorial ini saya akan menjelaskan bagaimana menambahkan Widget Social Media Style Ekstrak Hover untuk Blogger. dengan menggunakan widget ini Anda dapat menghubungkan profil sosial media
Facebook, Twitter dan Rss Google plus dan YouTube. Ingin tau caranya simak Tutorial Berikut.

All Widget Social Media  All RSS Widget

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>

Anda harus mengubah counter manual, hanya mengubah nomor warna merah sesuai dengan profil.


Ganti TempatBlogging dengan nama pengguna Facebook Anda
Ganti TempatBlogging dengan Twitter Nama
Ganti ID Google Plus dengan Google Anda ditambah ID
Ganti Nama dengan Username Youtube Anda
Ganti TempatBlogging dengan Feedburner ID

4. Sekarang menyimpan HTML / Javascript .

Sekian dulu Artikel ini yang membahas tentang Widget Social Media Style Ekstrak Hover untuk Blogger. semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post