Blogger Slider Sosyal Medya Butonları

<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {font-family: 'Fira Sans Condensed', sans-serif;-webkit-font-smoothing: antialiased;margin: 0 auto 0 auto;}
.slider-shares {margin:20px 0;padding:20px;text-align:center;}
.slider-shares a{cursor: pointer;position:relative;display:inline-block;height:36px;width:160px;line-height:35px;padding:0;color:#fff;border-radius:50px;background:#fff;margin:5px;text-shadow:2px 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.24);}
.slider-shares a:hover span.circle{left:100%;margin-left:-35px;background:#fff!important;}
.slider-shares a:hover span.title {opacity:0;}
.slider-shares a:hover span.title-hover{opacity:1;color:#fff;}
.slider-shares a span.title-hover{opacity:0;}
.slider-shares a span.circle{display:block;color:#fff;position:absolute;float:left;margin:3px;line-height:30px;height:30px;width:30px;top:0;left:0;transition:.5s;border-radius:50%;}
.slider-shares a span.circle i{width:100%;text-align:center;font-size:16px;line-height:30px;}
.slider-shares a span.title,.slider-shares a span.title-hover{position:absolute;text-align:center;margin:0 auto;font-size:16px;font-weight:400;transition:.5s;}
.slider-shares a span.title{right:15px}
.slider-shares a span.title-hover{left:15px}
/* CSS Color Buttons */
.slider-shares .more{border:2px solid #F9A533;}
.slider-shares .more:hover, .slider-shares .more span.circle{background:#F9A533;}
.slider-shares .more:hover span.circle, .slider-shares .more span.title{color:#F9A533;}
.slider-shares .facebook{border:2px solid #3b5998;}
.slider-shares .facebook:hover, .slider-shares .facebook span.circle{background:#3b5998;}
.slider-shares .facebook:hover span.circle, .slider-shares .facebook span.title{color:#3b5998;}
.slider-shares .twitter{border:2px solid #1da1f2;}
.slider-shares .twitter:hover, .slider-shares .twitter span.circle{background:#1da1f2;}
.slider-shares .twitter:hover span.circle, .slider-shares .twitter span.title{color:#1da1f2;}
.slider-shares .gplus{border:2px solid #dd4b39;}
.slider-shares .gplus:hover, .slider-shares .gplus span.circle{background:#dd4b39;}
.slider-shares .gplus:hover span.circle, .slider-shares .gplus span.title{color:#dd4b39;}
.slider-shares .tumblr{border:2px solid #35465c;}
.slider-shares .tumblr:hover, .slider-shares .tumblr span.circle{background:#35465c;}
.slider-shares .tumblr:hover span.circle, .slider-shares .tumblr span.title{color:#35465c;}
.slider-shares .pinterest{border:2px solid #bd081c;}
.slider-shares .pinterest:hover, .slider-shares .pinterest span.circle{background:#bd081c;}
.slider-shares .pinterest:hover span.circle, .slider-shares .pinterest span.title{color:#bd081c;}
.slider-shares .digg{border:2px solid #005be2;}
.slider-shares .digg:hover, .slider-shares .digg span.circle{background:#005be2;}
.slider-shares .digg:hover span.circle, .slider-shares .digg span.title{color:#005be2;}
.slider-shares .linkedin{border:2px solid #0077b5;}
.slider-shares .linkedin:hover, .slider-shares .linkedin span.circle{background:#0077b5;}
.slider-shares .linkedin:hover span.circle, .slider-shares .linkedin span.title{color:#0077b5;}
.slider-shares .stumbleupon{border:2px solid #eb4924;}
.slider-shares .stumbleupon:hover, .slider-shares .stumbleupon span.circle{background:#eb4924;}
.slider-shares .stumbleupon:hover span.circle, .slider-shares .stumbleupon span.title{color:#eb4924;}
.slider-shares .delicious{border:2px solid #3399ff;}
.slider-shares .delicious:hover, .slider-shares .delicious span.circle{background:#3399ff;}
.slider-shares .delicious:hover span.circle, .slider-shares .delicious span.title{color:#3399ff;}
.slider-shares .reddit{border:2px solid #5f99cf;}
.slider-shares .reddit:hover, .slider-shares .reddit span.circle{background:#5f99cf;}
.slider-shares .reddit:hover span.circle, .slider-shares .reddit span.title{color:#5f99cf;}
.slider-shares .whatsapp{border:2px solid #25d366;}
.slider-shares .whatsapp:hover, .slider-shares .whatsapp span.circle{background:#25d366;}
.slider-shares .whatsapp:hover span.circle, .slider-shares .whatsapp span.title{color:#25d366;}
.slider-shares .email{border:2px solid #BCBCBC;}
.slider-shares .email:hover, .slider-shares .email span.circle{background:#BCBCBC;}
.slider-shares .email:hover span.circle, .slider-shares .email span.title{color:#BCBCBC;}
.slider-shares .gmail{border:2px solid #B92D20;}
.slider-shares .gmail:hover, .slider-shares .gmail span.circle{background:#B92D20;}
.slider-shares .gmail:hover span.circle, .slider-shares .gmail span.title{color:#B92D20;}
.slider-shares .outlook{border:2px solid #1E70B6;}
.slider-shares .outlook:hover, .slider-shares .outlook span.circle{background:#1E70B6;}
.slider-shares .outlook:hover span.circle, .slider-shares .outlook span.title{color:#1E70B6;}
.slider-shares .qrcode{border:2px solid #883482;}
.slider-shares .qrcode:hover, .slider-shares .qrcode span.circle{background:#883482;}
.slider-shares .qrcode:hover span.circle, .slider-shares .qrcode span.title{color:#883482;}
#share-menu{transform-origin:top;display:none;}
/* Css Responsive */
@media screen and (max-width:480px) {
.slider-shares a{width:100%;margin:0;margin-bottom:10px;}}
</style>
</head>
<body>
<div class='slider-shares'>
Sosya Ağ Paylaşım Butonları
<a class='facebook' href='https://www.facebook.com/sharer/sharer.php?u=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'>FacebookCompartir</a>
<a class='twitter' href='https://twitter.com/intent/tweet?url=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'>TwitterShare</a>
<a class='gplus' href='https://plus.google.com/share?url=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'>Google+Share</a>
<a class='more'>MoreClic here</a>
<div id='share-menu'>
<a class='tumblr' href='https://www.tumblr.com/widgets/share/tool?shareSource=legacy&amp;posttype=link&amp;content=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'>TumblrShare</a>
<a class='pinterest' href='https://pinterest.com/pin/create/button/?url=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'>PinterestShare</a>
<a class='digg' href='https://digg.com/submit?url=' onclick='openPopup(this.href,640,430);' target='_blank'>DiggShare</a>
<a class='linkedin' href='https://linkedin.com/shareArticle?mini=true&amp;url=' onclick='openPopup(this.href,640,430);' target='_blank'>LinkedInShare</a>
<a class='stumbleupon' href='http://stumbleupon.com/submit?url=' onclick='openPopup(this.href,640,430);' target='_blank'>StumbleuponShare</a>
<a class='delicious' href='http://delicious.com/post?url=' onclick='openPopup(this.href,640,430);' target='_blank'>DeliciuosShare</a>
<a class='reddit' href='http://reddit.com/submit?url' onclick='openPopup(this.href,640,430);' target='_blank'>RedditShare</a>
<a class='whatsapp' data-action='share/whatsapp/share' href='whatsapp://send?text=' onclick='openPopup(this.href,640,430);' target='_blank'>WhatsappSend</a>
<a class='email' href='mailto:?subject='>MailSend</a>
<a class='gmail' href='https://mail.google.com/mail/?view=cm&amp;fs=1&amp;to&amp;su=' onclick='openPopup(this.href,640,430);' target='_blank'>GmailSend</a>
<a class='outlook' href='http://www.hotmail.msn.com/secure/start?action=compose&amp;to=&amp;subject=' onclick='window.open(this.href,this.target,&apos;width=700,height=500,top=210,left=260&apos;); return false;' target='_blank'>OutlookSend</a>
<a class='qrcode' href='http://api.qrserver.com/v1/create-qr-code/?data=' onclick='openPopup(this.href,640,430);' target='_blank'>Create QRCreate</a>
</div> 
<a class='more' href='https://codepen.io/AlexxTrs/pen/ezYaoP' target="_blank">Version 3.0Click here</a>
</div>
</script><script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>//<![CDATA[
// Share Toggle
$(".slider-shares .more").click(function(){$("#share-menu").slideToggle("fast")});
/*
var dispositivo = navigator.userAgent.toLowerCase();
if(dispositivo.search(/iphone|ipod|ipad|android/)<=-1)
$(".slider-shares .whatsapp,.slider-shares .email").remove();
else
$(".slider-shares .gmail,.slider-shares .outlook").remove();
*/
function openPopup(url,w,h) {
var top = ($(window).height()-h)/2,left = ($(window).width()-w)/2;
share=window.open(url + document.URL,'','width='+w+',height='+h+',top='+top+',left='+left+',scrollbars=NO,menubar=NO,titlebar= NO,status=NO,toolbar=NO');
share.focus();
return false;
}
//]]>
</script>
</body>
</html>

Kodeks Editör

Blogger Slider Sosyal Medya Butonları

"Blogger Slider Sosyal Medya Butonları" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Blogger Slider Sosyal Medya Butonları

"Blogger Slider Sosyal Medya Butonları" 0 Yorum yapıldı.

Yorum Gönder