Blogger Moments Tema

Farklı bir tasarıma sahip olan moments theme oldukça kullanışlı.Renk ve dizayn alışılmışın dışında
umarım bu temayı beğenirsiniz.
Temayı incelemem sonucu sol tarafta statik site başlığı ve menüler yeralmaktadır.
Göze hitap eden dizaynı, okuyucuyu yormayan yazı sitili gibi bazı özellikler mevcut.

Download Buraya Tıkla

VideoBox Blogger Template

Videobox blogger video teması.. Temanın biraz özelliklerinden bahsedeyim;
Video ve müzik yayını yapan siteler için ideal
Minimalist tema
SEO dostu
Reklam hazır
Clean yazı tasarımı
Hızlı yüklenme
Browser uyumluluk
Drop down menu
Sosyal paylaşım
Sağdan sidebar
Sayfa numaralandırma

Demo Live Demo Download Tıkla indir

Blogspot Bloglar için SeoSpot Blogger Tema

Seospot Blogger tama. Blog için vazgeçilmez unsurlardan biri de şüphesiz ki temalardır. Bir tema hoşumuza gitti ise onu kendi blogumuza yüklemek ve kullanmak isteyebiliriz. Bir de temanın göze hitap etmesi ve seo uyumlu tema olması da önem arz eden etkenler arasında.



Bu tema Wordpress teması olup Blogger için dizayn edilmiştir.

SeoSpot Blogger Template Başlıca Özellikleri;

Slider ve slider olmadan kullanabilme (indireceğiniz dosya içinde her iki xml de mevcuttur)
SEO hazır
Reklamlar hazır
Sunucuyu yormayan tema
Sade ve şık dizayn
Profesyonel tema
Şık ve kullanışlı açılır menü özelliği
Sağ sidebar
Otomatik yazı kısaltma anasayfa kirliliğini engeller
Sosyal medya profil ve paylaşım butonları gibi daha birçok özellikleri vardır.

Download indir

Blog Yazısının İçeriğini Sayfalara Ayırmak

Bazı büyük çaplı bloglarda, portallarda ve haber sitelerinde gördüğümüz yazıyı birden fazla sayfaya bölerek, yazı içerisinde geçiş yapılması olayını Blogger'a uygulamak isteyenler için çok profesyonel olması aynı işlevi görecek bir ipucu ve kod paylaşmak istiyorum.

Bir örnekle açıklamak gerekirse; 3000 kelimelik bir yazı yazdığınızı düşünün. Bu yazıyı yayınladığınızda sayfada oldukça fazla yer kaplayacak ve kaydırma çubuğunu epey hareket ettirmek zorunda kalacaksınız. Üstelik bu kadar uzun bir sayfa okuyucuyu da ürkütüp okumaya üşendirebilir. Böyle bir durumda bu kodları kullanarak 3000 kelimeli yazıyı 1000 bölümlük 3 parçaya ayıracak ve yazının altındaki numaralı navigasyon butonlarıyla bu parçalar arasında geçiş yapabileceksiniz.

İşleyişi daha iyi anlamak için hazırladığım şu örnek videoyu izleyebilirsiniz:

Gelelim bu uygulamayı blogunuzda nasıl kullanacağınıza. Öncelikle şablonunuzun kodlarında jquery olması gerekiyor. Eğer daha önce eklemediyseniz Blogger kumanda panelinize giriş yaparak Şablon > HTML'yi Düzenle  yolunu takip ederek HTML kodlarını açın ve Ctrl + F tuş kominasyonunun yardımıyla açabileceğiniz arama kutusuna </head> yazarak bu satırı bulun. Hemen üzerineşu kodu ekleyin:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Hemen altına ise şu kodları ekleyin:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

Son olarak şablonda ]]></b:skin> satırının üzerine şu kodları ekleyin:

.post-pagination {    margin: 40px auto;    text-align: center;    width: 100%; float:left;}.button_1, .button_2, .button_3 {    border: 1px solid #000;    font-weight: 900;    padding: 6px 16px;    color:#f4655f;    transition:ease 0.69s !important;}.button_1:hover, .button_2:hover, .button_3:hover {    background: none repeat scroll 0 0 #f4655f;    color: #fff;    text-decoration: none;}

Şablon kodlarıyla işimiz bitti. Şimdi uygulamayı kullanacağımız yazıya gidelim veya yeni bir yazı yazalım.Yazı editöründen yazının HTML kısmına geçiş yaparak aşağıda kodları ekleyelim:

<div class="content_1">
Birinci sayfada görünmesini istediğiniz içeriği buraya yazın.
</div>
<div class="content_2" style="display: none;">İkinci sayfada görünmesini istediğiniz içeriği buraya yazın.
</div>
<div class="content_3" style="display: none;">Üçüncü sayfada görünmesini istediğiniz içeriği buraya yazın.
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Gördüğünüz gibi yazıyı  parçaya bu kodlarla ayırıyoruz. Kırmızı renkle gösterdiğim yerlere içeriğinizi yazabilirsiniz.

CSS3 + HTML DROP DOWN MENU KODLARI

Drop down menü kelime anlamı olarak aşağıya doğru açılan menü anlamına gelmektedir.
Blogspot blog'da açılır menü olmadığı için biz bu işi CSS ve HTML kodlarıyla kolayca yapabiliriz.

________________________________________________________________________________
Bilgi! HTML Editor aracını kullanarak, blogunuza uygulamadan önce menüleri canlı görüntüleme şansınız var.
Kullanım: 'Buraya CSS Kod Ekle': CSS kodları ekleyin.
'Buraya HTML Kod Ekle': HTML kodları ekleyin ve 'Preview' butonuna tıklayın.
________________________________________________________________________________

Açılır menü ekran görüntüsü;




Siz de bloğunuza açılır menü yapmak isterseniz şunları yapın.
açılır menü kodları, tab menu, sekmeli menü, yatay menü

CSS Drop Down Menü

Açılır Menü Yapımı;

Blogger kontrol panelinize giriş yapın.Karşınıza bologunuz ya da bloglarınız çıkacaktır.
Drop down menüyü yapmak istediğiniz blogu seçin. Şablon-HTML'yi Düzenle yolunu izleyerek
blog kodlarına ulaşın. CTRL+F tuşlarını kullanarak şu kodu bulun.

]]></b:skin>

