web-xL: menü

Blogger Sabit Açılır Yan Menü Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNbF_778QC2uTLSxKCBxxrJ4p3qGJglJIH7RT7xrN9kZYwTVBb_sptNqlCypOntwxbT6fiSz9fE3bUViD_Lkuspuf4xB5aqAOq-miJjlf77fbifRm1ZwAg00xB_Ozd9CSiUzs2UHrpCO2a/s1600/yan-menu-sabit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNbF_778QC2uTLSxKCBxxrJ4p3qGJglJIH7RT7xrN9kZYwTVBb_sptNqlCypOntwxbT6fiSz9fE3bUViD_Lkuspuf4xB5aqAOq-miJjlf77fbifRm1ZwAg00xB_Ozd9CSiUzs2UHrpCO2a/s320/yan-menu-sabit.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Blogger Sabit Açılır Yan Menü Eklentisi</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Bu eklentimizde , blogunuzun sol ortasında resimde gördüğünüz gibi bir menü yaratıyoruz.</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Oldukça şık bir görüntüye sahip olan Sabit Açılır Yan Menü Eklentisini blogger blogunuzda kullanmak isterseniz aşağıdaki adımları izlemeniz yeterli..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Aşağıdaki kodumuzu bulalım.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;">]]></b:skin> </pre><div class="hata" style="clear: both; text-align: center;">Hemen üstüne aşağıdaki kodlarımızı ekleyelim.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"> /* CSS Style for Horizontal Menu - info @ http://eklentileri.blogspot.com*/ #hor { list-style:none; padding:0; margin:0; } #hor li { float:left; padding:5px; } #hor a { display:block; height: 12px; text-indent:-999em; } #hor a.home { width:46px; background:url(vHome.gif) no-repeat 0 0; } #hor a.download { width:94px; background:url(vDownload.gif) no-repeat 0 0; } #hor a.contact { width:74px; background:url(vContact.gif) no-repeat 0 0; } /* CSS Style for Vertical Menu */ #ver { list-style:none; padding:0; margin:0; } #ver li { padding:2px; } #ver li a { display:block; height:12px; text-indent:-999em; } #ver a.home { width:47px; background:url(hHome.gif) no-repeat 0 0; } #ver a.download { width:95px; background:url(hDownload.gif) no-repeat 0 0; } #ver a.contact { width:74px; background:url(hContact.gif) no-repeat 0 0; } .clear { clear:both; } *{ /* A universal CSS reset */ margin:0; padding:0; } #navigationMenu body{ font-size:14px; color:#666; background:#111 no-repeat; /* CSS3 Radial Gradients */ background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); font-family:Arial, Helvetica, sans-serif; } #navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px; } #navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHLHYpgW3mztgY5c_ikbZRo6-lgLSMmrSsJsmo92akH3GHW9HvWED0bt3eY-LjQCgGndTglx3rY1_07enFkcdY1FkcHvjVOnf02Ma-xdOS6UedGHThGgBr8nS8Ixxkm4kguUVaI6EXD8/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* Green Button */ #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0; } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344; } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b; } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6; } /*End menu css - info @ http://eklentileri.blogspot.com */ </pre><div> </div><div class="hata" style="clear: both; text-align: center;">Yukarıdaki işlemi yaptıysanız kaydedin ve yerleşim >> gadget ekle >> HTML/JavaScript seçeneği ile açılan yere aşağıdaki kodlarımızı yapıştıralım.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 10px; height: 100%; line-height: 14px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"><div style='position: fixed; top: 40%; left: 0%;'/> <ul id="navigationMenu"> <li> <a class="Ana Sayfa" href="http://eklentileri.blogspot.com"> ANA SAYFA </a> </li> <li> <a class="about" href="LİNK"> About </a> </li> <li> <a class="services" href="LİNK"> Services </a> </li> <li> <a class="portfolio" href="LİNK"> Portfolio </a> </li> <li> <a class="contact" href="LİNK"> Contact us </a> </li> </ul> </div> </pre><div class="hata" style="clear: both; text-align: center;">Burada dikkat etmemiz gereken yerler , kırmızı ile yazılmış olan yerleri kendinize göre düzenlemeniz, eklentinin ön izlemesi için <a href="http://eklentilerideneme2.blogspot.com/" target="_blank">TIKLAYIN</a></div> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>> Blogger Sabit Açılır Yan Menü Eklentisi , Blogger Sabit Menü , Blogger Menü Eklentisi , Blogger Menü Ekleme , Blogger Nasıl Menü Eklenir , Blogger Renkli Menü Yapımı</div>

Blogger Sabit Açılır Yan Menü Eklentisi

Blogger Sabit Açılır Yan Menü Eklentisi Bu eklentimizde , blogunuzun sol ortasında resimde gördüğünüz gibi bir menü yaratıyoruz. Oldukça şık...

Devamı »

