<!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 CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blog Yazılarını Sütunlara Bölme
Blogger CSS<!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-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.column-row {display:inline-block;margin:0;padding:20px}
.column-row:before {display: table;content:" "}
.column-row:after {clear:both}
hr {margin-top:20px;margin-bottom:20px;border:0;border-top: 1px solid #eee;height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
@media (min-width:480px) {.column-2,.column-3,.column-4,.column-5{float:left;padding-right:15px;padding-left:15px}.column-2{width:50%}.column-3{width:33.33333333%}.column-4{width:25%}.column-5{width:66.66666667%}}
</style>
</head>
<body>
<div class="column-row">
<div class="column-2">
<b>Sütun 1/2</b>
<p>
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.
</p>
</div>
<div class="column-2">
<b>Sütun 1/2</b>
<p>
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.
</p>
</div>
</div>
<hr>
<div class="column-row">
<div class="column-3">
<b>Sütun 1/3</b>
<p>
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.
</p>
</div>
<div class="column-3">
<b>Sütun 1/3</b>
<p>
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.
</p>
</div>
<div class="column-3">
<b>Sütun 1/3</b>
<p>
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.
</p>
</div>
</div>
<hr>
<div class="column-row">
<div class="column-4">
<b>Sütun 1/4</b>
<p>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</p>
</div>
<div class="column-4">
<b>Sütun 1/4</b>
<p>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</p>
</div>
<div class="column-4">
<b>Sütun 1/4</b>
<p>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</p>
</div>
<div class="column-4">
<b>Sütun 1/4</b>
<p>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</p>
</div>
</div>
<hr>
<div class="column-row">
<div class="column-5">
<b>Sütun 2/3</b>
<p>
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.
</p>
</div>
<div class="column-3">
<b>Sütun 1/3</b>
<p>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</p>
</div>
</div>
<hr>
<div class="column-row">
<div class="column-3">
<b>Sütun 1/3</b>
<p>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</p>
</div>
<div class="column-5">
<b>Sütun 2/3</b>
<p>
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.
</p>
</div>
</div>
</body>
</html>
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>
Kar Efekti CSS Kodları
Blogger CSS<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@keyframes rain{0%{background-position:0 0}100%{background-position:500px 1000px}}
@-webkit-keyframes rain{0%{background-position:0 0}100%{background-position:500px 1000px}}
.effect-rain{background-image:url("../img/effects/rain.png");-webkit-animation:rain 2s linear infinite;animation:rain 2s linear infinite}
@keyframes sparkle{0%{background-position:0 0,0px 0,0px 0}100%{background-position:-500px -1000px,-400px -400px,300px 300px}}
@-webkit-keyframes sparkle{0%{background-position:0 0,0px 0,0px 0}100%{background-position:-500px -1000px,-200px -400px,300px 300px}}
.effect-sparkle{background-image:url("../img/effects/sparkle1.png"),url("../img/effects/sparkle2.png");-webkit-animation:sparkle 60s linear infinite;animation:sparkle 60s linear infinite}
@keyframes glass{0%{background-position:0 0,0px 0,0px 0}100%{background-position:500px 1000px,400px 400px}}
@-webkit-keyframes glass{0%{background-position:0 0,0px 0,0px 0}100%{background-position:500px 1000px,-400px -400px}}
.effect-sliding-glass{background-image:url("../img/effects/glass1.png"),url("../img/effects/glass2.png");-webkit-animation:glass 30s linear infinite;animation:glass 30s linear infinite}
@keyframes confetti{0%{background-position:0 0,0px 0,0px 0}100%{background-position:500px 1000px,400px 400px,300px 300px}}
@-webkit-keyframes confetti{0%{background-position:0 0,0px 0,0px 0}100%{background-position:500px 1000px,400px 400px,300px 300px}}
.effect-confetti{background-image:url("../img/effects/confetti1.png"),url("../img/effects/confetti2.png");-webkit-animation:confetti 10s linear infinite;animation:confetti 10s linear infinite}
@keyframes snow{0%{background-position:0 0,0px 0,0px 0}100%{background-position:500px 1000px,400px 400px,300px 300px}}
@-webkit-keyframes snow{0%{background-position:0 0,0px 0,0px 0}100%{background-position:500px 1000px,400px 400px,300px 300px}}
.effect-snow{background-image:url("../img/effects/snow1.png"),url("../img/effects/snow2.png");-webkit-animation:snow 20s linear infinite;animation:snow 20s linear infinite}
body{font-family:'Fira Sans Condensed',sans-serif;padding-top:30px;padding-bottom:30px;background-color:rgb(237,239,241)}
.effect-snow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcQncYI0gEe7uQ9RatdaFbszxfQugEMn1Tp8dnH2OyP3MaUwDZOugkN3QaMWLEMYo3jNJD1qPxTSY6aKJy2Y5YPGuoQ6pNQmEsHxdBHjRhcCdjoq6W2XNWyuezDyngdzqK0O8aOVTgTq0/s1600/snow1.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTvbrVvYGE9gUsZO0zFqh38x0z5FP_m1mu22qvsvrasUpBGt9wNedsRbOt4nc2jki_sYXb7rgIBP8LqvgGL_DwOt16AhVPhH6APMxZhyphenhyphenEZM4H01SWGrGAgRIkAOOPHx3sEZFF0QBWMTPY/s1600/snow2.png);-webkit-animation:snow 20s linear infinite;animation:snow 20s linear infinite}
.fill{position:absolute;top:0;left:0;height:100%;right:0;bottom:0;padding:0!important;margin:0!important}
</style>
</head>
<body>
<div class="effect-snow bg-effect fill no-click"></div>
</body>
</html>
Blog Yazılarını 2 Sütuna Bölme Eklentisi
Blogger CSS Blogger CSS3<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto" rel="stylesheet"/>
<style type="text/css">
body{font-family:'Roboto',sans-serif;margin:0;line-height:1.7em;text-align:left;font-size:14px;padding:20px}
.column-count2{border:5px solid #888;padding:20px;-webkit-column-count:2;-moz-column-count:2;column-count:2}
.column-border2{border:5px solid #888;padding:20px;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:40px;-moz-column-gap:40px;column-gap:40px;-webkit-column-rule:2px outset #ddd;-moz-column-rule:2px outset #ddd;column-rule:2px outset #ddd}
div{display:block}
</style>
</head>
<body>
<div class='column-count2'><b>Blogger / Blogspot Özellikleri</b><br />
Başlangıçta Blogger yalnızca çevrimiçi günlük notların paylaşıldığı kişisel bir sayfadan gün geçtikçe gelişen bu sayfalar bir platform içinde web sitesine dönüşerek yeni yayınlar için en popüler içerik yönetim sistemlerinden (CMS) biri oldu.
Blogger, Google tarafından güçlü bir web yayıncılığı platformlarından biridir. Ücretsiz, kolay ve kullanışlı, hızlı, istikrarlı, güvenilir ve günceldir. Eğer bir blogger web siteniz yoksa ve paylaşmak istediğiniz dergi, alışveriş, blog, portföy, CV ve daha fazlası için bir web sitesi oluşturmak için bu platformu kullanabilirsiniz.
Blogger sitelerinin tümünde standart olarak gelir bazlı özellikleri de birlikte sunmaktadır. En önemli hususlardan biri de blogger ücretsiz şablonları, widget'lar, blogger ipuçları ve araçları ile blogger web sitelerinin yeteneklerini kullanmanıza yardımcı olur.
Sadece istediğiniz, kullanmak istediğiniz blogger web sitesini tasarlayın. Gereksiz eklenti ve kodlamalardan kaçının.</div>
<br /><br />
<div class='column-border2'><b>Blogger / Blogspot Özellikleri</b><br />
Başlangıçta Blogger yalnızca çevrimiçi günlük notların paylaşıldığı kişisel bir sayfadan gün geçtikçe gelişen bu sayfalar bir platform içinde web sitesine dönüşerek yeni yayınlar için en popüler içerik yönetim sistemlerinden (CMS) biri oldu.
Blogger, Google tarafından güçlü bir web yayıncılığı platformlarından biridir. Ücretsiz, kolay ve kullanışlı, hızlı, istikrarlı, güvenilir ve günceldir. Eğer bir blogger web siteniz yoksa ve paylaşmak istediğiniz dergi, alışveriş, blog, portföy, CV ve daha fazlası için bir web sitesi oluşturmak için bu platformu kullanabilirsiniz.
Blogger sitelerinin tümünde standart olarak gelir bazlı özellikleri de birlikte sunmaktadır. En önemli hususlardan biri de blogger ücretsiz şablonları, widget'lar, blogger ipuçları ve araçları ile blogger web sitelerinin yeteneklerini kullanmanıza yardımcı olur.
Sadece istediğiniz, kullanmak istediğiniz blogger web sitesini tasarlayın. Gereksiz eklenti ve kodlamalardan kaçının.</div>
</body>
</html>
Farklı Yönler Hover Uygulaması
Blogger CSS Blogger CSS3<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body{padding:2em;font-size:16px;font-family: 'Fira Sans Condensed', sans-serif;text-align:center}
.block{position:relative;display:inline-block;overflow:hidden;width:10em;height:10em;vertical-align:middle;-webkit-transform:translateZ(0);margin:10px}
.block_hover{position:absolute;z-index:1;width:71%;height:71%;transform:rotate(45deg)}
.block_hover:nth-child(1){top:0;right:0;transform-origin:100% 0}
.block_hover:nth-child(2){bottom:0;right:0;transform-origin:100% 100%}
.block_hover:nth-child(3){bottom:0;left:0;transform-origin:0 100%}
.block_hover:nth-child(4){top:0;left:0;transform-origin:0 0}
.block_hover:hover{z-index:9;width:100%;height:100%;transform:none}
.block_content{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;line-height:10em;background:#333;color:#fff;transition:all .3s ease;box-shadow:0 -10em 0 0 #f56954,10em 0 0 0 #ba79cb,0 10em 0 0 #00c0ef,-10em 0 0 0 #ffa812}
.block_hover:nth-child(1):hover ~ .block_content{transform:translate(0,100%)}
.block_hover:nth-child(2):hover ~ .block_content{transform:translate(-100%,0)}
.block_hover:nth-child(3):hover ~ .block_content{transform:translate(0,-100%)}
.block_hover:nth-child(4):hover ~ .block_content{transform:translate(100%,0)}
</style>
</head>
<body>
<p>Farklı yönler blog hover uygulamasını deneyin</p>
<p>↓</p>
<span>→ </span>
<div class="block">
<div class="block_hover"></div>
<div class="block_hover"></div>
<div class="block_hover"></div>
<div class="block_hover"></div>
<div class="block_content">
Hover
</div>
</div>
<span> ←</span>
<p>↑</p>
</body>
</html>
CSS ile Gökkuşağı Kenarlık Efekti Oluşturma
Blogger CSS<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
body {
font-family: 'Roboto Mono', monospace;
margin: 0 auto;
background:#c2c9d4;
padding: 20px
}
.rainbow-box {
background:linear-gradient(60deg, #f79534, #f37056, #ef4e8b, #a167ab, #5073b9, #1099ad, #07b38b, #6fba93);
padding: 4px;
border-radius: 5px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.rainbow-content {
background: #fff;
box-shadow: 0 0 0 3px rgba(255,255,255,.3);
font-size: 14px;
padding: 10px;
border-radius: 3px
}
p {
margin: 0
}
</style>
</head>
<body>
<div class="rainbow-box">
<div class="rainbow-content">
<p>
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.
</p>
</div>
</div>
</body>
</html>
Blogger Sayfa Bulunamadı Eklentisi
Blogger CSS Blogger HTML5<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.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}
#error-pages{background:#232323;font-weight:400;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;text-align:center;margin-bottom:50px;z-index:9999;left:0}
#error-page{font-size:40px;top:30%;position:relative;color:#eee}
#error-page a{color:#eee}
#error-page a:hover{color:#fff}
#error-page p{color:#eee;margin:70px 0 0}
#error-page i{margin-left:10px}
#error-page p.home-page{margin:40px 0 0}
#error-page span{background:#ef4824;color:#fff;font-size:300%;padding:0 20px;border-radius:5px;position:relative;font-weight:bolder;transition:all .5s;cursor:pointer;margin:0 0 40px}
#error-page span:hover{background:#d7401f;-webkit-animation:jelly .5s;color:#fff;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s}
#error-page span:after{top:100%;left:50%;border:solid transparent;content:'';height:0;width:0;border-color:rgba(136,183,213,0);border-top-color:#ef4824;border-width:7px;position:absolute;pointer-events:none;margin-left:-7px}
.back:active{background:#f53b3b;-webkit-transform:scale(.95);-moz-transform:scale(.95);transform:scale(.95);color:#fff}
.back:hover{background:#4c4c4c;color:#fff}
.back{text-decoration:none;background:#5b5a5a;font-size:20px;font-weight:500;line-height:normal;color:#fff;padding:10px 20px;text-transform:uppercase;border-radius:3px;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all .5s ease-out}
@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}
@keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}
@media only screen and (max-width:640px){#error-page span{font-size:200%}#error-page a:hover{color:#fff}}
</style>
</head>
<body>
<div id='error-pages'>
<div id='error-page'>
<span>404</span>
<p>SAYFA BULUNAMADI!</p>
<p class='home-page'><a target='_blank' href='http://bloggereklentileri.blogspot.com.tr/2016/04/blogger-404-hata-sayfas-olusturma.html' class="back">ANA SAYFAYA DÖN</a></p>
</div>
</div>
</body>
</html>
Kaydol:
Kayıtlar (Atom)