<!DOCTYPE html>
<html>
<head>
<style>
.ShareButtons {
margin: 0;
padding: 0;
width: 100%;
margin-bottom: 12px;
list-style-type: none;
background: #ccc;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -ms-flexbox;
display: -moz-flex;
display: flex
}
.ShareButtons svg {
display: inline-block;
height: 30px;
margin: 4px 0;
vertical-align: top;
width: 30px;
fill: #fff
}
.ShareButtons .gp-btn svg {
margin: 2px 0;
height: 34px;
width: 34px
}
.ShareButtons li {
height: 38px;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
.ShareButtons li a {
height: 38px;
display: block;
text-align: center;
cursor: pointer;
}
.ShareButtons li.fb-btn a {
background: #3b5998
}
.ShareButtons li.tw-btn a {
background: #42a4f5
}
.ShareButtons li.in-btn a {
background: #008cc9
}
.ShareButtons li.in-btn a {
background: #0077b5
}
.ShareButtons li.gp-btn a {
background: #d74314
}
.ShareButtons li.pin-btn a {
background: #cb2027
}
.ShareButtons li.ws-btn a {
background: #4dc247
}
.ShareButtons li.print-btn a {
background: #959595
}
.ShareButtons li.mail-btn a {
background: #acacac
}
.ShareButtons li.ws-btn a:hover {
background: #43ad3d;
}
.ShareButtons li.fb-btn a:hover {
background: #05345c
}
.ShareButtons li.in-btn a:hover {
background: #008cc9
}
.ShareButtons li.tw-btn a:hover {
background: #3678af
}
.ShareButtons li.gp-btn a:hover {
background: #791407
}
.ShareButtons li.pin-btn a:hover {
background: #8f2217
}
.ShareButtons li.print-btn a:hover,
.ShareButtons li.mail-btn a:hover {
background: #797979
}
</style>
</head>
<body>
<ul class='ShareButtons'>
<li class='fb-btn'>
<a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Facebook'>
<svg alt='Facebook' title='Facebook' viewBox='0 0 32 32'>
<title>Facebook</title>
<path d='M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z' />
</svg>
</a>
</li>
<li class='tw-btn'>
<a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Twitter'>
<svg alt='Twitter' title='Twitter' viewBox='0 0 32 32'>
<title>Twitter</title>
<path d='M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336' />
</svg>
</a>
</li>
<li class='in-btn'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Linkedin'>
<svg alt='LinkedIn' title='LinkedIn' viewBox='0 0 32 32'>
<title>LinkedIn</title>
<path d='M26 25.963h-4.185v-6.55c0-1.56-.027-3.57-2.175-3.57-2.18 0-2.51 1.7-2.51 3.46v6.66h-4.182V12.495h4.012v1.84h.058c.558-1.058 1.924-2.174 3.96-2.174 4.24 0 5.022 2.79 5.022 6.417v7.386zM8.23 10.655a2.426 2.426 0 0 1 0-4.855 2.427 2.427 0 0 1 0 4.855zm-2.098 1.84h4.19v13.468h-4.19V12.495z' />
</svg>
</a>
</li>
<li class='gp-btn'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank' title='Google+'>
<svg alt='Google+' title='Google+' viewBox='0 0 32 32'>
<title>Google+</title>
<path d='M12 15v2.4h3.97c-.16 1.03-1.2 3.02-3.97 3.02-2.39 0-4.34-1.98-4.34-4.42s1.95-4.42 4.34-4.42c1.36 0 2.27.58 2.79 1.08l1.9-1.83C15.47 9.69 13.89 9 12 9c-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.72-2.84 6.72-6.84 0-.46-.05-.81-.11-1.16H12zm15 0h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z' />
</svg>
</a>
</li>
<li class='pin-btn'>
<a expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' title='Pinterest'>
<svg alt='Pinterest' title='Pinterest' viewBox='0 0 32 32'>
<title>Pinterest</title>
<path d='M7 13.252c0 1.81.772 4.45 2.895 5.045.074.014.178.04.252.04.49 0 .772-1.27.772-1.63 0-.428-1.174-1.34-1.174-3.123 0-3.705 3.028-6.33 6.947-6.33 3.37 0 5.863 1.782 5.863 5.058 0 2.446-1.054 7.035-4.468 7.035-1.232 0-2.286-.83-2.286-2.018 0-1.742 1.307-3.43 1.307-5.225 0-1.092-.67-1.977-1.916-1.977-1.692 0-2.732 1.77-2.732 3.165 0 .774.104 1.63.476 2.336-.683 2.736-2.08 6.814-2.08 9.633 0 .87.135 1.728.224 2.6l.134.137.207-.07c2.494-3.178 2.405-3.8 3.533-7.96.61 1.077 2.182 1.658 3.43 1.658 5.254 0 7.614-4.77 7.614-9.067C26 7.987 21.755 5 17.094 5 12.017 5 7 8.15 7 13.252z' />
</svg>
</a>
</li>
<li class='ws-btn'>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.url' target='_blank' title='Whatsapp'>
<svg alt='WhatsApp' title='WhatsApp' viewBox='0 0 32 32'>
<title>WhatsApp</title>
<path d='M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z' />
</svg>
</a>
</li>
<li class='print-btn'>
<a href='javascript:print(document)'>
<svg alt='Yazdır' title='Yazdır' version='1.1' viewBox='0 0 32 32'>
<title>Print</title>
<path d='M24.67 10.62h-2.86V7.49H10.82v3.12H7.95c-.5 0-.9.4-.9.9v7.66h3.77v1.31L15 24.66h6.81v-5.44h3.77v-7.7c-.01-.5-.41-.9-.91-.9zM11.88 8.56h8.86v2.06h-8.86V8.56zm10.98 9.18h-1.05v-2.1h-1.06v7.96H16.4c-1.58 0-.82-3.74-.82-3.74s-3.65.89-3.69-.78v-3.43h-1.06v2.06H9.77v-3.58h13.09v3.61zm.75-4.91c-.4 0-.72-.32-.72-.72s.32-.72.72-.72c.4 0 .72.32.72.72s-.32.72-.72.72zm-4.12 2.96h-6.1v1.06h6.1v-1.06zm-6.11 3.15h6.1v-1.06h-6.1v1.06z' />
</svg>
</a>
</li>
<li class='mail-btn'>
<a expr:href='"mailto:url=" + data:post.url + "&title=" + data:post.title'>
<svg alt='E-posta' title='E-posta' viewBox='0 0 32 32'>
<title>Email</title>
<path d='M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z' />
<path d='M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z' />
</svg>
</a>
</li>
</ul>
</body>
</html>
Blogger Buton etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Buton etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
App Store İndirme Butonu
Blogger Buton Blogger CSS<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face{font-family:"Product Sans";src:url("https://rawgit.com/jquerycods/Fonts-family/master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
a.btn-apple{color:#fff}
.app-btn{padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.app-btn:active:focus,.app-btn:focus{outline:0}
.app-btn:focus,.app-btn:hover{color:#333;text-decoration:none;outline:0}
.app-btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-apple{color:#fff;background-color:#111;border-color:#000;padding:5px 20px 20px 50px;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-apple:focus{color:#fff;background:#555;border-color:#000}
.btn-apple:active,.btn-apple:hover{color:#fff;background:#555;border-color:#000;}
.btn-apple:before{content:"";background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAk1BMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////82Vn9fAAAAMHRSTlMAfOgjku5v/OH0vJk09hTJAWKrtSjN+Q6LRy6gOLndWz9Yh4LFRUp1syDvG6UM+tehAitYAAAAwklEQVQYGa3AR5KDMBQE0AYEkgCTg3P25ND3P91UjTdfKmvnh2dro28EJV28R9Cck1cEFZr6gJBhJAsE3a5G4ZH5dLmcZtyS41mdDw1cLzsz/Zi8UP2vpja7LaRjzH964l1cQYjpGSFE9NQNBEPX1EJoLF3jFsLa0tUnEEpLVz5AqCxd+xWklJ4lpJwem0Fo6bNLCJo+A2FD3yuE8oOuFI6MrhUcn18UtIKn7BZM67eurxdMNwl871GRDQDWkcoqPMUfk6U4HEReMukAAAAASUVORK5CYII=);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;left:10px;top:50%;margin-top:-16px}
.btn-apple:after{content:"'Den indirin";position:absolute;bottom:5px;left:50px;font-size:11px;font-weight:400}
</style>
</head>
<body>
<a class="app-btn btn-apple" href="#" title="App Store'dan İndir">App Store</a>
</body>
</html>
App Store ve Google Play İndirme Butonu
Blogger Buton Blogger CSS<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face{font-family:"Product Sans";src:url("https://rawgit.com/jquerycods/Fonts-family/master/product-sans-regular.ttf") format("ttf");font-style:normal;font-weight:normal}
a.btn-google,a.btn-apple,a.btn-apple:hover,a.btn-google:hover{color:#fff}
.app-btn{display:inline-block;font-size:18px;line-height:1.3333333;text-align:center;border-radius:6px;padding:10px 16px;margin:5px;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:500;border:1px solid transparent;text-decoration:none}
.app-btn:active:focus,.app-btn:focus{outline:0}
.app-btn:focus,.app-btn:hover{text-decoration:none;outline:0;color:#222}
.app-btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.123);box-shadow:inset 0 3px 5px rgba(0,0,0,.123)}
.btn-google,.btn-apple{background:#111;border-color:#111;color:#fff;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-google,.btn-apple{padding:5px 15px 20px 45px;}
.btn-apple{padding:5px 15px 20px 50px;}
.btn-google:focus,.btn-apple:focus{color:#fff;background:#444;border-color:#000}
.btn-google:active,.btn-google:hover,.btn-apple:active,.btn-apple:hover{background:#444;border-color:#111;color:#fff}
.btn-apple:before,.btn-google:before{background-size:cover;background-repeat:no-repeat;margin-top:-16px;width:30px;height:30px;position:absolute}
.btn-google:before{margin-top:-15px!important}
.btn-google:before{content:"";background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABXFBMVEVHcEz/xwj/3BrvzQAAy//30AAb8YAA4f8A2f8A0v//0yk/8pv/3Q3/0xb/3zsA9Yn70wAW8X3TAECKdQD4ygDzNULiMT8t84zzNEbmMEMT8XwAAAAh8YXmLkfGJj1B4lgfn/9M76MAxv/kK0kb33s524o15YzSJkYa6n7YJE7WJkvjKU0A8XYA2f8Azv8Ayf8Awv8Ax/8A3v8A6v8A0/8A0f8A1v8AzP8A4f8A3P8A82f/zgD/ygAA1f8A0tj/xgD8N0b3M0kA4///1wD/0gAA5//5NUfyMEsA9Hz/wwD/LUf/JTIH+ny0fp0A93img6HxCUL1FDvuLE//4wAA83f/OEn/vQAN83r9HTevgZ8A73b4MFAH6GYDz9irg6D/3we730P/eDe51UD/cTW500C51jL/ZiS4daH/bzUA2OCahqUA0dgGy9gC8GcJ73oN1eEO5GoA9v8A7f/lKFHBJrdUAAAALHRSTlMA9L5+ZKS3ZGRkbjjC3UCX+9hLGMbkeGb4n/EMkMFDTicvZt/tb19x07uZ9noB8iEAAAExSURBVCjPvdLXcoJQEAZgUvSk9957xwKaYIsiUhQRJNEoanrv5f1nckikBchNZrK3387Ozu6PIH+v+dXfdOHldWXNnZf8j/XnjUU3bvcFGnUl73XjcDDQeFIKRzPOHPIHAw9RZacwNe7AnYk96PtRRTnMD3bbGfVpDhu8dg4bDlfot3JHJGR27rSly8JYyOTceTZO9faZeddw7rKcjMcyJ60GE6jud1flrMrUQY/OaVRz3811sskejUE60vSEwOdu45CpgTZ9OKAj344KfCqVu4jFMh7T5oDGvhwTeIaBfjYyjFhZdaJaIUkmVRodsp4F0AT0dLXCkmRpYuznUQFOEBh+XGQhT9o/pjJUma3NTiOOjItFubY85xgHgL+Lkry97hIm8CZKH1vuUb2XNpH/r0+zYUz0ADwFrwAAAABJRU5ErkJggg==);left:6px;top:50%}
.btn-google:after{content:"'Den indirin";position:absolute;left:45px;bottom:5px;font-size:11px;font-weight:400}
.btn-apple:before{content:"";background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAk1BMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////82Vn9fAAAAMHRSTlMAfOgjku5v/OH0vJk09hTJAWKrtSjN+Q6LRy6gOLndWz9Yh4LFRUp1syDvG6UM+tehAitYAAAAwklEQVQYGa3AR5KDMBQE0AYEkgCTg3P25ND3P91UjTdfKmvnh2dro28EJV28R9Cck1cEFZr6gJBhJAsE3a5G4ZH5dLmcZtyS41mdDw1cLzsz/Zi8UP2vpja7LaRjzH964l1cQYjpGSFE9NQNBEPX1EJoLF3jFsLa0tUnEEpLVz5AqCxd+xWklJ4lpJwem0Fo6bNLCJo+A2FD3yuE8oOuFI6MrhUcn18UtIKn7BZM67eurxdMNwl871GRDQDWkcoqPMUfk6U4HEReMukAAAAASUVORK5CYII=);left:10px;top:50%}
.btn-apple:after{content:"'Den indirin";position:absolute;font-size:11px;left:50px;bottom:5px;font-weight:400}
</style>
</head>
<body>
<a class="btn-apple app-btn" href="#" title="App Store'dan İndirin">App Store</a>
<a class="btn-google app-btn" href="#" title="Google Play'dan İndirin">Google Play</a>
</body>
</html>
Açılıp Kapanan Sosyal Paylaşım Butonları
Blogger Buton<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
/*<![CDATA[*/
.ss-btn,.ss_tool,.ss_tool h4{height:50px;width:50px}
.ss_tool{position:fixed;bottom:20px;right:20px;z-index:9999}
.ss-btn,.ss-btn li,.ss_tool h4{position:absolute;bottom:0;margin:0;left:0;padding:0}
.ss_tool h4{z-index:2}
.ss-btn{z-index:1}
.ss-btn:after{clear:both}
.ss-btn:after,.ss-btn:before{content:' ';display:table}
.ss-btn li{box-sizing:border-box;height:100%;line-height:50px;list-style:none;transition:all .3s ease-in-out;opacity:0}
.ss-btn li.ss-line a{background:#00c300}
.ss-btn li.ss-facebook a{background:#3d5a9c}
.ss-btn li.ss-tumblr a{background:#37455c}
.ss-btn li.ss-linkedin a{background:#0077b5}
.ss-btn li.ss-twitter a{background:#1da1f2}
.ss-btn li.ss-googleplus a{background:#d64b3f}
.ss-btn li.ss-pinterest a{background:#cb2027}
.ss-btn li.ss-whatsapp a{background:#4dc247}
.ss-btn li.ss-bbm a{background:#222}
.ss-btn a:hover {opacity:0.9}
.ss-btn li a,.ss_tool .show-share .show-less,.ss_tool .show-share .show-more{background:#ccc;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;height:50px;padding:0;position:relative;text-align:center;text-decoration:none;-webkit-transition:background .2s ease-in-out;transition:background .2s ease-in-out;width:50px;border-radius:100%;box-shadow: 0 2px 4px 0 rgba(0,0,0,.3)}
.ss_tool .show-share .show-less,.ss_tool .show-share .show-more{line-height:50px;margin:0;top:0;left:0;cursor:pointer;background:#0ca8ec}
.ss_tool .show-share .show-less{display:none}
.ss-btn li a .ss-icon{display:block;cursor:pointer}
.ss-btn li a .ss-icon svg{height:34px;width:34px;vertical-align:middle}
.ss_tool .show-share svg {height:24px;width:24px;vertical-align:middle}
.ss-btn li.ss-bbm a,.ss-btn li.ss-line a{padding:0}
.ss-btn li.ss-bbm a .ss-icon,.ss-btn li.ss-line a .ss-icon{padding-top:0}
.ss-btn li a .ss-icon svg circle,.ss-btn li a .ss-icon svg path{fill:#fff}
.ss_tool .show-share svg {fill:#fff}
.ss-btn li a .ss-text{color:#fff}
.ss-btn li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}
.ss_tool .show-share .rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-600deg);transform:rotate3d(0,0,1,-600deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}
@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-600deg);transform:rotate3d(0,0,1,-600deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}
/*]]>*/
</style>
</head>
<body>
<div class="ss_tool">
<h4 class='show-share'>
<div class="show-more rotateIn">
<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
</div>
<div class="show-less rotateIn">
<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</div>
</h4>
<ul class='ss-btn'>
<li class='ss-facebook'>
<a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Facebook'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Facebook" alt="Facebook"><path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-twitter'>
<a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Twitter'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Twitter" alt="Twitter"><path d="M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-googleplus'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank' title='Google+'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Google+" alt="Google+"><path d="M12 15v2.4h3.97c-.16 1.03-1.2 3.02-3.97 3.02-2.39 0-4.34-1.98-4.34-4.42s1.95-4.42 4.34-4.42c1.36 0 2.27.58 2.79 1.08l1.9-1.83C15.47 9.69 13.89 9 12 9c-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.72-2.84 6.72-6.84 0-.46-.05-.81-.11-1.16H12zm15 0h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-tumblr'>
<a expr:href='"https://tumblr.com/share/link?url=" + data:post.url + "&name=" + data:post.title + "&description=" + data:post.snippet' target='_blank' title='Tumblr'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Tumblr" alt="Tumblr"><path d="M19.59 22.176c-.392.186-1.14.348-1.695.362-1.682.045-2.008-1.18-2.022-2.07V13.93h4.218v-3.18H15.89V5.403h-3.076c-.05 0-.138.044-.15.157-.18 1.636-.947 4.51-4.133 5.66v2.71h2.124v6.862c0 2.35 1.733 5.688 6.308 5.61 1.544-.028 3.258-.674 3.637-1.23l-1.01-2.996" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-linkedin'>
<a expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Linkedin'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="LinkedIn" alt="LinkedIn"><path d="M26 25.963h-4.185v-6.55c0-1.56-.027-3.57-2.175-3.57-2.18 0-2.51 1.7-2.51 3.46v6.66h-4.182V12.495h4.012v1.84h.058c.558-1.058 1.924-2.174 3.96-2.174 4.24 0 5.022 2.79 5.022 6.417v7.386zM8.23 10.655a2.426 2.426 0 0 1 0-4.855 2.427 2.427 0 0 1 0 4.855zm-2.098 1.84h4.19v13.468h-4.19V12.495z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-pinterest'>
<a expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' title='Pinterest'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Pinterest" alt="Pinterest"><path d="M7 13.252c0 1.81.772 4.45 2.895 5.045.074.014.178.04.252.04.49 0 .772-1.27.772-1.63 0-.428-1.174-1.34-1.174-3.123 0-3.705 3.028-6.33 6.947-6.33 3.37 0 5.863 1.782 5.863 5.058 0 2.446-1.054 7.035-4.468 7.035-1.232 0-2.286-.83-2.286-2.018 0-1.742 1.307-3.43 1.307-5.225 0-1.092-.67-1.977-1.916-1.977-1.692 0-2.732 1.77-2.732 3.165 0 .774.104 1.63.476 2.336-.683 2.736-2.08 6.814-2.08 9.633 0 .87.135 1.728.224 2.6l.134.137.207-.07c2.494-3.178 2.405-3.8 3.533-7.96.61 1.077 2.182 1.658 3.43 1.658 5.254 0 7.614-4.77 7.614-9.067C26 7.987 21.755 5 17.094 5 12.017 5 7 8.15 7 13.252z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-whatsapp'>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.url' target='_blank' title='Whatsapp'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="WhatsApp" alt="WhatsApp"><path d="M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-line'>
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Line'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="LINE" alt="LINE"><path d="M27 14.926C27 10.006 22.065 6 16 6S5 10.005 5 14.926c0 4.413 3.913 8.11 9.2 8.808.358.077.845.236.968.542.112.278.073.713.036.995l-.157.942c-.048.28-.22 1.088.953.593 1.174-.494 6.334-3.73 8.642-6.386C26.236 18.67 27 16.896 27 14.925zm-4.247-.41a.577.577 0 0 1 0 1.153h-1.61v1.03h1.61a.578.578 0 0 1 0 1.155h-2.186a.578.578 0 0 1-.577-.577v-4.37c0-.32.26-.578.577-.578h2.186a.578.578 0 0 1 0 1.153h-1.61v1.033h1.61zm-3.537 2.762a.575.575 0 0 1-.578.577.58.58 0 0 1-.46-.23l-2.24-3.05v2.703a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.038-.347l2.24 3.05v-2.703a.578.578 0 0 1 1.154 0v4.37zm-5.26 0a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.153 0v4.37zm-2.262.577H9.508a.577.577 0 0 1-.576-.577v-4.37a.577.577 0 0 1 1.153 0V16.7h1.61a.577.577 0 0 1 0 1.155z" fill-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class='ss-bbm'>
<a expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target='_blank' title='Blackberry'>
<span class='ss-icon'>
<svg class="icon BlackBerry-Icon" viewBox="25 25 450 450"><path style="fill:#fff" d="M372.294,247.24c-20.741,0-43.104,0-43.104,0l11.749-54.368c0,0,30.344,0,41.403,0 c26.859,0,33.22,13.207,33.22,23.66C415.562,231.319,406,247.24,372.294,247.24z M399.519,293.991 c0,14.786-9.562,30.708-43.268,30.708c-20.741,0-43.104,0-43.104,0l11.748-54.407c0,0,30.346,0,41.364,0 C393.118,270.292,399.519,283.579,399.519,293.991z M271.945,198.585c-20.742,0-43.064,0-43.064,0l11.749-54.368 c0,0,30.304,0,41.323,0c26.899,0,33.3,13.207,33.3,23.659C315.254,182.663,305.651,198.585,271.945,198.585z M300.263,249.711 c0,14.787-9.561,30.708-43.268,30.708c-20.722,0-43.063,0-43.063,0l11.728-54.327c0,0,30.344,0,41.383,0 C293.903,226.092,300.263,239.259,300.263,249.711z M284.262,334.949c0,14.827-9.562,30.708-43.188,30.708 c-20.783,0-43.166,0-43.166,0l11.748-54.408c0,0,30.345,0,41.404,0C277.9,311.249,284.262,324.497,284.262,334.949z M156.607,198.585c-20.723,0-43.044,0-43.044,0l11.688-54.368c0,0,30.345,0,41.404,0c26.86,0,33.281,13.207,33.281,23.659 C199.935,182.663,190.313,198.585,156.607,198.585z M184.986,249.711c0,14.787-9.622,30.708-43.247,30.708 c-20.803,0-43.166,0-43.166,0l11.771-54.327c0,0,30.363,0,41.362,0C178.585,226.092,184.986,239.259,184.986,249.711z"/></svg>
</span>
</a>
</li>
</ul>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$(".ss_tool .show-share .show-more").click(function() {
$(".ss_tool .show-share .show-more").hide();
$(".ss_tool .show-share .show-less").show();
$(".ss-btn li.ss-facebook").css({
bottom: "468px",
opacity: "1"
});
$(".ss-btn li.ss-twitter").css({
bottom: "416px",
opacity: "1"
});
$(".ss-btn li.ss-googleplus").css({
bottom: "364px",
opacity: "1"
});
$(".ss-btn li.ss-tumblr").css({
bottom: "312px",
opacity: "1"
});
$(".ss-btn li.ss-linkedin").css({
bottom: "260px",
opacity: "1"
});
$(".ss-btn li.ss-pinterest").css({
bottom: "208px",
opacity: "1"
});
$(".ss-btn li.ss-whatsapp").css({
bottom: "156px",
opacity: "1"
});
$(".ss-btn li.ss-line").css({
bottom: "104px",
opacity: "1"
});
$(".ss-btn li.ss-bbm").css({
bottom: "52px",
opacity: "1"
});
});
$(".ss_tool .show-share .show-less").click(function() {
$(".ss_tool .show-share .show-more").show();
$(".ss_tool .show-share .show-less").hide();
$(".ss-btn li.ss-facebook,.ss-btn li.ss-twitter,.ss-btn li.ss-googleplus,.ss-btn li.ss-tumblr,.ss-btn li.ss-linkedin,.ss-btn li.ss-pinterest,.ss-btn li.ss-whatsapp,.ss-btn li.ss-line,.ss-btn li.ss-bbm").css({
bottom: "0",
opacity: "0"
})
})
});
//]]>
</script>
</body>
</html>
Mobil Uyumlu Sosyal Paylaşım Butonları
AMP Sosyal Paylaşım Butonları Blogger Buton<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css');
body {font-family: 'Fira Sans Condensed', sans-serif;margin:0 20px;}
#share_btnper{margin:20px auto;padding:0}
.showother{display:none}
.share_btn{position:relative;margin:0;padding:0;display:block;overflow:hidden}
.share_btn ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px}
.share_btn ul li{float:left;display:inline-block;overflow:hidden}
.share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:block;text-align:center;height:35px;line-height:35px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;letter-spacing:1px;border-radius:4px;overflow:hidden}
.share_btn ul li span{padding:0;margin:0}
.share_btn i{font-size:16px;padding:0;margin:0;line-height:35px;text-align:center}
.shareplus{padding:0;background:#bdc3c7;cursor:pointer}
.share_btn li a.fb i,.share_btn li a.tw i{width:20px;text-align:left}
.share_btn a:hover{background:#333;color:#fff}
.share_btn li a.fb{background:#4867aa;padding:0 35px;width:auto}
.share_btn li a.tw{background:#1da1f2;padding:0 35px;width:auto}
.share_btn li a.gp{background:#dc4a38}
.share_btn li a.pt{background:#ca2128}
.share_btn li a.le{background:#0673ab}
.share_btn li a.tr{background:#43556e}
.share_btn li a.em{background:#141b23}
.share_btn li a.ln{background:#00c300}
.share_btn li a.bm{background:#000}
.share_btn li a.wa{background:#4dc247}
.share_btn li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%)}
@media screen and (max-width:768px){.share_btn li a.fb,.share_btn li a.tw{padding:0 37px}}
@media screen and (max-width:603px){.share_btn li a.fb,.share_btn li a.tw{padding:0 25px}}
@media screen and (max-width:375px){.share_btn ul li a.fb,.share_btn ul li a.tw{padding:0 14px}}
</style>
</head>
<body>
<div class='share-wrapper' id='share_btnper'>
<div class='share_btn'><ul>
<li><a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=626,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'></i> <span class='hidetitle'>Facebook</span></a></li>
<li><a class='tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i> <span class='hidetitle'>Twitter</span></a></li>
<li><a class='gp' expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'></i></a></li>
<li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById('showother').style.display='block';document.getElementById('showshare').style.display='none''><i aria-hidden='true' class='fa fa-plus'></i></span></div></li></ul>
<ul class='showother' id='showother'>
<li><a class='pt' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' target='_blank'><i class='fa fa-pinterest'></i></a></li>
<li><a class='le' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Share on LinkEdin'><i aria-hidden='true' class='fa fa-linkedin'></i></a></li>
<li><a class='tr' href='http://www.tumblr.com/share' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'></i></a></li>
<li><a class='ln' expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Share On Line'>
<svg class='icon icons8-LINE' viewBox='0 0 48 48'>
<path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
<path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/></svg>
</a></li>
<li><whatsapp expr:href='data:post.url' expr:text='data:post.title'/><a class='wa' data-action='share/whatsapp/share' href='idntheme'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:24px!important'></i></a></li>
<li><a class='em' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'></i></a></li>
<b:if cond='data:blog.isMobileRequest == "true" and data:blog.pageType == "item"'>
<li><a class='bm' expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target='_blank' title='Share On BBM'>
<svg class='icon BlackBerry-Icon' viewBox='-350 0 5950 8390'>
<rect height='5600' rx='600' ry='600' style='fill: black;width:40px;overflow:hidden' width='6500'/><g>
<path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/>
<path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/>
<path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
<path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/>
<path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
<path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/></g></svg>
</a></li>
</b:if>
<li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById('showother').style.display='none';document.getElementById('showshare').style.display='block''><i aria-hidden='true' class='fa fa-minus'></i></span></div></li>
</ul>
</div>
</div>
</body>
</html>
Bağlantı Butonları
Blogger Buton<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto');
body {font-family:'Roboto',sans-serif;}
.link-button{font-weight:normal;font-size:16px;color:#fff;width:100%;max-width:350px;height:90%;margin:10px auto;text-align:center;display:block;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:41px;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;border:1px solid #fff;border-radius:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-shadow:0 1px 1px rgba(255,255,255,0.35) inset,0px 1px 1px rgba(0,0,0,0.3)}
.link-black {background:#333;}
.link-red {background:#f44336;}
.link-pink {background:#e91e63}
.link-purple {background:#9c27b0}
.link-deep-purple {background:#673ab7}
.link-indigo {background:#3f51b5}
.link-blue {background:#2196f3}
.link-light-blue {background:#03a9f4}
.link-cyan {background:#00bcd4}
.link-teal {background:#009688}
.link-green {background:#4caf50}
.link-light-green {background:#8bc34a}
.link-lime {background:#cddc39}
.link-yellow {background:#ffeb3b}
.link-amber {background:#ffc107}
.link-orange {background:#ff9800}
.link-deep-orange {background:#ff5722}
.link-brown {background:#795548}
.link-grey {background:#9e9e9e}
.link-blue-grey {background:#607d8b}
.link-button:hover {background:#fff;color:#222}
</style>
</head>
<body>
<a class="link-button link-red" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-pink" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-purple" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-deep-purple" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-indigo" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-blue" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-light-blue" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-cyan" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-teal" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-green" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-light-green" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-lime" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-yellow" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-amber" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-orange" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-deep-orange" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-brown" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-grey" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-blue-grey" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-black" href="#" target="_blank">Bağlantı Butonu</a>
</body>
</html>
Blogger Scroll To Top
Blogger Buton Blogger jQuery<!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://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');
body {font-family: 'Fira Sans Condensed', sans-serif;}
#return-to-top{position:fixed;bottom:20px;right:20px;background:rgb(0,0,0);background:rgba(0,0,0,0.7);width:50px;height:50px;display:block;text-decoration:none;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;display:none;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}
#return-to-top i{color:#fff;margin:0;position:relative;left:16px;top:13px;font-size:19px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}
#return-to-top:hover{background:rgba(0,0,0,0.9)}
#return-to-top:hover i{color:#fff;top:5px}
body{background:#eee;font-family:'Open Sans',sans-serif}
h3{font-size:30px;font-weight:400;text-align:center;margin-top:50px}
h3 i{color:#444}
</style>
</head>
<body>
<div style="height:2000px;">
<h3>Scroll down</h3>
<h3><i class="icon-arrow-down"></i></h3>
</div>
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
// ===== Scroll to Top ====
$(window).scroll(function(){if($(this).scrollTop()>=50){$('#return-to-top').fadeIn(200);}else{$('#return-to-top').fadeOut(200);}});$('#return-to-top').click(function(){$('body,html').animate({scrollTop:0},500);});
</script>
</body>
</html>
jQuery + Giriş Font Boyutu Seçimi
Blogger Akordeon Blogger Buton Blogger CSS3 Blogger jQuery Input<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif;background: #f4f4f2; margin: 0 auto;font-size:14px;color: #444;}
.navbar {
width: 100%;
height: 60px;
background: #ccc;
}
.accordion {
width: 700px;
margin: 50px auto;
}
.accordion label {
font-family: Arial, sans-serif;
padding: 18px 30px 3px 21px;
position: relative;
display: block;
height: 50px;
cursor: pointer;
color: #adb3b9;
line-height: 33px;
font-size: 19px;
background: #fff;
box-shadow: 0px 1px 1px 0px #ccc;
}
.accordion label:hover {
color: #fff;
background: #ccc;
}
.accordion label:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
margin-top: 10px;
margin-right: 5px;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordion input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
margin-bottom: -6px;
background: #F1F1F1;
color: #777;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
content: "+";
}
.accordion input {
display: none;
}
.accordion .article {
background: #f4f4f4;
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion .article p {
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion input:checked ~ .article {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding: 25px;
}
.accordion input:checked ~ .article.ac-small {
height: 478px;
}
.accordion input:checked ~ .article.ac-medium {
height: 478px;
}
.accordion input:checked ~ .article.ac-large {
height: 478px;
}
.characters {
-webkit-animation: box 800ms linear 0s 1 forwards;
}
input[type="button"] {
-webkit-appearance: none;
height: 60px;
width: 100px;
border: none;
background-color: tomato;
display: inline-block;
outline: none;
color: #fff;
transition: background-color .7s;
cursor: pointer;
}
input[type="button"]:checked {
background-color: #ffa494;
transition: background-color .7s;
border: none;
}
@media (max-width: 1280px) {
.accordion {
width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar">
<input class="#" type="button" value="+" onClick="zoomIn()"/>
<input class="#" type="button" value="-" onClick="zoomOut()"/>
</div>
<div class="accordion">
<h1 style="font-size:20px;font-weight:500;padding-bottom:53px;text-align:center;margin:0 auto;color:#8A8A8A;">Rafadan Tayfa 1. Bölüm Hikayesi (Ekmek Teknesi)</h1>
<div>
<input id="ac-1" name="accordion-1" type="checkbox">
<label for="ac-1">Sütun-1</label>
<div id="article" class="article ac-small">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox">
<label for="ac-2">Sütun-2</label>
<div id="article" class="article ac-medium">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox">
<label for="ac-3">Sütun-3</label>
<div id="article" class="article ac-large">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox">
<label for="ac-4">Sütun-4</label>
<div id="article" class="article ac-large">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox">
<label for="ac-5">Sütun-5</label>
<div id="article" class="article ac-large">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
</div>
<script language="javascript">
var fontSize = 1;
function zoomIn() {
fontSize += 0.1;
document.getElementById("article").style.fontSize = fontSize + "em";
}
function zoomOut() {
fontSize -= 0.1;
document.getElementById("article").style.fontSize = fontSize + "em";
}
</script>
</body>
</html>
Blogger Slider Sosyal Medya Butonları
Blogger Buton<!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'>
<span style='margin:0 0 10px;display:block;'>Sosya Ağ Paylaşım Butonları</span>
<a class='facebook' href='https://www.facebook.com/sharer/sharer.php?u=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'><span class='circle'><i class='fa fa-facebook'></i></span><span class='title'>Facebook</span><span class='title-hover'>Compartir</span></a>
<a class='twitter' href='https://twitter.com/intent/tweet?url=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'><span class='circle'><i class='fa fa-twitter'></i></span><span class='title'>Twitter</span><span class='title-hover'>Share</span></a>
<a class='gplus' href='https://plus.google.com/share?url=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'><span class='circle'><i class='fa fa-google-plus'></i></span><span class='title'>Google+</span><span class='title-hover'>Share</span></a>
<a class='more'><span class='circle'><i class='fa fa-plus'></i></span><span class='title'>More</span><span class='title-hover'>Clic here</span></a>
<div id='share-menu'>
<a class='tumblr' href='https://www.tumblr.com/widgets/share/tool?shareSource=legacy&posttype=link&content=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'><span class='circle'><i class='fa fa-tumblr'></i></span><span class='title'>Tumblr</span><span class='title-hover'>Share</span></a>
<a class='pinterest' href='https://pinterest.com/pin/create/button/?url=' onclick='openPopup(this.href,640,430);' rel='nofollow' target='_blank'><span class='circle'><i class='fa fa-pinterest-p'></i></span><span class='title'>Pinterest</span><span class='title-hover'>Share</span></a>
<a class='digg' href='https://digg.com/submit?url=' onclick='openPopup(this.href,640,430);' target='_blank'><span class='circle'><i class='fa fa-digg'></i></span><span class='title'>Digg</span><span class='title-hover'>Share</span></a>
<a class='linkedin' href='https://linkedin.com/shareArticle?mini=true&url=' onclick='openPopup(this.href,640,430);' target='_blank'><span class='circle'><i class='fa fa-linkedin'></i></span><span class='title'>LinkedIn</span><span class='title-hover'>Share</span></a>
<a class='stumbleupon' href='http://stumbleupon.com/submit?url=' onclick='openPopup(this.href,640,430);' target='_blank'><span class='circle'><i class='fa fa-stumbleupon'></i></span><span class='title'>Stumbleupon</span><span class='title-hover'>Share</span></a>
<a class='delicious' href='http://delicious.com/post?url=' onclick='openPopup(this.href,640,430);' target='_blank'><span class='circle'><i class='fa fa-delicious'></i></span><span class='title'>Deliciuos</span><span class='title-hover'>Share</span></a>
<a class='reddit' href='http://reddit.com/submit?url' onclick='openPopup(this.href,640,430);' target='_blank'><span class='circle'><i class='fa fa-reddit'></i></span><span class='title'>Reddit</span><span class='title-hover'>Share</span></a>
<a class='whatsapp' data-action='share/whatsapp/share' href='whatsapp://send?text=' onclick='openPopup(this.href,640,430);' target='_blank'><span class='circle'><i class='fa fa-whatsapp'></i></span><span class='title'>Whatsapp</span><span class='title-hover'>Send</span></a>
<a class='email' href='mailto:?subject='><span class='circle'><i class='fa fa-envelope'></i></span><span class='title'>Mail</span><span class='title-hover'>Send</span></a>
<a class='gmail' href='https://mail.google.com/mail/?view=cm&fs=1&to&su=' onclick='openPopup(this.href,640,430);' target='_blank'><span class='circle'><i class='fa fa-envelope'></i></span><span class='title'>Gmail</span><span class='title-hover'>Send</span></a>
<a class='outlook' href='http://www.hotmail.msn.com/secure/start?action=compose&to=&subject=' onclick='window.open(this.href,this.target,'width=700,height=500,top=210,left=260'); return false;' target='_blank'><span class='circle'><i class='fa fa-envelope-o'></i></span><span class='title'>Outlook</span><span class='title-hover'>Send</span></a>
<a class='qrcode' href='http://api.qrserver.com/v1/create-qr-code/?data=' onclick='openPopup(this.href,640,430);' target='_blank'><span class='circle'><i class='fa fa-qrcode'></i></span><span class='title'>Create QR</span><span class='title-hover'>Create</span></a>
</div><br><br><br>
<a class='more' href='https://codepen.io/AlexxTrs/pen/ezYaoP' target="_blank"><span class='circle'><i class='fa fa-window-restore'></i></span><span class='title'>Version 3.0</span><span class='title-hover'>Click here</span></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>
Kaydol:
Kayıtlar (Atom)