Mega navigasyon menüsüne sahip en büyük avantajı tek bir yerde bir araya toplanmış olarak sunulan etiketlere ait başlıkları sıralayarak yayınlayabilirsiniz, böylece ziyaretçilerin ilgi belirli bir kategoriyi ararken çok zaman harcamak zorunda kalmaz olmasıdır. Öte yandan,blogunuza temiz ve zarif görünmek devam edecektir.
Menüye ait renkleri kullandığınız temaya göre düzenlenebilir ancak kodlarda belirli zamandan sonra bozulmalar olabiliyor.
Şimdi Blogger Mega Açılır Menü Yapımı nasıl oluşturabiliriz ona bakalım.
1- Öncelikle blogger kumanda paneline giriş yapıyoruz.
2- Daha sonra Kumanda paneli > Şablon > HTML Düzenle yolunu izliyoruz.
3- Temanızın yedeğini her ihtimale karşı alıyoruz.
4- CTRL+F tuşları ile ]]></b:skin> kodunu aradıyoruz.
]]></b:skin>
/* BC Mega Drop Down Menu Bar For Blogger */
ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCNeWSJYKjKv-x-0DOLGhg2aRlXFOJSsIGL-CG3YTea6ximVie_6fYhjeVs5KWPSBdVL8qdegh6oP5ygj_DmQbmk-gpieTvKcbIKlB0_Dua26ZMaT5YZUWDKMcHQM7QGsMza8bY3Vk_A/s1600/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
.dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
.dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
.dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLd0xz27-M8QXkLH79KhvMFRG9hSSYtVfHmjZ4rNnu9r_8IvMVOp_jBR1FanE2-uB5nhJ3tUiu8PkeqyC8kFENeSC0NRhoRiTlUu9O9US91Q55GcTmUWici5BUjCZC0EJHvwTJt8w7LQ/s1600/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
.dropmenu li a:hover span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVSSe9RXVuFL59ZJBjv1mcxntWe98DEe4MQ2LYxYU9pMMi0URzmrQmq1wHwfNCFTM3KZtnR5qsn45o3UP8wLxLmIigvvnUpsmPU6sJ8M0pu3Tu3gD8v7THhjd10M49nsqVBgP_qjAOy7s/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
.dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9KD5u3Ran5DUEU1LD4fMPQt3XagVta41LjUDnLrc2Ssjo7zKwFroN8LSYhyphenhyphenXPVnGw9rr2zKKWs6iTf2v91XwqV8nSguFEVPRcqsr2my_8U9i4r7H6wkB2fTT9QuBGiDc01bGXJh8tgo/s1600/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
border: 0;
float: none;
}
.dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-decoration: underline;
text-transform: none;
}
a.selected, a:hover{
color: #0657AD !important;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9KD5u3Ran5DUEU1LD4fMPQt3XagVta41LjUDnLrc2Ssjo7zKwFroN8LSYhyphenhyphenXPVnGw9rr2zKKWs6iTf2v91XwqV8nSguFEVPRcqsr2my_8U9i4r7H6wkB2fTT9QuBGiDc01bGXJh8tgo/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVSSe9RXVuFL59ZJBjv1mcxntWe98DEe4MQ2LYxYU9pMMi0URzmrQmq1wHwfNCFTM3KZtnR5qsn45o3UP8wLxLmIigvvnUpsmPU6sJ8M0pu3Tu3gD8v7THhjd10M49nsqVBgP_qjAOy7s/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
.dropmenu div ul{
position: relative;
display: block;
}
.dropmenu li div{
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9KD5u3Ran5DUEU1LD4fMPQt3XagVta41LjUDnLrc2Ssjo7zKwFroN8LSYhyphenhyphenXPVnGw9rr2zKKWs6iTf2v91XwqV8nSguFEVPRcqsr2my_8U9i4r7H6wkB2fTT9QuBGiDc01bGXJh8tgo/s1600/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
.dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
.dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
.dropmenu li div div a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.dropmenu li div div a:hover{
color: #000;
text-decoration: none;
}
ul.left{
float: left;
width: 145px;
}
ul.right{
float: right;
width: 145px;
}
.small{
color: #666;
font-size: 10px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
.products{
width: 300px;
padding: 15px !important;
}
.products ul{
width: 100%;
}
.products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
.products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
.products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.products img{
float: left;
padding-right: 10px;
}
.products ul li a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
}
.tutorials{
width: 300px;
}
input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
label{
padding: 0px 0px 4px 0px;
display:block;
}
button{
background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCNeWSJYKjKv-x-0DOLGhg2aRlXFOJSsIGL-CG3YTea6ximVie_6fYhjeVs5KWPSBdVL8qdegh6oP5ygj_DmQbmk-gpieTvKcbIKlB0_Dua26ZMaT5YZUWDKMcHQM7QGsMza8bY3Vk_A/s1600/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}
.emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}
.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.js"></script>
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/dropdown.js"></script>
<script>
$(document).ready(function(){
$("#nav-one").dropmenu();
});
</script>
<div id='header-wrapper'>
<div class='headerleft'>
<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Bilgi Cafem61 (Header)' type='Header'/>
</b:section>
</div>
<ul id="nav-one" class="dropmenu">
<li>
<a href="#">Home</a> </li><li>
<a href="#">Forum</a><ul>
<li><a href="#">Support</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Your work</a></li>
</ul>
</li>
<li>
<a href="#item3">Downloads</a><ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Custom projects</a></li>
</ul>
</li>
<li>
<a href="#">Products</a>
<div class="products">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg276cQDm6FGRNWVpB4e1g7FcPVaU3ZSv6-_Qal9Yy6J1t1o3kBcIsp_0L5xqYqZd0nXvXluC87d3OacLdcY7m0LgfNWHhyphenhyphenOow6J9W-zr7KtvFljXO2naDTR3hPmrBzxwgE5JEQ2S48OF4/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzSjWDiNn63QkDqqSqK87lwko6hM9QmqfQReiDnBDvfypQzEggvMYucqP9Ivk3Agi2cFbvxelu70xibi2ErXKpgDVBpGfCJC4KUWTlXE7oN6DrNBidH4B-NC-g7TtYBWwQWTqb7U1-2WQ/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFWDm_9udWpH7-bX5Q-7PmORM-zP6MH13UGV8sNsBsa37uHmy_z9V-aNJCR-FVNHcLf36CiC7i9WizKO9xQ37vNQnXqcmP1lI64TWDWyrEfLgBpAbXpBVelepgCVWjR1YGNu4yq4QASQ/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFWDm_9udWpH7-bX5Q-7PmORM-zP6MH13UGV8sNsBsa37uHmy_z9V-aNJCR-FVNHcLf36CiC7i9WizKO9xQ37vNQnXqcmP1lI64TWDWyrEfLgBpAbXpBVelepgCVWjR1YGNu4yq4QASQ/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55iVZdci84TkivZwY9TJFDZEZTyhbPeE61TMSeLLTFmAb8qvXnuY_DIGoYqelZERwH6-WtAtE7zp4SG3uj7QDPpWf9H3YWwFs9rHIUzIBXnYU_bY7kmsm-fcj3Tzo6fFPh4HciKmpBsA/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LtZ0v_8n6_ITaxE4bIjVIKQgwnvMPDpahaLma9uZjlX_g5lp8xdQ9ebNb8BXS5lUMu9af6E68PaR_UTCMKe85w-pMznPoGH5o9lJkFX_2aN9LgqS_g-7vLxpp6fTXI82U5chwRKo0UQ/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFMahOPnaq2fv1-DB7vV5WRNyFjDjuml-2NrEfHqJF_iVjVbNXuWAdvno3fxtUt6uLW39R55Is-CHAma4TT-QxFY7DRXHNDwaYpWQ-Xwfer_yJH61mswAOlEEGS1hR5MQjQfBOOVl8UMc/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li>
</ul>
<div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>
<li>
<a href="#">Tutorials</a>
<div class="tutorials">
<ul class="left">
<li><a href="#">Javascript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">PHP</a></li>
</ul>
<ul class="right">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Actionscript</a></li>
</ul>
<div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href="#">Links</a> <ul>
<li><a href="#">Programming</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">My websites</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Cool stuff</a></li>
<li><a href="#">Sitebase</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li>
<a href="#">Subscribe Now</a>
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Bilgicafem61', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
</li>
</ul>
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Not: Gelen Maili Aktif Etmeyi Unutmayınız!
Hiç yorum yok:
Yorum Gönder