Dalam hal ini dapat kita pelajari dari blog terselubung, blog yang pemiliknya selalu memakai topeng ini memiliki lebih dari 50.000 kunjungan perharinya lewat jejaring sosial, itu karena pemiliknya rajin bergelut dan menekuni akun yang telah dibuatnya, hingga kini followers di twitternya hampir mencapai 600.000 orang, bayangkan saja jika semuanya mengunjungi link dari postingan yang dibagikan ke timeline-nya, fantastis bukan!
Selain melihat dari benefit atau keuntungan yang ditawarkanya, widget social media juga dapat kita jadikan sebagai sarana mempercantik penampilan blog, dengan icon-icon social media yang berwarna-warni kita dapat memberikan suatu daya tarik tersendiri kepada pengunjung, dan juga didukung dengan efek hover style yang menawan pada widget visitor friendly ini.
Cara Membuat Widget Social Media Hover Style
1. Login ke Blogger.
2. Pilih Tata Letak / Layout.
3. Klik Add Gadget.
4. Pilih HTML/JavaScript.
5. Letakkan kode dibawah ini kedalamnya.
<style>
.StarsBloggingSocialButtonsBorder {
margin:0 auto;
padding:5px;
width:auto;
border-radius:5px;
border: 1px #BBBBBB solid;
}
#tuliskancom-SexySocialButtons{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#tuliskancom-SexySocialButtons a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#tuliskancom-SexySocialButtons li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#tuliskancom-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;
}
#tuliskancom-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;
}
#tuliskancom-SexySocialButtons .icon{
overflow:hidden;
color:#fafafa;
}
#tuliskancom-SexySocialButtons .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#tuliskancom-SexySocialButtons .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#tuliskancom-SexySocialButtons .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#tuliskancom-SexySocialButtons .YouTube{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:-2px -95px;
}
#tuliskancom-SexySocialButtons .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#tuliskancom-SexySocialButtons li:hover .icon,
.touch #tuliskancom-SexySocialButtons li .icon{
width:210px;
}
.touch #tuliskancom-SexySocialButtons li .facebook, #tuliskancom-SexySocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #tuliskancom-SexySocialButtons li .twitter, #tuliskancom-SexySocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #tuliskancom-SexySocialButtons li .googleplus, #tuliskancom-SexySocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #tuliskancom-SexySocialButtons li .YouTube, #tuliskancom-SexySocialButtons li:hover .YouTube{
background-color:rgba(174,45,39,1);
}
.touch #tuliskancom-SexySocialButtons li .rss, #tuliskancom-SexySocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>
<div class="tuliskancomSocialButtonsBorder">
<ul id="tuliskancom-SexySocialButtons">
<li data-alt="Like us on Facebook"><a class="icon facebook" href="https://www.facebook.com/tuliskancom">Like us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/tuliskancom">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/Google+ ID">Follow us on Google+</a></li>
<li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="https://youtube.com/YoutubeUsername">Subscribe us on YouTube</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/tuliskancom">Subscribe with RSS</a></li></ul></div>
Keterangan:
- Ganti kode yang berwarna biru dengan nama Fan Page / ID Akun Facebook anda.
- Ganti kode yang berwarna biru muda dengan username twitter anda.
- Ganti kode yang berwarna merah dengan ID Google+ anda.
- Ganti kode yang berwarna hijau dengan Username Youtube anda.
- Ganti kode yang berwarna oranye dengan ID Feedburner anda.
6. Klik "Save/Simpan", dan selesai.
Demikian informasi terbaru seputar tutorial blogging tentang cara membuat widget social media dengan efek hover style, semoga bermanfaat, dan selamat mencoba.
Situs Referensi : Bloggertrix
EmoticonEmoticon