Blogger Yandan Açılır Menü Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR8YmDxrnl3LOaWr5pwfg31cPb3yXN-VMfXO6AFJ6HDCOAaBvadNN1p-7zyxRd9p-l6Eyl6S2fHf6AFPlmmkqrXMtOpPbW59Fj1TvnUnvWGTZUOxF2i-cdFV7eGDHsXPUF77Qo3T9e7Bbv/s1600/yandan-acilir-menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR8YmDxrnl3LOaWr5pwfg31cPb3yXN-VMfXO6AFJ6HDCOAaBvadNN1p-7zyxRd9p-l6Eyl6S2fHf6AFPlmmkqrXMtOpPbW59Fj1TvnUnvWGTZUOxF2i-cdFV7eGDHsXPUF77Qo3T9e7Bbv/s320/yandan-acilir-menu.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzda , Yandan açılır <a href="http://eklentileri.blogspot.com/search/label/men%C3%BC">menü</a> eklentisi isterseniz , bu eklenti çok hoşunuza gidecek..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Fare ile üzerine gelindiğinde açılan menümüz , blogunuza hoş bir görsellik katabilir..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="tamam" style="clear: both; text-align: center;"><a href="http://eklentileriblogspot.blogspot.com/2013/01/yandan-aclr-menu.html" rel="nofollow" target="_blank">DEMO</a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Altta yer alan kodumuzu buluyoruz </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">]]></b:skin></pre><div class="hata" style="clear: both; text-align: center;">Bir satır üstüne altta yer alan kodları ekliyoruz.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">/* Blogger Yandan Açılır Menü Eklentisi eklentileri.blogspot.com */ ul.nav8 { list-style:none; height:120px; margin:0; padding:0; } ul.nav8 table { border-collapse:collapse; width:0; height:0; margin:-1px 0 -5px -1px; } ul.nav8 > li { float:right; height:120px; width:40px; position:relative; overflow:hidden; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; } * html ul.nav8 > li { width:auto; } ul.nav8 > li a.ie6 { float:left; height:120px; width:39px; position:relative; overflow:hidden; } ul.sub { list-style:none; height:120px; width:600px; background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top; position:absolute; left:0; top:0; margin:0; padding:0; } ul.sub li { float:left; } ul.sub li:first-child { margin-left:45px; } ul.sub li a { display:block; width:110px; height:120px; float:left; overflow:hidden; position:relative; text-decoration:none; color:#000; } ul.sub li a b { font-size:14px; display:block; padding:15px 15px 5px; } ul.sub li a b:hover { font-size:16px; color:#FF0000; display:block; padding:15px 15px 5px; } ul.sub li a p { font-size:12px; display:block; margin:0; padding:0 10px; } ul.sub li a p:hover { font-size:13px; display:block; margin:0; padding:0 10px; } ul.nav8 > li:hover { width:600px; } ul.nav8 > li a.ie6:hover { direction:ltr; width:600px; } ul.sub li a:hover i { opacity:1.0; }</pre><div class="hata" style="clear: both; text-align: center;">Şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele altta yer alan kodlarımızı ekliyoruz </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;"><ul class="nav8"> <li>  <ul class="sub"> <li><a href="http://eklentileri.blogspot.com/">Ana SayfaBu alana bilgi yazısı </a></li> <li><a href="http://eklentileri.blogspot.com/">Link 1Bu alana bilgi yazısı </a></li> <li><a href="http://eklentileri.blogspot.com/">Link 2Bu alana bilgi yazısı </a></li> <li><a href="http://eklentileri.blogspot.com/">Link 3Bu alana bilgi yazısı </a></li> <li><a href="http://eklentileri.blogspot.com/">Link 4Bu alana bilgi yazısı </a></li> </ul>  </li> </ul></pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki işlemleri yaptıysanız Blogger Yandan Açılır Menü Eklentisi hazır , yukarıdaki kodları kendinize göre düzenleyiniz.. </div> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>>   Blogger Yandan Açılır Menü Eklentisi , Blogger Menü Eklentisi , Blogger Açılır Menü , Menü Eklentileri , Blogger Yana Açılan Menü , Menü , Slideout Menu Bar For Blogger , Blogger Menu Widget</div>

Blogger Yandan Açılır Menü Eklentisi

Blogger blogunuzda , Yandan açılır menü eklentisi isterseniz , bu eklenti çok hoşunuza gidecek.. Fare ile üzerine gelindiğinde açılan menüm...

Devamı »

CSS3 multi blogger menü çubuğu eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixdrWPwkLML5wy3wFRBhqO1C7XDasA32FuqJLqrh5hJH2W5-QyVQ32f4O2ceSIzCy9dGy0YS6WLtmUYwqlQP1xaCo-eLV40Kn_nOTsriTT1bbbv3qOE7IWaio05IDpOpf-vgNKuKY-X5P9/s1600/multi-blogger-menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixdrWPwkLML5wy3wFRBhqO1C7XDasA32FuqJLqrh5hJH2W5-QyVQ32f4O2ceSIzCy9dGy0YS6WLtmUYwqlQP1xaCo-eLV40Kn_nOTsriTT1bbbv3qOE7IWaio05IDpOpf-vgNKuKY-X5P9/s320/multi-blogger-menu.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">CSS3 Multi Blogger Menü Çubuğu Widget</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzda şık ve kullanışlı bir üst menü çubuğu arıyorsanız bu <a href="http://eklentileri.blogspot.com/search/label/Blogger%20Eklenti" target="_blank">eklenti</a> size yarayabilir..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="tamam" style="clear: both; text-align: center;"><a href="http://eklentilerideneme1.blogspot.com/2013/01/multi.html" target="_blank">DEMO</a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">alttaki kodu bulunuz </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">]]></b:skin></pre><div class="hata" style="clear: both; text-align: center;">Bir satır üstüne altta yer alan kodları ekleyiniz.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">/* CSS3 multi blogger menü çubuğu eklentisi eklentileri.blogspot.com*/ ul#navbt { display:block; float:left; font-family:Trebuchet MS,sans-serif; font-size:0; padding:5px 5px 5px 0; background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */ background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */ background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */ background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */ background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ } ul#navbt,ul#navbt ul { list-style:none; margin:0; } ul#navbt,ul#navbt .subs { background-color:#444; border:1px solid #454545; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px; } ul#navbt .subs { background-color:#fff; border:2px solid #222; display:none; float:left; left:0; padding:0 6px 6px; position:absolute; top:100%; width:300px; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; } ul#navbt li:hover>* { display:block; } ul#navbt li:hover { position:relative; } ul#navbt ul .subs { left:100%; position:absolute; top:0; } ul#navbt ul { padding:0 5px 5px; } ul#navbt .col { float:left; width:50%; } ul#navbt li { display:block; float:left; font-size:0; white-space:nowrap; } ul#navbt>li,ul#navbt li { margin:0 0 0 5px; } ul#navbt ul>li { margin:5px 0 0; } ul#navbt a:active,ul#navbt a:focus { outline-style:none; } ul#navbt a { border-style:none; border-width:0; color:#181818; cursor:pointer; display:block; font-size:13px; font-weight:bold; padding:8px 18px; text-align:left; text-decoration:none; text-shadow:#fff 0 1px 1px; vertical-align:middle; } ul#navbt ul li { float:none; margin:6px 0 0; } ul#navbt ul a { background-color:#fff; border-color:#efefef; border-style:solid; border-width:0 0 1px; color:#000; font-size:11px; padding:4px; text-align:left; text-decoration:none; text-shadow:#fff 0 0 0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; } ul#navbt li:hover>a { border-style:none; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; text-shadow:#181818 0 1px 1px; } ul#navbt img { border:none; margin-right:8px; vertical-align:middle; } ul#navbt span { background-position:right center; background-repeat:no-repeat; display:block; overflow:visible; padding-right:0; } ul#navbt ul span { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHwjCQKtqfLXf333OdPtw1URl0YSkjDePPuY14cu-h2DomTU0SQEfprG4tUCAy5PCsp3UO8S01ak5Em-9FhQ4BJmvfHW4SnpWfomfOrDuiCjsdsZDRv_nKRGfQFOyHFVJOUsJa4EuoIM/s1600/bloggetrix-arrow.png"); padding-right:20px; } ul#navbt ul li:hover>a { border-color:#444; border-style:solid; color:#444; font-size:11px; text-decoration:none; text-shadow:#fff 0 0 0; } ul#navbt > li >a { background-color:transpa; height:25px; line-height:25px; border-radius:11px; -moz-border-radius:11px; -webkit-border-radius:11px; } ul#navbt > li:hover > a { background-color:#313638; line-height:25px; }</pre><div class="hata" style="clear: both; text-align: center;">Şablonunuzu kaydedin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript ile alttaki kodları ekleyiniz..</div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;"><ul id="navbt"> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg8lgOeBjqQVFb5iCmGhsWUS1DgN-v4CaZr9ZW2WHTyDpLZ11kew2edqwuM8E5KIUmJCEsYHkH386tA9WZ6dsgcsEOkVuF4UP1ElOL4yO2B8OWIq-kYyxTupks4-auBiGHtTAkw81Cbmw/s1600/bloggetrix-home.png" /> Home</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7bbK56kAdEnHPnkYSWGCTaqQxOEtQaBkfZm-Y0_Km6TvludM_ztCLEAT7iYTEwOLTiOPfp-EAezUlRuLGHjHIE0g-eF50bk-4KNJ0pfFVAkEUkxMnicxruZJ15Yj3P-_A6DIvAb1aVu0/s1600/bloggetrix-top1.png" /> HTML/CSS</a> <div class="subs"> <div class="col"> <ul> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 1</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 2</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 3</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 4</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Sublinks</a> <div class="subs"> <div class="col"> <ul> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 41</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 42</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 43</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 44</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 45</a></li> </ul> </div> <div class="col"> <ul> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 46</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 47</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 48</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 49</a></li> </ul> </div> </div> </li> </ul> </div> <div class="col"> <ul> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 6</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 7</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 8</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 9</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 10</a></li> </ul> </div> </div> </li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqQjVl9LLkpKEGh5YDqAaWL0JfsiFYxKkp1_IVA1M9DZKmPfbFBog8VDYlUvfYHzjUZWaZvsbtsgOr375t9Iasc_BYVRjLYn2EtlSG5AsZgxMEymdpnyoop3JFJnIOsmG3qpGRGKtOBkA/s1600/bloggetrix-top2.png" /> jQuery/JS</a> <div class="subs"> <div class="col"> <ul> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 1</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 2</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 3</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 4</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 5</a></li> </ul> </div> <div class="col"> <ul> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 6</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 7</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 8</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 9</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCshK0Jd29ZSsHukei8QdfJRCf8m50DVcMesr5iAvcWdFl7h12FnRhyphenhyphenXAyVQqxQOHkZgu1nq53EL04Or11aM6LOeyqYe13UdK8SdnlHGXlj1_MB0h2fO5W-CBRegkPhvckCGNwjT44LY/s1600/bloggetrix-bub.png" /> Link 10</a></li> </ul> </div> </div> </li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhysW5fK5DoqjJgn_yLfd1Bx3Rf4Yy52qjXtIWH7itGG6dXqrX8isIjiMokFERvOAPapwvMHi74GOuAHjMnr6MMQT-y3ZOryfakS9EieCWmnxYMfoAWLL_ArrI5UnmkOODSCWFaetqQ7-E/s1600/bloggetrix-top3.png" /> PHP</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeyTxIsjQdVV_wzHIgyq8iJeoBSbWdk9Lejq2owmGyrB979yTOLa2mZ_uZNM-ANUGFUF0uRtUXBzCeh-4RVvpm6TvsK-bn60QQ9iEDRXXbW2QDXByvMCh1sSnBIgY319HP1iHHoMa1TMc/s1600/bloggetrix-top4.png" /> MySQL</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgewYSxIjDTA-b6d8SQfH92x-77e7wX__ioR9CWDv8yO3PXTeZT5NZN3URedxCf-kNsIVQqAVLN0h1_p3IqwgXxxsWpjKWuN2W6K6o21EZTcydKedHycVhUGh_ghXN18jBHvd49M4Bq4o/s1600/bloggetrix-top5.png" /> XSLT</a></li> </ul></pre><div class="hata" style="clear: both; text-align: center;">Üstte yer alan kodları kendinize göre düzenleyip özelleştiriniz..Ayrıca yerleşim kısmından bu eklentiyi , Blog kayıtları üstüne , yada daha yukarda alanınız varsa oraya taşıyınki , menümüz üstte yer alsın..</div> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>> CSS3 multi blogger menü çubuğu eklentisi , CSS3 Blogger Menu , Menu Eklentisi , Blogger Menü Çubuğu ,  Blogger Menü Bar ,menü , Multilevel Blogger Menü</div>

CSS3 multi blogger menü çubuğu eklentisi

CSS3 Multi Blogger Menü Çubuğu Widget Blogger blogunuzda şık ve kullanışlı bir üst menü çubuğu arıyorsanız bu eklenti size yarayabilir.. DE...

Devamı »

Sola Kayma Efektli Açılır Menü Bar

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDObWyDk2LI6Khei5R2x4r60SpYVqNVJufY7MqW170QDEwWkEBxghgxZg7rsuR7_mnAq_pHopnSAVriwlN7K2ATqs50oQRENr8bWPPJm9quh6pdZeQUj8JckC_kwwFDFj6hMyTyvp2SXCt/s1600/menu-bar-blogger-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDObWyDk2LI6Khei5R2x4r60SpYVqNVJufY7MqW170QDEwWkEBxghgxZg7rsuR7_mnAq_pHopnSAVriwlN7K2ATqs50oQRENr8bWPPJm9quh6pdZeQUj8JckC_kwwFDFj6hMyTyvp2SXCt/s320/menu-bar-blogger-widget.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">CSS3 Sola Kayma Efektli Blogger Menü Bar Eklentisi</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Bu eklentimiz ile , <a href="http://eklentileri.blogspot.com/search/label/Blogger" target="_blank">blogger</a> blogunuzda , üst menü yaratabilirsiniz , <a href="http://eklentileri.blogspot.com/search/label/men%C3%BC" target="_blank">Menü</a> bar eklentimizle alt kategoriler yaratabilirsiniz , alt kategorilerimiz soldan uçarak gelir...</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="tamam" style="clear: both; text-align: center;"><a href="http://eklentilerideneme1.blogspot.com/2012/12/css3-soldan-efektli-menubar.html" rel="nofollow" target="_blank">DEMO</a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Alttaki kodumuzu şablon kısmında buluyoruz </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">]]></b:skin></pre><div class="hata" style="clear: both; text-align: center;">Bir satır üstüne , altta yer alan kodlarımızı ekliyoruz.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">/*Soldan Kayma Efektli Blogger Menü Bar Eklentisi Kod Baslangici www.eklentileri.blogspot.com*/ #flyingmenubt,#flyingmenubt ul { list-style: none outside none; margin: 0; padding: 0; height:500px;} #flyingmenubt { font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0 -1px 3px #202020; width: 980px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } #flyingmenubt ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; } #flyingmenubt li { border-bottom: 1px solid #575757; border-left: 1px solid #929292; border-right: 1px solid #5d5d5d; border-top: 1px solid #797979; display: block; float: left; height: 34px; position: relative; width: 105px; } #flyingmenubt li:first-child { border-left: 0 none; margin-left: 5px; } #flyingmenubt li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } /* keyframes #animation1 */ @-webkit-keyframes animation1 { 0% {-webkit-transform: scale(1);} 30% {-webkit-transform: scale(1.3);} 100% {-webkit-transform: scale(1);}} @-moz-keyframes animation1 { 0% {-moz-transform: scale(1);} 30% {-moz-transform: scale(1.3);} 100% {-moz-transform: scale(1);}} #flyingmenubt li > a:hover { -moz-animation-name: animation1; -moz-animation-duration: 0.7s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #flyingmenubt li:hover > a { z-index: 4; } #flyingmenubt li:hover ul.subs { left: 0; top: 34px; width: 150px; } #flyingmenubt ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); opacity: 0; width: 100%; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* keyframes #animation2 */ @-webkit-keyframes animation2 { 0% {margin-left:185px;} 100% {margin-left:0px;opacity:1;} } @-moz-keyframes animation2 { 0% {margin-left:185px;} 100% { margin-left:0px;opacity:1;} } #flyingmenubt li:hover ul li { /* css3 animation */ -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* animation delays */ #flyingmenubt li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; } #flyingmenubt li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; } #flyingmenubt li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #flyingmenubt li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #flyingmenubt li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #flyingmenubt li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #flyingmenubt li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #flyingmenubt li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }</pre><div class="hata" style="clear: both; text-align: center;">Şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript seçenekleri ile açılan <a href="http://eklentileri.blogspot.com/" target="_blank">blogger</a> paneline altta yer alan kodlarmızı ekliyoruz.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;"><ul id="flyingmenubt"> <li><a href="http://eklentileri.blogspot.com/">Ana Sayfa</a></li> <li><a class="hsubs" href="#">Menu 1</a> <ul class="subs"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a class="hsubs" href="http://eklentileri.blogspot.com/">Menu 2</a> <ul class="subs"> <li><a href="#">Submenu 2-1</a></li> <li><a href="#">Submenu 2-2</a></li> <li><a href="#">Submenu 2-3</a></li> <li><a href="#">Submenu 2-4</a></li> <li><a href="#">Submenu 2-5</a></li> <li><a href="#">Submenu 2-6</a></li> <li><a href="#">Submenu 2-7</a></li> <li><a href="#">Submenu 2-8</a></li> </ul> </li> <li><a class="hsubs" href="#">Menu 3</a> <ul class="subs"> <li><a href="#">Submenu 3-1</a></li> <li><a href="#">Submenu 3-2</a></li> <li><a href="#">Submenu 3-3</a></li> <li><a href="#">Submenu 3-4</a></li> <li><a href="#">Submenu 3-5</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> <li><a href="http://eklentileri.blogspot.com/">Blogger Eklenti</a></li> </ul></pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki kodları kendinize göre düzenleyiniz, daha iyi anlamak için üstte yer alan demo linkinden yararlanabilirsiniz..Son olarak gerekli gadgeti yerleşim kısmından , post yayınlarının üstündeki alana taşıyınki <a href="http://eklentileri.blogspot.com/search/label/Blogger%20Eklenti" target="_blank">eklenti</a> yukarda gözüksün..</div> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>>  Sola Kayma Efektli Blogger Menü Bar , Blogger Menü Bar , Menu Bar , MenuBar , Bar , Blogger Menü Eklentisi , Kayma Efektli Blogger Menü , Açılır Menü , Blogger Açılır Menü </div>

Sola Kayma Efektli Açılır Menü Bar

CSS3 Sola Kayma Efektli Blogger Menü Bar Eklentisi Bu eklentimiz ile , blogger blogunuzda , üst menü yaratabilirsiniz , Menü bar eklentimi...

Devamı »

Multi Color CSS3 Blogger Menü

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGK6OGbQZ5cvxZk-07WVkD2eElBNafrgotMlKdrGypioB78AIGoXqJs3yAfEflUx5MijHlOGWZN_hkkKDHDhkgSZr25BiL8RJCj9krflAeW2MeTX82B3kvUFF3lM1bQbXXtTfalX8EFqFn/s1600/m%C4%B1lti-color-blogger-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGK6OGbQZ5cvxZk-07WVkD2eElBNafrgotMlKdrGypioB78AIGoXqJs3yAfEflUx5MijHlOGWZN_hkkKDHDhkgSZr25BiL8RJCj9krflAeW2MeTX82B3kvUFF3lM1bQbXXtTfalX8EFqFn/s320/m%C4%B1lti-color-blogger-widget.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Multi Color CSS3 Blogger Menü Eklentisi</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzda , rengarenk bir menü kullanmak istermisiniz ?</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Bu eklentimizle , Blogunuzda post üstüne ,  bu renkli menüyü ekleyip , hem görsel açıdan hemde ziyaretçilerinizin yararlanması amaçlı bir menü oluşturabilirsiniz..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="tamam" style="clear: both; text-align: center;"><a href="http://bloggereklentilerideneme4.blogspot.com/" rel="nofollow" target="_blank">DEMO</a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Aşağıda yer alan kodu buluyoruz.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">]]></b:skin></pre><div class="hata" style="clear: both; text-align: center;">Bir satır üstüne , alttaki kodları ekliyoruz.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">/* CSS3 Multi color blogger menu widget başlangıç kodu eklentileri.blogspot.com */ .cbdb-menu li { display: block; float: left; line-height: 35px; list-style:none; margin: 0 5px;} .cbdb-menu li a { /* This generators the gradient on top of the solid color */ background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(255,255,255,.5)), color-stop(1, rgba(0,0,0,.1)) ); background-image: -moz-linear-gradient( center top, rgba(255,255,255,.5) 0%, rgba(0,0,0,.1) 100% ); color: #f4f4f4; /* IE */ color: rgba(255, 255, 255, 0.8); display: block; font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif; outline:none; padding: 5px 15px; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); } .cbdb-menu li a:active { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0,rgba(255,255,255,.5)), color-stop(.1,rgba(255,255,255,.2)), color-stop(.85, rgba(0,0,0,.2)), color-stop(100, rgba(0,0,0,.4)) ); background-image: -moz-linear-gradient( center bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 10%, rgba(0,0,0,.2) 85%, rgba(0,0,0,.4) 100% ); } /* Dark Text */ .cbdb-menu li a.dark { color: #333; /* IE */ color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4); } /*********** COLORS *************/ /* Create your own class for your own colors */ .red { background: #B80202; border: #B80202 1px solid} .red:hover, .red:focus{ background-color:#e30606 } .green { background: #46c431; border: #46c431 1px solid} .green:hover,.green:focus { background-color:#44e329 } .yellow { background: #D9CE1C; border: #D9CE1C 1px solid} .yellow:hover,.yellow:focus { background-color:#eee117} .cyan { background: #23c6de; border: #23c6de 1px solid} .cyan:hover,.cyan:focus { background-color:#18d8f4 } .blue { background: #3271d9; border: #3271d9 1px solid} .blue:hover,.blue:focus { background-color:#377ef2 } </pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki işlemi yaptıysanız , şablonunuzu kaydedin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele aşağıdaki kodlarımızı ekliyelim </div><pre style="border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;"><ul class="cbdb-menu"> <li><a href="http://eklentileri.blogspot.com/" class="red">Ana Sayfa</a> </li> <li><a href="http://eklentileri.blogspot.com/" class="green">Deneme</a></li> <li><a href="http://eklentileri.blogspot.com/" class="yellow">Deneme</a></li> <li><a href="http://eklentileri.blogspot.com/" class="cyan">Deneme</a></li> <li><a href="http://eklentileri.blogspot.com/" class="blue">iletişim</a></li> </ul></pre><div class="hata" style="clear: both; text-align: center;">Kod içinde kalın belirtilmiş yerleri kendinize göre düzenleyiniz , son olarak gadgeti, post kısmının üstüne taşıyın ki yukarıda kalsın.. </div><div class="separator" style="clear: both; text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"> </div><div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>>   Multi Color CSS3 Blogger Menü , Renkli CSS3 Blogger Menü , Blogger Menü , Menü , Blogger Menu Widget , Renkli , CSS3 , Blogger Menu Ekleme</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"> </div>

