web-xL: Css3

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 Animasyonlu Hareketli Buton Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpu36xjXK-UPDFNFFSJdKpWz3hvjdolz2Ja_YExdJd5rdo0DjIqrAojUdv6zlG3w4zrppZMDsCdiffT_PJN6XlrkcWDFBni7TWbsKwZ97GlMHpvMDUA7ZEYXkQJiQCbQGlqlNf-IyorUOO/s1600/blogger-hareketli-buton.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpu36xjXK-UPDFNFFSJdKpWz3hvjdolz2Ja_YExdJd5rdo0DjIqrAojUdv6zlG3w4zrppZMDsCdiffT_PJN6XlrkcWDFBni7TWbsKwZ97GlMHpvMDUA7ZEYXkQJiQCbQGlqlNf-IyorUOO/s320/blogger-hareketli-buton.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 , hareketli butonlar kullanmak istermisiniz ?</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogunuza bu butonları eklemek için aşağıdaki anlatımı takip ederek , Animasyonlu buton eklentisiniz blogger blogunuzda kullanabilisiniz..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="tamam" style="clear: both; text-align: center;">Demo aşağıda...</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"><a class="button big blue" href="http://eklentileri.blogspot.com/" target="_blank">DEMO</a></div> <div style="text-align: center;"><a class="button big orange" href="http://eklentileri.blogspot.com/" target="_blank">eklentileri.blogspot.com</a></div><div style="text-align: center;"> </div><div style="text-align: center;"><a class="button big green" href="http://eklentileri.blogspot.com/" target="_blank">TIKLA</a></div><div style="text-align: center;"> </div><div style="text-align: center;"><a class="button big gray" href="http://eklentileri.blogspot.com/" target="_blank">İNDİR</a></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ı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: auto; padding: 5px; width: 100%;">.button{ font:15px Calibri, Arial, sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'); background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s; } .button:hover{ background-position:top left; background-position:top left, bottom right, 0 0, 0 0; } .button:active{ bottom:-1px; } /* The three buttons sizes */ .button.big { font-size:30px;} .button.medium { font-size:18px;} .button.small { font-size:13px;} /* BlueButton */ .blue.button{ color:#0f4b6d !important; border:1px solid #84acc3 !important; background-color: #48b5f2; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); } .blue.button:hover{ background-color:#63c7fe; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); } /* Green Button */ .green.button{ color:#345903 !important; border:1px solid #96a37b !important; background-color: #79be1e; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317)); } .green.button:hover{ background-color:#89d228; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e)); } /* Orange Button */ .orange.button{ color:#693e0a !important; border:1px solid #bea280 !important; background-color: #e38d27; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f)); } .orange.button:hover{ background-color:#ec9732; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b)); } /* Orange Button */ .gray.button{ color:#525252 !important; border:1px solid #a5a5a5 !important; background-color: #a9adb1; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c)); } .gray.button:hover{ background-color:#b6bbc0; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv9PnX5Qt9ozG8AV2Dkm8QKCB9Y09nh_Qm-mF2D8Jym87pcpz6j3NxfZpHG5DdLE_4J7bblBPm1nUUuivCQIVJt0K5YADPByj7Q-tqqqlaclIMzBcTeqeJPWsLxjMDu0g44I-9vPTKSfj4/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9)); }</pre><div class="hata" style="clear: both; text-align: center;">Butonları Kullanmak için aşağıdaki kodları kullanıyoruz.. </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%;"><a class="button big blue" href="LİNK/URL" target="_blank">Buton Yazısı</a> <a class="button big orange" href="LİNK/URL" target="_blank">Buton Yazısı</a> <a class="button big green" href="LİNK/URL" target="_blank">Buton Yazısı</a> <a class="button big gray" href="LİNK/URL" target="_blank">Buton Yazısı</a></pre> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>>  Blogger Animasyonlu Hareketli Buton Eklentisi , Blogger Animasyonlu Buton Eklentisi , Blogger Hareketli Buton Eklentisi , Blogger Buton Eklentisi , Blogger Buton , Buton , Button , Blogger Button Widget ,Animated CSS Buttons For Blogger , Blogger Animated Buttons </div>

Blogger Animasyonlu Hareketli Buton Eklentisi

