Widget Social Media Style Ekstrak Hover untuk Blogger - Tempat Blogging

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.



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.
Show comments
Hide comments

0 Response to "Widget Social Media Style Ekstrak Hover untuk Blogger"

Post a Comment

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close