Multi Color CSS3 Blogger Menü

Multi Color CSS3 Blogger Menü Eklentisi Blogger blogunuzda , rengarenk bir menü kullanmak istermisiniz ? Bu eklentimizle , Blogunuzda post ü...

Devamı »

Blogger MenuBar eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgijLIZlDi1T4wb9W_EMmvDc-B7LN_s75EPYoq14FBm4o5UgRZSn-0Py8jyiyPlceA7iYsWKAstxxB6jQf0pzQQX236JmnxMzsL2moPne8WnyJkZPg1twHnt-RAsO8fUC7FRO7iKYYqxsnR/s1600/blogger+menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgijLIZlDi1T4wb9W_EMmvDc-B7LN_s75EPYoq14FBm4o5UgRZSn-0Py8jyiyPlceA7iYsWKAstxxB6jQf0pzQQX236JmnxMzsL2moPne8WnyJkZPg1twHnt-RAsO8fUC7FRO7iKYYqxsnR/s320/blogger+menu.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger menü bar eklentisi...</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuz için kullanışlı bir menü eklentisi istermisiniz ? bu eklentimizde , linkin üzerine gelindiğinde açıklama belirtebiliyorsunuz..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger menü bar eklentisini kullanmak için yapmanız gerekenler aşağıda..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Alttaki kodu bulunuz.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">]]></b:skin></pre><div class="hata" style="clear: both; text-align: center;">Bir satır üstüne aşağıdaki kodları ekleyiniz. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;">/* menu kodu eklentileri.blogspot.com */ #menu1 ul { list-style:none; font-family: Georgia, serif; font-size: 20px; font-style: italic; font-weight: normal; letter-spacing: normal; line-height: 0.8em; border:2px solid #000; border-left:none; float:left; clear:both; margin:10px; } #menu1 ul li{ float:left; } #menu1 ul li a{ display:block; text-decoration:none; background-color:#444; padding:5px 10px; color:#fff; width:140px; border-right:1px solid #666; border-left:1px solid #000; } #menu1 ul li a span{ display:block; } #menu1 ul li a span.title{ border-bottom:1px solid #444; } #menu1 ul li a:hover span.title{ border-bottom:1px dashed #f0f0f0; color:#ef0000; } #menu1 ul li a span.text{ visibility:hidden; font-size:12px; text-align:right; } #menu1 ul li a:hover span.text{ visibility:visible; } </pre><div> </div><div class="hata" style="clear: both; text-align: center;">Şimdide Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı girelim.. .. tavsiye edilen ; alttaki resimdeki yere ekleyiniz ( BLOG KAYITLARI üstüne ) <div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFUFybFFTOjE4sV4D14z8r-C4OJnQTGfk6qvLDEaLgW0zpuyJW5N4SMxJOdMiEFWDbitfOnrIxA0QYvwDrqsmlplK7Gl6qP4JLA0zPnKTVREqEhLN7L1GpZIsVxzzscTAAJ6k46Li4Rh2/s1600/BURAYA.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFUFybFFTOjE4sV4D14z8r-C4OJnQTGfk6qvLDEaLgW0zpuyJW5N4SMxJOdMiEFWDbitfOnrIxA0QYvwDrqsmlplK7Gl6qP4JLA0zPnKTVREqEhLN7L1GpZIsVxzzscTAAJ6k46Li4Rh2/s320/BURAYA.png" width="320" /></a></div> <div class="ikaz" style="clear: both; text-align: center;"></div></div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;"><div id="menu1"> <ul> <li><a href="http://eklentileri.blogspot.com/"> ANA SAYFA Home Page </a> </li> <li><a href=""> Kategoriler Seçenekler </a> </li> <li><a href=""> LİNK 1 Açıklama </a> </li> <li><a href=""> iletişim Bize ulaşın </a> </li> <li><a href="http://eklentileri.blogspot.com/"> Link 2 Açıklama 2 </a> </li> </ul> </div></pre><div class="hata" style="clear: both; text-align: center;">yapmanız gerekenler bu kadar , renkli bölümleri kendinize göre düzenleyiniz.. <a href="http://bloggereklentilerideneme8.blogspot.com/" target="_blank">DEMO</a></div> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>> Blogger MenuBar eklentisi , Blogger MenuBar , Blogger Menü  Bar eklentisi , Blogger menü , blogger menu , menü , menu , blogger menü ekleme , blogger üst menü , blogger widgets</div>

