<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');
body {font-family: 'Fira Sans Condensed', sans-serif;}
#return-to-top{position:fixed;bottom:20px;right:20px;background:rgb(0,0,0);background:rgba(0,0,0,0.7);width:50px;height:50px;display:block;text-decoration:none;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;display:none;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}
#return-to-top i{color:#fff;margin:0;position:relative;left:16px;top:13px;font-size:19px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}
#return-to-top:hover{background:rgba(0,0,0,0.9)}
#return-to-top:hover i{color:#fff;top:5px}
body{background:#eee;font-family:'Open Sans',sans-serif}
h3{font-size:30px;font-weight:400;text-align:center;margin-top:50px}
h3 i{color:#444}
</style>
</head>
<body>
<div style="height:2000px;">
<h3>Scroll down</h3>
<h3><i class="icon-arrow-down"></i></h3>
</div>
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
// ===== Scroll to Top ====
$(window).scroll(function(){if($(this).scrollTop()>=50){$('#return-to-top').fadeIn(200);}else{$('#return-to-top').fadeOut(200);}});$('#return-to-top').click(function(){$('body,html').animate({scrollTop:0},500);});
</script>
</body>
</html>
Blogger jQuery etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger jQuery etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
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>
jQuery Zoom
Blogger jQuery<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<link rel='stylesheet' href='http://www.jacklmoore.com/app.css'/>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;-webkit-font-smoothing:antialiased;margin:0 auto;text-align:center}
.zoom{position:relativedisplay:inline-block;}
.zoom:after{content:'';position:absolute;width:33px;display:block;height:33px;top:0;right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooQ5HEmsZfSOD5XBCMXSHnnmOCpuQ_3J9RrdbUfs96NVnSat_QXpk3F5Zhtn71uVgcRoHnK-LUgUgMYUtNvgDUSM0UZQTicghyphenhyphenqOZyyrDrc7cheUgWr8H_KhaqG5iNDVOQL-4WUk-Fwg/s1600/icon.png)}
.zoom img{display:block;object-fit:cover}
.zoom img::-moz-selection{background:transparent}
.zoom img::selection{background:transparent}
#img1{margin-right:5px}
#img2 img:hover{cursor:url(grab.cur),default}
#img1 span,#img2 span{top:5px;position:absolute;right:30px;color:#444;}
#img2 img:active{cursor:url(grabbed.cur),default}
</style>
</head>
<body>
<span class='zoom' id='img1'>
<span>Hover</span>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJ4Km9kuMuejbxfH_sAG9iMmpBABMf3na46F2ZAEVHzRsAWwdCURWc7CF_xW86ezMPiQ3bwrBIwFQOW27PNS1bmiBKv9Yf2jQUPunbmOvq4xa0mjZuiRBrOoV9Gul65T3rQr5-Kqg0vY/s1600/ws.jpg' width='370' alt='Volkswagen Vosvos' height="213"/>
</span><span class='zoom' id='img2'>
<span>Grab</span>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3A3B0hM_UtiNlPmN7InaomaU8orpi99evNm2GktNZ3D6N8nxnlzx-l7gRIHXX30CDZSJj14VMwxSmYY9kQUpwaCBNEU6CQD1fXMFl0aJTHRI7i5i3nfU194SpNEDJC2n_iPk69f4gGSg/s1600/gm.jpg' width='370' alt='VR Geliştirme' height="213"/>
</span>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://rawgit.com/jquerycods/jquery/master/zoom.js'></script>
<script>
if ($ && $.fn.zoom) {$('#img1').zoom();$('#img2').zoom({ on:'grab' });}
</script>
</body>
</html>
Hareketli jQuery Destekli Arama Kutusu
Blogger jQuery<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
/*<![CDATA[*/
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:20px}
label#search-label{cursor:pointer}
label#search-label svg{width:24px;height:24px}
label#search-label svg path{fill:#666}
div#searchcontainer div{padding:5px;color:#efefef;text-align:center}
div#searchcontainer form{opacity:0;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);-webkit-transition:all .5s 0s;transition:all .5s 0s}
div#searchcontainer form input[type="text"]{width:100%;top:0;left:0;z-index:99;padding:10px;border:none;border-bottom:4px solid #222;outline:none;font-size:3em;background:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html.opensearch div#searchcontainer{position:fixed;top:0;width:100%;height:100%;left:0;opacity:1;-webkit-transform:scale(1) translate3d(0,0,0);transform:scale(1) translate3d(0,0,0);-webkit-transition:-webkit-transform .5s,opacity .5s,left 0s 0s;transition:transform .5s,opacity .5s,left 0s 0s;z-index:9999}
html.opensearch div#searchcontainer .search_wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;padding:10% 5% 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html.opensearch div#searchcontainer:before{content:"";background:rgba(0,0,0,.7);position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
html.opensearch div#searchcontainer form{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition:all .5s .5s}
/*]]>*/
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</head>
<body>
<label id="search-label" title="Search">
<svg viewBox="0 0 24 24">
<path fill="#000000" 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" />
</svg>
</label>
<div id="searchcontainer">
<div class="search_wrapper">
<form id="search" action='/search' method='get'>
<input name='max-results' type='hidden' value='8'/>
<input type="text" name="search-terms" id="search-terms" placeholder="Aranacak kelime...">
<div>Arama Yapmak İçin Enter'a Basın</div>
</form>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var fixedsearchbox=function(e){var n,o,t,a=e(document.documentElement),r=null!=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),s=r?"touchstart":"click",c=100,i=27,u={init:function(){n=e("#searchcontainer"),o=e("#search-terms"),t=e("#search-label"),t.on(s,function(e){n.css("top","px"),a.toggleClass("opensearch"),a.hasClass("opensearch")?(n.css("zIndex",c++),o.focus()):o.blur(),e.preventDefault(),e.stopPropagation()}),o.on(s,function(e){e.stopPropagation()}),e(document).on(s+" keyup",function(e){"keyup"==e.type&&e.keyCode!=i||(a.removeClass("opensearch"),o.blur())})}};return u}(jQuery);fixedsearchbox.init();
//]]>
</script>
</body>
</html>
jQuery + Giriş Font Boyutu Seçimi
Blogger Akordeon Blogger Buton Blogger CSS3 Blogger jQuery Input<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif;background: #f4f4f2; margin: 0 auto;font-size:14px;color: #444;}
.navbar {
width: 100%;
height: 60px;
background: #ccc;
}
.accordion {
width: 700px;
margin: 50px auto;
}
.accordion label {
font-family: Arial, sans-serif;
padding: 18px 30px 3px 21px;
position: relative;
display: block;
height: 50px;
cursor: pointer;
color: #adb3b9;
line-height: 33px;
font-size: 19px;
background: #fff;
box-shadow: 0px 1px 1px 0px #ccc;
}
.accordion label:hover {
color: #fff;
background: #ccc;
}
.accordion label:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
margin-top: 10px;
margin-right: 5px;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordion input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
margin-bottom: -6px;
background: #F1F1F1;
color: #777;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
content: "+";
}
.accordion input {
display: none;
}
.accordion .article {
background: #f4f4f4;
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion .article p {
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion input:checked ~ .article {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding: 25px;
}
.accordion input:checked ~ .article.ac-small {
height: 478px;
}
.accordion input:checked ~ .article.ac-medium {
height: 478px;
}
.accordion input:checked ~ .article.ac-large {
height: 478px;
}
.characters {
-webkit-animation: box 800ms linear 0s 1 forwards;
}
input[type="button"] {
-webkit-appearance: none;
height: 60px;
width: 100px;
border: none;
background-color: tomato;
display: inline-block;
outline: none;
color: #fff;
transition: background-color .7s;
cursor: pointer;
}
input[type="button"]:checked {
background-color: #ffa494;
transition: background-color .7s;
border: none;
}
@media (max-width: 1280px) {
.accordion {
width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar">
<input class="#" type="button" value="+" onClick="zoomIn()"/>
<input class="#" type="button" value="-" onClick="zoomOut()"/>
</div>
<div class="accordion">
<h1 style="font-size:20px;font-weight:500;padding-bottom:53px;text-align:center;margin:0 auto;color:#8A8A8A;">Rafadan Tayfa 1. Bölüm Hikayesi (Ekmek Teknesi)</h1>
<div>
<input id="ac-1" name="accordion-1" type="checkbox">
<label for="ac-1">Sütun-1</label>
<div id="article" class="article ac-small">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox">
<label for="ac-2">Sütun-2</label>
<div id="article" class="article ac-medium">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox">
<label for="ac-3">Sütun-3</label>
<div id="article" class="article ac-large">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox">
<label for="ac-4">Sütun-4</label>
<div id="article" class="article ac-large">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox">
<label for="ac-5">Sütun-5</label>
<div id="article" class="article ac-large">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
</div>
<script language="javascript">
var fontSize = 1;
function zoomIn() {
fontSize += 0.1;
document.getElementById("article").style.fontSize = fontSize + "em";
}
function zoomOut() {
fontSize -= 0.1;
document.getElementById("article").style.fontSize = fontSize + "em";
}
</script>
</body>
</html>
Blogger Otomatik Slider Widget
Blogger javaScript Blogger jQuery Blogger Widget<!DOCTYPE html>
<html dir='ltr' lang='tr_TR'>
<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;}
#featuredpost {margin:15px auto; width: 970px;}
#myslide *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#myslide ul,#myslide li{padding:0;margin:0;list-style:none;position:relative}
#myslide ul{height:320px}
#myslide li{width:50%;height:100%;position:absolute;display:none}
#myslide li:nth-child(1), #myslide li:nth-child(2), #myslide li:nth-child(3), #myslide li:nth-child(4), #myslide li:nth-child(5){display:block}
#myslide li:nth-child(1){left:0;top:0}
#myslide li:nth-child(2){left:50%;width:25%;height:50%}
#myslide li:nth-child(3){left:75%;width:25%;height:50%}
#myslide li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#myslide li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#myslide li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#myslide li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#myslide li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#myslide li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#myslide li:nth-child(1) span.dy, #myslide li:nth-child(1) span.autname{display:none;}
#myslide a{display:block;width:100%;height:100%;overflow:hidden}
#myslide img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#myslide li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#myslide .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAFACAYAAAB5k8bJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhhJREFUeNrslG1LVFEUhe/cGQtLfBlrECECIZEgDAlRCUEoUwQRIXWc/HmmJaIiKqIFCin1YQiFNDWTCKQPEhS9qGO6Vuwlxzs62cfiXnhg77Ofu845M44Rz/MqPXt8z3nCJmzCJmz+/cZ3m1+qfXfR1Xw3IKImAg7ZRFnoxQObRn1T8pQWAxlpGdMuKO0i2GOTD/a16a5N86VdAj/YFICf0r7btCBm8ZfBNxaFNv196q+mFetycfCFRSkLpX02La4rJLjIpgzsUIvaO5yW6Wzl4BOba2CbU2rFpl3XphXgI4sb4IPSikyrlFYF3qnYkKa0mzrbLbDKphq8CWq3pdWAJTa1YJnfhqvdkVYH0mzqwUvPvtxCm96N2UIDWKDWCBZ1U12hUVdoAi9Y3APz0pR2X9oD8JxFC3gWvEKzPt5WMMOmDUxLK7GQNmmcTvHFSTCuK+hs7dq0A0xwZRaMuRqfDn0gnZyymAMj0uKaalNqo1xZAMPSSmz6UGldnLJ4BYaCaV1KozbElTR4EtS6pXWDp1x57WqlZ2rLph1Su2paT5bGP6JBN82TxmmSISxWXE1pSaX1cMqVt2BA2hWbJpXWK23tNK1XadQeU1tn8WeNP5d+92z89/RIm/ZxLxabbpq0lNJSSsvSTt80t3ac9j54tr/QTpytX9rxpokzz3ZObSvn2XKnZZ9t63xXCLVQC7VQ+0+0IwEGAOg12Bw8IUYdAAAAAElFTkSuQmCC);background-position:50% 40%;background-repeat:repeat-x;}
#myslide h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#myslide .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#myslide li:nth-child(2) .autname,#myslide li:nth-child(3) .autname,#myslide li:nth-child(4) .autname,#myslide li:nth-child(5) .autname{display:none;}
#myslide .overlayx,#myslide li{transition:all .4s ease-in-out}
#myslide li:nth-child(1) .overlayx{display:none;}
#myslide li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#myslide li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#myslide ul{height:600px}
#myslide li:nth-child(1){width:100%;height:50%}
#myslide li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#myslide li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#myslide li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#myslide li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){#myslide li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</head>
<body>
<div id="featuredpost"></div>
<script>
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",MonthNames:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="myslide"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#myslide li:first").before(e("#myslide li:last"));return false});e("#nextx").click(function(){e("#myslide li:last").after(e("#myslide li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#myslide li:first").before(e("#myslide li:last"));e("#myslide").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://saglikveguzellikonerileri.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
</body>
</html>
Sidebar Son Yayınlanan İçerikler Slider Widget'i
Blogger CSS Blogger javaScript Blogger jQuery Blogger Slider<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);body{background:#21bfe1;padding:0;margin:0;font-family:'Open Sans'}
a,a:visited{color:#555;outline:none;text-decoration:none}
a:hover,a:focus,a:visited:hover{color:#22a1c4;text-decoration:none}
.terbaru-container{background:#fff;width:340px;margin:5% auto;padding:10px;border-radius:4px}
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font-size:11px}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside{width:100%;height:500px}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
ul.rcentside img{border:0;width:100%;height:auto}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAFACAYAAAB5k8bJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhhJREFUeNrslG1LVFEUhe/cGQtLfBlrECECIZEgDAlRCUEoUwQRIXWc/HmmJaIiKqIFCin1YQiFNDWTCKQPEhS9qGO6Vuwlxzs62cfiXnhg77Ofu845M44Rz/MqPXt8z3nCJmzCJmz+/cZ3m1+qfXfR1Xw3IKImAg7ZRFnoxQObRn1T8pQWAxlpGdMuKO0i2GOTD/a16a5N86VdAj/YFICf0r7btCBm8ZfBNxaFNv196q+mFetycfCFRSkLpX02La4rJLjIpgzsUIvaO5yW6Wzl4BOba2CbU2rFpl3XphXgI4sb4IPSikyrlFYF3qnYkKa0mzrbLbDKphq8CWq3pdWAJTa1YJnfhqvdkVYH0mzqwUvPvtxCm96N2UIDWKDWCBZ1U12hUVdoAi9Y3APz0pR2X9oD8JxFC3gWvEKzPt5WMMOmDUxLK7GQNmmcTvHFSTCuK+hs7dq0A0xwZRaMuRqfDn0gnZyymAMj0uKaalNqo1xZAMPSSmz6UGldnLJ4BYaCaV1KozbElTR4EtS6pXWDp1x57WqlZ2rLph1Su2paT5bGP6JBN82TxmmSISxWXE1pSaX1cMqVt2BA2hWbJpXWK23tNK1XadQeU1tn8WeNP5d+92z89/RIm/ZxLxabbpq0lNJSSsvSTt80t3ac9j54tr/QTpytX9rxpokzz3ZObSvn2XKnZZ9t63xXCLVQC7VQ+0+0IwEGAOg12Bw8IUYdAAAAAElFTkSuQmCC);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{margin:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{opacity:.1}
ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}
ul.rcentside li:hover h4{bottom:30px}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}
ul.rcentside li:hover .label_text{bottom:20px;opacity:1}
ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</head>
<body>
<div class="terbaru-container">
<div id="featuredpostside"></div>
</div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",MonthNames:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
blogURL: "https://saglikveguzellikonerileri.blogspot.com",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</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>
Blogger Uyumlu Modal Tasarım
Blogger CSS Blogger CSS3 Blogger javaScript Blogger jQuery Blogger Modal<!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;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0 auto 0 auto;height:100vh;background:#f44336}
*{box-sizing:border-box}
h1,h2,h3,p{font-weight:300;margin:0 0 2.4rem 0}
h1,h2,h3{line-height:1.3}
a{text-decoration:none;color:inherit;font-weight:400}
.modal{will-change:visibility,opacity;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;z-index:1000;visibility:hidden;opacity:0;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1);-webkit-transition-delay:$modal-delay;transition-delay:$modal-delay}
.modal--active{visibility:visible;opacity:1}
.modal--align-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
.modal__bg{background:transparent}
.modal__dialog{max-width:600px;padding:1.2rem}
.modal__content{will-change:transform,opacity;position:relative;padding:2.4rem;background:#ffebee;background-clip:padding-box;box-shadow:0 12px 15px 0 rgba(0,0,0,0.25);opacity:0;-webkit-transition:all 0.25s cubic-bezier(0.23,1,0.32,1);transition:all 0.25s cubic-bezier(0.23,1,0.32,1)}
.modal__content--active{opacity:1}
.modal__close{z-index:1100;cursor:pointer}
.modal__trigger{position:relative;display:inline-block;padding:1.2rem 2.4rem;color:rgba(0,0,0,0.7);line-height:1;cursor:pointer;background:#ffebee;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1)}
.modal__trigger--active{z-index:10}
.modal__trigger:hover{background:#e5d3d6}
#modal__temp{will-change:transform,opacity;position:absolute;top:0;left:0;right:0;bottom:0;background:#ffebee;-webkit-transform:none;transform:none;opacity:1;-webkit-transition:opacity 0.1s ease-out,-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,transform 0.5s cubic-bezier(0.23,1,0.32,1),-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1)}
img{max-width:100%}
.demo-btns header{padding:7vh 10vw;background:#ffebee;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.demo-btns header h1{margin:0;color:rgba(0,0,0,0.54);font-weight:300}
.demo-btns .info{background:#f44336;padding:3vh 10vw;height:70vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-flow:column wrap;flex-flow:column wrap}
.demo-btns p{text-align:center;color:#fff}
.demo-btns .link{font-size:20px}
.demo-btns .modal__trigger{margin-right:3px}
@media (max-width:640px){.demo-btns .modal__trigger{margin-bottom:0.8rem}}
.demo-close{position:absolute;top:0;right:0;margin:1.2rem;padding:0.6rem;background:rgba(0,0,0,0.3);border-radius:50%;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1)}
.demo-close svg{width:24px;fill:#fff;pointer-events:none;vertical-align:top}
.demo-close:hover{background:rgba(0,0,0,0.6)}
</style>
</head>
<body>
<div class="demo-btns">
<header>
<h1>Material Modal Tasarım</h1>
</header>
<div class="info">
<div class="buttons">
<p>
<a href="" data-modal="#modal" class="modal__trigger">Modal 1</a>
<a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a>
<a href="" data-modal="#modal3" class="modal__trigger">Modal 3</a>
</p>
</div>
<p>Bir modalı etkinleştirmek için bir butona tıklayın.<br><a href="http://bloggereklentileri.blogspot.com" target="_blank" class="link">Blogger Eklentileri</a></p>
</div>
</div>
<div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true">
<div class="modal__dialog">
<div class="modal__content">
<h1>Modal</h1>
<p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p>
<a href="" class="modal__close demo-close">
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
</a>
</div>
</div>
</div>
<div id="modal2" class="modal modal--align-top modal__bg" role="dialog" aria-hidden="true">
<div class="modal__dialog">
<div class="modal__content">
<h1>Büyük Modal</h1>
<h3>Teknoloji Çocuklarla İletişimimize Destek mi Köstek mi?</h3>
<p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p>
<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbLGh-8t71-IWwYCeROcvCLLTd9sVxoM95uV1PFfOdEbs3FQ5dCcR-FmBJdtKuzeRnPnA8kxgzVtwSH5NdC7lsMgCTq8DGqY-3tIbisUHshaZtY6kgEUNmsbIecqqvwGDq-6T7iK7u-p4/s640/teknoloji.jpg" alt="resim" /></p>
<p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur. İlgili bir veli olarak çocuğunuza yakın bir mesafede oturup, hem çocuğunuzun seyrettiği, ilgilendiği veya kullandığı şeyleri kontrol edip gerektiğinde müdahale edebilirsiniz, hem de işinizi tamamlayabilirsiniz. Çocuğunuzun bilgisayarına güvenlik programlarını indirip uygunsuz sitelere girişini engelleyebilirsiniz veya günümüzde medya okuryazarı denilen medya zekâsı yüksek, eleştirel düşünebilen çocuk olması ve kendi kendini denetlemesi için onu yetiştirebilirseniz.</p>
<p>Bireysel kullanılan teknoloji ürünleri de vardır, grup olarak kullanılabilecek teknoloji ürünleri de. İkisine de dengeli olmak şartıyla zaman ayırabilirsiniz. Ama beraberce yapabileceklerinizi seçmekte fayda vardır. Örneğin, internet sayfasında bulunan eğitici ve eğlenceli etkinliklerden birlikte yapılabilecek olanları seçersiniz. Böylece sohbet de ederseniz, işbirliği de yaparsanız, beraberce eğlenir aile olmanın tadını da çıkarırsınız.</p>
<a href="" class="modal__close demo-close">
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
</a>
</div>
</div>
</div>
<div id="modal3" class="modal modal__bg" role="dialog" aria-hidden="true">
<div class="modal__dialog">
<div class="modal__content">
<h1>Modal 3</h1>
<p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p>
<a href="" class="modal__close demo-close">
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
</a>
</div>
</div>
</div>
<script>
var Modal=(function(){var trigger=$qsa('.modal__trigger');var modals=$qsa('.modal');var modalsbg=$qsa('.modal__bg');var content=$qsa('.modal__content');var closers=$qsa('.modal__close');var w=window;var isOpen=false;var contentDelay=400;var len=trigger.length;function $qsa(el){return document.querySelectorAll(el);}
var getId=function(event){event.preventDefault();var self=this;var modalId=self.dataset.modal;var len=modalId.length;var modalIdTrimmed=modalId.substring(1,len);var modal=document.getElementById(modalIdTrimmed);makeDiv(self,modal);};var makeDiv=function(self,modal){var fakediv=document.getElementById('modal__temp');if(fakediv===null){var div=document.createElement('div');div.id='modal__temp';self.appendChild(div);moveTrig(self,modal,div);}};var moveTrig=function(trig,modal,div){var trigProps=trig.getBoundingClientRect();var m=modal;var mProps=m.querySelector('.modal__content').getBoundingClientRect();var transX,transY,scaleX,scaleY;var xc=w.innerWidth / 2;var yc=w.innerHeight / 2;trig.classList.add('modal__trigger--active');scaleX=mProps.width / trigProps.width;scaleY=mProps.height / trigProps.height;scaleX=scaleX.toFixed(3);scaleY=scaleY.toFixed(3);transX=Math.round(xc-trigProps.left-trigProps.width / 2);transY=Math.round(yc-trigProps.top-trigProps.height / 2);if(m.classList.contains('modal--align-top')){transY=Math.round(mProps.height / 2+mProps.top-trigProps.top-trigProps.height / 2);}
trig.style.transform='translate('+transX+'px, '+transY+'px)';trig.style.webkitTransform='translate('+transX+'px, '+transY+'px)';div.style.transform='scale('+scaleX+','+scaleY+')';div.style.webkitTransform='scale('+scaleX+','+scaleY+')';window.setTimeout(function(){window.requestAnimationFrame(function(){open(m,div);});},contentDelay);};var open=function(m,div){if(!isOpen){var content=m.querySelector('.modal__content');m.classList.add('modal--active');content.classList.add('modal__content--active');content.addEventListener('transitionend',hideDiv,false);isOpen=true;}
function hideDiv(){div.style.opacity='0';content.removeEventListener('transitionend',hideDiv,false);}};var close=function(event){event.preventDefault();event.stopImmediatePropagation();var target=event.target;var div=document.getElementById('modal__temp');if(isOpen&&target.classList.contains('modal__bg')||target.classList.contains('modal__close')){div.style.opacity='1';div.removeAttribute('style');for(var i=0;i<len;i++){modals[i].classList.remove('modal--active');content[i].classList.remove('modal__content--active');trigger[i].style.transform='none';trigger[i].style.webkitTransform='none';trigger[i].classList.remove('modal__trigger--active');}
div.addEventListener('transitionend',removeDiv,false);isOpen=false;}
function removeDiv(){setTimeout(function(){window.requestAnimationFrame(function(){div.remove();});},contentDelay-50);}};var bindActions=function(){for(var i=0;i<len;i++){trigger[i].addEventListener('click',getId,false);closers[i].addEventListener('click',close,false);modalsbg[i].addEventListener('click',close,false);}};var init=function(){bindActions();};return{init:init};}());Modal.init();
</script>
</body>
</html>
Kaydol:
Kayıtlar (Atom)