Blogger Mobil Slayt Menüleri

30.5.17
Blogger Mobil Slayt Menüleri

Blogger Mobil Slayt Menüleri - Bu yazımızda blog sitelerine mobil slayt menüleri ekleme ve kullanma ile ilgili bilgiler paylaşacağız. Blog sitelerinin daha kullanışlı hale getirmek için mobil ekranlarda da kullanıcı deneyimine katkı sağlamalısınız. Blog sitelerinin en çok rastlanan problemlerinden biri de blogda kullanılan menüler veya blog içi dolaşım haritasıdır.

Blogger Sitelerine Mobil Slayt Menü Nasıl Eklenir?


Blogger mobil slayt menüleri blog sitenize eklemek için, Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfaya aşağıdaki kodları eklemek için;

1- CSS kodlarını eklemek için CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

.push{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease}
.btn{border:none;background:#3498db;color:#fff;font-size:16px;padding:15px 0;display:block;width:100%;margin:10px 0;text-align:center;text-decoration:none}
.btn:hover,.btn:active{background-color:#2980b9}
.backBtn{background-color:#2980b9;font-size:16px;text-align:right}
.backBtn:hover{color:#000}
.menu-right .backBtn{text-align:left}
.menu-top .backBtn,.menu-bottom .backBtn{text-align:left}
h2{text-align:center;font-size:18px;font-weight:normal;margin:15px 0}
.menu{border-right:1px solid #2980b9;background:#3498db;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;position:fixed;top:0;z-index:10;width:250px;height:100%}
.menu a{display:block;color:#fff;padding:16px;border-top:1px solid #2980b9;text-decoration:none;position:relative;z-index:11}
.menu a:last-child{border-bottom:1px solid #2980b9}
.menu a:hover,.menu a:active{background-color:#2980b9}
.menu-left{left:-250px}
.menu-left.left-open{left:0}
.menu-right{right:-250px}
.menu-right.right-open{right:0}
.menu-top{width:100%;top:-100%}
.menu-top.top-open{top:0}
.menu-bottom{width:100%;top:100%}
.menu-bottom.bottom-open{top:0}
.push{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease}
.push-left{left:-250px}
.push-left.pushleft-open{left:0}
.push-toleft{left:250px}
.push-right{right:-250px}
.push-right .backBtn{text-align:left}
.push-right.pushright-open{right:0}
.push-toright{left:-250px}

2- Aşağıdaki javaScript kodunu blogunuzda bulunan </body> kodunun bir satır üzerine ekleyin. Aşağıdaki javaScript kodu içerisinde gördüğünüz gibi slayt menülere ait komut dosyaları bulunmaktadır. Kullanmak istemediğiniz komut dosyalarını javaScript kodu içerisinden kaldırın.

<script>
/*! ==== Sol Slayt Menü ===== */
$('#showLeft').click(function() {
$('.menu-left').toggleClass('left-open');
});
/*! ==== Sağ Slayt Menü ===== */
$('#showRight').click(function() {
$('.menu-right').toggleClass('right-open');
});
/*! ==== Yukarıdan Slayt Menü ===== */
$('#showTop').click(function() {
$('.menu-top').toggleClass('top-open');
});
/*! ==== Aşağıdan Slayt Menü ===== */
$('#showBottom').click(function() {
$('.menu-bottom').toggleClass('bottom-open');
});
/*! ==== Çekmeli Menüler ===== */
$('.backBtn').click(function() {
$('.menu').removeClass('top-open bottom-open right-open left-open pushleft-open pushright-open');
$('body').removeClass('push-toleft push-toright');
});
/*! ==== Sol Çekmeli Slayt Menü ===== */
$('body').addClass('push');
$('#showLeftPush').click(function () {
$('body').toggleClass('push-toleft');
$('.push-left').toggleClass('pushleft-open');
});
/*! ==== Sağ Çekmeli Slayt Menü ===== */
$('#showRightPush').click(function () {
$('body').toggleClass('push-toright');
$('.push-right').toggleClass('pushright-open');
});
</script>

3- Aşağıdaki HTML kodu blogunuzda bulunan <body> açılış kodundan sonra uygun bir yere ekleyin.

<nav class="menu menu-left">
<a href="#" class="backBtn">&#8594;</a>
<a href="#">Menü-1</a>
<a href="#">Menü-2</a>
<a href="#">Menü-3</a>
<a href="#">Menü-4</a>
<a href="#">Menü-5</a>
<a href="#">Menü-6</a>
</nav>

Yukarıdaki HTML kod içerisinde belirtilen yere aşağıdaki kodları ekleyerek birbirinden farklı mobil menüleri blog sitenizde kullanabilirsiniz.

  • Soldan açılır slayt menü menu-left sınıf kodu.
  • Sağdan açılır slayt menü menu-right sınıf kodu.
  • Yukarıdan açılır slayt menü menu-top sınıf kodu.
  • Aşağıdan açılır slayt menü menu-bottom sınıf kodu.
  • Soldan çekmeli açılır slayt menü push push-left sınıf kodu.
  • Sağdan çekmeli açılır slayt menü push push-right sınıf kodu.

4- Yakarıdaki mobil menü kodlarını blog sitenize ekledikten sonra mobil menü eklentisine komut butonu eklemek için aşağıdaki butonlardan eklemiş olduğunuz mobil menü eklentisine ait olan butonu header menü içerisinde görünmesini istediğiniz yere ekleyin.

<a href="#" id="showLeft" class="btn">Sol slayt menü</a>
<a href="#" id="showRight" class="btn">Sağ slayt menü</a>
<a href="#" id="showTop" class="btn">Top slayt menü</a>
<a href="#" id="showBottom" class="btn">Alt slayt menü</a>
<a href="#" id="showLeftPush" class="btn">Sola çekmeli menü</a>
<a href="#" id="showRightPush" class="btn">Sağa çekmeli menü</a>

Blogger siteleri için birbirinden farklı mobil menülerinden blogunuzun tasarımına uygun olacak menüyü ekleyebilirsiniz. Blog siteleri için 6 (altı) farklı mobil slayt menüyü aşağıdaki ön izleme butonuna tıklayarak inceleyebilirsiniz.

Yorum Gönder