Blogger MenuBar eklentisi

Blogger menü bar eklentisi... Blogger blogunuz için kullanışlı bir menü eklentisi istermisiniz ? bu eklentimizde , linkin üzerine gelindiğin...

Devamı »

Blogger Dikey Navigation Menü Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg_UzruykH-ph_fEWpEJPHm-BbCMZdJqRAv0RtCVchtLbzXRfJd9BhClEZX1pseUDKuQrVrPkXDnmPEDbeRupwJKa6clIplKpVKHqO4DO7-7UOOgnHWUxZg4_kt08JC7G_8OKEuBQ1L9lj/s1600/eklentileri.blogspot.com.menu.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg_UzruykH-ph_fEWpEJPHm-BbCMZdJqRAv0RtCVchtLbzXRfJd9BhClEZX1pseUDKuQrVrPkXDnmPEDbeRupwJKa6clIplKpVKHqO4DO7-7UOOgnHWUxZg4_kt08JC7G_8OKEuBQ1L9lj/s1600/eklentileri.blogspot.com.menu.gif" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="ikaz" style="clear: both; text-align: center;">Blogger Dikey Navigation Menü Eklentisi Widgets</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzda , üstteki resimde gördüğünüz gibi bir menü eklentisi istermisiniz ?</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Bu eklentimizi blogunuzda isterseniz kategori olarak , isterseniz farklı yerlere link vermek için kullanabilirsiniz..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="tamam" style="clear: both; text-align: center;">Demo için üstteki resime bakabilir , yada <a href="http://eklentilrideneme6.blogspot.com/" target="_blank">BURAYA</a> tıklayabilirsiniz..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Anlatıma geçelim.. </div><div class="hata" style="clear: both; text-align: center;">Aşağıdaki kodu bulun </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;">]]></b:skin> </pre><div class="hata" style="clear: both; text-align: center;">hemen üstüne aşağıdaki kodlarımızı ekleyelim.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;">#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjEWxCvTjABKzlo7n1rdij0oG2ZKVvdZe-Jcoe5kl0tyFKxEs92L5D25OKAgfIxl4vT4ODmTowh8JRBSGLMoxEd8J5OMn7BtuJK5KjitKaggaTZswwPkAKH_dlxYrDQmqHyZN9NQ_rWc/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjEWxCvTjABKzlo7n1rdij0oG2ZKVvdZe-Jcoe5kl0tyFKxEs92L5D25OKAgfIxl4vT4ODmTowh8JRBSGLMoxEd8J5OMn7BtuJK5KjitKaggaTZswwPkAKH_dlxYrDQmqHyZN9NQ_rWc/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; } </pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki işlemi yaptıysanız , Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><div id="menu9"> <ul> <li><a href="#">MENU 1</a></li> <li><a href="#">MENU 2</a></li> <li><a href="#">MENU 3</a></li> <li><a href="#">MENU 4</a></li> <li><a href="#">MENU 5</a></li> </ul> </div> </pre><div class="hata" style="clear: both; text-align: center;">Kodlar içinde geçen kırmızı yerlere görünmesini istediğimiz yazıyı , mavi yerlere ise gidilmesi gereken link adresinizi yazınız.. </div> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>> Blogger Dikey Navigation Menü Eklentisi , Blogger Dikey Navigation Menü  , Blogger Menü Eklentisi , Blogger Menü widget , Blogger için menü</div>

