share button melayang di blog
Ada juga kesempatan mebuat postingan lagi ini sahabat seoke.com.nah kesempatan kali ini seoke.com akan berbagi tentang membuat share button melayang di blog.sangat berbeda dengan apa yang telah seoke.com potingkan sebelumnya tentang Membuat sahre button sederhana.
kiat langsung lihat aja youk code codenya seperti apa.Namun sebelum kalian di bawa ke pembahasan di atas kalian juga harus mengerti dengan cara penempatan code code tersebut.jika kalian belum mengerti dengan cara penempatan code code tersebut seoke.com telah memperisapkan tentannga pengertian html pada css dan javascript untuk blog tersebut.
foto By mieaaamel09.blogspot.co.id
oke ketehap penerapan kode code sahre button di blog.
- yang kalian harus lakukan yang pasti sudah masuk pada egit HTMl pada template blognya
- dan cari code ]]><b:skin> atau <?style>dan letakam kode di bawah ini tepat di atas kode tersebut.
/*share button seoke.com*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class^="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
body {
background: url(http://i43.tinypic.com/vewt4k.png);
}
#social-sidebar {
left: 0;
position: fixed;
top: 10%;
}
#social-sidebar li:first-child a { border-top-right-radius: 5px; }
#social-sidebar li:last-child a { border-bottom-right-radius: 5px; }
#social-sidebar a {
background: rgba(0,0,255,0.3);
color: #fff;
text-decoration: none;
display : block;
height: 50px;
width: 50px;
font-size: 24px;
line-height: 50px;
position: relative;
text-align: center;
cursor: pointer;
}
#social-sidebar a:hover span {
left: 120%;
opacity: 1;
}
#social-sidebar a span {
font: 12px "Open Sans", sans-serif;
text-transform: uppercase;
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
opacity: 0;
padding: 4px 8px;
position: absolute;
transition: opacity .3s, left .4s;
top: 50%;
z-index: 1;
}
#social-sidebar a span:before {
content: "";
display: block;
height: 8px;
width: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
transform: rotate(45deg);
}
#social-sidebar a[class*="twitter"]:hover,
#social-sidebar a[class*="twitter"] span,
#social-sidebar a[class*="twitter"] span:before {background: #00aced;}
#social-sidebar a[class*="facebook"]:hover,
#social-sidebar a[class*="facebook"] span,
#social-sidebar a[class*="facebook"] span:before {background: #3B5998;}
#social-sidebar a[class*="gplus"]:hover,
#social-sidebar a[class*="gplus"] span,
#social-sidebar a[class*="gplus"] span:before {background: #E34429;}
#social-sidebar a[class*="dribbble"]:hover,
#social-sidebar a[class*="dribbble"] span,
#social-sidebar a[class*="dribbble"] span:before {background: #ea4c89;}
#social-sidebar a[class*="instagram"]:hover,
#social-sidebar a[class*="instagram"] span,
#social-sidebar a[class*="instagram"] span:before {background: #704306;}
#social-sidebar a[class*="pinterst"]:hover,
#social-sidebar a[class*="pinterst"] span,
#social-sidebar a[class*="pinterst"] span:before {background: #f83a3a;}
#social-sidebar a[class*="rss"]:hover,
#social-sidebar a[class*="rss"] span,
#social-sidebar a[class*="rss"] span:before {background: #f2a843;}
cari kode <div id=sidebar-wrapper>dan letakan juga tepadi bawah kode tersebut,atau kalian juga bisa pasang kode tersebut sesuai dengan apa yang kalian inginkan.
<ul id='social-sidebar'>
<li>
<a class='entypo-twitter' href='http://www.twitter.com' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/><span>Tweeter</span></a>
</li>
<li>
<a class='entypo-facebook' href='http://www.facebook.com' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/><span>Facebook</span></a>
</li>
<li>
<a class='entypo-gplus' href='http://www.plusgoogle.com' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/><span>Google+</span></a>
</li>
<li>
<a class='entypo-dribbble' href='http://www.dribble.com' rel='nofollow' target='_blank' title='Follow us on Dribble'><i class='fa fa-dribbble '/><span>Dribbble</span></a>
</li>
<li>
<a class='entypo-instagram' href='http://www.instagram.com' rel='nofollow' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram '/><span>instagram</span></a>
</li>
<li>
<a class='entypo-pinterst' href='http://www.pinterest.com' rel='nofollow' target='_blank' title='Follow us on Pinterest'><i class='fa fa-pinterest '/><span>pinterst</span></a>
</li>
<li>
<a class='entypo-rss' href='http://www.feedburner.com' rel='nofollow' target='_blank' title='Follow us on RSS'><i class='fa fa-rss '/><span>rss</span></a>
</li>
</ul>
dan simpan template tersebut dan lihat hasinya.
mungkin cuma segitu yang seoke.com bisa postingkan,dan baca juga artikel seoke.com yang menarik lainya sperti cara membuat slide gambar di blog.
terima kasih telah berkenan mengunjungi blog seoke.com yang selalu berusaha untuk menyajikan code code untuk blog
Ditulis Oleh : Seoke.com Blogger
Terima kasih telah berkunjung di share button melayang di blog.Silahkan kalian masukan mail kalian untuk berlangganan lewat mail tentang artikel terbaru dari SEOKE.COM.
0 komentar:
Post a Comment