
1.Adım:Açılır Menü CSS Kodunu Ekleyelim
Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip ediyoruz.Widget Şablonlarını Genişlet kutucuğunu işaretliyoruz.Ctrl+F yardımıyla aşşağıdaki kodu aratıp buluyoruz.
]]></b:skin>
Aşşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}
2.Adım:Java Kodlarımız EkleyelimYine aynı sayfada kodlar içerisinde aşşağıdaki kodu bulalım.
</head>
Aşşağıdaki kodu kopyalayıp bulduğumuz </head> önceki kısma yapıştıralım
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>
Şimdi Temamızı Kaydedelim.3.Adım:Blogumuz İçin Açılır Menümüzü Ekleyelim
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edelim ve aşşağıdaki kodu kopyalayıp açılan gadgetimizin içine başlıksız olarak kaydedelim.
<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="www.blogokulu.blogspot.com">Blog Okulu</a></li>
</li></ul>
Kod içerisinde mavi ile işaretlediğimiz yerlere yazı linkinizi,kırmızı ile işaretlediğimiz yerler memüde görünecek isimler.Yeşil renkli yerler ise ana menü yani butonlar içerisinde yazılacak olanlardır.Gadgetimizi kaydedip görünmesini istediğimiz yere sürükleyip bırakıyoruz.Bu gadgeti başlık satırının hemen altında koymanızı tavsiye ederim.
merhaba öncelikle emeğine sağlık.Bu menüyü bloguma ekledim fakat üzerine tıklanınca renk maviye dönüyor.Bunu açık bordo yapmak istiyorum.Yardımcı olursanız sevinirim.http://mctubi.blogspot.com/
YanıtlayınSilTeşekkür ederim.Daha yeni başladığım için pek bilgi sahibi değildim.Öğrenmeye çalışıyorum işte siteniz sayesinde;)
YanıtlayınSilRica ederim.Blogla ilgili aklınıza takılan ne olursa sorabilirsiniz.Dilimiz döndüğünce klavyemiz yazdığı sürece yardımcı olmaya çalışırız.
YanıtlayınSilmavi kare işaretine yazacağımız yazı linki nedir acaba,hepsini uyguladım ama bir türlü olmadı başardığım kısımlarda da açılan menüdeki isimlere tıklayınca sayfa açılmıyor
YanıtlayınSilYAN TARAFA EKLEYİNCE OLUYOR ANCAK BAŞLIK SATIRI ALTINDA MENÜLER AÇILMIYOR ACABA NEDEN
YanıtlayınSilscript kodunu doğru yere yapıştırdığınıza eminmisiniz?
YanıtlayınSilÖrnek:Menüde Blog Okulu görünecek,blog okuluna tıklayınca blog okulu sitesinin açılmasını istiyorsan mavi kare yerine http://blogokulu.blogspot.com yazman gerekiyor.
YanıtlayınSilYandaki yeni filmler,sağlık haberleri gibi eklentileri nasıl yapıyorsunuz?
YanıtlayınSilSizin için, sorunuza cevap niteliğinde bir yazı yayınladım.okumak için tıklayın.
YanıtlayınSilAçılır menüyü ekledim fakat bir sorum olacaktı menülere bir şeyler eklemek istiyorum bunu nasıl yapabilirim ve açılır menü rengini değiştirebilirmiyim?Kusura bakmayın bilmediğim için size başvuruyorum ,aylaşımlarınız için teşekkür ederim.
YanıtlayınSil3.Adımda renkli olarak yazdığım yerleri değiştirerek menüye istediğin gibi ekleme yapabilirsin.1.Adımda verdiğim kod içerisinde
YanıtlayınSilborder=1px çerçeve kalınlığı, solid=çerçeve rengi,background=#ccccc arka plan rengi bunları değiştirerek renkleri ayarlayabilirsin.renk kodlarını < a href="http://blogokulu.blogspot.com/2012/03/renk-kodlari-renk-kutusu.html">burdan bulabilirsin.
İyi akşamlar html kod a ihtiyacım var sadece aşagı dogru açılsın yeter.
YanıtlayınSilörnegin:Forum başlıkları site haritası
1Atatürk 1
2 2
3 3
Gibi bişey lazım bir çok sitede benim istedigim kod var ama işime yaramıyo bazısında link'i nereye koyacagımı bilemiyorum? gibisinden yardımcı olursanız sevinirim ve elimdeki kod'a nasıl link verecegimi yazarsanız oda olur şimdiden teşekkürler
.:: DIV
body, div {
font-family: Verdana;
font-size: 12px;
}
.cerceve{
width: 450px;
margin-right: auto;
margin-left: auto;
}
.menu{
cursor: pointer;
width: 150px;
float: left;
}
.baslik{
width: 144px;
padding: 3px;
color: white;
background-color: black;
}
.icerik{
width: 144px;
visibility: hidden;
position: absolute;
padding: 3px;
color: white;
background-color: gray;
}
function Gizle(no){
document.getElementById(no).style.visibility = 'hidden';
}
function Goster(no){
document.getElementById(no).style.visibility = 'visible';
}
Forum Başlıkları
Chapter two
M.Kemal ATATÜRK
Alparslan TÜRKEŞ
H.Nihal ATSIZ
Ziya GÖKALP
Hack Tim Konuları
Menu B1
Menu B2
Menu B3
Menu C
Menu C1
Menu C2
Menu C3
verdiğinz kodu istediğiniz gibi düzenledim.
YanıtlayınSilkod içerisinde:
Chapter two
Chapter two:Menüde görünmesini istediğiniz isim
http://blogolulu.blogspot.com yerine bu isme ait linki yazıyorsunuz.
.:: DIV
body, div {
font-family: Verdana;
font-size: 12px;
}
.cerceve{
width: 450px;
margin-right: auto;
margin-left: auto;
}
.menu{
cursor: pointer;
width: 150px;
float: left;
}
.baslik{
width: 144px;
padding: 3px;
color: white;
background-color: black;
}
.icerik{
width: 144px;
visibility: hidden;
position: absolute;
padding: 3px;
color: white;
background-color: gray;
}
function Gizle(no){
document.getElementById(no).style.visibility = 'hidden';
}
function Goster(no){
document.getElementById(no).style.visibility = 'visible';
}
Forum Başlıkları
Chapter two
M.Kemal ATATÜRK
Alparslan TÜRKEŞ
H.Nihal ATSIZ
Ziya GÖKALP
Hack Tim Konuları
Menu B1
Menu B2
Menu B3
Menu C
Menu C1
Menu C2
Menu C3
Çok teşekkür ederim bu iyiliginize karşılık siteme sitenizin adresini ve logosunu koyacagım teşekkürler :)
YanıtlayınSilYaw hepsini yaptımda Gadget ekle diye bir yer yok ?
YanıtlayınSilŞu kimliğe sahip birden çok widget bulundu: Navbar1. Widget kimlikleri benzersiz olmalıdır. yazısı çıkıyo yapamadım ben:(
YanıtlayınSilSizin için kodu tekrar denedim,kod çalışıyor.adımları sırasıyla ve doğru olarak uygularsanız kurulumda problem olmayacaktır.
YanıtlayınSilSöylemiş olduğunuzu yaptım ama sorun şu. Menüler aşağı'ya doğru kaydığında malesef görünmüyor ya da yarısı görünüyor. (Blog yazıları üst planda kalıyor, oysa ben eklediğim menülerin üst planda olmasını istiyorum)
YanıtlayınSilYardımcı olduğunuz için şimdiden teşekkürler..
emeğinize sağlık, beni sorum münüyü ekledikten sonra, herhangi bir menü içinde paylaştıklarım ana sayfa gibi ayrı ayrı nasıl ekleye bilirim. menünün içini nasıl doldura bilirim. örneğin manzaralar diye bi menüm olsun ona tıklayınca ayrı ayrı manzaralar görünsün sonra istediğimi tıklayıp ilgili yazıyı okuyabileyim. teşekkürler
YanıtlayınSilÖncelikle yazılarınızda iyi bir kategorilendirme yapmalısınız.Kategorilerle ilgili daha önce bir yazı yayınlamıştım.Kategorilendirmeyi yaptıktan sonra, sizin verdiğiniz örnek üzerinden anlatım yapacak olursak; menüde manzaralara tıklayınca çıkmasını istediğiniz bütün yazılarınızın etiketlerinden bir tanesini mutlaka manzaralar olarak girmelisiniz.Menüdeki manzaralar a ait link ise "http://blogadresiniz.blogspot.com/search/label/manzaralar" şeklinde olmalıdır.Bundan sonra yazdığınız yazılar içerisnde manzaralar etiketi girdiğiniz yazılar menüde manzaralar linkine tıklayınca açılacaktır.
YanıtlayınSildediklerinizi harfiyen rahat 3 4 kez yaptim fakat gadgede ekledigimiz kodu sayfanin en ustune getirdimde menuler acilmiyor kayitlarin ustune gedirdigimde sikinti yok yani sayfanin ustundeyken acilan menuler kayitlarin arkasinda kaliyor yarim aciliomus gibi gosterior yardim ederseniz cok sevinirim sayfanin ustune ekledigim gadged kodu kayitlarin altinda kalmasin ustunde acilsin menuler yani///// tesekkurler
YanıtlayınSilayni sorun bende de var kardes... cozemedim bir turluu
YanıtlayınSilKardesim super yapmıssın onlinegame-area.blogspot.com a gel benle bi iletisime gec sormak istediğim birkac sey var webmasterlikle ilgili simdiden tsk...
YanıtlayınSilmerhaba mail olarak bana gönderdiğiniz bu kodları kullandım tamam sorun yok ama menüler yazıların altında kalıyor görünmüyor nasıl yapabilirim acaba
YanıtlayınSilekledim ama menüler yazıların altında kalıyo anlamadım ya
YanıtlayınSil