<!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;}
.container{width:100%;margin:0 auto}
.container > ul{list-style:none;padding:0;margin:0 0 20px 0}
.dropdown a{text-decoration:none}
.dropdown [data-toggle="dropdown"]{position:relative;display:block;color:white;background:#2980B9;-moz-box-shadow:0 1px 0 #409ad5 inset,0 -1px 0 #20638f inset;-webkit-box-shadow:0 1px 0 #409ad5 inset,0 -1px 0 #20638f inset;box-shadow:0 1px 0 #409ad5 inset,0 -1px 0 #20638f inset;text-shadow:0 -1px 0 rgba(0,0,0,0.3);padding:10px}
.dropdown [data-toggle="dropdown"]:hover{background:#2c89c6}
.dropdown .icon-arrow{position:absolute;display:block;font-size:0.7em;color:#fff;top:14px;right:10px}
.dropdown .icon-arrow.open{-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-moz-transition:-moz-transform 0.6s;-o-transition:-o-transform 0.6s;-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s}
.dropdown .icon-arrow.close{-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);-moz-transition:-moz-transform 0.6s;-o-transition:-o-transform 0.6s;-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s}
.dropdown .icon-arrow:before{content:'\25BC'}
.dropdown .dropdown-menu{max-height:0;overflow:hidden;list-style:none;padding:0;margin:0}
.dropdown .dropdown-menu li{padding:0}
.dropdown .dropdown-menu li a{display:block;color:#6e6e6e;background:#EEE;-moz-box-shadow:0 1px 0 white inset,0 -1px 0 #d4d4d4 inset;-webkit-box-shadow:0 1px 0 white inset,0 -1px 0 #d4d4d4 inset;box-shadow:0 1px 0 white inset,0 -1px 0 #d4d4d4 inset;text-shadow:0 -1px 0 rgba(255,255,255,0.3);padding:10px 10px}
.dropdown .dropdown-menu li a:hover{background:#f6f6f6}
.dropdown .show,.dropdown .hide{-moz-transform-origin:50% 0%;-ms-transform-origin:50% 0%;-webkit-transform-origin:50% 0%;transform-origin:50% 0%}
.dropdown .show{display:block;max-height:9999px;-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1);animation:showAnimation 0.5s ease-in-out;-moz-animation:showAnimation 0.5s ease-in-out;-webkit-animation:showAnimation 0.5s ease-in-out;-moz-transition:max-height 1s ease-in-out;-o-transition:max-height 1s ease-in-out;-webkit-transition:max-height 1s ease-in-out;transition:max-height 1s ease-in-out}
.dropdown .hide{max-height:0;-moz-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0);animation:hideAnimation 0.4s ease-out;-moz-animation:hideAnimation 0.4s ease-out;-webkit-animation:hideAnimation 0.4s ease-out;-moz-transition:max-height 0.6s ease-out;-o-transition:max-height 0.6s ease-out;-webkit-transition:max-height 0.6s ease-out;transition:max-height 0.6s ease-out}
@keyframes showAnimation{0%{-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-webkit-transform:scaleY(0.1);transform:scaleY(0.1)}
40%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
100%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}}
@-moz-keyframes showAnimation{0%{-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-webkit-transform:scaleY(0.1);transform:scaleY(0.1)}
40%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
100%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}}
@-webkit-keyframes showAnimation{0%{-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-webkit-transform:scaleY(0.1);transform:scaleY(0.1)}
40%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
100%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}}
@keyframes hideAnimation{0%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0)}}
@-moz-keyframes hideAnimation{0%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0)}}
@-webkit-keyframes hideAnimation{0%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0)}}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Menü-1 <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Servisler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Menü-2 <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Servisler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Menü-3 <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Servisler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</li>
</ul>
</div>
<script>
var dropdown=document.querySelectorAll(".dropdown");var dropdownArray=Array.prototype.slice.call(dropdown,0);dropdownArray.forEach(function(e){var t=e.querySelector('a[data-toggle="dropdown"]'),n=e.querySelector(".dropdown-menu"),r=t.querySelector("i.icon-arrow");t.onclick=function(e){if(!n.hasClass("show")){n.classList.add("show");n.classList.remove("hide");r.classList.add("open");r.classList.remove("close");e.preventDefault()}else{n.classList.remove("show");n.classList.add("hide");r.classList.remove("open");r.classList.add("close");e.preventDefault()}}});Element.prototype.hasClass=function(e){return this.className&&(new RegExp("(^|\\s)"+e+"(\\s|$)")).test(this.className)}
</script>
</body>
</html>
Blogger Menü etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Menü etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Ajax Menü
Blogger Menü<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Oswald);@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');body{font-family:'Fira Sans Condensed',sans-serif;background:#f9f9f9;font-size:16pxcolor:#444}
.post-body h2{color:#f54325;font-weight:400;text-align:center;font-family:'Oswald'}
.post-body{background:#fff;color:#444;max-width:680px;margin:20px auto;padding:15px 20px;font-family:'Arial';font-size:13px;border:10px solid #f2f2f2}
.mega-menu *{padding:0;margin:0}
ul.mega-menu{line-height:1;list-style:none;overflow:visible!important}
ul.mega-menu:after{padding:0;margin:0;content:' ';height:0;display:block;clear:both}
ul.mega-menu li{float:left;font-size:14px;font-weight:400;display:inline;position:relative;text-transform:capitalize}
ul.mega-menu li a{line-height:50px;padding:0 20px;display:block;font-family:'Oswald';text-decoration:none;color:#2c2c2c;font-size:13px;font-weight:400;transition:all 0.3s ease-in-out}
ul.mega-menu li a:hover,ul.mega-menu li a.hoverover{color:#fff;background:#f54325}
ul.mega-menu ul{top:100%;border:1px solid #ddd;position:absolute;display:none}
ul.mega-menu li:hover > ul{display:block}
ul.mega-menu ul li{background:#f6f6f6;text-shadow:none;z-index:72;float:none;min-width:160px}
ul.mega-menu ul li a{color:#aaa;font-family:'Arial';text-transform:none;font-weight:normal}
ul.mega-menu ul li a:hover,ul.mega-ajax-menu ul li a.hover{background:#f54224}
ul.mega-menu ul ul{left:100%;display:none;top:0}
ul.mega-ajax-menu li div.submenu{z-index:90;left:0;position:absolute;width:600px;top:100%;overflow:hidden;opacity:0;color:#919191;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);min-height:150px;background:#f0f0f0;-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;transition:all 0.3s ease-in-out}
ul.mega-ajax-menu li:hover div.submenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
ul.mega-ajax-menu ul,ul.mega-ajax-menu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important}
ul.mega-ajax-menu ul li{background:none!important;float:none!important}
ul.mega-ajax-menu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#212121}
ul.mega-ajax-menu ul.postslist{position:relative;display:block;width:65%;float:right;margin:0 0 15px 0!important;background:none}
ul.mega-ajax-menu ul.postslist li{display:block;overflow:hidden;position:relative;min-height:60px;padding:15px 8px 15px 110px!important}
ul.mega-ajax-menu ul.postslist li .imgCont{position:absolute;left:0;top:15px;width:100px;height:70px;overflow:hidden;font-size:0;line-height:0;border:1px solid #929292}
ul.mega-ajax-menu ul.postslist li .imgCont img{position:relative;top:-20px;padding:0;width:100px;height:100px;display:block}
ul.mega-ajax-menu ul.postslist li a{display:block;line-height:1.4;padding:0!important;color:#666;font-family:'Arial';font-size:12px;transition:all 0.3s ease-in-out}
ul.mega-ajax-menu ul.postslist li a:hover{color:#f54325;background:transparent}
ul.mega-ajax-menu .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPnnwZANahUOs4ylDy6rJSIrW1embZTsdjBzl1ugm7VB_drboq4EPvdY-qlmf46XHxwplnjvpugwveG9y_OzuD3pfHDDCWMn7nqIocvR67-KNvWMj7qClQ7pwzueLZTPlMhrgxAyUayGk/s1600/beloading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}
ul.mega-ajax-menu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #fff;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}
#mega-ajax-menu{background:#fff;height:50px;width:100%;position:relative;border:1px solid #e6e6e6;max-width:980px;margin:0 auto;padding:0 20px}
li.search-form{float:right!important;line-height:50px;margin:0 20px 0 0}
li.search-form .searchbox{border:none;padding:10px 5px;background:#f9f9f9;color:#fff;width:130px}
li.search-form .searchbox:focus{border:none;outline:none;background:#fafafa;color:#666}
li.search-form .searchsubmit{background:#f54325;border:none;color:#fff;cursor:pointer;padding:10px 5px;transition:all 0.3s ease-in-out}
li.search-form .searchsubmit:hover{opacity:0.9}
.search-alert{color:#f9f9f9;display:none;margin:5px;padding:2px 15px 2px 40px;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JcpsGp45o3RzMIKw86NG3g5_-AI3_hjox_6Jo5uPg7HnRV8Vb57fJeLxyVB7XB1pVV61QjQMJxQwyq41_g2zA4Iyfx0QEGOBBKflp8K-Igmu6FsbjKDgYhDR9TooVR7GlWywSVXojfo/s1600/not.png) no-repeat;background-position:10px;text-transform:lowercase;border-radius:5px}
</style>
</head>
<body>
<ul id="mega-ajax-menu" class="mega-menu">
<li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>
<li><a href="#">Kategori 1</a>
<ul>
<li><a href="http://bloggereklentileri.blogspot.com/search/label/Blogger%20%C4%B0pu%C3%A7lar%C4%B1">Blogger İpuçları</a></li>
<li><a href="http://bloggereklentileri.blogspot.com/search/label/Blogger%20Temalar%C4%B1">Blogger Temaları</a></li>
<li><a href="http://bloggereklentileri.blogspot.com.tr/search/label/CSS">Blogger CSS</a></li>
<li><a href="http://bloggereklentileri.blogspot.com/search/label/Javascript">Blogger javaScript</a></li>
<li><a href="http://bloggereklentileri.blogspot.com/search/label/SEO">Blogger SEO</a></li>
</ul>
</li>
<li><a href="#">Kategori 2</a>
<ul>
<li><a href="http://saglikveguzellikonerileri.blogspot.com/search/label/Beyin%20Uyar%C4%B1m%20Teknikleri">Beyin Uyarıcı Teknikler</a></li>
<li><a href="http://saglikveguzellikonerileri.blogspot.com/search/label/Cilt">Cilt</a></li>
<li><a href="http://saglikveguzellikonerileri.blogspot.com/search/label/Diyabet">Diyabet</a></li>
<li><a href="http://saglikveguzellikonerileri.blogspot.com/search/label/G%C3%BCzellik">Güzellik</a></li>
<li><a href="http://saglikveguzellikonerileri.blogspot.com/search/label/Vitamin">Vitamin</a></li>
</ul>
</li>
<li><a href="#">Kategori 3</a>
<ul>
<li><a href="http://cizgifilmhikayeleri.blogspot.com/search/label/Harika%20Kanatlar">Harika Kanatlar</a></li>
<li><a href="http://cizgifilmhikayeleri.blogspot.com/search/label/%C4%B0stanbul%20Muhaf%C4%B1zlar%C4%B1">İstanbul Muhafızları</a></li>
<li><a href="http://cizgifilmhikayeleri.blogspot.com/search/label/Niloya">Niloya</a></li>
<li><a href="http://cizgifilmhikayeleri.blogspot.com/search/label/Rafadan%20Tayfa">Rafadan Tayfa</a></li>
<li><a href="http://cizgifilmhikayeleri.blogspot.com/search/label/Ma%C5%9Fa%20%C4%B0le%20Koca%20Ay%C4%B1">Maşa ile Koca Ayı</a></li>
</ul>
</li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbox' name='q' placeholder='Aranacak kelime' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Ara'/>
</form>
<p class='search-alert'>Arama formu boş!
</li>
</ul>
<div class='clear'></div>
<div class='post-body'>
<h2 class='post-title'>Blogger Eklentileri</h2>
<p>Blogger Eklentileri, özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.</p>
<p>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</p>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.addAjaxHtml();this.ajaxcall=null;this.lielem=this.elem.find(".verticlemenu li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.lielem.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.numPosts};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loader"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loader").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s100-c/"):n.settings.defaultImg;r.push('<li><span class="imgCont"><img alt="',i,'" src="',o,'"/></span><a rel="nofollow" title="',i,'" href="',s,'">',i,"</a></li>")}):r.push("<h5>","Sorry!!, No Posts to Show","</h5>");this.container.html(r.join(""));this.lielem.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Error!! Could not fetch the Blog Posts!</h5>")}},addArrow:function(){this.lielem.closest("li").find("span").remove();this.lielem.removeClass("hoverover");this.li.addClass("hoverover");e("<span></span>",{"class":"menuArrow"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hoverover");var r=e(this).find("ul.verticlemenu li").height()*e(this).find("ul.verticlemenu li").length;t.find("ul.postslist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hoverover")})},addAjaxHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("mega-ajax-menu").find(">li").find("ul:first").addClass("verticlemenu").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.verticlemenu").after(e("<ul></ul>",{"class":"postslist"}))},requestFirstAjax:function(e){e=e.find(".verticlemenu li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.ajaxBloggerMenu=function(n){var r={numPosts:4,divClass:"submenu",postsClass:"postslist",defaultImg:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
//]]>
</script>
<script>jQuery(document).ready(function($) {
$('#mega-ajax-menu').ajaxBloggerMenu({
numPosts : 4,
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCFt0_PMawmM86jm9u0OcCyiR4AkVnptyymBEXr1amrZsUHsu2TcCe9X6YAHwfvM4996PNJW3NP872grrG-u1bBb2vZf75Ce5s2AVB_Y-emTZmiAVObwllbFDuWD-eSdi5KJWUPG995Dw/s1600/nothumb.png'});});
$(function(){
$('.searchblog').submit(function(e){
if($('.search-form .searchbox').val().length==0){
$('.search-form .search-alert').fadeIn().css('display','inline-block');
e.preventDefault();}});});
</script>
</body>
</html>
Blogger Yatay Duyarlı Açılır Menü
Blogger Menü<!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:0 auto 0 auto}
nav#menu-auto{background:#fff;max-width:100%;overflow-x:auto}
nav#menu-auto ul{margin:0;padding:0;list-style:none}
nav#menu-auto ul li{float:left;list-style:none;font:700 12px lato,arial;display:list-item}
nav#menu-auto ul li.more{height:45px;line-height:45px;text-align:center;display:none;float:right}
nav#menu-auto ul li.more ul#overflow.show{display:block}
nav#menu-auto ul li a,nav#menu-auto ul li span,nav#menu-auto ul li.more span.btn-more{display:block;background:#fff;color:#333;text-decoration:none;padding:0 1em;cursor:pointer;transition-duration:.3s;height:45px;line-height:45px}
nav#menu-auto ul li a:hover,nav#menu-auto ul li span:hover{background:#e00;color:#fff}
nav#menu-auto ul li.more #overflow{display:none;position:absolute;text-align:left;transition-duration:.3s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);background-color:#ffffff;z-index:9999}
nav#menu-auto ul li.more #overflow li{float:none}
nav#menu-auto ul li.more #overflow li a{background:#fff;white-space:nowrap;padding:0 15px;height:35px;line-height:35px}
nav#menu-auto ul li.more #overflow li a:hover{background:#e00}
nav#menu-auto ul li.more span.btn-more{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;height:100%}
/*]]>*/
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</head>
<body>
<nav id="menu-auto">
<ul id="nav">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">Menü 1</a></li>
<li><a href="#">Menü 2</a></li>
<li><a href="#">Menü 3</a></li>
<li><a href="#">Menü 4</a></li>
<li><a href="#">Menü 5</a></li>
<li><a href="#">Menü 6</a></li>
<li><a href="#">Menü 7</a></li>
<li><a href="#">Menü 8</a></li>
<li><a href="#">Menü 9</a></li>
<li><a href="#">Menü 11</a></li>
<li><a href="#">Menü 12</a></li>
<li><a href="#">Menü 13</a></li>
<li><a href="#">Menü 14</a></li>
<li><a href="#">Menü 15</a></li>
<li><a href="#">Menü 16</a></li>
<li><a href="#">Menü 17</a></li>
<li><a href="#">Menü 18</a></li>
<li><a href="#">Menü 19</a></li>
<li><a href="#">Menü 20</a></li>
<li class="more">
<span onclick="showOverflow()" class="btn-more"></span>
<ul id="overflow" class="content-dropdown"></ul>
</li>
</ul>
</nav>
<script>
//<![CDATA[
window.onresize=navigationResize;navigationResize();function navigationResize(){$('#nav li.more').before($('#overflow > li'));var $navItemMore=$('#nav > li.more'),$navItems=$('#nav > li:not(.more)'),navItemMoreWidth=navItemWidth=$navItemMore.width(),windowWidth=$(window).width(),navItemMoreLeft,offset,navOverflowWidth;$navItems.each(function(){navItemWidth+=$(this).width();});navItemWidth>windowWidth?$navItemMore.show():$navItemMore.hide();while(navItemWidth>windowWidth){navItemWidth-=$navItems.last().width();$navItems.last().prependTo('#overflow');$navItems.splice(-1,1);}
navItemMoreLeft=$('#nav .more').offset().left;navOverflowWidth=$('#overflow').width();offset=navItemMoreLeft+navItemMoreWidth-navOverflowWidth;$('#overflow').css({'left':offset});}
function showOverflow(){document.getElementById("overflow").classList.toggle("show");}
window.onclick=function(event){if(!event.target.matches('.btn-more')){var dropdowns=document.getElementsByClassName("content-dropdown");var i;for(i=0;i<dropdowns.length;i++){var openDropdown=dropdowns[i];if(openDropdown.classList.contains('show')){openDropdown.classList.remove('show');}}}}
//]]>
</script>
</body>
</html>
Blogger Mobil Slider Menüler
Blogger CSS Blogger javaScript Blogger jQuery Blogger Menü Blogger Mobil<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-size:100%;font-family:'Fira Sans Condensed',sans-serif;position:relative;left:0;overflow-x:hidden;margin:0 auto 0 auto}
.push{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease}
.btn{border:none;background:#3498db;color:#fff;font-size:16px;padding:15px 0;display:block;width:100%;margin:10px 0;text-align:center;text-decoration:none}
.btn:hover,.btn:active{background-color:#2980b9}
.backBtn{background-color:#2980b9;font-size:16px;text-align:right}
.backBtn:hover{color:#000}
.menu-right .backBtn{text-align:left}
.menu-top .backBtn,.menu-bottom .backBtn{text-align:left}
h2{text-align:center;font-size:18px;font-weight:normal;margin:15px 0}
.menu{border-right:1px solid #2980b9;background:#3498db;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;position:fixed;top:0;z-index:10;width:250px;height:100%}
.menu a{display:block;color:#fff;padding:16px;border-top:1px solid #2980b9;text-decoration:none;position:relative;z-index:11}
.menu a:last-child{border-bottom:1px solid #2980b9}
.menu a:hover,.menu a:active{background-color:#2980b9}
.menu-left{left:-250px}
.menu-left.left-open{left:0}
.menu-right{right:-250px}
.menu-right.right-open{right:0}
.menu-top{width:100%;top:-100%}
.menu-top.top-open{top:0}
.menu-bottom{width:100%;top:100%}
.menu-bottom.bottom-open{top:0}
.push{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease}
.push-left{left:-250px}
.push-left.pushleft-open{left:0}
.push-toleft{left:250px}
.push-right{right:-250px}
.push-right .backBtn{text-align:left}
.push-right.pushright-open{right:0}
.push-toright{left:-250px}
</style>
</head>
<body>
<nav class="menu menu-left">
<a href="#" class="backBtn">→</a>
<a href="#">Sol menü</a>
<a href="#">Hakkında</a>
<a href="#">Ürünler</a>
<a href="#">Servisler</a>
<a href="#">Ziyaretçiler</a>
<a href="#">İletişim</a>
</nav>
<nav class="menu menu-right">
<a href="#" class="backBtn">←</a>
<a href="#">Sağ menü</a>
<a href="#">Hakkında</a>
<a href="#">Ürünler</a>
<a href="#">Servisler</a>
<a href="#">Ziyaretçiler</a>
<a href="#">İletişim</a>
</nav>
<nav class="menu menu-top">
<a href="#" class="backBtn">←</a>
<a href="#">Top menü</a>
<a href="#">Hakkında</a>
<a href="#">Ürünler</a>
<a href="#">Servisler</a>
<a href="#">Ziyaretçiler</a>
<a href="#">İletişim</a>
</nav>
<nav class="menu menu-bottom">
<a href="#">Alt menü</a>
<a href="#">Hakkında</a>
<a href="#">Ürünler</a>
<a href="#">Servisler</a>
<a href="#">Ziyaretçiler</a>
<a href="#">İletişim</a>
<a href="#" class="backBtn">←</a>
</nav>
<nav class="menu push push-left">
<a href="#" class="backBtn">→</a>
<a href="#">Push Left Menu</a>
<a href="#">Hakkında</a>
<a href="#">Ürünler</a>
<a href="#">Servisler</a>
<a href="#">Ziyaretçiler</a>
<a href="#">İletişim</a>
</nav>
<nav class="menu push push-right">
<a href="#" class="backBtn">←</a>
<a href="#">Push Left Menu</a>
<a href="#">Hakkında</a>
<a href="#">Ürünler</a>
<a href="#">Servisler</a>
<a href="#">Ziyaretçiler</a>
<a href="#">İletişim</a>
</nav>
<div class="container">
<h2>Slayt Menüler</h2>
<a href="#" id="showLeft" class="btn">Sol slayt menü</a>
<a href="#" id="showRight" class="btn">Sağ slayt menü</a>
<a href="#" id="showTop" class="btn">Top slayt menü</a>
<a href="#" id="showBottom" class="btn">Alt slayt menü</a>
<h2>Çekmeli Menüler</h2>
<a href="#" id="showLeftPush" class="btn">Sola çekmeli menü</a>
<a href="#" id="showRightPush" class="btn">Sağa çekmeli menü</a>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>
$('#showLeft').click(function() {
$('.menu-left').toggleClass('left-open');
});
$('#showRight').click(function() {
$('.menu-right').toggleClass('right-open');
});
$('#showTop').click(function() {
$('.menu-top').toggleClass('top-open');
});
$('#showBottom').click(function() {
$('.menu-bottom').toggleClass('bottom-open');
});
$('.backBtn').click(function() {
$('.menu').removeClass('top-open bottom-open right-open left-open pushleft-open pushright-open');
$('body').removeClass('push-toleft push-toright');
});
$('body').addClass('push');
$('#showLeftPush').click(function () {
$('body').toggleClass('push-toleft');
$('.push-left').toggleClass('pushleft-open');
});
$('#showRightPush').click(function () {
$('body').toggleClass('push-toright');
$('.push-right').toggleClass('pushright-open');
});
</script>
</body>
</html>
Blogger CSS Mobil Menü
Blogger CSS Blogger Menü<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {
font-family: 'Fira Sans Condensed', sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0 auto 0 auto
}
ul {
padding: 0
}
nav {
width: 1020px;
margin: 0 auto;
background-color: #eeeeee
}
nav a {
font-size: 22px;
padding: 5px;
text-decoration: none;
color: #262d35
}
nav a:hover {
color: white;
background-color: #e90f47;
transition: 0.5s
}
nav label,
nav input {
display: none
}
.slide li {
display: inline-block;
padding: 10px 12px
}
@media (max-width: 1024px) {
nav {
width: 100%
}
nav label,
nav input {
display: block
}
span {
padding: 10px 20px;
background: #2d2f31;
color: white;
font-size: 22px;
cursor: pointer;
display: block
}
span::after {
float: right;
right: 10%;
content: "+"
}
.slide {
clear: both;
background-color: #eeeeee;
margin: 0;
width: 100%;
height: 0;
overflow: hidden;
text-align: center;
transition: height .4s ease
}
.slide li {
display: block;
width: 100%;
padding: 10px 0
}
#touch {
position: absolute;
opacity: 0;
height: 0
}
#touch:checked + .slide {
height: 29.5em
}
}
</style>
</head>
<body>
<nav>
<label for='touch'><span>Menü</span></label>
<input type='checkbox' id='touch'/>
<ul class='slide'>
<li><a href='#'>Bağlantı sekmesi 1</a></li>
<li><a href='#'>Bağlantı sekmesi 2</a></li>
<li><a href='#'>Bağlantı sekmesi 3</a></li>
<li><a href='#'>Bağlantı sekmesi 4</a></li>
<li><a href='#'>Bağlantı sekmesi 5</a></li>
<li><a href='#'>Bağlantı sekmesi 6</a></li>
<li><a href='#'>Bağlantı sekmesi 7</a></li>
<li><a href='#'>Bağlantı sekmesi 8</a></li>
<li><a href='#'>Bağlantı sekmesi 9</a></li>
<li><a href='#'>Bağlantı sekmesi 10</a></li>
</ul>
</nav>
</body>
</html>
Blogger CSS Akordeon Menü
Blogger Akordeon Blogger Menü<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html,body{margin:0;padding:0}
h2{font-weight:normal}
a{display:inline-block;padding:.5em;font-size:0.75em;color:#fff;background:rgba(0,0,0,0.2);text-decoration:none}
.wrapper{margin:auto;width:90%;max-width:960px}
.card{padding:1em;color:#333;background:#fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.25);box-shadow:0 0 10px rgba(0,0,0,.25)}
.card h2:first-child,.card p:first-child{margin-top:0}
@import url('https://fonts.googleapis.com/css?family=Droid+Sans%3Aregular%2C700');
body {line-height: 1.5em;font-size: 13px;font-family: 'Droid Sans',Arial,Verdana,sans-serif;color:#2c3e50;background:#ecf0f1;margin: 0 auto;}
h1{text-align:center}
.half{float:left;width:50%;padding:0 1em}
.tab{position:relative;margin-bottom:1px;width:100%;color:#fff;overflow:hidden}
input{position:absolute;opacity:0;z-index:-1}
label{position:relative;display:block;padding:0 0 0 1em;background:#16a085;font-weight:bold;line-height:3;cursor:pointer}
.blue label{background:#2980b9}
.tab-content{max-height:0;overflow:hidden;background:#1abc9c;-webkit-transition:max-height .35s;transition:max-height .35s}
.blue .tab-content{background:#3498db}
.tab-content p{margin:1em}
input:checked ~ .tab-content{max-height:10em}
label::after{position:absolute;right:0;top:0;display:block;width:3em;height:3em;line-height:3;text-align:center;-webkit-transition:all .35s;transition:all .35s}
input[type=checkbox] + label::after{content:"+"}
input[type=radio] + label::after{content:"\25BC"}
input[type=checkbox]:checked + label::after{-webkit-transform:rotate(315deg);transform:rotate(315deg)}
input[type=radio]:checked + label::after{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}
</style>
</head>
<body>
<div class="wrapper">
<h1>Blogger CSS Akordeon Menü</h1>
<div class="half">
<p><strong>Çoklu</strong> Açma</p>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Etiket bir</label>
<div class="tab-content">
<p>Bir nefescik, Allah'ın güzelliğini görsen..<br>
Can'ın da ateşlere düşer, vücudun da..!
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Etiket iki</label>
<div class="tab-content">
<p>Ben canımın minneti altında kalmak istemiyorum.<br>
Çünkü ben artık canla değil, aşk ile diriyim...
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Etiket üç</label>
<div class="tab-content">
<p>Ve elimi açıp aşk dilendim ;
Nar olmadan nur olunmaz, nur olunmadan aşka visal bulunmaz. Yak beni Rabbim..!
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
</div>
<div class="half">
<p><strong>Tekli</strong> Açma</p>
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2">
<label for="tab-four">Etiket bir</label>
<div class="tab-content">
<p>Ey can! Sana bir daralma gelirse yararınadır. Kaygılanma!
Sürekli yaz mevsimi olsaydı,güneş bahçeyi yakıp kavururdu..
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
<div class="tab blue">
<input id="tab-five" type="radio" name="tabs2">
<label for="tab-five">Etiket iki</label>
<div class="tab-content">
<p>"Kendinize gelin; Hak’tan isteyin, başkasından değil;
suyu denizde arayın, kuru derede değil!"
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
<div class="tab blue">
<input id="tab-six" type="radio" name="tabs2">
<label for="tab-six">Etiket üç</label>
<div class="tab-content">
<p>Yum gözünü al eline Kalbim senin'dir...
İstersen "CAM" kenarına koy güneş alsın...
İstersen "CAN" yüreğine koy hep sende kalsın..!<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Blogger Spoiler
Blogger Menü<!DOCTYPE html>
<html>
<head>
<title>Blogger Spoiler</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=ABeeZee|Merienda+One|Oswald:400,700');
body {
margin: 0 auto 0 auto;
font-size: 15px;
color: #999;
font-family: 'ABeeZee', sans-serif;
padding: 20px
}
.entry-header {
margin-bottom: 30px;
}
.entry-header h2 {
text-align: center;
font-family: 'Merienda One', cursive;
font-size: 40px;
color: #333;
}
b {
color: #333
}
.videoyoutube {
text-align: center;
margin: auto;
width: 100%;
}
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0
}
#spoiler {
text-align: center;
}
#spoiler button {
background-color: #e74c3c;
box-shadow: 0px 3px 0px 0px #CE3323;
color: #fff;
text-align: center;
border: none;
border-radius: 3px;
padding: 8px 16px;
margin: 10px auto;
font-size: 14px;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
transition: background 0.1s ease-in-out;
font-family: 'ABeeZee', sans-serif;
}
#spoiler button:hover,
#spoiler button:focus {
background-color: #FF6656;
outline: none;
}
#spoiler button:active {
transform: translate(0px, 3px);
-webkit-transform: translate(0px, 3px);
box-shadow: 0px 1px 0px 0px;
}
#spoiler-panel {
padding: 1px;
text-align: left;
background: #f5f5f5;
border: 0px;
}
#spoiler-panel {
padding: 24px;
display: none;
}
</style>
</head>
<body>
<header class="entry-header">
<h2>Blogger Spoiler</h2>
</header>
<div id="spoiler"><button>Butona Tıkla</button></div>
<div id="spoiler-panel">
<p class="texty"><b>Rafadan Tayfa 1. Bölüm (Ekmek Teknesi) :</b></p>
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/xX3gT_Jrjb0">
</div>
</div>
</div>
<p>İ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...</p>
<p>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 teslli 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.</p>
<p>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. 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.</p>
<p>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. Rafadan Tayfa 2. bölüm hikayesinde görüşmek üzere...</p>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
$(document).ready(function() {
$("#spoiler").click(function() {
$("#spoiler-panel").slideToggle("normal");
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
// Youtube
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>
</body>
</html>
Blogger Araç Menüsü
Blogger Menü
<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Dosis:400,500,700,800") all;
body {
padding: 0;
margin-bottom: 10px;
font-family: Dosis, "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0 auto 0 auto;
background: #f5f5f5;
}
a {} ul,
li {
list-style: none
}
.main-header {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.14), 0px 2px 2px 0px rgba(0, 0, 0, 0.098), 0px 1px 5px 0px rgba(0, 0, 0, 0.084);
}
.main-header {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
width: 100%;
height: 2.5rem;
background: white;
}
.main-header h1 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
float: left;
margin: 0;
padding: 5px;
color: rgb(119, 119, 119);
font-weight: 600;
}
.menu-tool {
position: relative;
float: right;
width: auto;
height: auto;
right: 10px;
}
.menu-toolicon {
font-size: 28px;
float: right;
cursor: pointer;
margin-top: 5px;
width: 30px;
text-align: right;
color: rgb(119, 119, 119);
}
.tool-menu {
text-transform: inherit;
background-color: #fff;
border-radius: 0 0 2px 2px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.26);
color: #757575;
cursor: default;
padding: 0 0 15px;
margin: 0;
min-width: 220px;
outline: 0;
position: absolute;
top: 40px;
right: 0;
text-align: left;
white-space: nowrap;
z-index: 100000
}
.tool-menu ul {
margin: 0;
padding: 0
}
.tool-menu li a,
.tool-menu li span {
text-decoration: none;
color: rgb(119, 119, 119);
!important
}
.tool-menu li a:hover {
color: #566fbf!important
}
.tool-menu li {
padding: 10px 10px 5px
}
.tool-menu li:first-child {
padding: 10px!important;
margin-bottom: 5px;
font-weight: 600;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-top: 1px solid rgba(0, 0, 0, 0.12)
}
.makesticking2 .openmenu {
display: inline-block!important
}
.openmenu {
height: 48px;
display: none!important
}
.openmenu .fa {
font-size: 28px!important;
}
.openmenu a {
vertical-align: -7px!important;
}
.makesticking2+.open-menu {
position: fixed;
top: 52px;
width: 100%;
z-index: 100000;
animation-duration: 1s;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
</style>
</head>
<body>
<header class="main-header">
<h1>BLOGGER ARAÇ MENÜSÜ</h1>
<div class="menu-tool">
<div class="menu-toolicon" onclick="openToolmenu()"><i aria-hidden="true" class="fa fa-ellipsis-v"></i>
</div>
<div class="tool-menu slideInUp" id="tool-menu" style="display: none;">
<ul>
<li><span>Araç Menüsü</span>
</li>
<li><a href="http://bloggereklentileri.blogspot.com/p/blogger.html" title="..."><i aria-hidden="true" class="fa fa-adjust fa-fw"></i> Renk kodu</a>
</li>
<li><a href="http://bloggereklentileri.blogspot.com/p/function-convertvar-ele1-document.html" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> HTML editör</a>
</li>
<li><a href="#" title="..."><i aria-hidden="true" class="fa fa-paint-brush fa-fw"></i> Photoshop</a>
</li>
<li><a href="#" title="..."><i aria-hidden="true" class="fa fa-eye fa-fw"></i> Vitrin</a>
</li>
<li><a href="http://bloggereklentileri.blogspot.com/p/blog-page_19.html" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> CSS sıkıştırma</a>
</li>
<li><a href="#" rel="nofollow" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> HTML format</a>
</li>
<li><a href="#" rel="nofollow" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> CSS format</a>
</li>
<li><a href="http://bloggereklentileri.blogspot.com/p/google-drive-indime-download-linki.html" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> Google drive link</a>
</li>
</ul>
</div>
</div>
</header>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) {
"use strict";
var i = window.document.createElement("link");
var o = t || window.document.getElementsByTagName("script")[0];
i.rel = "stylesheet";
i.href = e;
i.media = "only x";
o.parentNode.insertBefore(i, o);
setTimeout(function() {
i.media = n || "all"
})
}
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function openToolmenu() {
document.getElementById("tool-menu").style.display = "block";
};
var boxArray = ["tool-menu"];
window.addEventListener("mouseup", function(e) {
for (var r = 0; r < boxArray.length; r++) {
var o = document.getElementById(boxArray[r]);
e.target != o && e.target.parentNode != o && (o.style.display = "none")
}
});
function openMenuheader() {
document.getElementById("menu-open").classList.toggle("open-menu");
};
//]]>
</script>
</body>
</html>
Kaydol:
Kayıtlar (Atom)