Google Blogger menü tasarımları, basit programlama dili ve görsel ekranı kullanarak tasarlanan blogger menü örneklerini bu yazımızda sizlere tanıtıyoruz. Kullanımı ve tasarımı kolay olan blogger menüler bloglar için önemli bir adımdır. Blogunuzun yeni bir tasarım kazanmasının yanı sıra mobil cihazlar üzerinde de muhteşem bir görünüme ve pratik kullanıma sahiptir.
Yakın zamanda blog sitemizde bu menülerin 3D sitilini de sizlerle paylaşmaya hazırlıyoruz. 3D Blogger Eklentileri - Blogspot sitelerinizin tamamen tasarımını değiştirmeden Blogger 3D sitilini de blogunuza kolayca uygulayabilieceksiniz.
Blogger Mobil Uyumlu Menü Tasarımı Uygulaması
1. Blogger hesabınıza giriş yapın ve eklemek istediğiniz blogun kumanda paneline gişir yapın. Blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle sekmesine tıklayın. CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodunu ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.* {margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
.nav-bemenu {display: block;margin-bottom: 15px 0;background: #03A9F4;-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);border-radius: 3px;}
.nav-bemenu ul {list-style-type: none;margin: 0;padding: 0;display: block;}
.nav-bemenu li {list-style-type: none;margin: 0;padding: 0;display: inline-block;position: relative;font-size: 14;color: #def1f0;}
.nav-bemenu li a {padding: 15px 20px;font-size: 14;color: #def1f0;display: inline-block;outline: 0;font-weight: 400;}
.nav-bemenu li:hover ul.dropdown { display: block; }
.nav-bemenu li ul.dropdown {position: absolute;display: none;width: 200px;background: #2980B9;-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);padding-top: 0;}
.nav-bemenu li ul.dropdown li {display: block;list-style-type: none;}
.nav-bemenu li ul.dropdown li a {padding: 15px 20px;font-size: 15px;color: #fff;display: block;font-weight: 400;}
.nav-bemenu li ul.dropdown li:last-child a { border-bottom: none; }
.nav-bemenu li:hover a {background: #2980B9;color: #fff !important;}
.nav-bemenu li:first-child:hover a { border-radius: 3px 0 0 3px; }
.nav-bemenu li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }
.nav-bemenu li ul.dropdown li:first-child:hover a { border-radius: 0; }
.nav-bemenu li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #def1f0;position: relative;top: 15px;right: -5px;content: '';}
.title-mobile {display: none;}
@media only screen and (max-width:900px) {
.nav-bemenu {background: #fff;width: 200px;height: 100%;display: block;position: fixed;left: -200px;top: 0px;-webkit-transition: left 0.25s ease;-moz-transition: left 0.25s ease;-ms-transition: left 0.25s ease;-o-transition: left 0.25s ease;transition: left 0.25s ease;margin: 0;border: 0;border-radius: 0;overflow-y: auto;overflow-x: hidden;height: 100%;}
.title-mobile {position: fixed;display: block;top: 10px;font-size: 20px;left: 100px;right: 100px;text-align: center;color: #FFF;}
.nav-bemenu.visible {left: 0px;-webkit-transition: left 0.25s ease;-moz-transition: left 0.25s ease;-ms-transition: left 0.25s ease;-o-transition: left 0.25s ease;transition: left 0.25s ease;}
.nav-be-bemenu {display: inline-block;vertical-align: middle;width: 100%;height: 50px;margin: 0;position: absolute;top: 0px;left: 0px;background: #03A9F4;padding: 12px 0 0 10px;-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);}
.navbar-bemenu {display: inline-block;vertical-align: middle;height: 50px;cursor: pointer;margin: 0;position: absolute;top: 0;left: 0;padding: 12px;}
.navbar-bemenu span {height: 2px;background: #fff;margin: 5px;display: block;width: 20px;}
.navbar-bemenu span:nth-child(2) {width: 20px;}
.navbar-bemenu span:nth-child(3) {width: 20px;}
.nav-bemenu ul { padding-top: 50px; }
.nav-bemenu li { display: block; }
.nav-bemenu li a {display: block;color: #505050;font-weight: 600;}
.nav-bemenu li:first-child:hover a { border-radius: 0; }
.nav-bemenu li ul.dropdown { position: relative; }
.nav-bemenu li ul.dropdown li a {background: #2980B9 !important;border-bottom: none;color: #fff !important;}
.nav-bemenu li:hover a {background: #03A9F4;color: #fff !important;}
.nav-bemenu li ul.dropdown li:hover a {background: rgba(0,0,0,.1); !important;color: #fff !important;}
.nav-bemenu li ul.dropdown li a { padding: 10px 10px 10px 30px; }
.nav-bemenu li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {border-top: 5px solid #505050;position: absolute;top: 20px;right: 10px;}
.eklenti-be {background: rgba(0,0,0,0.5);position: fixed;top: 0;bottom: 0;left: 0;right: 0;}}
@media only screen and (max-width:1199px) {.container { width: 96%; }}
.fixed-top {position: fixed;top: 0;right: 0;left: 0;}2. Aşağıdaki HTML kodları blogunuzun <header> içerisine yerleşirin veya <nav> kodları ile değiştirin.
<div style='margin-top:150px;margin-bottom:30px;text-align:center;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqkqcvNyY8mT4in83Pj_5w99IFsAe15S30BiCyMlJbv3KznDb1xPPFb3ErKsllkz_RA-UQaVPutlCi1PufvTHjd5wdsmwAl1_Qj4ejtB1rMibOvpHRwgOCFKJSUhIPN35bDQO5BIdnhwRq/s1600/process.png' style='width: 100px;margin-bottom:15px'>
<h1>Mobil Uyumlu Blogger Menü Tasarımı</h1>
</div>
<nav>
<div class='nav-bemenu'>
<ul>
<li><a href=''>Anasayfa</a></li>
<li><a href='javascript:void(0)'>Web Araçları<span class='arrow-down'></span></a>
<ul class='dropdown'>
<li><a href=''>HTML</a></li>
<li><a href=''>CSS</a></li>
<li><a href=''>Javascript</a></li>
<li><a href=''>JQuery</a></li>
</ul>
</li>
<li><a href='javascript:void(0)' >Blogger<span class='arrow-down'></span></a>
<ul class='dropdown'>
<li><a href=''>Widget</a></li>
<li><a href=''>Blogger İpuçları</a></li>
</ul>
</li>
<li><a href='javascript:void(0)' >SEO<span class='arrow-down'></span></a>
<ul class='dropdown'>
<li><a href=''>Araçlar</a></li>
<li><a href=''>Backlink</a></li>
</ul>
</li>
<li><a href=''>Google Adsense</a></li>
<li><a href=''>Reklam</a></li>
<li><a href=''>İş</a></li>
</ul>
</div>
<div class='nav-be-bemenu'>
<div class='navbar-bemenu'><span></span><span></span><span></span></div>
<a href='' class='title-mobile'>Blog Domain</a>
</div>
</nav>3. Aşağıdaki javaScript kodlarını blogunuzda bulunan </head> kodunun hemen bir satır üzerine ekleyin.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script>
$(document).ready(function(){
$('.navbar-bemenu').click(function(){
$('.nav-bemenu').toggleClass('visible');
$('body').toggleClass('eklenti-be');
});
});
</script> 4. Şablonu kaydedin ve blogunuzu kontrol edin.
Blogger Mobil Uyumlu Menü Navigasyonu Açıklamaları
- Mobil uyumlu navigasyonun blogunuzun tasarımınına ve renkleri uyum sağlaması için yukarıdaki CSS kodları içerisinden tasarım ayarlarınızı yapabilirsiniz.
- Blogunuzda bulunan etiket bağlantılarınızı yukarıdaki HTML kod içerisinde bulunan Menü sekmelarine ekleyerek uygulamanın çalışmasını sağlayabilirsiniz.
Yorum Gönder