Blogger Dikey Navigation Menü Eklentisi

Blogger Dikey Navigation Menü Eklentisi Widgets Blogger blogunuzda , üstteki resimde gördüğünüz gibi bir menü eklentisi istermisiniz ? Bu ek...

Devamı »

Aşağı Açılan Sayfayla Kayan Menü Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxpp7_JglycGFdsmAsUqep0-wfHGfLooo9MmZ4nCnCChj57Rl6He8ka98hyphenhyphenW8tb9v6tUrXuYVAzcn9SaIP6EuRP9xOsrk0isqCewNaVirxOflddHDedQKMc_drUrFZTLhkhqOSL3-9rdw/s1600/asagi-acilir+menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxpp7_JglycGFdsmAsUqep0-wfHGfLooo9MmZ4nCnCChj57Rl6He8ka98hyphenhyphenW8tb9v6tUrXuYVAzcn9SaIP6EuRP9xOsrk0isqCewNaVirxOflddHDedQKMc_drUrFZTLhkhqOSL3-9rdw/s320/asagi-acilir+menu.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Aşağı Açılan Sayfayla Kayan Menü Eklentisi</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Bu eklentimizde , blogger blogunuzun sağ tarafında , sayfayla hareket eden , fare üstüne getirilince aşağı doğru açılan menü eklentisi yapımını anlatacağız..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="tamam" style="clear: both; text-align: center;">Demosunu görmek için <a href="http://bloggereklentilerideneme4.blogspot.com/" target="_blank">TIKLAYIN</a>.</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Aşağı Açılır Sayfayla Kayan Menü Eklentisi Anlatımı.</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 10px; height: 100%; line-height: 14px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"><style text-type="CSS"> #bmenu{ position:fixed; right:5px; center:0px; background-color:#2059DC; border-radius:10px; -moz-border-radius:10px; border:2px solid #FFF; width:202px; height:20px; color:#FFFFFF; transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;} #bmenu h3{ margin:0; padding:0; text-align:center; cursor:pointer;} #bmenu ul{ border-radius:10px;-moz-border-radius:10px; border:2px solid #FFf; background-color:#9AB2EA; margin:15px 0; padding:0 15px;} #bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{ color:#000; text-decoration:none; font-size:14px;} #bmenu li a:hover{ color:#fff;} #bmenu:hover{ z-index:5; height:175px; </style> <div id="bmenu"> <h3> Açılır Menü</h3> <ul> <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> </ul> </div> </pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki kodlar içinde dikkat etmemiz gereken yerler renkli olarak belirtilmiştir.. <div style="text-align: left;">Kırmızı yere >> Görüntü başlığınız...</div><div style="text-align: left;">Mavi yere >> Menü Başlıklarınız</div><div style="text-align: left;">Sarı Yere >> Menü Linkleriniz..</div></div> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>> Aşağı Açılan Sayfayla Kayan Menü Eklentisi , Aşağı Açılan Menü Eklentisi , Aşağı Açılan Kayan Menü Eklentisi , Aşağı Açılır Menü Eklentisi , Blogger Menü Yapımı , Blogger Menü Eklentisi </div>

