Menambahkan gadget sosial pada blog dapat membuat pengunjung terlibat dalam media sosial yang anda buat.
Berikut ini caranya :
1. Masuk desain à tata letak
2. Tambah gadget
3. Pilih HTML / Java Script
4. Masukkan kode :
<style>
#tbisose{list-style:none;
text-decoration:none; font-size:0.9em; font-family:trebuchet
ms,sans-serif;}
#tbisose a{text-decoration:none;
font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative;
height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus,
.pinterest, .rss, .twitter{position:relative; z-index:5; display:block;
float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVprlNSao4ynN8zo9aGtBDDWiCOEyiOld7bCqgTMHgUPhD_z5fF1b1BpmyeV-IbvpcG4NIAhrZGEWjVabemendYTF2AhrXTEdIWy4cpJ8ZzXWdO8OVkQ65wd4cP-kCl2BhxatMA0WfDM/s800/sprites.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;}
#tbisose li:after{position:absolute;
top:0; left:50px; z-index:2; display:block; height:38px; color:#141414;
content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden;
color:#fafafa;}
#tbisose .facebook{width:32px;
height:32px; background-color:rgba(59,89,152,0.42); background-position:0
0;}
#tbisose .twitter{width:32px;
height:32px; background-color:rgba(64,153,255,0.42); background-position:0
-33px;}
#tbisose .googleplus{width:32px;
height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px
-66px;}
#tbisose .pinterest{width:32px;
height:32px; background-color:rgba(174,45,39,0.42); background-position:0
-95px;}
#tbisose .rss{ width:32px;
height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px
-126px;}
#tbisose li:hover .icon,
.touch #tbisose li
.icon{width:210px;}
.touch #tbisose li .facebook,
#tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter,
#tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus,
#tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest,
#tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose
li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul
id="tbisose">
<li data-alt="Follow us on
Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on
Twitter"><a class="icon twitter" href="#">Follow
us on Twitter</a></li>
<li data-alt="Follow us on
Google+"><a class="icon googleplus" href="#">Follow
us on Google+</a></li>
<li data-alt="Follow us on
Pinterest"><a class="icon pinterest" href="#">Follow
us on Pinterest</a></li>
<li data-alt="Subscribe with
RSS"><a class="icon rss" href="#">Subscribe
with RSS</a></li>
</ul>
<small><div style="font-size:80%;
text-align:right; text-shadow:2px 2px 2px #adadad;"><a
href="http://zhalltrozans.blogspot.com/2013/03/cara-membuat-tombol-social-media-keren.html"
target="_blank" title="Widget Follow Us">+ Get This
Widget Here</a></div></small>
5. simpan
Tidak ada komentar:
Posting Komentar