Adapun Cara membuat : ( Icon Share With Hover Slide ) sebagai berikut :
1. Login ke akun blogger
2. Klik tema
3. Edit html
Masukan CSS di bawah ini :
#media {
border-radius: 5px;
padding: 14px 7px;
background: white;
width: 660px;
overflow: hidden;
margin: 50px auto 0;
box-shadow:0 2px 3px rgba(71, 71, 71, 0.31)}
.share {
background: #DCE0E0;
position: relative;
display: block;
float: left;
height: 40px;
margin: 0 7px;
overflow: hidden;
width: 150px;
border-radius: 3px}
.icon {
display: block;
float: left;
position: relative;
z-index: 3;
height: 100%;
vertical-align: top;
width: 38px;
border-radius: 3px 0px 0px 3px;
text-align: center}
.slide {
z-index: 2;
display: block;
margin: 0;
height: 100%;
left: 38px;
position: absolute;
width: 112px;
border-radius: 0px 3px 3px 0px}
.slide p {
font:400 16px Open Sans;
border-left: 1px solid #fff;
border-left: 1px solid rgba(255,255,255,0.35);
left: 0;
margin: 0;
color: #fff;
position: absolute;
text-align: center;
top: 10px;
width: 100%}
.share .slide {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out}
.icon i {color:#fff;line-height:42px;text-shadow:1px 2px 1px #111}
.facebook iframe,.twitter iframe,.google #___plusone_0,
.linkedin .IN-widget {display:block;position:absolute;top:10px;z-index:1}
.linkedin .IN-widget {right:22px}
.facebook iframe {right:16px}
.twitter iframe {width:90px !important;right:5px}
.google #___plusone_0 {width:70px !important;right:15px}
.facebook:hover .slide,.twitter:hover .slide {left:150px}
.google:hover .slide,.linkedin:hover .slide {left:-150px}
.facebook .icon,.facebook .slide {background:#305c99}
.twitter .icon,.twitter .slide {background:#00cdff}
.google .icon,.google .slide {background:#d24228}
.linkedin .icon,.linkedin .slide {background:#007bb6}
Masukan Kode HTML di bawah ini :
<div id="media">
<div class="facebook share"> // Icon media Facebook
<i class="icon"><i class="icon-facebook"></i></i><div class="slide">
<p>facebook</p></div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowTransparency="true"></iframe>
</div>
<div class="twitter share"> // Icon media Twitter
<i class="icon"><i class="icon-twitter"></i></i><div class="slide">
<p>twitter</p></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">Tweet</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
<div class="google share"> // Icon media Google+
<i class="icon"><i class="icon-google-plus"></i></i><div class="slide">
<p>google+</p></div>
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div>
<div class="linkedin share"> // Icon media Linkedin
<i class="icon"><i class="icon-linkedin"></i></i><div class="slide">
<p>linkedin</p></div>
<script type="IN/Share" data-counter="right"></script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
</div>
</div> <!..ending id tag 'media'..!>
Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah
simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror,
dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.
Demikian Cara membuat ( Icon Share With Hover Slide ) semoga bermanfaat terima kasih.
Tidak ada komentar
Posting Komentar