Modifiye: Blogspot Bloglar İçin Yatay Menü Eklentisi! Mutlaka Bakmalısınız!

İnternette bulunan çoğu blogspot eklenti sitesinde bulunan yatay menülerden hiç birini beğenmediğim için farkındasınızdır kendi blogumda dahi Google'ın tarzındaki üst menüm haricinde yatay bir menüm bulunmuyor. Çünkü çoğu menü görsel açısından güzel fakat kullanışsız ya da kod kalabalığından blogu kirletiyor. Ya da bazıları kullanışlı fakat tasarımı çok çirkin duruyor. Yine bu akşam blogspot eklentilerine bakarken belki de daha önce yine gördüğüm fakat gözümden kaçan bir yatay-horizontal subtitle lı bir menüye rastgeldim ve hemen kodlarını sizlerle paylaşmak istedim. Siz de blogunuza ekleyebilir isterseniz düzenleyebilir blogunuzun tarzına uydurarak kullanabilirsiniz. Kodları görmek için içeri buyrun..

Şablon düzenlemeye girerek Blogunuzun HTML/CSS kodlarının olduğu sayfayı açın.
Önce aşağıdaki kodu bulun;
]]></b:skin>
ve şimdi bu kodları hemen üstüne ekleyin;
/* 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/AVvXsEis9of5SbfY-0EfqitVd8O3XrFM3zL3a_762vvO2d8jOFcPzNqNGGoFwCmdWEj1Yo03MYVxg3Bxm8CD2aGaTZS0iAnvFyXLfZDiHznpO0GjmXaxFkUMMbxY8UlQ7CO9bczyXpvRndxmqPU/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; }

Bu kodları ekledikten sonra Önce Önizlemeye tıklayarak bir sorun var mı gözden geçirin. Kodlarda sorun yoksa Şablonunuzu Kaydedin.
Şablonunuzu Kaydettikten sonra şimdi menümüzün asıl kodları olan aşağıdaki kodları isterseniz gadget olarak ekleyebilir yazılarınızın bulunduğu alanın üstüne menü şeklinde ekleyebilirsiniz isterseniz yine şablonunuzda istediğiniz yerde kullanabilirsiniz;
<ul id="navbt"> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLC4mAUbPTpqQYsuOOpGVaDyPuxtUhRKwe8eqZDpTzs1TZMqzs3ClDcwWHQUzYm_2Iic72D7RnPFOZP6JYUz8-wiLb7uIroWAM6K_GRgXp5oAfWAVrmF9Duwh1ZvnqFG3r-zrCVT_Xdz8/s1600/bloggetrix-home.png" /> Home</a></li> <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBwSEqzEkhZc-quQNxb00ScxmuB9i4O3dWkFCzeUk7keNOCa8RO7C4GV4-a8ewfd6jZuPA4w7CAKASrK_lDxXPxB6Tnjaub-jx1BkOrNPPfZSuH2JOudV4qWywuBCS-lk1ZCveZMzlCrw/s1600/bloggetrix-top1.png" /> HTML/CSS</span></a> <div class="subs"> <div class="col"> <ul> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 1</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 2</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 3</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 4</a></li> <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Sublinks</span></a> <div class="subs"> <div class="col"> <ul> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 41</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 42</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 43</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 44</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/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/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 46</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 47</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 48</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/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/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 6</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 7</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 8</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 9</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 10</a></li> </ul> </div> </div> </li> <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBgwMo2JO_IXKzt0RWXEg9XUe49AWSW9mA7XTP3OdSE5WI6zcZ3WwQiCktkHlxjMNpFy1ZUxqU9q_IqXygv885hPlZRx_COWcTUGbYlR9A3PzwQfzdiUssbVIIQ80qClJPGD1qwm4N76M/s1600/bloggetrix-top2.png" /> jQuery/JS</span></a> <div class="subs"> <div class="col"> <ul> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 1</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 2</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 3</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 4</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/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/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 6</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 7</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 8</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 9</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2m2Al92ir56wW2BbTktpoFlQDWgCePBiEBi4kYPqjGV-NB0hqcW5JHzzX53VoeiHj-IHZPPu_fM7vyYWfhsunZR7fF0W9eSjXEPMACEAWR6lt_qANCMOttpT0EEKoIvCPNoMS2Tuh14/s1600/bloggetrix-bub.png" /> Link 10</a></li> </ul> </div> </div> </li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3PasdKxRXuejmsRX1VOlrkRQ7-WAchRFTU8dofKerNTvYSdsU12jXimDftbhVNGAyWyo40HJ_ht3aXtc4dTePozl6qRLSMfylrJLm-SoufeNg3JUBix_CljMe3qOSNpOnL-QTzLZqtuk/s1600/bloggetrix-top3.png" /> PHP</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHxgko5mGzpZPJi5CbjNOAOJUR6QrK5JzjCApcnvwetx_kunMwTmN5Xp2f_ZwpJOW32fcmSJ30rgo-oc-nXqgmP4soT9wDZQk7_GLs7pVcf52I3JBQcWij4OTWWEFxytS4-50Glfp6Uc/s1600/bloggetrix-top4.png" /> MySQL</a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWyWM35VJAob0x1RkUxTLaszCje8Xe_HCtoxw8y1u59YRfDsxlEQQTpcAGXKSRmQpbObqmw0o-cTw5b6srdRjWPBaGAkFn1B5FjWdJMY5Ek_sfayLeXCSrXiVoz1dTEUB24NVDdk5EPI/s1600/bloggetrix-top5.png" /> XSLT</a></li> </ul>

Yorumlar

Bu blogdaki popüler yayınlar

Acılı Arabiata Soslu Penne Makarna Yapılışı Tarifi

Kullandığım En İyi Masaüstü Wallpaper - Duvar Kağıtları 2013

Haşhaşlı Börek -Çörek- Nasıl Yapılır? Tarifi Nedir?