Hemen üzerine CSS drop down menu kodları ekleyip kaydedin.

.menus,.menus *{list-style:none;list-style-type:none;line-height:1.0;margin:0;padding:0;} .menus ul{position:absolute;top:-999em;width:100%;} .menus ul li{width:100%;} .menus li:hover{visibility:inherit;} .menus li{float:left;position:relative;} .menus a{display:block;position:relative;} .menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99;} .sf-shadow ul{-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px;padding:0 8px 9px 0;} .menus .sf-shadow ul.sf-shadow-off{background:transparent;} .sf-with-ul{padding-right:20px;min-width:1px;} .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:15px 10px 0 0;} .menu-secondary-container{position:static;height:44px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOCVBgAA67DBYoLrPo2gFvqV3GioAvL23XhibeYloVAMmqsREjgUAMmKIHuwnLSPPcAq70Mc4TwZQ1dGixefChepH8FZs4jmqsld4A8fT92hOzUvtd9pi17a26iSVh8FjzvgdE9n2zfYU/s0/menu-secondary-bg.png) left top repeat-x} .menu-secondary li a{color:#FFF;text-decoration:none;text-transform:uppercase;font:normal 13px/13px georgia,arial,sans-serif;padding:16px 15px 15px;} .menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOCVBgAA67DBYoLrPo2gFvqV3GioAvL23XhibeYloVAMmqsREjgUAMmKIHuwnLSPPcAq70Mc4TwZQ1dGixefChepH8FZs4jmqsld4A8fT92hOzUvtd9pi17a26iSVh8FjzvgdE9n2zfYU/s0/menu-secondary-bg.png) left -144px repeat-x;outline:0;} .menu-secondary li li a{color:#fff;background:#666;text-transform:none;font-weight:400;margin:0;padding:10px 15px;} .menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#fff;background:#FA7029;outline:0;} .menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px;} .menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:15px 13px 0 0;} .menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0;} .wrap-menu-secondary .sf-shadow ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6sPP39DxpitS3m6KKyXpDdvX9hmI1b1AR7__PzDgLjHdoFNFC1c3MHxOwrFcI8VtGdvtaPckeGca2mbFkZRyd8Hx_g53xX3G840oC_IsLtqhgy_vRWKR9JKwj2o4AklqhzbRVxMDKqeY/s0/menu-secondary-shadow.png) no-repeat bottom right;} .menus li:hover li ul,.menus li.sfHover li ul,.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em;} .menus li li:hover ul,.menus li li.sfHover ul,.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0;} .menu-secondary ul{min-width:160px;} .span-24,div.span-24{width:960px;margin:0;} input.span-24,textarea.span-24{width:938px!important;border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important;} div.span-24{float:left;margin-right:10px;}

Sol köşedeki 'Yerleşim' sekmesine tıklayıp, Gadget ekle+HTML Jawa Script seçin.
Jawa script içine aşağıdaki kodlarını ekleyip kaydedin.
Menünün nerede görünmesini istiyorsanız gedgeti oraya sürükleyin.
Örnek blog kayıtlarının hemen üzeri olabilir. dilerseniz sidebar (yan taraf) da alabilirsiniz.
Bu işlemden sonrasında 'Düzenlemeyi kaydet' butonuna tıklayıp işlemimizi sonlandırıyoruz. Açılır menü hazır.

HTML Drop Down Menu Kod;

<div class='span-24'><div class='menu-secondary-container'><ul class='menus menu-secondary'><li><a href=''>ANA SAYFA</a></li><li><a href='#'>BLOGGER</a><ul class='children'><li><a href=''>Blogger Eklentileri</a></li><li><a href=''>Html Kodları</a></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href='#'>Link Başlığı buraya</a><ul class='children'><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href='#'>Link Başlığı buraya</a><ul class='children'><li><a href=''>Html Editor</a></li><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href=''>Link Başlığı buraya</a></li><li><a href='#'>Link Başlığı buraya</a><ul class='children'><li><a href=''>Link Başlığı buraya</a><ul class='children'><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href=''>Link Başlığı buraya</a></li></ul></div></div>

Önemli! Blogger'ın orjinal şablonlarını kullanıyorsanız eğer menü düzgün görünmeyebilir.
Bunun için şunları yapmalısınız.
Kontrol paneli, şablon, HTML'yi düzenle
CTRL+F ile şu kodları bulup silmelisiniz.

.tabs-inner .widget li a { display: inline-block; margin: 0; padding: .6em 1.5em; font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif; color: #ffffff; border-top: 1px solid #2d3037; border-bottom: 1px solid #2d3037; border-left: 1px solid #2d3037; height: 16px; line-height: 16px; } .tabs-outer { overflow: hidden; position: relative; background: #29aae1 url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0; } .tabs-inner .widget li:last-child a { border-right: 1px solid #2d3037; }

Buradaki kodları silmek menünüzün açılabilir olması içindir.
Silip aşağıdaki kodlar ile değiştiriniz.

Drop down (açılabilir) kodlar:

.tabs .widget ul, .tabs .widget ul { margin: 0px; padding: 0px; list-style: none outside none; overflow: visible; }

Ve işlemimiz bitti.

CSS3 Drop Down Menu (Animasyonlu)

CSS3 drop down menü kodları

<style type="text/css">#cssmenu ul{margin:0;padding:0}#cssmenu li{margin:0;padding:0}#cssmenu a{margin:0;padding:0}#cssmenu ul{list-style:none}#cssmenu a{text-decoration:none}#cssmenu{height:70px;background-color:#232323;box-shadow:0 2px 3px rgba(0,0,0,0.4);width:auto}#cssmenu > ul > li{float:left;margin-left:15px;position:relative}#cssmenu > ul > li > a{color:#a0a0a0;font-family:Verdana,'Lucida Grande';font-size:15px;line-height:70px;padding:15px 20px;-webkit-transition:color .15s;-moz-transition:color .15s;-o-transition:color .15s;transition:color .15s}#cssmenu > ul > li > a:hover{color:#fff}#cssmenu > ul > li > ul{opacity:0;visibility:hidden;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;position:absolute;top:55px;left:50%;margin-left:-90px;width:180px;-webkit-transition:all .3s .1s;-moz-transition:all .3s .1s;-o-transition:all .3s .1s;transition:all .3s .1s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu > ul > li:hover > ul{opacity:1;top:65px;visibility:visible}#cssmenu > ul > li > ul:before{content:'';display:block;border-color:transparent transparent #fafafa transparent;border-style:solid;border-width:10px;position:absolute;top:-20px;left:50%;margin-left:-10px}#cssmenu > ul ul > li{position:relative}#cssmenu ul ul a{color:#323232;font-family:Verdana,'Lucida Grande';font-size:13px;background-color:#fafafa;padding:5px 8px 7px 16px;display:block;-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-color 0.1s;transition:background-color 0.1s}#cssmenu ul ul a:hover{background-color:#f0f0f0}#cssmenu ul ul ul{visibility:hidden;opacity:0;position:absolute;top:-16px;left:206px;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;width:180px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu ul ul > li:hover > ul{opacity:1;left:190px;visibility:visible}#cssmenu ul ul a:hover{background-color:#cc2c24;color:#f0f0f0}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- Sayfa linklerinizi yazın --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Ana Sayfa</span></a></li><li class="has-sub"><a href="#"><span>Product</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Opera Stil Drop Down menü

Opera drop down menü CSS kod:

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Ana Sayfa</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>Hakkımda</span></a></li><li class="last"><a href="#"><span>İletişim</span></a></li></ul></div>

Renkli Sekmeli Drop Down Menü:




Sekmeli drop down menu CSS kod:

<style type="text/css">@charset 'UTF-8';#cssmenu{border:none;border:0;margin:0;padding:0;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#8e8e8e;width:auto}#cssmenu > ul{margin-top:6px !important}#cssmenu ul{background:#CDCDCD;background:-webkit-linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);background:linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);border-top:1px solid #A8A8A8;-webkit-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);height:27px;list-style:none;margin:0;padding:0}#cssmenu ul ul{border-top:6px solid #a80329;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#cssmenu ul ul a{line-height:43px}#cssmenu ul ul ul{left:100%;top:0}#cssmenu li{float:left;padding:0 8px}#cssmenu li a{color:#666;display:block;font-weight:bold;line-height:30px;padding:0 25px;text-align:center;text-decoration:none}#cssmenu li a:hover{color:#000;text-decoration:none}#cssmenu li ul{background:#e0e0e0;border-left:2px solid #a80329;border-right:2px solid #a80329;border-bottom:2px solid #a80329;display:none;height:auto;filter:alpha(opacity=95);opacity:0.95;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover > ul{display:block}#cssmenu li li{display:block;float:none;padding:0;position:relative;width:225px}#cssmenu li ul a{display:block;font-size:12px;font-style:normal;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover{background:#949494;color:#000;opacity:1.0;filter:alpha(opacity=100)}#cssmenu p{clear:left}#cssmenu .active > a{background:#a80329;-webkit-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;-moz-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;color:#fff}#cssmenu .active > a:hover{color:white}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Apple Tarzı CSS3 Açılır menü:





CSS3 drop down menu CSS kod:

<style type="text/css">#cssmenu ul{margin:0;padding:7px 6px 0;background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0O6rWlqQfYKYOfPXWzmgoLpMnEPMqU3ENIe_oCQhLz4luzkgqCvMJyK2pQj7vyH0Y1Kp_CbN20kVGPTp5IeJjN_kMQVg9R0kyjK5LWS99mMat9eBva78xGb9QXdcFg1w7LOsbFnoaBnGI/s1600/overlay.png) repeat-x 0 -110px;line-height:100%;border-radius:1em;font:normal 0.5333333333333333em Arial,Helvetica,sans-serif;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);width:auto}#cssmenu li{margin:0 5px;padding:0 0 8px;float:left;position:relative;list-style:none}#cssmenu a,#cssmenu a:link{font-weight:bold;font-size:13px;color:#e7e5e5;text-decoration:none;display:block;padding:8px 20px;margin:0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}#cssmenu a:hover{background:#000;color:#fff}#cssmenu .active a,#cssmenu li:hover > a{background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0O6rWlqQfYKYOfPXWzmgoLpMnEPMqU3ENIe_oCQhLz4luzkgqCvMJyK2pQj7vyH0Y1Kp_CbN20kVGPTp5IeJjN_kMQVg9R0kyjK5LWS99mMat9eBva78xGb9QXdcFg1w7LOsbFnoaBnGI/s1600/overlay.png) repeat-x 0 -40px;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0O6rWlqQfYKYOfPXWzmgoLpMnEPMqU3ENIe_oCQhLz4luzkgqCvMJyK2pQj7vyH0Y1Kp_CbN20kVGPTp5IeJjN_kMQVg9R0kyjK5LWS99mMat9eBva78xGb9QXdcFg1w7LOsbFnoaBnGI/s1600/overlay.png) repeat-x 0 -40px;color:#444;border-top:solid 1px #f8f8f8;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff}#cssmenu ul ul li:hover a,#cssmenu li:hover li a{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-box-shadow:none}#cssmenu ul ul a:hover{background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0O6rWlqQfYKYOfPXWzmgoLpMnEPMqU3ENIe_oCQhLz4luzkgqCvMJyK2pQj7vyH0Y1Kp_CbN20kVGPTp5IeJjN_kMQVg9R0kyjK5LWS99mMat9eBva78xGb9QXdcFg1w7LOsbFnoaBnGI/s1600/overlay.png) repeat-x 0 -100px !important;color:#fff !important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.1)}#cssmenu li:hover > ul{display:block}#cssmenu ul ul{display:none;margin:0;padding:0;width:185px;position:absolute;top:40px;left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0O6rWlqQfYKYOfPXWzmgoLpMnEPMqU3ENIe_oCQhLz4luzkgqCvMJyK2pQj7vyH0Y1Kp_CbN20kVGPTp5IeJjN_kMQVg9R0kyjK5LWS99mMat9eBva78xGb9QXdcFg1w7LOsbFnoaBnGI/s1600/overlay.png) repeat-x 0 0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3)}#cssmenu ul ul li{float:none;margin:0;padding:3px}#cssmenu ul ul a,#cssmenu ul ul a:link{font-weight:normal;font-size:12px}#cssmenu ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}* html #cssmenu ul{height:1%}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Ana Sayfa</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Kırmızı ve Gri Renk Açılır Menü:




Kırmızı gri açılır menü CSS kod:

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS */#cssmenu,#cssmenu > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-u_CDtMcgwQlwc_D7-lnThrj61mXLfXGnvtKWFPPJxyLbC_3GOZ05AJMgYcYEs1QH0ljoH7bT6npcpxP9TQA7HskJZC832JgEBFfruCUdHUVVePvbqMUnVbEcT6QzuSbs7QBYySZ-oVx/s1600/highlight-bg.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUbEMcS3y1aUTZ1kvUN33z81fSPe3_agQXm6pxfOKsWPlHZiQbh_w08f7kYAKP4QbOOHxv2B0C1eoR8rgWkXk0vU1qTM_Ct5EhuoR-SF6YmxJBlHv1WpuvcSZCcqOQpO0x40G30L7iR3z/s1600/menu-bg.png) repeat;margin:0;padding:0;position:relative}#cssmenu > ul li{margin:0;padding:0;list-style:none}#cssmenu > ul > li{float:left;position:relative}#cssmenu > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #9e3825;text-shadow:0 -1px 0 rgba(116,37,2,0.7);line-height:18px}#cssmenu > ul > li:hover > a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiryx1smvU2joajRC8TcTYd8AOlF6J4qef951ngLKPLpNCpq5pE5JH5cdpCnOK75tmSh45KDipL9Sd4anWZLJ9g5bcF-sGQz6FGsypTpNsTVm9UMXj3SkfwRJMpVs_KURN0fvBWDenWNmOl/s1600/hover.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#cssmenu > ul > li > a > span{line-height:18px}#cssmenu > ul > li.active > a,#cssmenu > ul > li > a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6xbX5v2FRqR0tsFqVagFyXXMfSQs8irsQ3wB_Vd_t9DcqDPhdu4WbmPQ5d3zVvq2OvTvNUkt-MgboM5D11sc_VYxamp7SIkYUMjDVnVO7zAjWrvID0-_ru1KeP8j4RrsVdDsPM0uog1dQ/s1600/active.png) repeat}/* Childs */#cssmenu > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-u_CDtMcgwQlwc_D7-lnThrj61mXLfXGnvtKWFPPJxyLbC_3GOZ05AJMgYcYEs1QH0ljoH7bT6npcpxP9TQA7HskJZC832JgEBFfruCUdHUVVePvbqMUnVbEcT6QzuSbs7QBYySZ-oVx/s1600/highlight-bg.png) repeat;margin:0;padding:0;z-index:-1}#cssmenu > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenu > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu > ul ul li a{padding:18px 26px;display:block;color:#393939;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px solid transparent;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;text-shadow:0 1px 0 white}#cssmenu > ul ul li a:hover{border-left:4px solid #de553b;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiryx1smvU2joajRC8TcTYd8AOlF6J4qef951ngLKPLpNCpq5pE5JH5cdpCnOK75tmSh45KDipL9Sd4anWZLJ9g5bcF-sGQz6FGsypTpNsTVm9UMXj3SkfwRJMpVs_KURN0fvBWDenWNmOl/s1600/hover.png) repeat;color:white;text-shadow:0 1px 0 black}#cssmenu > ul ul li a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUbEMcS3y1aUTZ1kvUN33z81fSPe3_agQXm6pxfOKsWPlHZiQbh_w08f7kYAKP4QbOOHxv2B0C1eoR8rgWkXk0vU1qTM_Ct5EhuoR-SF6YmxJBlHv1WpuvcSZCcqOQpO0x40G30L7iR3z/s1600/menu-bg.png) repeat}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Silver Buton Açılır Menü (Drop Down):





Silver buton drop down menü CSS kod:

<style type="text/css">@charset 'UTF-8';/* Starter CSS for Menu */#cssmenu{padding:0;margin:0;border:0}#cssmenu ul,#cssmenu li{list-style:none;margin:0;padding:0}#cssmenu ul{position:relative;z-index:597}#cssmenu ul li{float:left;min-height:1px;vertical-align:middle}#cssmenu ul li.hover,#cssmenu ul li:hover{position:relative;z-index:599;cursor:default}#cssmenu ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}#cssmenu ul ul li{float:none}#cssmenu ul ul ul{top:0;left:100%}#cssmenu ul li:hover > ul{visibility:visible}#cssmenu ul ul{margin-top:0}#cssmenu a{display:block;line-height:1em;text-decoration:none}#cssmenu ul li.last ul{left:auto;right:0}#cssmenu ul li.last ul ul{left:auto;right:99.5%}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}/* Custom CSS Styles */#cssmenu{width:auto;font-family:Helvetica,Arial,sans-serif}#cssmenu:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);background-color:#606a77;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4f5864),color-stop(1,#49515b));background-image:-webkit-linear-gradient(top,#4f5864,#49515b);background-image:-moz-linear-gradient(top,#4f5864,#49515b);background-image:-o-linear-gradient(top,#4f5864,#49515b);background-image:linear-gradient(#4f5864,#49515b);-moz-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;-webkit-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;content:'';display:block;height:8px}#cssmenu > ul{border-bottom:1px solid #252A30;border-top:1px solid #252A30;-moz-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);background-color:#566171;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#6e7d8f),color-stop(1,#404854));background-image:-webkit-linear-gradient(top,#6e7d8f,#404854);background-image:-moz-linear-gradient(top,#6e7d8f,#404854);background-image:-o-linear-gradient(top,#6e7d8f,#404854);background-image:linear-gradient(#6e7d8f,#404854);height:27px;padding:15px 15px 15px 5px}#cssmenu > ul > li{margin:0 10px}#cssmenu > ul > li.has-sub:hover > a{-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}#cssmenu > ul > li:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);background-color:#e2e2e2;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#c8c8c8));background-image:-webkit-linear-gradient(top,#fff,#c8c8c8);background-image:-moz-linear-gradient(top,#fff,#c8c8c8);background-image:-o-linear-gradient(top,#fff,#c8c8c8);background-image:linear-gradient(#fff,#c8c8c8)}#cssmenu > ul > li.active:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);background-color:#cb7b72;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f49b8e),color-stop(1,#bd584d));background-image:-webkit-linear-gradient(top,#f49b8e,#bd584d);background-image:-moz-linear-gradient(top,#f49b8e,#bd584d);background-image:-o-linear-gradient(top,#f49b8e,#bd584d);background-image:linear-gradient(#f49b8e,#bd584d)}#cssmenu ul a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);background-color:#c2c2c2;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f1f1f1),color-stop(1,#a8a8a8));background-image:-webkit-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-moz-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-o-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:linear-gradient(#f1f1f1,#a8a8a8);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);color:#3c444d;font-size:12px;line-height:27px;padding:0 20px;position:relative;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.4)}#cssmenu ul ul{width:170px}#cssmenu ul ul a{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;line-height:150%}#cssmenu ul .active > a{color:#FFF;text-shadow:0 1px 0 rgba(0,0,0,0.4);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);background-color:#c46a60;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ef7260),color-stop(1,#b04c41));background-image:-webkit-linear-gradient(top,#ef7260,#b04c41);background-image:-moz-linear-gradient(top,#ef7260,#b04c41);background-image:-o-linear-gradient(top,#ef7260,#b04c41);background-image:linear-gradient(#ef7260,#b04c41)}#cssmenu ul .has-sub{position:relative}#cssmenu ul .has-sub ul{-moz-border-radius:0 3px 3px 3px;-webkit-border-radius:0 3px 3px 3px;border-radius:0 3px 3px 3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;background-color:#c3c3c3;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e9e9e9),color-stop(1,#aaa));background-image:-webkit-linear-gradient(top,#e9e9e9,#aaa);background-image:-moz-linear-gradient(top,#e9e9e9,#aaa);background-image:-o-linear-gradient(top,#e9e9e9,#aaa);background-image:linear-gradient(#e9e9e9,#aaa);padding:3px 0}#cssmenu ul .has-sub ul a{background:none;padding:8px 8px 8px 16px;border-bottom:1px solid transparent;text-align:left}#cssmenu ul .has-sub ul .has-sub a:after{content:none}#cssmenu ul .has-sub li:hover > a{border-bottom:1px solid #1D2024;color:#FFF;background-color:#55616f;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#56606f),color-stop(1,#3f4852));background-image:-webkit-linear-gradient(top,#56606f,#3f4852);background-image:-moz-linear-gradient(top,#56606f,#3f4852);background-image:-o-linear-gradient(top,#56606f,#3f4852);background-image:linear-gradient(#56606f,#3f4852);-moz-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;-webkit-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;position:relative;text-shadow:0 1px 0 rgba(0,0,0,0.4)}#cssmenu ul .has-sub li:hover > a:after{border-left:0 none;background-color:#c35f54;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ea5f51),color-stop(1,#a9463b));background-image:-webkit-linear-gradient(top,#ea5f51,#a9463b);background-image:-moz-linear-gradient(top,#ea5f51,#a9463b);background-image:-o-linear-gradient(top,#ea5f51,#a9463b);background-image:linear-gradient(#ea5f51,#a9463b);-moz-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;-webkit-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;content:'';height:100%;width:6px;position:absolute;right:0;top:0}#cssmenu ul .has-sub > a{padding-right:0}#cssmenu ul .has-sub > a:after{content:'▼';border-left:1px solid rgba(100,100,100,0.2);color:#5D6A7A;-moz-box-shadow:-1px 0 0 rgba(255,255,255,0.2);-webkit-box-shadow:-1px 0 0 rgba(255,255,255,0.2);box-shadow:-1px 0 0 rgba(255,255,255,0.2);display:inline-block;font-size:9px;margin-left:5px;text-align:center;height:25px;width:24px;text-shadow:0 -1px 0 #101417}#cssmenu ul .active > a:after{color:#FFF}#cssmenu ul ul a{font-size:12px}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Turuncu CSS3 Menu:


Oval kenarlı css3 açılır menü. Renkleri değiştirerek arzuya göre kullanılabilir. Ayrıyeten tüm menülere daha fazla açılır menü eklenebilir. Tabi bunları 'ul' kodu ile yapıyoruz.

Turuncu CSS3 drop down menu CSS kodu:

<style type="text/css">/* #F93 *//* #C60 */#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu ul{background:#f93;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1)}#cssmenu li{float:left;padding:0 0 0 15px}#cssmenu li a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu li a:hover{background:#c60;color:#FFF;text-decoration:none;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}#cssmenu ul li:hover a{background:#c60;color:#FFF;text-decoration:none}#cssmenu li ul{display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200}#cssmenu li:hover ul{display:block}#cssmenu li li{display:block;float:none;margin:0;padding:0;width:200px;background:#f93;/*this is where the rounded corners for the dropdown disappears*/}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:50px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover a{border:0;color:#FFF;text-decoration:none;background:#c60;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Platin Sekmeli Açılır Menü:





Sekmeli menü CSS kod:

<style type="text/css">@charset 'UTF-8';/* Starter CSS for Flyout Menu */#cssmenu{padding:0;margin:0;border:0;width:auto}#cssmenu ul,#cssmenu ul li,#cssmenu ul ul{list-style:none;margin:0;padding:0}#cssmenu ul{position:relative;z-index:597;float:left}#cssmenu ul li{float:left;min-height:1px;line-height:1em;vertical-align:middle}#cssmenu ul li.hover,#cssmenu ul li:hover{position:relative;z-index:599;cursor:default}#cssmenu ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}#cssmenu ul ul li{float:none}#cssmenu ul ul ul{top:1px;left:99%}#cssmenu ul li:hover > ul{visibility:visible}#cssmenu ul ul{top:1px;left:99%}#cssmenu ul li{float:none}#cssmenu ul ul{margin-top:1px}#cssmenu ul ul li{font-weight:normal}/* Custom CSS Styles */#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{color:#333;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;padding:0 20px;text-align:center;text-decoration:none}#cssmenu a:hover{background:#f6f6f6;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);position:relative;top:0}#cssmenu ul{background:#e5e5e5;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;list-style:none}#cssmenu > ul{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAA3NCSVQICAjb4U/gAAAAHUlEQVQImWN4+vQpEwMDAxMDAwPT////4exBIgYA2loa5nAttNYAAAAASUVORK5CYII=) 100% 100%;background:-moz-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e5e5e5),color-stop(100%,#ddd));background:-webkit-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:-o-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:-ms-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:linear-gradient(#e5e5e5 0%,#ddd 100%);box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);padding-top:5px;width:100%}#cssmenu > ul > li{float:left;padding:0 10px;position:relative}#cssmenu > ul > li:hover > a{background:#f6f6f6;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);position:relative}#cssmenu > ul > li a{line-height:35px}#cssmenu > ul > li a:hover{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#cssmenu .has-sub:hover ul{display:block}#cssmenu .has-sub a{display:block;position:relative}#cssmenu .has-sub > a:after{content:'';display:block;width:10px;height:9px;position:absolute;right:5px;top:50%;margin-top:-5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQjdBNUNENDkzMTExRTI4NENBRkFDOUM5MUY0QzI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRCQjdBNUNFNDkzMTExRTI4NENBRkFDOUM5MUY0QzI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEJCN0E1Q0I0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEJCN0E1Q0M0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4qSqkdAAAAtUlEQVR42nyOPQ6DMAyF3bSIKXeplGP0IL1EpU5dkZiQeoDegBt0ZO4BOjORABL5oX4RZCniDZbl99nPh6ZpjkR0pn19TlxclmW7lHOOANZSykue55uQtZbatiXBfdV1Hc3zvAnCY12FUqrm02Xf93/QOI40TdOLmadYZoUxhkIICUKC1hpthRJB3viy8ViMKCR470v23glcdB+GIT7PACEBSauZQN70eBrP4zIn3JC0+j8BBgCxDV02ZQEC4wAAAABJRU5ErkJggg==);-webkit-transform:rotate(360deg)}#cssmenu .has-sub ul{background:#f6f6f6;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;display:none;padding:10px 0;position:absolute;left:50%;top:34px;margin-left:-70px;width:140px;z-index:1}#cssmenu .has-sub ul li:hover > a{background:#ddd;color:#ae0001;border-color:#e5e5e5 transparent transparent transparent}#cssmenu .has-sub ul a{line-height:160%;padding:8px 0}#cssmenu .has-sub .has-sub a:after{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRkJGQzk4NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRkJGQzk5NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGQkZDOTY0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGQkZDOTc0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6DuTwoAAAAtUlEQVR42nyOsQ3CMBBFj4CVyktkAvZgEJZAoqKNoMoEjMAGzEDnhtKyGztxYzvmznIsIUX5kq2T/rv7fyeE2APAEbb1OeAXGGObVAgBCHxxzk9t265C3ntQSkGD82CMgZTSKkge6pwB7HmXUibn3N/TWif0nsQ0ZbEfxxHmea6XyLTW0jjQl8Gu675o3IqRNU0TxBgf6L0rWHTFuFweAaAESlrMCuJmpNJUni5jwoWSFv8nwAA0tXChxwneNwAAAABJRU5ErkJggg==);-webkit-transform:rotate(360deg)}#cssmenu .has-sub .has-sub ul{background:#ddd;left:100%;top:0;margin-left:0}#cssmenu .has-sub .has-sub ul a{background:none;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}#cssmenu .has-sub .has-sub ul a:after{background-image:none}#cssmenu .has-sub .has-sub ul a:hover{background:#bfbfbf}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="CSS3 Drop Down Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Mavi Drop Down Menü:




CSS ve HTML kod:

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500);/* 2f4b87 *//* 2f4b87 *//* #1f325d *//* Menu CSS */#cssmenu{width:auto}#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{padding:0;margin:0;line-height:1;font-family:'Source Sans Pro',sans-serif;font-weight:500;font-size:16px;color:#fff;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;-ms-transition:all ease .3s;transition:all ease .3s}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu a{text-shadow:0 1px 1px rgba(0,0,0,0.2)}#cssmenu ul{background:#3b5998;border-radius:3px;border:1px solid #2b4479;border:1px solid #2d4373;-webkit-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-o-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-moz-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-ms-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15)}#cssmenu ul > li{float:left;list-style:none}#cssmenu ul > li > a{display:block;text-decoration:none;padding:15px 44px;position:relative}#cssmenu ul > li > a:hover{background:#2d4373;-webkit-box-shadow:inset 0 0 1px #1e2e4f;-o-box-shadow:inset 0 0 1px #1e2e4f;-moz-box-shadow:inset 0 0 1px #1e2e4f;-ms-box-shadow:inset 0 0 1px #1e2e4f;box-shadow:inset 0 0 1px #1e2e4f;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;-ms-transition:all ease .3s;transition:all ease .3s}#cssmenu ul > li > a:hover:before{content:'';z-index:2;position:absolute;border:1px solid white;border-top:0;border-bottom:0;border-right:0;width:100%;height:100%;top:0;left:-1px;opacity:.2}#cssmenu ul > li > a:hover:after{content:'';z-index:2;position:absolute;border:1px solid white;border-top:0;border-bottom:0;border-left:0;width:100%;height:100%;top:0;right:-1px;opacity:.2}#cssmenu > ul > li > ul{opacity:0;visibility:hidden;position:absolute}#cssmenu > ul > li:hover > ul{opacity:1;visibility:visible;position:absolute;border-radius:0 0 3px 3px;-webkit-box-shadow:none;-o-box-shadow:none;-moz-box-shadow:none;-ms-box-shadow:none;box-shadow:none}#cssmenu > ul > li > ul{width:200px;position:absolute}#cssmenu > ul > li > ul > li{float:none;position:relative}#cssmenu > ul > li > ul > li > ul{opacity:0;visibility:hidden;position:absolute}#cssmenu > ul > li > ul > li:hover > ul{opacity:1;visibility:visible;position:absolute}#cssmenu > ul > li > ul > li > ul{left:200px;top:1px;width:200px}#cssmenu > ul > li > ul > li > ul > li{float:none}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Açılır Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Girintili Yatay Menü:

Bu menü stili girintili efektli olmasıdır. Açılır özelliği yoktur.



Girintili yatay menü CSS kod:

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@charset 'UTF-8';/* Base Styles */#cssmenu ul,#cssmenu li,#cssmenu a{list-style:none;margin:0;padding:0;border:0;line-height:1;font-family:'Lato',sans-serif}#cssmenu{border:1px solid #133e40;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;width:auto}#cssmenu ul{zoom:1;background:#36b0b6;background:-moz-linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#36b0b6),color-stop(100%,#2a8a8f));background:-webkit-linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);background:-o-linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);background:-ms-linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);background:linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color',endColorstr='@bottom-color',GradientType=0);padding:5px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}#cssmenu ul:before{content:'';display:block}#cssmenu ul:after{content:'';display:table;clear:both}#cssmenu li{float:left;margin:0 5px 0 0;border:1px solid transparent}#cssmenu li a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;padding:8px 15px 9px;display:block;text-decoration:none;color:#fff;border:1px solid transparent;font-size:16px}#cssmenu li.active{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px solid #36b0b6}#cssmenu li.active a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:block;background:#1e6468;border:1px solid #133e40;-moz-box-shadow:inset 0 5px 10px #133e40;-webkit-box-shadow:inset 0 5px 10px #133e40;box-shadow:inset 0 5px 10px #133e40}#cssmenu li:hover{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px solid #36b0b6}#cssmenu li:hover a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:block;background:#1e6468;border:1px solid #133e40;-moz-box-shadow:inset 0 5px 10px #133e40;-webkit-box-shadow:inset 0 5px 10px #133e40;box-shadow:inset 0 5px 10px #133e40}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li><a href="#"><span>Products</span></a></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Sekmeli Menü Chrome ve Mavi:

Sekmeli menü drop down özelliği yoktur.



Sekmeli menü CSS kod:

<style type="text/css">#cssmenu{float:left;width:100%;background:#efefef;font-size:93%;line-height:normal;border-bottom:1px solid #666}#cssmenu ul{margin:0;padding:10px 10px 0 50px;list-style:none}#cssmenu li{display:inline;margin:0;padding:0}#cssmenu a{float:left;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaGEOyumo2bWxGxQ2mEcyrdZtHKsjbYnI_K4PK7V9plTV_Oa3EEJa5NtjZc-RhCL6VR1OKMsXfYh-iqW2uNpXLT5mvS1QGOP286pZujaiUqtBdjomZK3kOsm671gEd5ank_hw-GnIX57Gz/s1600/tableftf.gif') no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none}#cssmenu a span{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYbvtbZD9d5lJPdu65VXnmGdocvMFrrqlwCf-K7M-GIkhtXxEG_ym0a_gA7ON3zp4XcCjSqvxKZzAV45KGM5EV3TwUCVjH7r7nl5bwbC73STeL9B6uQDiOQeW6FSqyDN1m5mFCuk4YLudA/s1600/tabrightf.gif') no-repeat right top;padding:5px 15px 4px 6px;color:#666}/* Commented Backslash Hack hides rule from IE5-Mac */#cssmenu a span{float:none}/* End IE5-Mac hack */#cssmenu .active a span,#cssmenu a:hover span{color:#FFF}#cssmenu .active a,#cssmenu a:hover{background-position:0 -42px}#cssmenu .active a span,#cssmenu a:hover span{background-position:100% -42px}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li><a href="#"><span>Products</span></a></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Turuncu Siyah Tab (sekmeli) Menü

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Capriola);/* Let's import the lovely google font,please keep this line at the top of your stylesheet *//* Menu CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{zoom:1;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHZh0ThH13bUV8_Alai-kW_cDIT6w0sKfajhIOjYFkZYkOWyCmg2kXbcViz5f-k36DEYNJ0Kkc4Hr5K0xFOgAtDQ24IC1oQlC-dsJjKSi9IdMmM6csaV7Z5NoYY2EmY6iQHU1T7-4yW5G/s1600/bottom-bg.png) repeat-x center bottom;border-radius:2px;width:auto}#cssmenu ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigTk2uUy-UVHRYzT55qV8mBWwJUfmZEb2znhZ0JA50DLMZCw6KXbBox7VCTIsshFHkuGCzVsDmOmx9UNUa-2TsL4gXOxXBFEUEsNs2AWMzFCT1UNZuUsA4J9l4A2q7vW66WqEVcy05Q_0h/s1600/nav-bg.png) repeat-x 0 4px;height:69px}#cssmenu ul li{float:left;list-style:none}#cssmenu ul li a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 0;border-radius:2px 2px 0 0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNdFG3uedfIaQ6lRmA3dbP69hEFcjPWSadF5Syyuddijb16-MqyiU48mS9CLvxh-czHH0HRRF16myOS4CIprFwakvpEtA_WEMhjLNf9r7RT2XCqc9MrA01x23o4ElXHAOiav9mx5qtoUyu/s1600/color.png) center bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#9b4106;text-shadow:0 1px 1px rgba(255,255,255,0.35);opacity:1}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li><a href="#"><span>Products</span></a></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Gri, Mavi, Siyah Açılır Menu:





Drop Down Menu CSS+HTML Kod:

<style type="text/css">#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu ul{background:#333;height:35px;list-style:none;margin:0;padding:0}#cssmenu li{float:left;padding:0}#cssmenu li a{background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjct1-9S0zkoyawJYw-BQ59gNmiXe3_Mn40DY5Fmk8uX5xqSmwP-5KdFYCmF6rOMWuY_PJE3N_PAGesINtHty62gBP4UcTsmQ3vFrnb4xi0Qe5Lg0pTEWTrnlIUqlL4SHqBhs-03VrsHoZW/s1600/seperator.gif') bottom right no-repeat;display:block;font-weight:normal;line-height:35px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu > ul > li > a{color:#ccc}#cssmenu ul ul a{color:#ccc}#cssmenu li > a:hover,#cssmenu ul li:hover > a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLOSW1yWnAkEArSDdW8fvIgUSxFWxDvtthDqsx_PIJrOwNrCZHebuaUmkuCGCc1gqnY6GOHPH7YqB93M4bg7aruCLEClIz3Yy6p_NiEapZ8gCrMUVzOy4xb5Ig3m0SAP5b7ziBGvtz-TnI/s1600/hover.png') bottom center no-repeat;color:#FFF;text-decoration:none}#cssmenu li ul{background:#333;display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover ul{display:block}#cssmenu li li{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix9zqQ8CPRvQWaR637Lrl2beAdxF-eYAsW3kknHAtW7cJE_w_c1EWXVJ5rBKXFJ_KBKyD10leFoIn7asLwbKwVT_Mzavw9rOZv4o04V_UnGM4zF4tTxKpa0vcgFMtycdcesEOFF65bJGO6/s1600/sub_sep.gif') bottom left no-repeat;display:block;float:none;margin:0;padding:0;width:225px}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:35px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover > a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLu7WgiRNvs1eVvhBZmsfcrORDJS_WFbFd5Zp2ltkJerqYrz69JujMFzMxyER9B4QDMLsUnbsZasuwQIj0lrxQIUliRhLzf17r0upv4_gXWJpfet2B6uo-CmbYe-DrjbGcgg4NqYfAdbUh/s1600/hover_sub.png') center left no-repeat;border:0;color:#fff;text-decoration:none}#cssmenu p{clear:left}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

CSS Kırmızı Beyaz Açılır Menü:




CSS+HTML Kod:

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Takıldığınız yer olursa yorum formundan sorabilirsiniz.

Blogger Site Haritalarınızı Güncellediniz Mi?

Blogger site haritası oluşturmak ile ilgili yaklaşık 5 yıl önce yayınladığım yazı pek çok kişiye rehber oldu ve Blog Hocam'ın en çok okunan yazılarından biriydi. 

Yakın zaman Google Web Yöneticisi Merkezi'ne girip site haritalarını inceleyenler bir aksilik ve gariplik olduğunu fark etmişlerdir. Şöyle ki; önceden Google tek bir site haritası ile 500 içerik indekslerken artık 150 içerik indeksliyor. Bu nedenle bizim eski site haritalarını silip yeni site haritaları eklememiz gerekiyor.

2016 Blogger İçin Site Haritası Oluşturma Ve Ekleme

Google Web Yöneticisi Merkezindeki site haritalarını güncelleme işlemini 3 adımda gerçekleştireceğiz.

1. Adım: Google Web Yöneticisi Merkezine giderek eski site haritalarını silelim. Bununn için Google Web Yöneticisi merkezine giriş yaparak blogumuzun ismine tıklıyoruz ve açılan sayfada sol taraftaki menüden Tarama > Site haritaları yolunu izliyoruz. Ardından önceden oluşturduğumuz site haritalarını seçerek siliyoruz.

2. Adım: Şimdi yeni site haritalarını oluşturalım. Bunun için eski yöntemi kullanacağız ama bir farkla. İndekslemeyi 500er 500er değil 150şer 150şer yapacağız. Ben ilk 1000 içerik gerekli olan site haritalarını aşağıda yazdım. Eğer 1000'den az içeriğiniz varsa oluşturduğum bu site haritalarının hepsini ekleyebilirsiniz.

atom.xml?redirect=false&start-index=1&max-results=150
atom.xml?redirect=false&start-index=151&max-results=150
atom.xml?redirect=false&start-index=301&max-results=150
atom.xml?redirect=false&start-index=451&max-results=150
atom.xml?redirect=false&start-index=601&max-results=150
atom.xml?redirect=false&start-index=751&max-results=150
atom.xml?redirect=false&start-index=901&max-results=150

3. Adım: Son olarak oluşturduğumuz bu site haritalarını Google Web Yöneticisi Merkezine göndereceğiz. Bunun için yine site haritaları sayfasına giderek yukarıda oluşturduğumuz site haritalarını teker teker ekliyoruz.

Sayfayı yenilediğimizde dizine gönderilen içeriklerin olması gereken sayıda olduğunu ve yanlarında beklemede yazdığını görüyoruz. Yaklaşık 24 saat sonra gönderilen bu içerikler dizine eklenecek ve bu yazı değişecektir.


Not: Yukarıda sadece ilk 1000 içerik için yeterli gelecek site haritalarını yazdım. Eğer 1000'den fazla içeriğiniz varsa ve hangi site haritalarını ekleyeceğinizi bilmiyorsanız lütfen yorum bölümünden sorun.

Powered by Blogger YAZISI Kaldırma (Atıf)

Blogspot uzantılı blogların footer kısmında duran "Powered by Blogger" yazısını sanırım bilirsiniz.
Bu yazının (atıfın) nasıl kaldırılacağını merak edenler olmuştur haliyle.

Powered by blogger

Eğer blogger atıfı kaldırmak isterseniz şu adımları takip edin.
Kontrol paneli, şablon, HTML'yi düzenle bağlamından site kodlarının olduğu bölüme gelin.
Aşağıdaki kodu ctrl+f ile bulun.

]]></b:skin>

Bu kodun üzerine alttaki kodu ekleyip şablonu kaydedin.

#Attribution1 { 
height:0px; 
visibility:hidden; 
display:none 
}

Artık blog'da o yazıdan kutuldunuz. Sağlıcakla...

Rastgele YAZILAR Eklentisi

Bu eklenti blog yayınlarınızdan rastgele yani otomatik olarak seçip, sizin belirlediğiniz yerde gösterir. Örneğin sitenizin footer kısmında yada sidebarda nereye isterseniz orada yayınlarınız bağlantı şeklinde göstermeye yarıyor.
Şimdi rastgele yazılar eklentisinin kurulumuna geldik. Kurulumu çok basit. İzlemeniz gereken yol şu;
Blogger kontrol paneli, Yerleşim, gadget ekle dedikten sonra HTML Jawa script seçiyorsuz.
Resimden yola çıkarak daha kolay yapabilirsiniz.




Rastgele yazılar HTML kodları;

<script type="text/javascript">var randarray=new Array();var l=0;var flag;var numofpost=10;function randomposts(json){var total=parseInt(json.feed.openSearch$totalResults.$t,10);for(i=0;i<numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){flag=1}}if(flag==0&&l!=0){randarray[i++]=l}}document.write('<ul>');for(n in randarray){var p=randarray[n];var entry=json.feed.entry[p-1];for(k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){var item="
<li>"+"<a href="+entry.link[k].href+">"+entry.title.$t+"</a></li>
";document.write(item)}}}document.write('</ul>
')}</script><script src="/feeds/posts/summary?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script>

Dilerseniz kodları ön izleme yapabilirsiniz. WM makale bağlantısını tıklayın.
Yukarıdaki resimde on adet yazı bağlantısı gösterilmektedir. Bu sayıyı azaltıp veya arttırabilirsiniz.

Kurumsal Firma Scripti Kurulum Ve İndirme Linki

firma scripti

kurumsal Firma Scripti İndir..

Bugunku videomuzda mukemmel bir kurumsal firma scriptini kurmayı gorucez arkadaslar scriptin indirme linkleri ve kurulum anlatımı videoda anlatılmıstır iyi seyirler youtube kanalıma abone olmayı unutmayın..

2016 Oyun bilgisayarı toplama rehberi

oyun pc'si

Oyun bilgisayarı toplamak

bu videomuzda ucuza vatan bilgisayardan oyun bilgisayarı topladık ve fiayatlarınıda sizler için gösterdik videomuzu asagıdan izleyebilir bize destek olmak için yorum yazabilirsiniz....