<!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>
Blogger Online WhatSapp ve SMS Butonu
Blogger Buton Blogger CSS Blogger Mobil<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css');
body {font-family:'Roboto Condensed',sans-serif;margin:20px;}
/*<![CDATA[*/
.mobile-btn{padding:10px 16px;margin:0;font-size:16px;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}.mobile-btn:active:focus,.mobile-btn:focus{outline:0}.mobile-btn:focus,.mobile-btn:hover{color:#333;text-decoration:none;outline:0}.mobile-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)}.mobile-btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.mobile-btn-purple{background:#558B2F;border-bottom:2px solid #33691E;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}.mobile-btn-purple:active,.mobile-btn-purple:focus,.mobile-btn-purple:hover{background:#689F38;color:#fff}#mobile_shop{margin-top:30px;background:#fff3e0;padding:15px 15px 5px;border-radius:3px!important;}#mobileshop:target{display:block;margin-top:-80px;height:80px;visibility:hidden}#mobile_shop h4{font-size:16px;font-weight:600;color:#444;margin:0;line-height:1}#mobile_shop p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}#mobile_shop a{margin-bottom:10px;margin-right:10px}
.mobile-btn i{font-size:24px;vertical-align:text-bottom;}
/*]]>*/
</style>
</head>
<body>
<div id='mobile_shop'>
<span id='mobileshop'/>
<h4>Mobil Alış-Veriş Whatsapp ve SMS Butonu</h4>
<p>Açıklama</p>
<a class='mobile-btn mobile-btn-purple mobile-btn-lg' href='#'><i class="fa fa-whatsapp"></i> Whatsapp</a>
<a class='mobile-btn mobile-btn-purple mobile-btn-lg' href='#'><i class="fa fa-mobile"></i> SMS</a>
</div>
</body>
</html>
Blogger CSS Google Play Butonu
Blogger Buton Blogger CSS<!DOCTYPE html>
<html>
<head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
@font-face{font-family:"fontfutura";src:url("https://rawgit.com/Bloggeritunes/font/master/futura-pt-medium.otf") format("woff");font-weight:normal;font-style:normal;}
a.gp-btn-google{color:#fff}
.gp-btn{padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333332;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}
.gp-btn:active:focus,.gp-btn:focus{outline:0}
.gp-btn:focus,.gp-btn:hover{color:#333;text-decoration:none;outline:0}
.gp-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)}
.gp-btn-google{color:#fff;background-color:#111;border-color:#000;padding:5px 16px 15px 40px;position:relative;font-family:fontfutura;font-weight:400}
.gp-btn-google:focus{color:#fff;background-color:#555;border-color:#000}
.gp-btn-google:active,.gp-btn-google:hover{color:#fff;background:#555;border-color:#000;}
.gp-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==);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;left:6px;top:50%;margin-top:-15px}
.gp-btn-google:after{content:"'Den indir";position:absolute;bottom:5px;left:40px;font-size:10px;}
/*]]>*/
</style>
</b:if>
</head>
<body>
<a class="gp-btn gp-btn-google" href="#" title="Google Play">Google Play</a>
</body>
</html>
Blogger Uyarı Kutusu
Blogger Buton Blogger CSS Blogger jQuery<!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;-webkit-font-smoothing: antialiased;margin: 0 auto 0 auto;}
a:link, a:visited {text-decoration: none;transition: all .3s;}
#warning-wrapper{position:fixed;width:100%;z-index:99}
.warning-noactive{background:#e74c4c;width:3.125em;height:3.125em;border-radius:100%;position:fixed;z-index:999;bottom:50%;left:1.25em;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:warninglink;animation-duration:5s;animation-iteration-count:infinite;animation-name:warninglink;transition:all 5s ease-in-out}
img.warningbell{margin:15px 15px 15px 15px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:warningicon;animation-duration:2s;animation-iteration-count:infinite;animation-name:warningicon;transition:all 2s ease-in-out}
img.warningclose {margin:17px 1em 0 17px}
@keyframes warninglink{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes warningicon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes warning-box{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:40%;left:4.875em}100%{transform:none;visibility:visible;opacity:1;bottom:40%;left:6.875em}}
.warning-box{padding:1.25em;border-radius:0 2px 2px 2px;position:fixed;resize:none;line-height:1.5;z-index:999;left:6.875em;bottom:40%;max-width:32.5em;background:#e74c4c;border:1px solid #e74c4c;color:#fff;font-size:13px;display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.warning-box:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-10px;border-width:0.5em;border-style:solid;border-color:#e74c4c #e74c4c transparent transparent;display:block}
.warningclose{display:none!important}
#warning-wrapper.warning-active .warningclose{display:block!important;animation-name:none!important}
#warning-wrapper.warning-active .warningbell{display:none!important}
.warning-box.warning-active{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:warning-box;animation-duration:1s;animation-iteration-count:1;animation-name:warning-box;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:42.5em){.warning-box:before{display:none}.warning-box{left:0%!important;bottom:0}
@keyframes warning-box{0%{left:0!important}100%{left:0!important}}}
</style>
</head>
<body>
<div id='warning-wrapper'>
<a class='warning-noactive' href='javascript:;' title='Uyarı Kutusu'><img alt='Warning Open' class='warningbell' height='20' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAhUExURQAAAP///////////////////////////////////////88h6/kAAAAKdFJOUwAgr8xzFJg1LOK8NtLzAAAAi0lEQVQ4y9WT2w7DIAxDITfA///BW1e1UyCk2uPOq02MrKQUR2fuJcMASw0EUKYrA6xbub3fH1CLdcGNPOiho8GxprA38MOAdYTMBlkr9NhaoYf+0cCzgR96mpqqCKhZwBQiCLlDFBuu7ew7w3UiSrFO3/3WGqDld4w/7I9Pkqs4vzIOfSThamOY119D3hBhoWu7CwAAAABJRU5ErkJggg==' width='20'/><img alt='Warning Close' class='warningclose' height='16' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURQAAAP///////////////////z5SrToAAAAFdFJOUwCrBFT7q7CDrQAAAGxJREFUOMvdk0sOwCAIRHGQ+1+5tWlMP2Pfvm4wzIsCOhGRTWGXWo6QvTyhVj0PvSyx6zWIERyhU5gbeV3hiVvSEI/Ui6AEHUlFUVuiwaz0SSz1K7F+3m8dAbqCiqQ2aVB//x9sHLQempfsvwGWIwaV4OjbnwAAAABJRU5ErkJggg==' width='16'/></a>
<div class='warning-box'>
Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){$(".warning-noactive").click(function(){$(".warning-box,#warning-wrapper").toggleClass("warning-active");});});
</script>
</body>
</html>
Reklam Kapatma Butonu
Blogger Buton Blogger jQuery<script type='text/javascript'>
$(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById('fixedban').style.display = 'none';' style='cursor:pointer;'><img alt='kapat' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAPCAMAAACRBWzwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACQUExURQAAAC0rKy0rKy0rKy4sLC4sLC0rKzEvLzUzMywqKi4sLC4sLC0rKyspKd/e3i0rKy4sLENCQh8dHWtqaiwqKiwqKi4sLC4sLFpYWDAuLmhmZnx7ex4cHCMhIT49PSspKVdWVtfX10JAQLa1tbq6uqmoqFVUVIeGhi4sLC4sLF9dXVJQUDo4OMLCwjs6OlFPT1HGxcgAAAAwdFJOUwDfX+k3j9kIA6gjoD2ABEpyFeht0chGL4W8WVDd0h5RqRCiKwozcDfl+UCUyj23Wd0ks04AAAEaSURBVCjPzZLZcoMwDEUvxgve2DGBQGj2te3//12d0mRomplO36oXX3l8JFkS8K9tvgdOp1FHbQa0iyevNsuJU3Sx6MioRT7A9tkT5LybOHE/b6svLQJTH2qolA3AwtXWATS1W+zL5j2eVFZekhvCSeUTDiwNCdyR2dAhtSxf7/llN0GQ85sSJW9GxSRcmF0Pb/0OL7NpmesuqO9ZbEABxXSpkQQCaQWjdV48IKtiJu9/oSmPooopH/4TaRYHovoHZJsvs7y+IS7iVoQK+lqYgGTmAHTfkfhtBcgmGpEwAT0aWbGmEuaodaCyUupyhSI8r+/Iqx9SZkYkon4mVAkyCBo5TonyvSZms/V9bZe/r0US/nmTqBQ/7j4ArYARMjR0KxkAAAAASUVORK5CYII=' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='#' title='Tatil Banner Reklam'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Tatil Afiş Reklam' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtgAAABaCAMAAAC16tHNAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAVUExURd4HE+EGE+h5fO6rrfXY2eI6QPr5+meWtHkAAAAGdFJOU+Hr6fD55JAQOI8AAASiSURBVHja7ZzrctsgEEbV3YX3f+QKSdwXObbjSZs551dMkNTJHOGPBbr9AfiFbPwJALEBEBsAsQEQGwCxAbEBEBsAsQF+TOwN4D8HsQGxARAbALEBEBsAsQGxERsQGwCxARAbALEBEBsQGwCxARAbALEBEBsAsQGx4d/DNPBHQOzfR4zCHwGx/0+CqiI2Yn/mK7/lcEnUYuyTgNM0cXaRXtz7yyTGGBAbsT/zld+wj5/B8ocqlu56msU718TqLaa21WUabfk7xEbst5BKcil5LeGUUqp/coy/a9lCPPqkLsXs/VZHmy0v2ztHQ2zE/rDiMe7JJFooWpb2UAxfBZq5c+odbi+TvUN6JmIj9ifRNNiKhW1QVMsgHFa2NTpb7l07ry5LN7b1aI7YiP0tJYpRpexc455FXYXlZhie2hZDdrqxjncMoscMtP3X7E2K5oj96oBto3c6jp1Xk9YB+nwdGuFD/l3TJm7gCOmBMjxVj9nmns3rU/MclBUbxH6FaTRei10j9fU6tMNr/tlrm6PP8KujPKhpllra5Wyyc3oKiP301DFsiyiio6DS/BAGO6/uob2fm6TPxu59ynWXUGuLIddZ9jaGbMR+P4lsg7xdn/zTpaUjdhc/vGx+md9mkWa+WWqEzb8LrxH7eaa0UM20KwTUeJAVlKuiZ57YNqaO8f42juytxHH+vgDEfiWJuBE4D58qrdfZQSvDajt51OkbwCuLaMnrbtEFsRH7I1PHrvqXNnWUpZuakNVZlrGvij1njS6WO1EEEPtZ5jWU1nTZP4xVieSysyxTtn88Elual8L71mgnj4RrxP6uqaP00ffaB9KO2UnhtlKd+uxvQA4sj8Su6aUp7JmT+eXhvkLERuyvJpHQbGYqez6kSyOh23MqZSPf1fpI7Bqt29Hem8weCzTUsBH7taljGLRr6xOhziK1U7mxLe29TiNrzhMPxG7u6i3Cj0vqMbJ3BLHfTyLaBRF1XwDz95zmxgd1bD2WE0/ceWIvchCLlEcQ+1mG4VD6BRfxOiYLvVKc1WWdO7FtPOBwL/ZWVyUBsZ9IIquAPRjWbkoNzjJ8c6v7JfX9EQXzBvlZYwp/iP3e1LH/6It9BhSv+q2zzGF6AboCSH4/3Dr28vVDbMR+wFDE1nklxgsaYXP3cJuTzWUaa9V9d+43BCI2Yr8zddRheG0dnDZb95d2xxu9UzWLbOLcTT2xiSKI/XISkdEo6fZj5zScT0Z2VTnzY4s4SaRryWNxtwk7fzeE9QwUsRH7fuoY1l4fBYxrdbtsl26LI/niY2VSnDdColfsc7OQlUvM4rCjUCP7sRH75STSl+FKwLCz3uzskc67VDVO/mo+DmPhfrZaPqfVzLNMEurGwfPhRrUPsZ8VWxZi12MFMR9FnEb164N5Gzp0cVhxmnOWN+X673r2N6Gk8HzkkUV1xH62KvKFuJLOid/180+RH0fOnwsQ6Ulhvgun1BEbEBsAsQEQGwCxARAbALEBsQEQGwCxARAbALEBsREbEBsAsQEQGwCxARAbEBuxAbEBEBvgJ8UG+D0gNiA2AGIDIDYAYgMgNiA2AGID/Mv8BTycVniiMBSiAAAAAElFTkSuQmCC'/></a>
</div>
</div>
Blog 12 Farklı 3D Fantazi Buton Eklentileri
Blogger Buton<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('http://fonts.googleapis.com/css?family=Roboto+Condensed');.preserve-3d{transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
body{padding:0;margin:0;border:0;overflow-x:none;background-color:#ffffff;font-family:Roboto Condensed,sans-serif;font-size:12px;font-smooth:always;-webkit-font-smoothing:antialiased}
.back{width:33%;height:200px;float:left;background-color:#eeeeee;border:10px;border-color:#ffffff;border-style:solid;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;counter-increment:bc;padding:0 5px 5px 5px}
.back:before{content:counter(bc) "_";position:absolute;padding:10px}
@media screen and (max-width:1260px){.back{width:50%}}
@media screen and (max-width:840px){.back{width:100%}}
.button_base{margin:0;border:0;font-size:18px;position:relative;top:50%;left:50%;margin-top:-25px;margin-left:-100px;width:200px;height:50px;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-user-select:none;cursor:default}
.button_base:hover{cursor:pointer}
/* Buton 01 */
.b01_simple_rollover{color:#000000;border:#000000 solid 1px;padding:10px;background-color:#ffffff}
.b01_simple_rollover:hover{color:#ffffff;background-color:#000000}
/* Buton 02 */
.b02_slide_in{overflow:hidden;border:#000000 solid 1px}
.b02_slide_in div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px}
.b02_slide_in div:nth-child(1){color:#000000;background-color:#ffffff}
.b02_slide_in div:nth-child(2){background-color:#000000;transition:top 0.1s ease;-webkit-transition:top 0.1s ease;-moz-transition:top 0.1s ease;top:-50px}
.b02_slide_in div:nth-child(3){color:#ffffff;transition:opacity 0.1s ease;-webkit-transition:opacity 0.1s ease;-moz-transition:opacity 0.1s ease;opacity:0}
.b02_slide_in:hover div:nth-child(2){top:0;transition:top 0.1s ease;-webkit-transition:top 0.1s ease;-moz-transition:top 0.1s ease}
.b02_slide_in:hover div:nth-child(3){opacity:1;transition:opacity 0.1s ease;-webkit-transition:opacity 0.1s ease;-moz-transition:opacity 0.1s ease}
/* Buton 03 */
.b03_skewed_slide_in{overflow:hidden;border:#000000 solid 1px}
.b03_skewed_slide_in div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px}
.b03_skewed_slide_in div:nth-child(1){color:#000000;background-color:#ffffff}
.b03_skewed_slide_in div:nth-child(2){background-color:#000000;width:230px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:translate(-250px,0px) skewX(-30deg);-webkit-transform:translate(-250px,0px) skewX(-30deg);-moz-transform:translate(-250px,0px) skewX(-30deg)}
.b03_skewed_slide_in div:nth-child(3){color:#ffffff;left:-200px;transition:left 0.2s ease;-webkit-transition:left 0.2s ease;-moz-transition:left 0.2s ease}
.b03_skewed_slide_in:hover div:nth-child(2){transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transform:translate(-15px,0px) skewX(-30deg);-webkit-transform:translate(-15px,0px) skewX(-30deg);-moz-transform:translate(-15px,0px) skewX(-30deg)}
.b03_skewed_slide_in:hover div:nth-child(3){left:0;transition:left 0.30000000000000004s ease;-webkit-transition:left 0.30000000000000004s ease;-moz-transition:left 0.30000000000000004s ease}
/* Buton 04 */
.b04_3d_tick{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;perspective-origin:center top;-webkit-perspective-origin:center top;-moz-perspective-origin:center top}
.b04_3d_tick div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px;border:#000000 solid 1px}
.b04_3d_tick div:nth-child(1){color:#000000;background-color:#ffffff;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease}
.b04_3d_tick div:nth-child(2){color:#ffffff;background-color:#000000;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top}
.b04_3d_tick:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;background-color:rgba(0,0,0,0.5)}
.b04_3d_tick:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg)}
/* Buton 05 */
.b05_3d_roll{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px}
.b05_3d_roll div{position:absolute;text-align:center;width:100%;height:50px;padding:10px;border:#000000 solid 1px;pointer-events:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.b05_3d_roll div:nth-child(1){color:#000000;background-color:#000000;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}
.b05_3d_roll div:nth-child(2){color:#000000;background-color:#ffffff;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}
.b05_3d_roll:hover div:nth-child(1){color:#ffffff;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg)}
.b05_3d_roll:hover div:nth-child(2){background-color:#000000;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg)}
/* Buton 06 */
.b06_3d_swap{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.b06_3d_swap div{position:absolute;text-align:center;width:100%;height:50px;padding:10px;border:#000000 solid 1px;pointer-events:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.b06_3d_swap div:nth-child(1){color:#000000;background-color:#ffffff;transform:translateZ(0px);-webkit-transform:translateZ(0px);-moz-transform:translateZ(0px);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}
.b06_3d_swap div:nth-child(2){color:#ffffff;background-color:#000000;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease 0.05s;-webkit-transition:all 0.2s ease 0.05s;-moz-transition:all 0.2s ease 0.05s;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}
.b06_3d_swap:hover div:nth-child(1){color:#000000;background-color:#808080;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:translateZ(-200px);-webkit-transform:translateZ(-200px);-moz-transform:translateZ(-200px)}
.b06_3d_swap:hover div:nth-child(2){color:#ffffff;transition:all 0.2s ease 0.05s;-webkit-transition:all 0.2s ease 0.05s;-moz-transition:all 0.2s ease 0.05s;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg)}
/* Buton 07 */
.b07_3d_double_roll{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.b07_3d_double_roll div{position:absolute;text-align:center;padding:10px;border:#000000 solid 1px;pointer-events:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.b07_3d_double_roll div:nth-child(1){color:#000000;background-color:#ffffff;z-index:0;width:100%;height:50px;clip:rect(0px,100px,50px,0px);position:absolute;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}
.b07_3d_double_roll div:nth-child(2){color:#000000;background-color:#000000;z-index:-1;width:100%;height:50px;clip:rect(0px,100px,50px,0px);position:absolute;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}
.b07_3d_double_roll div:nth-child(3){color:#000000;background-color:#ffffff;z-index:0;width:100%;height:50px;clip:rect(0px,200px,50px,100px);position:absolute;transition:all 0.2s ease 0.1s;-webkit-transition:all 0.2s ease 0.1s;-moz-transition:all 0.2s ease 0.1s;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}
.b07_3d_double_roll div:nth-child(4){color:#000000;background-color:#000000;z-index:-1;width:100%;height:50px;clip:rect(0px,200px,50px,100px);position:absolute;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transition:all 0.2s ease 0.1s;-webkit-transition:all 0.2s ease 0.1s;-moz-transition:all 0.2s ease 0.1s;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}
.b07_3d_double_roll:hover div:nth-child(1){background-color:#000000;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg)}
.b07_3d_double_roll:hover div:nth-child(2){color:#ffffff;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg)}
.b07_3d_double_roll:hover div:nth-child(3){background-color:#000000;transition:all 0.2s ease 0.1s;-webkit-transition:all 0.2s ease 0.1s;-moz-transition:all 0.2s ease 0.1s;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg)}
.b07_3d_double_roll:hover div:nth-child(4){color:#ffffff;transition:all 0.2s ease 0.1s;-webkit-transition:all 0.2s ease 0.1s;-moz-transition:all 0.2s ease 0.1s;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg)}
/* Buton 08 */
.b08_3d_pushback{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.b08_3d_pushback div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;pointer-events:none;padding:10px;border:#000000 solid 1px}
.b08_3d_pushback div:nth-child(1){color:#000000;background-color:#ffffff;transform:rotateX(0deg) translateZ(0px);-webkit-transform:rotateX(0deg) translateZ(0px);-moz-transform:rotateX(0deg) translateZ(0px);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease}
.b08_3d_pushback div:nth-child(2){color:#ffffff;background-color:#000000;transform:rotateX(-179.5deg) translateZ(1px);-webkit-transform:rotateX(-179.5deg) translateZ(1px);-moz-transform:rotateX(-179.5deg) translateZ(1px);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease}
.b08_3d_pushback:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(179.5deg);-webkit-transform:rotateX(179.5deg);-moz-transform:rotateX(179.5deg)}
.b08_3d_pushback:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg) rotateY(0deg) translateZ(1px);-webkit-transform:rotateX(0deg) rotateY(0deg) translateZ(1px);-moz-transform:rotateX(0deg) rotateY(0deg) translateZ(1px)}
/* Buton 09 */
.b09_electric{color:#000000;background-color:#ffffff;border:#000000 solid 1px;padding:10px;transition:all 0.1s ease;-webkit-transition:all 0.1s ease;-moz-transition:all 0.1s ease}
.b09_electric:hover{color:#ffffff;background-color:#000000;animation:b09_electric_blinkIn 0.1s step-end 0 2;-webkit-animation:b09_electric_blinkIn 0.1s step-end 0 2;-moz-animation:b09_electric_blinkIn 0.1s step-end 0 2;transition:all 0.2s ease 0.2s;-webkit-transition:all 0.2s ease 0.2s;-moz-transition:all 0.2s ease 0.2s}
@-webkit-keyframes b09_electric_blinkIn{from,to{background-color:#f8f8f8;color:#080808}50%{background-color:#ffffff;color:#000000}}
@-moz-keyframes b09_electric_blinkIn{from,to{background-color:#f8f8f8;color:#080808}50%{background-color:#ffffff;color:#000000}}
/* Buton 10 */
.b10_tveffect div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.b10_tveffect div:nth-child(1){color:#000000;background-color:#ffffff;-webkit-transition:all 0.1s ease;padding:10px;border:#000000 solid 1px}
.b10_tveffect div:nth-child(2){overflow:hidden}
.b10_tveffect div:nth-child(2) div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px;border:#000000 hidden 1px}
.b10_tveffect div:nth-child(2) div:nth-child(1){color:rgba(200,120,120,0.8);opacity:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat}
.b10_tveffect div:nth-child(2) div:nth-child(2){color:rgba(120,200,120,0.8);opacity:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat}
.b10_tveffect div:nth-child(2) div:nth-child(3){color:rgba(120,120,200,0.8);opacity:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat}
.b10_tveffect:hover div:nth-child(1){color:#ffffff;background-color:#000000;transition:color 0s ease;-webkit-transition:color 0s ease;-moz-transition:color 0s ease;transition:background-color 0.3s ease 0.2s;-webkit-transition:background-color 0.3s ease 0.2s;-moz-transition:background-color 0.3s ease 0.2s}
.b10_tveffect:hover div:nth-child(2) div:nth-child(1){animation:b10_tveffect_red 0.25s linear;-webkit-animation:b10_tveffect_red 0.25s linear;-moz-animation:b10_tveffect_red 0.25s linear}
.b10_tveffect:hover div:nth-child(2) div:nth-child(2){animation:b10_tveffect_green 0.25s linear;-webkit-animation:b10_tveffect_green 0.25s linear;-moz-animation:b10_tveffect_green 0.25s linear}
.b10_tveffect:hover div:nth-child(2) div:nth-child(3){animation:b10_tveffect_blue 0.25s linear;-webkit-animation:b10_tveffect_blue 0.25s linear;-moz-animation:b10_tveffect_blue 0.25s linear}
@-webkit-keyframes b10_tveffect_red{from,to{opacity:0}25%{opacity:1;-webkit-transform:scale(1.8,1.6) translate(-10px,3px) skewX(30deg)}50%{opacity:1;-webkit-transform:scale(1.5,1.2) translate(20px,6px) skewX(5deg)}75%{opacity:1;-webkit-transform:scale(0.9,1.8) translate(-16px,-1px) skewX(-20deg)}}
@-webkit-keyframes b10_tveffect_green{from,to{opacity:0}25%{opacity:1;-webkit-transform:scale(1.3,1.5) translate(3px,6px) skewX(25deg)}50%{opacity:1;-webkit-transform:scale(1.6,1.1) translate(-16px,-5px) skewX(-15deg)}75%{opacity:1;-webkit-transform:scale(1,1.8) translate(18px,4px) skewX(15deg)}}
@-webkit-keyframes b10_tveffect_blue{from,to{opacity:0}25%{opacity:1;-webkit-transform:scale(1.2,1.4) translate(-10px,-3px) skewX(-25deg)}50%{opacity:1;-webkit-transform:scale(1.9,1.1) translate(16px,3px) skewX(5deg)}75%{opacity:1;-webkit-transform:scale(1.3,2) translate(-30px,-3px) skewX(20deg)}}
@-moz-keyframes b10_tveffect_red{from,to{opacity:0}25%{opacity:1;transform:scale(1.8,1.6) translate(-10px,3px) skewX(30deg)}50%{opacity:1;transform:scale(1.5,1.2) translate(20px,6px) skewX(5deg)}75%{opacity:1;transform:scale(0.9,1.8) translate(-16px,-1px) skewX(-20deg)}}
@-moz-keyframes b10_tveffect_green{from,to{opacity:0}25%{opacity:1;transform:scale(1.3,1.5) translate(3px,6px) skewX(25deg)}50%{opacity:1;transform:scale(1.6,1.1) translate(-16px,-5px) skewX(-15deg)}75%{opacity:1;transform:scale(1,1.8) translate(18px,4px) skewX(15deg)}}
@-moz-keyframes b10_tveffect_blue{from,to{opacity:0}25%{opacity:1;transform:scale(1.2,1.4) translate(-10px,-3px) skewX(-25deg)}50%{opacity:1;transform:scale(1.9,1.1) translate(16px,3px) skewX(5deg)}75%{opacity:1;transform:scale(1.3,2) translate(-30px,-3px) skewX(20deg)}}
/* Buton 11 */
.b11_3d_jumpback{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px}
.b11_3d_jumpback div{color:#000000;background-color:#ffffff;border:#000000 solid 1px;padding:10px;position:absolute;width:100%;height:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.b11_3d_jumpback:hover div{color:#ffffff;background-color:#000000;animation:b11_3d_jump 0.3s ease-out;-webkit-animation:b11_3d_jump 0.3s ease-out;-moz-animation:b11_3d_jump 0.3s ease-out;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards}
@-webkit-keyframes b11_3d_jump{from{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#ffffff;color:#000000}49.99%{transform:translateZ(100px) rotateX(90deg);-webkit-transform:translateZ(100px) rotateX(90deg);-moz-transform:translateZ(100px) rotateX(90deg);background-color:#808080;color:#000000}50.00%{transform:translateZ(100px) rotateX(-90deg);-webkit-transform:translateZ(100px) rotateX(-90deg);-moz-transform:translateZ(100px) rotateX(-90deg);background-color:#000000;color:#808080}to{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#000000;color:#ffffff}}
@-moz-keyframes b11_3d_jump{from{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#ffffff;color:#000000}49.99%{transform:translateZ(100px) rotateX(90deg);-webkit-transform:translateZ(100px) rotateX(90deg);-moz-transform:translateZ(100px) rotateX(90deg);background-color:#808080;color:#000000}50.00%{transform:translateZ(100px) rotateX(-90deg);-webkit-transform:translateZ(100px) rotateX(-90deg);-moz-transform:translateZ(100px) rotateX(-90deg);background-color:#000000;color:#808080}to{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#000000;color:#ffffff}}
/* Buton 12 */
.b12_3d_glitch{overflow:hidden;width:200px;height:51px}
.b12_3d_glitch div{padding:10px;position:absolute;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;width:200px;height:50px}
.b12_3d_glitch div:nth-child(1){background-color:#ffffff;top:1px;left:0;border:#000000 solid 1px}
.b12_3d_glitch div:nth-child(2){color:#000000;left:-100px;top:2px;width:400px;height:50px}
.b12_3d_glitch:hover div:nth-child(1){animation:b12_3d_glitch_bg 0.3s linear;-webkit-animation:b12_3d_glitch_bg 0.3s linear;-moz-animation:b12_3d_glitch_bg 0.3s linear;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards}
.b12_3d_glitch:hover div:nth-child(2){color:#000000;animation:b12_3d_glitch 0.3s linear;-webkit-animation:b12_3d_glitch 0.3s linear;-moz-animation:b12_3d_glitch 0.3s linear;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat}
@-webkit-keyframes b12_3d_glitch_bg{49.00%{background-color:#ffffff}50.00%{background-color:#000000}to{background-color:#000000}}
@-webkit-keyframes b12_3d_glitch{from{transform:skewX(0deg);-webkit-transform:skewX(0deg);-moz-transform:skewX(0deg);color:#000000}25.00%{transform:skewX(80deg);-webkit-transform:skewX(80deg);-moz-transform:skewX(80deg);color:#000000}75.00%{transform:skewX(-20deg);-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);color:#ffffff}90.00%{transform:skewX(0deg);-webkit-transform:skewX(0deg);-moz-transform:skewX(0deg);color:#ffffff}to{transform:skewX(0deg);-webkit-transform:skewX(0deg);-moz-transform:skewX(0deg);color:#ffffff}}
@-moz-keyframes b12_3d_glitch_bg{49.00%{background-color:#ffffff}50.00%{background-color:#000000}to{background-color:#000000}}
@-moz-keyframes b12_3d_glitch{from{transform:skewX(0deg);-webkit-transform:skewX(0deg);-moz-transform:skewX(0deg);color:#000000}25.00%{transform:skewX(80deg);-webkit-transform:skewX(80deg);-moz-transform:skewX(80deg);color:#000000}75.00%{transform:skewX(-20deg);-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);color:#ffffff}90.00%{transform:skewX(0deg);-webkit-transform:skewX(0deg);-moz-transform:skewX(0deg);color:#ffffff}to{transform:skewX(0deg);-webkit-transform:skewX(0deg);-moz-transform:skewX(0deg);color:#ffffff}}
</style>
</head>
<body>
<div class="back">
<div class="button_base b01_simple_rollover">01_Buton</div>
</div>
<div class="back">
<div class="button_base b02_slide_in">
<div>01_Buton</div>
<div></div>
<div>01_Buton</div>
</div>
</div>
<div class="back">
<div class="button_base b03_skewed_slide_in">
<div>01_Buton</div>
<div></div>
<div>01_Buton</div>
</div>
</div>
<div class="back">
<div class="button_base b04_3d_tick">
<div>01_Buton</div>
<div>01_Buton</div>
</div>
</div>
<div class="back">
<div class="button_base b05_3d_roll">
<div>01_Buton</div>
<div>01_Buton</div>
</div>
</div>
<div class="back">
<div class="button_base b06_3d_swap">
<div>01_Buton</div>
<div>01_Buton</div>
</div>
</div>
<div class="back">
<div class="button_base b07_3d_double_roll">
<div>01_Buton</div>
<div>01_Buton</div>
<div>01_Buton</div>
<div>01_Buton</div>
</div>
</div>
<div class="back">
<div class="button_base b08_3d_pushback">
<div>01_Buton</div>
<div>01_Buton</div>
</div>
</div>
<div class="back">
<div class="button_base b09_electric">01_Buton</div>
</div>
<div class="back">
<div class="button_base b10_tveffect">
<div>01_Buton</div>
<div>
<div>01_Buton</div>
<div>01_Buton</div>
<div>01_Buton</div>
</div>
</div>
</div>
<div class="back">
<div class="button_base b11_3d_jumpback">
<div>01_Buton</div>
</div>
</div>
<div class="back">
<div class="button_base b12_3d_glitch">
<div></div>
<div>01_Buton</div>
</div>
</div>
</body>
</html>
Kaydol:
Kayıtlar (Atom)