Blogger blogunuzda , hareketli butonlar kullanmak istermisiniz ? Blogunuza bu butonları eklemek için aşağıdaki anlatımı takip ederek , Anima...

Devamı »

CSS3 Dairesel Blogger Buton Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfR4kcZpX6PQc5mD9y_L1-RQWe7pDnY9RQcKow_cLqMwsSoXGq8fvp-neTyqLv41gVW1sqWGjhyphenhyphenK8Pf3TywHAXrK0Q0YSugNhDl9FpZltvfHNxDtrDMUeWwYarKC8LqIirYPnnAEz5AhZ/s1600/blogger-daire-button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfR4kcZpX6PQc5mD9y_L1-RQWe7pDnY9RQcKow_cLqMwsSoXGq8fvp-neTyqLv41gVW1sqWGjhyphenhyphenK8Pf3TywHAXrK0Q0YSugNhDl9FpZltvfHNxDtrDMUeWwYarKC8LqIirYPnnAEz5AhZ/s320/blogger-daire-button.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 Dairesel Blogger Buton Widget</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuz için , üzerine gelince hareketlilik gösteren buton veya butonlar kullanmak istermisiniz ?</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">O halde aşağıdaki yazıyı takip edin..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Alttaki kodu blogger blogunuzda bulun.. </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;">Hemen üstüne aşağıda 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%;">.a-btn{ width:60px; height:60px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; display:block; margin:20px; float:left; background:#f0ad4e; position:relative; -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn span{ display:table-cell; width:40px; height:40px; padding:10px; text-align:center; vertical-align:middle; font-size:16px; color:#fff; text-shadow:0px 1px 1px #A03F16; font-family:"Arvo", "Myriad Pro", "Trebuchet MS", sans-serif; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn span:nth-child(1), .a-btn span:nth-child(3){ position:absolute; top:0px; left:0px; font-size:16px; line-height:19px; opacity:0; } .a-btn span:nth-child(1){ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNTwlGjgGOiPy18eKy4bQWzzxv5LELQQier3Tucn78OyvegOtCKqYTazteVV5YIjzUo6X5QCh3q7UGLnH8Ge66kBk7KlseFtX0EcdAJyifUHeJX0mwQAoyxbp7xSfWUMHFua5JmytURA/s1600/star.png) no-repeat center center; opacity:0.2; } .a-btn:hover{ background:rgba(170, 77, 27, 0.6); -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; } .a-btn:hover span:nth-child(3){ opacity:1; } .a-btn:hover span:nth-child(2){ opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } .a-btn:hover span:nth-child(1){ -webkit-animation:rotate 1s linear; -moz-animation:rotate 1s linear; animation:rotate 1s linear; } .a-btn:active{ -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; } .a-btn:active span:nth-child(2){ color:rgba(170, 77, 27, 0.8); text-shadow:0px 1px 1px rgba(255, 255, 255, 0.6); } @keyframes rotate{ 0% { transform: scale(1) rotate(0);} 50% { transform: scale(0.5) rotate(180deg);} 100% { transform: scale(1) rotate(360deg);} } @-webkit-keyframes rotate{ 0% { -webkit-transform: scale(1) rotate(0);} 50% { -webkit-transform: scale(0.5) rotate(180deg);} 100% { -webkit-transform: scale(1) rotate(360deg);} } @-moz-keyframes rotate{ 0% { -moz-transform: scale(1) rotate(0);} 50% { -moz-transform: scale(0.5) rotate(180deg);} 100% { -moz-transform: scale(1) rotate(360deg);} } </pre><div> </div><div class="hata" style="clear: both; text-align: center;">Yukarıdaki işlemi yaptıysanız eklentimiz hazır , şimdi nasıl kullanılacağını görelim..yaınların içinde yada eklenti olarak kullanmak için aşağıdaki kodları kullanıyoruz. </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 class="button-wrapper"> <a href="#" class="a-btn"> Sign up It's free!</a> <a href="#" class="a-btn"> Join Now It's free!</a> <a href="#" class="a-btn"> Enter It's free!</a> <a href="#" class="a-btn"> Get in It's free!</a> </div> </pre><div> </div> <div style="text-align: center;"><a href="http://eklentilrideneme6.blogspot.com/2012/10/css3-dairesel-blogger-buton-eklentisi.html" target="_blank">DEMO</a></div> <div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>> CSS3 Dairesel Blogger Buton Eklentisi , Dairesel Blogger Buton Eklentisi , Blogger Buton Eklentisi , Blogger Buton Ekleme , Blogger Butonları , Blogger Button Widget , CSS3 Circle Effect Buttons Style For Blogger</div>

