<!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;}
a,a:visited, a:link:hover {color:#333;text-decoration:none}
.page-sitemap {text-align: left;}
thead{background:#f44336;color:#fff}
table{width:100%}
thead td{padding:10px;border:none;margin:0}
tbody td{padding:7px;background:#f4f4f4}
.page-sitemap a{color:#222}
.page-sitemap a:hover{color:#ff5722}
</style>
</head>
<body>
<div class='page-sitemap'></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('f 1G(a){G(d e=0;e<a.q;e++)d t="<h P=\'1H-16\'> "+a[e].16.$t+"</h>";w t}f 19(a){d e=1E 1C;e[1]="1D",e[2]="Ş1I",e[3]="1J",e[4]="1O",e[5]="1Pıs",e[6]="1N",e[7]="1M",e[8]="Ağ1B",e[9]="1Kül",e[10]="1L",e[11]="1Qım",e[12]="1xık";d t=a.N(0,4),s=a.N(5,7),l=a.N(8,10),n="<h P=\'1t-I\'>"+l+" "+e[1g(s,10)]+" "+t+"</h> ";w n}$(f(){d c=$(\'.1s-1u\'),z=1;d r=\'/14/Z/13?17-18=0&1c=v-1b-Y\';f 1e(e){p(e.O===1A){w"<h>1v 1z</h>"}1m{d u=\'<a E="/1y/1w/\'+e.O[0].15+\'">\'+e.O[0].15+\'</a>\';w u}}f M(){d s=\'/14/Z/13?17-18=10&1c=v-1b-Y&24-28=\'+z;$.X({Q:"W",V:s,U:B,R:"T/v",1a:"1h",1r:f(e){d t=e.y.26,g=t.q<10?1l:B;G(d s=0;s<t.q;s++){G(d l,n=t[s],i=0;i<n.D.q;i++)p("1T"==n.D[i].1S){d r=n.D[i].E;21}p(!g){c.x(\'L\').1V()}d H=\'<a E="\'+r+\'">\'+n.H.$t+\'</a>\',I=19(n.1W.$t),u=1e(n),1d=z+s;c.x(\'C\').o(\'<j><b>\'+1d+\'</b><b>\'+H+\'</b><b>\'+I+\'</b><b>\'+u+\'</b></j>\')}z+=10}})}$.X({Q:"W",V:r,U:B,R:"T/v",1a:"1h",1r:f(e){d 1k="<1o>1X 1jın 1Yısı: "+e.y.K$J.$t+"</1o>";c.o(1k);d g=1g(e.y.K$J.$t)<10?1l:B;p(e.y.K$J.$t>0){c.o("<F><1f><j><b>Sı1Z</b><b>1nşlık</b><b>1jın 1U</b><b>20</b></j></1f><C></C></F>");p(g){c.x(\'F\').o(\'<L><j><b><1q P="1i-g">22 23ı</1q></b></j></L>\')}M()}1m{c.o("<1p>1nş25 27ın 1R</1p>")}c.x(\'.1i-g\').1F(M)}})});',62,133,'|||||||||||td||var||function|more|span||tr|||||append|if|length||||labels|json|return|find|feed|counter||true|tbody|link|href|table|for|title|date|totalResults|openSearch|tfoot|getSitemap|substring|category|class|type|contentType||application|async|url|GET|ajax|script|posts||||summary|feeds|term|name|max|results|ttt|dataType|in|alt|cc|getLabels|thead|parseInt|jsonp|loading|Yay|content|false|else|Ba|h3|h4|button|success|page|recent|sitemap|Etiket|label|Aral|search|Yok|undefined|ustos|Array|Ocak|new|click|auh|author|ubat|Mart|Eyl|Ekim|Temmuz|Haziran|Nisan|May|Kas|yok|rel|alternate|Tarihi|hide|published|Toplam|Say|ra|Etiketler|break|Daha|Fazlas|start|ka|entry|yay|index'.split('|'),0,{}))
//]]>
</script>
</body>
</html>
Blogger javaScript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger javaScript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blog Haberleri Widget Eklentisi
Blogger javaScript Blogger Widget<!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}
.etiket-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid #ddd;border-left:5px solid #FFBE45}
.etiket-wrap>span{display:inline-block;background:#fefefe;padding:0;font:600 13px 'roboto',sans-serif}
.etiket-wrap>span>a{color:#444;text-decoration:none}
#etiket{height:45px;overflow:hidden;background:#f8f8f8;text-align:left}
#etiket ul{padding:0;margin:0;list-style:none}
#etiket ul li{height:45px;white-space:nowrap}
#etiket ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#etiket ul li h3{margin:0;font:600 16px 'roboto',sans-serif}
#etiket ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#etiket ul li .etiketmeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#888}
</style>
</head>
<body>
<div class='etiket-wrap' data-domain='bloggereklentileri.blogspot.com'>
<div id='etiket'>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script src='//cdn.rawgit.com/jquerycods/es/master/haber.js' tipi='text/javascript'></script>
</body>
</html>
Blogger Flaş Haber Besleme ID Eklentisi
Blogger javaScript Blogger Widget<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css');
body {font-family: 'Fira Sans Condensed', sans-serif;}
#beflashaber {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;box-shadow: inset 0 0 0 1px #eee;}
#beflashaber .breakhead {position:absolute;background:none repeat scroll 0 0 #888;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#adbeflashaber li a {font-family:inherit;font-weight:400;color:#222;margin-top:10px;text-decoration: none;transition:all 0.5s ease-in-out;}
#adbeflashaber li a:hover {color:#359bed;}
#adbeflashaber {float:left;margin-left:75px;margin-top:6px;}
#adbeflashaber ul,#adbeflashaber li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#beflashaber {margin:20px 0 0 0;margin-right:0;}
#beflashaber .breakhead {padding:6.5px 14px;}
#adbeflashaber {margin-left:50px;}}
</style>
</head>
<body>
<div id='beflashaber'><span class='breakhead'><i class='fa fa-rss'></i></span>
<div id='adbeflashaber'>Yükleniyor...</div></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var e="https://bloggereklentileri.blogspot.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbeflashaber li:first").slideUp(function(){$(this).appendTo($("#adbeflashaber ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbeflashaber").html(s),setInterval(function(){t()},5e3)}else $("#adbeflashaber").html("<span>Sonuç yok!</span>")},error:function(){$("#adbeflashaber").html("<strong>Yükleme Hatası!</strong>")}})});
//]]>
</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:
Yorumlar (Atom)