Aşağı Açılan Sayfayla Kayan Menü Eklentisi

Aşağı Açılan Sayfayla Kayan Menü Eklentisi Bu eklentimizde , blogger blogunuzun sağ tarafında , sayfayla hareket eden , fare üstüne getirili...

Devamı »

Blogger Jquery Slider Menu Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrABCdYOuYPbwI26-6MT0vK-rMQnELE5DwFXtHGZ9cQsd8vPV5wxGZPC6FSkmacFxw8WABq946TLxVFQWC1u2SIy5b1gMjCcylMJ-S070ybGEIntAYNKClaLN2Ayz9-fOx0OOJqnPIqw91/s1600/slider-menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrABCdYOuYPbwI26-6MT0vK-rMQnELE5DwFXtHGZ9cQsd8vPV5wxGZPC6FSkmacFxw8WABq946TLxVFQWC1u2SIy5b1gMjCcylMJ-S070ybGEIntAYNKClaLN2Ayz9-fOx0OOJqnPIqw91/s320/slider-menu.png" width="320" /></a></div><div class="hata" style="clear: both; text-align: center;">Blogger Jquery Slider Menu Eklentisi</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzda slider menü kullanmak istermisiniz ? oldukça güzel bir eklenti olan Jquery Slider Menu Eklentisini blogger blogunuza eklemek için şağıdaki anlatılanları yapmanız yeterli..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzdaki ziyaretçilerinize önemli konularınızı , duyurularınızı göstermek için güzel bir eklenti...Kullanımı ve görüntüsüde oldukça hoş..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Hemen anlatıma geçelim..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Aşağıdaki kodumuzu bulalım.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;">]]></b:skin> </pre><div class="hata" style="clear: both; text-align: center;">Hemen üstüne alttaki kodlarımızı ekleyelim.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;">/*--Main Container--*/ .main_view { float: left; position: relative; } /*--Window/Masking Styles--*/ .window { height:250px; width: 500px; overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {float: left;} /*--Paging Styles--*/ .paging { position: absolute; bottom: 40px; right: -7px; width: 178px; height:47px; z-index: 100; /*--Assures the paging stays on the top layer--*/ text-align: center; line-height: 40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhMNlh0pnyB-R_fku2E5PDxOUs_7OthSQOKfnIcnEOhDhKK0tTS7FGy-a3vrkqygBo9e15P1fuMBPWnnOwmu3LCTMXvH5ihSv5s7f8KvZoev1UK2Hn5ROVbYYxGYxv76T0sUhbmHjbeXsT/s1600/paging_bg2.png) no-repeat; display: none; /*--eklentileri.blogspot.com--*/ } .paging a { padding: 5px; text-decoration: none; color: #fff; } .paging a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;} </pre><div class="hata" style="clear: both; text-align: center;">Şimdide bu kodu bulalım.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"></head> </pre><div class="hata" style="clear: both; text-align: center;">Bu kodumuzunda hemen üstüne aşağıdaki kodlarımızı ekleyelim.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { //Set Default State of each portfolio piece $(&quot;.paging&quot;).show(); $(&quot;.paging a:first&quot;).addClass(&quot;active&quot;); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(&quot;.window&quot;).width(); var imageSum = $(&quot;.image_reel img&quot;).size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //eklentileri.blogspot.com $(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class $active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(&quot;.image_reel&quot;).animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $(&#39;.paging a.active&#39;).next(); if ( $active.length === 0) { //If paging reaches the end... $active = $(&#39;.paging a:first&#39;); //go back to first } rotate(); //eklentileri.blogspot.com }, 7000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(&quot;.image_reel a&quot;).hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(&quot;.paging a&quot;).click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script> </pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki işlemleri yaptıysanız , kaydet diyelim.. </div> <div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFUFybFFTOjE4sV4D14z8r-C4OJnQTGfk6qvLDEaLgW0zpuyJW5N4SMxJOdMiEFWDbitfOnrIxA0QYvwDrqsmlplK7Gl6qP4JLA0zPnKTVREqEhLN7L1GpZIsVxzzscTAAJ6k46Li4Rh2/s1600/BURAYA.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFUFybFFTOjE4sV4D14z8r-C4OJnQTGfk6qvLDEaLgW0zpuyJW5N4SMxJOdMiEFWDbitfOnrIxA0QYvwDrqsmlplK7Gl6qP4JLA0zPnKTVREqEhLN7L1GpZIsVxzzscTAAJ6k46Li4Rh2/s320/BURAYA.png" width="320" /></a></div> <div class="hata" style="clear: both; text-align: center;">Yerleşim kısmından blog kayıtları ( önerilir) üstüne gadget olarak aşağıdaki kodlarımızı ekleyelim.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 10px; height: 100%; line-height: 14px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"><div class="container"> <div class="folio_block"> <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWhc1qRrX0pI7Iz7LcAxaw-Qvv8Fp6-NZwvLvNCDlv5hPX4w3cjfpWsFu3HuFWBXzMRjeWCAr94BJozrxEzoQLPyjR6nSsObsW7gPrBtN61DfyDNmUl6XsOXXF8bRetLv7VH9OhiZJS8i/s1600/slider-image-1.jpg" alt="" /></a> <a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_B5assZHqOxyWxcFedMGlheEDoGsk8SAXol9-vrHY2QJRrCoTJRB5bQWjlXZhh063Cu-AereQ1-XJAI12-hT4BwsCoDf-qRkAAKdo1n2PLHUQaW6vicM-vN8D6hw1R8jhF1GSCBYh3-u/s1600/slider-image-2.jpg" alt="" /></a> <a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEOFYkZWTOp3xQ48RcJswDVDW2Bq8nr0ggScHsSiYhpWFUIt1cOPApT6vHJswtkFDyrFX4q4T_pLms1z4bIAPDNP2V_fRtbeLnDcKPAqrV-u25n40eZ7JSpjRkRfjrn-YXOGkfWAfD4-gJ/s1600/slider-image-3.jpg" alt="" /></a> <a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijYXk9nHNPknIoobheCbjrIz5OKfxgqTj9pepjtnaDCSL1ICfqJIfhePUFRKW6X1ViF83iRwT9SKfxW9G7C87Zg7Jj3-cEOhTqbJTlY_vxVZ7HNcpL6El7d_pcKyoHCD3wSczRTyj7MwSD/s1600/slider-image-4.jpg" alt="" /></a> <a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmfzc0CYBYgWi30G3KG_Y-JW-j_XOp1hnTYZ9_zr031YfKouTndBlqjKPBoCNXbEq9b_jhC7c6yXX0btwLu3BKog8MkNrBAxdrROUbPwQl0DqRCufkTkrpST8aYS-5gV3MblgKVlhyphenhyphenDZR/s1600/slider-image-6.jpg" alt="" /></a> </div> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> <a href="#" rel="5">5</a> </div> </div> </div> </div> </pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki kırmızı olan yerleri kendinize göre düzenleyin..<a href="http://eklentilerideneme2.blogspot.com/" target="_blank">DEMO</a></div> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>> Blogger Jquery Slider Menu Eklentisi , Blogger Jquery Slider Menu  , Blogger Jquery  Menu Eklentisi , Blogger Jquery  Menu , Blogger  Slider  Eklentisi , Blogger Jquery  Eklentisi , Blogger Slayt Menu</div>

Blogger Jquery Slider Menu Eklentisi

Blogger Jquery Slider Menu Eklentisi Blogger blogunuzda slider menü kullanmak istermisiniz ? oldukça güzel bir eklenti olan Jquery Slider Me...

Devamı »