CSS3 Dairesel Blogger Buton Eklentisi

CSS3 Dairesel Blogger Buton Widget Blogger blogunuz için , üzerine gelince hareketlilik gösteren buton veya butonlar kullanmak istermisiniz ...

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 3D arama kutusu Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbs7g-rXeLEFlDYwKDYvbPrCSsYvQiwWLo0eE5g28oK6YWZXUY8q1W2kcG6mdQLOTS4Z-9vx37Em-x46QdetwHOBXsiA3MWUNL7BtdO0U5khP9_fdTiHjqjwdi9EjYABaa3jbamTkaQjym/s1600/blogger-3d-arama-buton.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbs7g-rXeLEFlDYwKDYvbPrCSsYvQiwWLo0eE5g28oK6YWZXUY8q1W2kcG6mdQLOTS4Z-9vx37Em-x46QdetwHOBXsiA3MWUNL7BtdO0U5khP9_fdTiHjqjwdi9EjYABaa3jbamTkaQjym/s320/blogger-3d-arama-buton.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 blogunuz için 3d arama kutusu ( butonu ) eklentisi istermisiniz ?</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Özellikle blogger blogunda , arama kutusu olmayanlar için , yada olupta beğenmeyenler için bu eklenti işe yarayabilir..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Görüntü olarakta oldukça şık olduğunu düşündüğümüz blogger 3d arama kutusunu blogger blogunuza eklemek için aşağıdaki anlatımı takip ediniz..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Blogger blogunun yönetim paneline giriniz ve 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; height: 100%; overflow: auto; padding: 5px; width: 100%;"><style type="text/css"> .form-wrapper { width: 250px; padding: 8px; margin: 10px auto; overflow: hidden; border-width: 1px; border-style: solid; border-color: #dedede #bababa #aaa #bababa; -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #f6f6f6; background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8)); background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8); background-image: linear-gradient(top, #f6f6f6, #eae8e8); } .form-wrapper #search { width: 160px; height: 20px; padding: 10px 5px; float: left; font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #search:focus { outline: 0; border-color: #aaa; -moz-box-shadow: 0 1px 1px #bbb inset; -webkit-box-shadow: 0 1px 1px #bbb inset; box-shadow: 0 1px 1px #bbb inset; } .form-wrapper #search::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-moz-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-ms-input-placeholder { color: #999; font-weight: normal; } .thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;} .form-wrapper #submit { float: right; border: 1px solid #00748f; height: 42px; width: 70px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #0483a0; background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0)); background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0); background-image: -moz-linear-gradient(top, #31b2c3, #0483a0); background-image: -ms-linear-gradient(top, #31b2c3, #0483a0); background-image: -o-linear-gradient(top, #31b2c3, #0483a0); background-image: linear-gradient(top, #31b2c3, #0483a0); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0, 0 ,0, .3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; } .form-wrapper #submit:hover, .form-wrapper #submit:focus { background-color: #31b2c3; background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3)); background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3); background-image: -moz-linear-gradient(top, #0483a0, #31b2c3); background-image: -ms-linear-gradient(top, #0483a0, #31b2c3); background-image: -o-linear-gradient(top, #0483a0, #31b2c3); background-image: linear-gradient(top, #0483a0, #31b2c3); } .form-wrapper #submit:active { outline: 0; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; } .form-wrapper #submit::-moz-focus-inner { border: 0; } </style> <form class="form-wrapper" action="/search" method="get"> <input id="search" name="q" type="text" placeholder="ARA.." /> <input id="submit" type="submit" value="ARA.." /> </form></pre><div class="hata" style="clear: both; text-align: center;">Yapmamız gereken sadece bu kadar , artık blogger blogunuzda , 3d bir arama kutusuna sahipsiniz.. <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 3D arama kutusu Eklentisi , Blogger 3D arama kutusu , Blogger 3D arama Eklentisi , Blogger Arama Kutusu , Blogger Arama butonu , Blogger Search Bar , Blogger 3D search box</div>

