Aşağı Açılan Sayfayla Kayan Menü Eklentisi
Bu eklentimizde , blogger blogunuzun sağ tarafında , sayfayla hareket eden , fare üstüne getirilince aşağı doğru açılan menü eklentisi yapımını anlatacağız..
Demosunu görmek için TIKLAYIN.
Aşağı Açılır Sayfayla Kayan Menü Eklentisi Anlatımı.
Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim..
<style text-type="CSS"> #bmenu{ position:fixed; right:5px; center:0px; background-color:#2059DC; border-radius:10px; -moz-border-radius:10px; border:2px solid #FFF; width:202px; height:20px; color:#FFFFFF; transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;} #bmenu h3{ margin:0; padding:0; text-align:center; cursor:pointer;} #bmenu ul{ border-radius:10px;-moz-border-radius:10px; border:2px solid #FFf; background-color:#9AB2EA; margin:15px 0; padding:0 15px;} #bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{ color:#000; text-decoration:none; font-size:14px;} #bmenu li a:hover{ color:#fff;} #bmenu:hover{ z-index:5; height:175px; </style> <div id="bmenu"> <h3> Açılır Menü</h3> <ul> <li><a href="#">MENÜ 1</a></li> <li><a href="#">MENÜ 2</a></li> <li><a href="#">MENÜ 3</a></li> <li><a href="#">MENÜ 4</a></li> <li><a href="#">MENÜ 5</a></li> </ul> </div>
Yukarıdaki kodlar içinde dikkat etmemiz gereken yerler renkli olarak belirtilmiştir..
Kırmızı yere >> Görüntü başlığınız...
Mavi yere >> Menü Başlıklarınız
Sarı Yere >> Menü Linkleriniz..
<<< Bu Yazı için Arama Sonuçları >>>
Aşağı Açılan Sayfayla Kayan Menü Eklentisi , Aşağı Açılan Menü Eklentisi , Aşağı Açılan Kayan Menü Eklentisi , Aşağı Açılır Menü Eklentisi , Blogger Menü Yapımı , Blogger Menü Eklentisi
Aşağı Açılan Sayfayla Kayan Menü Eklentisi , Aşağı Açılan Menü Eklentisi , Aşağı Açılan Kayan Menü Eklentisi , Aşağı Açılır Menü Eklentisi , Blogger Menü Yapımı , Blogger Menü Eklentisi
Eklentileri.blogspot.com Hakkında.
Bizi Facebook ve Twitter üzerinden de takip edebilirsiniz..
19 yorum:
admin benim kod bilgim iyi olmadığı için biraz uğraştım ama birtürlü ekleyemedim. bunu konu olarak anlatıp paylaşırsan eminim benim gibi birçok kişi temalara ekleyecek. herneyse fazla uzatmıyorum şu temadaki abone olma arama kutusu vs. olduğu menüyün nasıl ekleyebilirim?
http://www.allblogtools.com/blogger-templates/3-columns/johny-storage/?theme=demo
tek kelimeyle süper. teşekkürler..
Hocam blogspot sayfama bundan birden fazla eklemek istiyorum GADGET olarak ancak.. renk farklılaştırması yapamıyorum, örneğin kutumuzun arka planı koyu mavi, ben bunu açık yapıp değiştiriyorum, yazıyı da beyaz yapıyorum. buraya kadar sorun yok. copy paste yapıp kodu kopyalayıp tekrar gadget olarak ekle dyorum. yeni gadgetta arka planı örneğin açık yeşil yapınca sayfamdaki tüm gadgetler yeşil tonda oluyor. bu sorunu nasıl halledebiliriz sizce? gerçekten çok çok hoş bir menü paylaşmışsınız benzer bir örneği yok sizin sayfanız haricinde..
Ayrıca bu tarz hoş menü paylaşımlarınızın devamını bekliyoruz :) gerçekten klasör gibi alt başlıkları topluyor. onca uğraştım keşke ilk bunu deneseymişim. Bir de birden fazla farklı stillerde gadget olarak ekleyebilirsem tümden süper olacak :)
@Sosyal Bilimler Uzmanı
Farklı renklerde eklemeniz mümkün, bunun için ayrı ayrı css kodları kullanmanız lazım , eklentileri.blogspot@gmail.com adresine mail atarsanız ordan yardımcı olayım..
hocam uğraştım ve şöyle hallettim : #bmenu yazan yerleri #amenu gibi adları farklılaştırdım aynı css şablonu olarak algılayıp aynı stili verdiğini farkettim. teşekkür ederim :)
@Sosyal Bilimler Uzmanı
Yapmanız gerekeni yapmışınız zaten , elinize sağlık =)
:) asıl sizin elinize sağlık hocam. onlarca kod aldım sitenizden.. Onlarca blogger sitesi arasından sizinkini tek geçiyorum bunun nedeni ise hiç bir yerde olmayan özgün kodlar var, bunları çok güzel anlatmışsınız :) www.sosbiluz.com benim sayfam header tasarımı içime sinmedi. binlerce kişilik bir facebook sayfamız var sosyal bilimler üzerine.. facebook yorum kutularına dayalı olarak paylaşım yapıyorduk, yorum kutularını - bilgileri sayfaya taşıyorum şu an. Sitenizin katkısı çok oldu :)
@Sosyal Bilimler Uzmanı
Reca ederiz , ne mutlu o zaman bize...
yalnız şu menü kategori olayı güzel olmuş sitenizde, hoş duruyor beğendim açıkçası =)
header ile ilgili olayı anlamadım , yardıma ihtiyacınız varsa , eklentileri.blogspot@gmail.com adresine mail atarsanız yardımcı olayım..
teşekkürler hocam, başlığın arka planı ajandanın devamı şeklinde. ama pek içime sinmiyor. hoş bir text-logo yapmayı düşünüyorum + başlığın yer aldığı kenarları tırtıklı kağıdın yerine daha hoş formatta bir kağıt arka planı düşünüyorum. :) halledemezsem size danışacağım devianart'tan kamyonla texture indirdim :) sidebar'da yer alan menü tasarımlarımı nasıl buldunuz? :) son yorumlar eklentinizi yeni aldım, üstünde de kategoriler - yazı arşivi var. son yorumlar kısmının başlığı normal fontta yazılı kategoriler ve yazı arşivi başlıklarını ise png formatında ben yaptım . sizce düz font mu iyi benim yaptığım mı? :)
sidebar gayet hoş , yazı başlıklarınız ise, resim olanlar göze daha hoş geliyor sanki , standartın dışına çıkmak her zaman güzeldir =)
Beğenmenize sevindim. Yazarlardan sözler widget'ını deneme yanılma yöntemi ile ben yaptım ilk açılışta çıkan facebook-twitter ve google +1 butonları ise nette hiç yok neredeyse çok şık duruyor blogunuza ekleyin hocam :)
ADMİN BURADA MSININ
Admin öncelikle ellerine sağlık çok güzel bilgiler paylaşıyosun bizde bundan faydalanıyoruz teşekkürler.Benim sorum açılır menüyü siteme uyguladım güzel oldu.Ancak yerini değiştirme şansımız var mı başka yere çekebilir miyiz menüyü onu soracaktım ?
sayfanızdan daha önce bir çok eklenti indirdim sorun yoktu, şimdi ise çözemediğim bir sorun veriyor.
yardımcı olursanız sevinirim.
bloguma bakarsanız açılır menünün sorunlu olduğunu görürsünüz.
teşekkürler.
matematikpalas.blogspot.com
Elinize sağlık çok güzel paylaşım.
hocam menü çubuğunu sabit yanda tutma şansımız varmı acaba? veya bu türde konusu mevcutmu ?
@CUMHUR GEZEN
Position:fixed; yerine , Position: relative; kullanabilirsiniz..
hocam emeğinize ve ilginize teşekkür ederim.
Yorum Gönder