<!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>
Blogger CSS3 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger CSS3 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
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>
jQuery Eklentisi ile Kayan Yazı Oluşturma
Blogger CSS3 Blogger HTML5 Blogger jQuery Blogger Widget<!DOCTYPE html>
<html>
<head>
<title>jQuery Eklentisi ile Kayan Yazı Oluşturma</title>
<style type='text/css'>
/*<![CDATA[*/
@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed');
body {font-family: 'Encode Sans Condensed', sans-serif;margin:0 auto 0 auto;padding:20px}
#awning {background:#fff;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-box-shadow:2px 2px 3px rgba(0,0,0,.05);-ms-box-shadow:2px 2px 3px rgba(0,0,0,.05);box-shadow:2px 2px 3px rgba(0,0,0,.05);}
.awning {width:100%;overflow: hidden;background:#fff}
.ver {height:50px;width:100%;}
/*]]>*/
</style>
</head>
<body>
Sola (Left) (varsayılan):<br/><br/>
<div id="awning">
<div class="awning" data-pauseOnHover="true" data-duration='10000'>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. Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</div></div>
<br/>
Sağa (Right):<br/><br/>
<div id="awning">
<div class="awning" data-direction='right' data-pauseOnHover="true" data-duration='10000'>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. Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</div></div>
<br/>
Yukarı (Up):<br/><br/>
<div id="awning">
<div class="awning ver" data-direction='up' data-duration='1500' data-pauseOnHover="true">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.
<br/><br/>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</div></div>
<br/>
Aşağı (Down):<br/><br/>
<div id="awning">
<div class="awning ver" data-direction='down' data-pauseOnHover="true" data-duration='1500'>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.
<br/><br/>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</div></div>
<br/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://rawgit.com/jquerycods/jquery/master/awning.js'></script>
</body>
</html>
AMP HTML Popup Bildirim Kutusu
AMP Blogger CSS3 Blogger HTML5<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## Setup -->
<link rel="canonical" href="https://ampbyexample.com/components/amp-lightbox/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}
a {text-decoration: none;color:#f44336}
.i-amphtml-layout-size-defined .i-amphtml-fill-content {object-fit: cover;}
@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>
<style amp-custom>
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 400;src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');}
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 500;src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.content p{padding:0 20px}
.notifbox{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10000}
.notif_box{background:#fff;color:#555;font-family:Roboto,sans-serif;position:absolute;padding:0;top:15%;transition:all .3s ease-in-out;width:50%;left:50%;margin-left:-25%;z-index:99;border-radius:4px;box-shadow: 0 1px 8px rgba(0,0,0,.3);z-index:2;overflow:hidden}
.notif_box p{margin:0;padding:10px 20px;font-size:14px;font-weight:400;line-height:1.3}
.notif_box p a{color:#f44336;text-decoration:none;font-weight:500}
.notif_box p a:hover{color:black}
.notifbox .close_notifbox{background:0 0;border:none;padding:0;color:#efefef;font-size:30px;position:absolute;top:7px;right:5px;cursor:pointer;width:20px;height:20px;line-height:20px;text-align:center;z-index:2}
.notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus{outline:none}
.notifbox .close_notifbox:hover{color:red}
.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
</style>
</head>
<body>
<div class="content">
<p>
<a href="https://bloggereklentileri.blogspot.com/2017/08/ilk-blogunuzu-hangi-platform-ile-nasl.html" target="_blank">İlk Blogunuzu Hangi Platform ile Nasıl Oluşturacaksınız?</a> - Bu konu hakkında oldukça fazla bilgi var. Fakat blog modası hala geçmek bilmiyor, çünkü her geçen sürede giderek daha fazla insanın blog alemine katıldığını görüyoruz. Blog açmak ve oluştrmak moda olmanın yanında gittikçe daha da popüler oluyor. Burada şunu da söylemek isterim "blog alemi ne kadar kalabalık olursa, bloguların gelirleri de bir o kadar artar".
<br><br>
Blog kullanıcıları ilk başlarda kendileri ile ilgili yada ilgi duydukları belli başlı bir kaç konuyu harmanlayıp yayınlıyorlardı. Son zamanlarda bu fikirlerin yerini iş odaklı düşünceler aldı. Şimdilerde ise iş odaklı fikirlerin yerini girişimcilik ilham kaynağı olmaya başladı. Bu nedenle, insanlar alternatif gelir kaynakları oluşturmak için, hatta emek ve zamanlarının karşılığını almak için üretken bir hobi aramaya başladılar. Dolayısıyla, bu yazıda yeni kullanıcıların ilk blogunu açmak ve oluşturmak için hangi blog platformunu seçmeleri gerektiğine de yardımcı olacağız.
</p>
</div>
<div class="notifbox" id="notifbox">
<div class="notif_box slideInDown">
<button class='close_notifbox' on='tap:notifbox.hide' role='button' tabindex='0' title='kapat'>×</button>
<amp-img alt="" height="550" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsdU26nF02jP0wyl_Ibb0aHUFMaqGA3Ra5OEExXxa-BwpdZvenMH5si0jaATy2TvcdLPxVYcsrYROHJef72e-NBHksqb_u_KplpEIfX6zCk6O0HfacfNe-qHEiwUh83sK_nLrCMOwmbiLL/s1600/blog.png" title="İlk Blogunuzu Hangi Platform ile Nasıl Oluşturacaksınız?" width="1100"></amp-img>
<p>
Devamı için lütfen <a target="_blank" href="https://bloggereklentileri.blogspot.com/2017/08/ilk-blogunuzu-hangi-platform-ile-nasl.html" title="buraya">buraya</a> tıklayın.
</p>
</div>
</div>
</body>
</html>
Blogger AMP HTML Yüzer Arama Kutusu
AMP Blogger CSS3 Blogger HTML5 Blogger Widget<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>
body{font-family: 'Roboto',sans-serif;-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'></script>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'></script>
<style amp-custom>
button.search_icon{background:0 0;border:none;color:red;font-size:30px;padding:0;cursor:pointer}
button.search_icon svg{width:32px;height:32px;vertical-align:middle}
button.search_icon svg path{fill:#666}
.resetbutton{background:0 0;border:none;position:absolute;top:50%;margin-top:-17px;right:10px;padding:0;cursor:pointer;line-height:1;transition:all .4s ease-in-out;z-index:999}
.resetbutton svg{width:34px;height:34px;vertical-align:middle}
.resetbutton svg path{fill:#999}
.resetbutton:focus{outline:0}
#search-box .search-form:not(:valid)~.resetbutton{display:none}
#search-box{width:70%;position:absolute;top:20%;-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;left:50%;margin-left:-35%}
.sos-profil .search button{background:0 0;border:none;color:white;font-size:30px;padding:0;cursor:pointer}
#search-box form{position:relative}
#search-box form input[type=text]{width:100%;top:0;left:0;z-index:99;padding:10px 50px 10px 10px;border:none;border-bottom:2px dotted #999;outline:0;font-size:3em;color:#999;background:#000;background:rgba(0,0,0,.3);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}
amp-lightbox{z-index:10000}
.lightbox{background:rgba(0,0,0,.6);width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center}
.lightbox .close_search{background:0 0;border:none;color:white;font-size:50px;position:absolute;top:10px;right:20px;cursor:pointer;line-height:1}
#search-box .note_search{color:#999;text-align:center;padding:10px 50px 10px 10px}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
</style>
</head>
<body>
<button class='search_icon' on='tap:search_box' title='Search'>
<svg viewBox='0 0 24 24'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#000'/></svg></button>
<amp-lightbox id='search_box' layout='nodisplay'>
<div class='lightbox'>
<button class='close_search' on='tap:search_box.close' role='button' tabindex='0' title='Close'>×</button>
<div id='search-box'>
<form action='https://www.google.com/search' method='get' target='_blank'>
<input autocomplete='off' class='search-form' name='q' placeholder='Arama...' required='required' type='text'/>
<input name='as_sitesearch' type='hidden' value='bloggereklentileri.blogspot.com'/>
<button class='resetbutton' type='reset'><svg viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#000'/>
</svg></button>
</form>
<div class='note_search'>Arama Yapmak İçin Tıklayın</div>
</div>
</div>
</amp-lightbox>
</body>
</html>
CSS + Giriş Font Boyutu Seçimi
Blogger CSS3 Input<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {
font-family: 'Fira Sans Condensed', sans-serif;
}
.container {
font-size: 15px;
border: 1px dotted tomato;
padding: 15px;
}
.container,
.wrapper {
max-width: 700px;
margin: auto;
transition: font-size 1s;
}
h1 {
font-size: 2em;
}
h1::after {
content: "";
display: block;
max-width: 700px;
padding-bottom: 10px;
border-bottom: 1px dotted tomato;
}
h2 {
font-size: 1.5em;
}
p {
font-size: 1.2em;
}
input[type="radio"] {
-webkit-appearance: none;
height: 30px;
width: 30px;
background-color: tomato;
display: inline-block;
outline: none;
transition: background-color .7s;
}
input[type="radio"]:hover {
background-color: #ffa494;
transition: background-color .7s;
}
input[type="radio"]:checked {
background-color: #ffa494;
transition: background-color .7s;
}
input[type="radio"]:checked::after {
color: white;
}
input[type="radio"]#small::after {
font-size: 10px;
content: "A";
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
input[type="radio"]#medium::after {
font-size: 15px;
content: "A";
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
input[type="radio"]#large::after {
font-size: 20px;
content: "A";
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
input[type="radio"]#small:checked ~ .container {
font-size: 10px;
}
input[type="radio"]#medium:checked ~ .container {
font-size: 15px;
}
input[type="radio"]#large:checked ~ .container {
font-size: 20px;
}
.informative {
color: tomato;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="radio" name="group" id="small">
<input type="radio" name="group" id="medium" checked>
<input type="radio" name="group" id="large">
<div class="container">
<h1>CSS + Giriş Font Boyutu Seçimi</h1>
<h2>Blogunuza Adsense Reklam Kodları Nasıl Eklenir?</h2>
<p class="informative">Blogger HTML Dönüştürücü</p>
<p>Adsense hesabınızda oluşturmuş olduğunuz Adsense HTML kodlarını doğrudan blogunuzun HTML yani şablon içerisine kopyalayarak eklemeniz mümkün olmayacaktır. Google Adsense veya harhangi bir javascript kodlarını blogunuzun HTML kısmına eklemek için HTML kodunu aşağıdaki kutuya kopyala - yapıştır yaparak ekleyin ve ardından Dönüştür düğmesine tıklayın. Dönüştürülmüş kodu blogunuza ekleyebilirsiniz.</p>
</div>
</div>
</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 32 Farklı Modal Tasarımı
Blogger CSS Blogger CSS3 Blogger javaScript Blogger jQuery Blogger Modal<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet prefetch' href='https://rawgit.com/jquerycods/css/master/modal.min.css'/>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;color:#555;margin:0 auto}
.container{padding-bottom:140px}
.blogger-modal{margin:0 0 10px;list-style:none}
.blogger-modal li{display:inline-block;margin:4px;padding:0}
.btn:focus{outline:none}
.modExample .btn{margin:4px 8px 4px 0}
</style>
</head>
<body>
<div class="container">
<div class="modExample">
<h2>Blogger Animasyonlu Modal Tasarımı</h2>
<a href="#myModal1" role="button" data-target="#myModal1" class="btn btn-default" data-toggle="modal">Modal-1</a>
<div id="myModal1" class="modal" data-easein="fadeIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Başlık 1</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
<button class="btn btn-primary">Buton ekle</button>
</div>
</div>
</div>
</div>
<a href="#myModal2" role="button" class="btn btn-default" data-toggle="modal">Modal-2</a>
<div id="myModal2" class="modal" data-easein="flipXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık 2</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
<button class="btn btn-primary">Buton ekle</button>
</div>
</div>
</div>
</div>
<a href="#myModal3" role="button" class="btn btn-default" data-toggle="modal">Modal-3</a>
<div id="myModal3" class="modal" data-easein="flipYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal4" role="button" class="btn btn-default" data-toggle="modal">Modal-4</a>
<div id="myModal4" class="modal" data-easein="flipBounceXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<br />
<a href="#myModal5" role="button" class="btn btn-default" data-toggle="modal">Modal-5</a>
<div id="myModal5" class="modal" data-easein="flipBounceYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık 1</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
<button class="btn btn-primary">Buton ekle</button>
</div>
</div>
</div>
</div>
<a href="#myModal6" role="button" class="btn btn-default" data-toggle="modal">Modal-6</a>
<div id="myModal6" class="modal" data-easein="swoopIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık 2</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
<button class="btn btn-primary">Buton ekle</button>
</div>
</div>
</div>
</div>
<a href="#myModal7" role="button" class="btn btn-default" data-toggle="modal">Modal-7</a>
<div id="myModal7" class="modal" data-easein="whirlIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal8" role="button" class="btn btn-default" data-toggle="modal">Modal-8</a>
<div id="myModal8" class="modal" data-easein="shrinkIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal9" role="button" class="btn btn-default" data-toggle="modal">Modal-9</a>
<div id="myModal9" class="modal" data-easein="expandIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık 1</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
<button class="btn btn-primary">Buton ekle</button>
</div>
</div>
</div>
</div>
<a href="#myModal10" role="button" class="btn btn-default" data-toggle="modal">Modal-10</a>
<div id="myModal10" class="modal" data-easein="bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık 2</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
<button class="btn btn-primary">Buton ekle</button>
</div>
</div>
</div>
</div>
<a href="#myModal11" role="button" class="btn btn-default" data-toggle="modal">Modal-11</a>
<div id="myModal11" class="modal" data-easein="bounceUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal12" role="button" class="btn btn-default" data-toggle="modal">Modal-12</a>
<div id="myModal12" class="modal" data-easein="bounceDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal13" role="button" class="btn btn-default" data-toggle="modal">Modal-13</a>
<div id="myModal13" class="modal" data-easein="bounceLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal15" role="button" class="btn btn-default" data-toggle="modal">Modal-14</a>
<div id="myModal15" class="modal" data-easein="bounceRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık 1</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
<button class="btn btn-primary">Buton ekle</button>
</div>
</div>
</div>
</div>
<a href="#myModal16" role="button" class="btn btn-default" data-toggle="modal">Modal-15</a>
<div id="myModal16" class="modal" data-easein="slideUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık 2</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
<button class="btn btn-primary">Buton ekle</button>
</div>
</div>
</div>
</div>
<a href="#myModal17" role="button" class="btn btn-default" data-toggle="modal">Modal-16</a>
<div id="myModal17" class="modal" data-easein="slideDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal18" role="button" class="btn btn-default" data-toggle="modal">Modal-17</a>
<div id="myModal18" class="modal" data-easein="slideLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal14" role="button" class="btn btn-default" data-toggle="modal">Modal-18</a>
<div id="myModal14" class="modal" data-easein="slideRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal19" role="button" class="btn btn-default" data-toggle="modal">Modal-19</a>
<div id="myModal19" class="modal" data-easein="slideUpBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal20" role="button" class="btn btn-default" data-toggle="modal">Modal-20</a>
<div id="myModal20" class="modal" data-easein="slideDownBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal21" role="button" class="btn btn-default" data-toggle="modal">Modal-21</a>
<div id="myModal21" class="modal" data-easein="slideLeftBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal22" role="button" class="btn btn-default" data-toggle="modal">Modal-22</a>
<div id="myModal22" class="modal" data-easein="slideRightBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal23" role="button" class="btn btn-default" data-toggle="modal">Modal-23</a>
<div id="myModal23" class="modal" data-easein="perspectiveUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal24" role="button" class="btn btn-default" data-toggle="modal">Modal-24</a>
<div id="myModal24" class="modal" data-easein="perspectiveDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal25" role="button" class="btn btn-default" data-toggle="modal">Modal-25</a>
<div id="myModal25" class="modal" data-easein="perspectiveLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal26" role="button" class="btn btn-default" data-toggle="modal">Modal-26</a>
<div id="myModal26" class="modal" data-easein="perspectiveRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal27" role="button" class="btn btn-default" data-toggle="modal">Modal-27</a>
<div id="myModal27" class="modal" data-easein="shake" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal28" role="button" class="btn btn-default" data-toggle="modal">Modal-28</a>
<div id="myModal28" class="modal" data-easein="tada" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal29" role="button" class="btn btn-default" data-toggle="modal">Modal-29</a>
<div id="myModal29" class="modal" data-easein="swing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal30" role="button" class="btn btn-default" data-toggle="modal">Modal-30</a>
<div id="myModal30" class="modal" data-easein="bounce" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal31" role="button" class="btn btn-default" data-toggle="modal">Modal-31</a>
<div id="myModal31" class="modal" data-easein="flash" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
<a href="#myModal32" role="button" class="btn btn-default" data-toggle="modal">Modal-32</a>
<div id="myModal32" class="modal" data-easein="pulse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Başlık</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
</div>
</div>
</div>
</div>
</div>
<p>
<h2>Animasyonlu İpucu Kutusu</h2>
<div>
<ul class="blogger-modal">
<li><a data-original-title="İpucu-1" data-animation="false" data-easein="fadeIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-1</a></li>
<li><a data-original-title="İpucu-2" data-animation="false" data-easein="flipXIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-2</a></li>
<li><a data-original-title="İpucu-3" data-animation="false" data-easein="flipYIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-3</a></li>
<li><a data-original-title="İpucu-4" data-animation="false" href="#" data-easein="flipBounceXIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-4</a></li>
<li><a data-original-title="İpucu-5" data-animation="false" data-easein="flipBounceYIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-5</a></li>
<li><a data-original-title="İpucu-6" data-animation="false" data-easein="swoopIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-6</a></li>
<li><a data-original-title="İpucu-7" data-animation="false" data-easein="whirlIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-7</a></li>
<li><a data-original-title="İpucu-8" data-animation="false" href="#" data-easein="shrinkIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-8</a></li>
<li><a data-original-title="İpucu-9" data-animation="false" data-easein="expandIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-9</a></li>
<li><a data-original-title="İpucu-10" data-animation="false" data-easein="bounceIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-10</a></li>
<li><a data-original-title="İpucu-11" data-animation="false" data-easein="bounceUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-11</a></li>
<li><a data-original-title="İpucu-12" data-animation="false" href="#" data-easein="bounceDownIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-12</a></li>
<li><a data-original-title="İpucu-13" data-animation="false" data-easein="bounceLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-13</a></li>
<li><a data-original-title="İpucu-14" data-animation="false" data-easein="bounceRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-14</a></li>
<li><a data-original-title="İpucu-15" data-animation="false" data-easein="slideUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-15</a></li>
<li><a data-original-title="İpucu-16" data-animation="false" href="#" data-easein="slideDownIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-16</a></li>
<li><a data-original-title="İpucu-17" data-animation="false" data-easein="slideLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-17</a></li>
<li><a data-original-title="İpucu-18" data-animation="false" data-easein="slideRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-18</a></li>
<li><a data-original-title="İpucu-19" data-animation="false" data-easein="slideUpBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-19</a></li>
<li><a data-original-title="İpucu-20" data-animation="false" data-easein="slideDownBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-20</a></li>
<li><a data-original-title="İpucu-21" data-animation="false" data-easein="slideLeftBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-21</a></li>
<li><a data-original-title="İpucu-22" data-animation="false" data-easein="slideRightBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-22</a></li>
<li><a data-original-title="İpucu-23" data-animation="false" data-easein="perspectiveUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-23</a></li>
<li><a data-original-title="İpucu-24" data-animation="false" data-easein="perspectiveDownIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-24</a></li>
<li><a data-original-title="İpucu-25" data-animation="false" data-easein="perspectiveLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-25</a></li>
<li><a data-original-title="İpucu-26" data-animation="false" data-easein="perspectiveRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-26</a></li>
<li><a data-original-title="İpucu-27" data-animation="false" data-easein="shake" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-27</a></li>
<li><a data-original-title="İpucu-28" data-animation="false" data-easein="tada" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-28</a></li>
<li><a data-original-title="İpucu-29" data-animation="false" data-easein="flash" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-29</a></li>
<li><a data-original-title="İpucu-30" data-animation="false" data-easein="pulse" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-30</a></li>
<li><a data-original-title="İpucu-31" data-animation="false" data-easein="swing" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-31</a></li>
<li><a data-original-title="İpucu-32" data-animation="false" data-easein="bounce" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-32</a></li>
</ul>
</div>
</div>
<script src='https://rawgit.com/jquerycods/jquery/master/jquery-1.min.js'></script>
<script src='https://rawgit.com/jquerycods/jquery/master/jquery-2.min.js'></script>
<script src='https://rawgit.com/jquerycods/jquery/master/velocity.min.js'></script>
<script src='https://rawgit.com/jquerycods/jquery/master/velocity.ui.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$('a[rel=popover]').popover().click(function(e){e.preventDefault();var open=$(this).attr('data-easein');if(open=='shake'){$(this).next().velocity('callout.'+open);}else if(open=='pulse'){$(this).next().velocity('callout.'+open);}else if(open=='tada'){$(this).next().velocity('callout.'+open);}else if(open=='flash'){$(this).next().velocity('callout.'+open);}else if(open=='bounce'){$(this).next().velocity('callout.'+open);}else if(open=='swing'){$(this).next().velocity('callout.'+open);}else{$(this).next().velocity('transition.'+open);}});$(".modal").each(function(index){$(this).on('show.bs.modal',function(e){var open=$(this).attr('data-easein');if(open=='shake'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='pulse'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='tada'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='flash'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='bounce'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='swing'){$('.modal-dialog').velocity('callout.'+open);}else{$('.modal-dialog').velocity('transition.'+open);}});});
//]]>
</script>
</body>
</html>
Basit CSS Modal Kutusu
Blogger CSS Blogger CSS3 Blogger Modal<!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;margin:0 auto 0 auto}
a {text-decoration: none;outline: none;transition: all 0.25s;}
.modal-box{z-index:9}
.modal-box__overlay{position:fixed;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:0;background:rgba(0,0,0,0.8);-webkit-transition:opacity 0.1s ease-in;-moz-transition:opacity 0.1s ease-in;transition:opacity 0.1s ease-in;cursor:default}
.modal-box__content{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:800px;padding:20px;background:#fff;opacity:0}
.modal-box:target .modal-box__overlay,.modal-box:target .modal-box__content{opacity:1;visibility:visible}
.modal-box--close{background:#606061;color:#ffffff;height:30px;line-height:30px;position:absolute;right:-15px;top:-15px;padding:0 10px}
</style>
</head>
<body>
<a href="#modal-box--open">Modal Kutusunu Aç</a>
<div id="modal-box--open" class="modal-box">
<a href="#modal-box--close" class="modal-box__overlay"></a>
<div class="modal-box__content">
<a href="#modal-box--close" class="modal-box--close">Kapat</a>
<h2>Modal Kutusu</h2>
<p>Bir teknoloji ürünü dengeli kullanıldığında, çocukların etkili iletişim becerilerinin gelişmesine ve sizinle iletişimine katkıda bulunabilir.</p>
</div>
</div>
</body>
</html>
Kaydol:
Kayıtlar (Atom)