Blogger 3D arama kutusu Eklentisi

Blogger blogunuz için 3d arama kutusu ( butonu ) eklentisi istermisiniz ? Özellikle blogger blogunda , arama kutusu olmayanlar için , yada o...

Devamı »

Blogger Sürgülü Buton Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU_Pt4OGbIdNMnodrza4YiN7kcMvH8hbP2_DhvPLM_dqHwq5BtUfWTHsy0POClt1fLGPpSDpi1PQuEAVsbr343Fe3YfyySkP-pzzhuYu8ICrodPuGy7y-QTa8ASBUWNGjm65IHStBbF4Wl/s1600/blogger-button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU_Pt4OGbIdNMnodrza4YiN7kcMvH8hbP2_DhvPLM_dqHwq5BtUfWTHsy0POClt1fLGPpSDpi1PQuEAVsbr343Fe3YfyySkP-pzzhuYu8ICrodPuGy7y-QTa8ASBUWNGjm65IHStBbF4Wl/s320/blogger-button.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 Blogunuz için Sürgülü CSS Buton Eklentisi</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzda , yazılarınızın içinde yada istediğiniz bir yerde kullanmak üzere , farklı bir buton istermisiniz ?</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Bu eklentimizde , üzerine gelindiğinde , sağa doğru sürgülü bir biçimde açılan buton eklentimizin nasıl yapılacağını anlatacağız.</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="bilgi" style="clear: both; text-align: center;">Bu Blogger Buton eklentisini kullanmak içibn aşağıda yer alan adımları takip ediniz..</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="hata" style="clear: both; text-align: center;">Aşağıdaki kodumuzu blogger blogunuzda 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;">Hemen bir satır üstüne , aşağıda 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%;">.a-btn{ background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:20px; padding-right:80px; height:38px; display:inline-block; position:relative; border:1px solid #5d81ab; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; float:left; clear:both; margin:10px 0px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn-text{ padding-top:8px; display:block; font-size:18px; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.3); color:#446388; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .a-btn-slide-text{ position:absolute; height:100%; top:0px; right:52px; width:0px; background:#63707e; text-shadow:0px -1px 1px #363f49; color:#fff; font-size:18px; white-space:nowrap; text-transform:uppercase; text-align:left; text-indent:10px; overflow:hidden; line-height:38px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; } .a-btn-icon-right{ position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width:38px; height:38px; opacity:0.7; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6hSq8YjH7MGCPTn2sNhYVKPcH3r96qs81Y0JlYhJjRha8dGnDWWM5Kdk_qcQtMHY2a2K_ft-8GP3Y3OgiH1npBeIGLCt3822DQcyxP88TXoIXiz3VaMj9vh_oDUOXfkd3DbIFaDHmAfI/s1600/arrow_right.png) no-repeat 50% 55%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn:hover{ padding-right:180px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); } .a-btn:hover .a-btn-text{ text-shadow:0px 1px 1px #5d81ab; color:#fff; } .a-btn:hover .a-btn-slide-text{ width:100px; } .a-btn:hover .a-btn-icon-right span{ opacity:1; } .a-btn:active{ position:relative; top:1px; background:#5d81ab; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color:#80a9da; }</pre><div class="hata" style="clear: both; text-align: center;">Üstteki işlemi yaptıysanız , butonumuzun css işlemleri tamamdır.. </div><div class="hata" style="clear: both; text-align: center;">Butonu kullabilmek için ister gadget olarak ekleyebilir isterseniz yazı içlerinde kullanabilirsiniz.. Eklemek için aşağıdaki kodu kullanmanız gerekiyor..</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 class="button-wrapper"> <a class="a-btn" href="http://eklentileri.blogspot.com/"> Blogger TIKLA </a> </div> </pre> <div style="text-align: center;"><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 Sürgülü Buton Eklentisi , Blogger Sürgülü Buton  , Blogger  Buton Eklentisi , Blogger Buton Eklentileri , Blogger Butonlar , Blogger CSS buton , Blogger button Widget</div>

Blogger Sürgülü Buton Eklentisi

Blogger Blogunuz için Sürgülü CSS Buton Eklentisi Blogger blogunuzda , yazılarınızın içinde yada istediğiniz bir yerde kullanmak üzere , far...

Devamı »