Bloggerda Yana Menü Yapmak (Haraketli)

Nasıl bir menüden bahsettiğimi daha iyi anlamak için lütfen deneme adresini ziyaret edin.

Örnek Görüntü:


Sayfa Öğelerindeki görüntüsü:

Eğer beğendiyseniz, öncelikle şu iki dosyayı indirin;

1. ssm.js
2. ssmItems.js

İndirdiğiniz dosyalardan ikincisi olan ssmItems.js isimli dosyayı notepad ile açın. (Mouse ile Sağa tıkla, birlikte aç, Program seç)

Açılan notepad dosyasında aşağıda görüldüğü gibi bir ‘code’ çıkacak;



    <!--


/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="YAN MENU"; // tag supported. Put exact html for an image to show.


///////////////////////////


// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["ANA MENU"] //create header
ssmItems[1]=["Anasayfa", "http://takipteyiz.blogspot.com", ""]
ssmItems[2]=["Alfabetik Olarak Yazilarim", "http://takipteyiz.blogspot.com/2009/03/alfabetik-olarak-tum-yazlarm.html",""]
ssmItems[3]=["Tarihlerine Gore Yazilarim", "http://takipteyiz.blogspot.com/2009/03/tarihlerine-gore-yazlarm.html", ""]
ssmItems[4]=["Kendi Blogunu Tanit!", "http://takipteyiz.blogspot.com/2008/03/deneme.html", "_new"]
ssmItems[5]=["Bu Menuyu Istiyorum!", "http://takipteyiz.blogspot.com/2009/04/bloggerda-yana-menu-yapmak", ""]
ssmItems[6]=["Iletisim", "http://takipteyiz.blogspot.com/2008/12/iletisim-formu.html", ""]


ssmItems[7]=["FAQ", "#nogo", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "#nogo", "",1]


ssmItems[9]=["APERATIFLER", "", ""] //create header
ssmItems[10]=["Futbol", "http://vliegendenederlander.blogspot.com/", ""]
ssmItems[11]=["Sinema", "http://takipteyiz.blogspot.com/2009/04/sineofrenik-cok-kisilikli-sinema-blogu.html", ""]
ssmItems[12]=["Yorum", "http://takipteyiz.blogspot.com", ""]


buildMenu();


//-->

Yukarıda görünen kodda kırmızı ile renklendirilmiş olan kısımlar Menü seçeneklerinizi belirtir. Yeşil ile renklendirilmiş kısımlar ise Menü seçeneklerine tıklandığında açılması gereken sayfanın adresini belirtir.

İstediğiniz şekilde menünüzü oluşturabilirsiniz. Kendinize özel düzenlemelerinizi yaptıktan sonra dosyayı kaydedin. Not oalrak, Türkçe karakterleri tanımadığını söylemek isterim. (“ç”, “ğ”, “ş”, “ö”, “ü”, “ı”, “İ”, harflerini kullanmayın.)

Kaydettiğiniz dosyayı ve diğer indirdiğiniz ssm.js isimli dosyayı weebly.com gibi “.js uzantılı dosya eklemenize izin veren siteler”den birine yükleyin. Yükledikten sonra adreslerini not etmeyi unutmayın. (Weebly’e .js uzantılı dosya yüklemeniz için üye olun ve bir blog oluşturun. Daha sonra “Elements > Multimedia > File” yolunu izleyerek .js uzantılı dosyanızı yükleyebilirsiniz.)

Not ettiğiniz adresleri aşağıda belirtilen kod içinde mavi ile renklendirilmiş olan kısımlara kopyalayın. Kendinize özgü düzenlediğiniz bu kodu Şablonunuzda kullanmak üzere not edin.

 

    
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->






//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com


Şimdi sıra, temamızda yapacağımız değişikliklerde, ancak herhangi bir aksi durumdan temanızı koruma amaçlı olarak şu hatırlatmaları yapmak isterim;

1. Blogger’a kullanıcı adınız ve şifreniz ile giriş yaptıktan sonra “Kumanda Paneli”nden (dashboard), temayı uygulamak istediğiniz blogunuzun “Yerleşim” (layout) kısmına tıklayın.
2. Yerleşime tıkladıktan sonra açılan sayfada, “HTML’yi Düzenle” (Edit HTML) kısmına tıklayın.
3. “Tam Şablonu Yükle” (download full template template) ‘e tıklayarak var olan temanızı bilgisayarınıza kaydedin.

Bu işlermleri yaptıktan sonra, Yerleşim > HTML’yi Düzenle > Widget Şablonlarını Genişlet adımlarını izleyin.

Ctrl+F” yaparak ibaresini bulunuz ve hemen altına şablonda kullanmak üzere düzenlediğiniz kodu yapıştırın.

Şablonu Kaydedin. Blogunuzu görüntüleyin yeni menünüz hayırlı uğurlu olsun. Bir sorunla karşılaşırsanız , lütfen yorumlarda belirtin. Kolay gelsin.

Reklamlar

About Lacivert

HuniliBlog.Com'un tek yazarıyım. Bana hep deli derler ama ben kimseye deli demedim. Sitemi ziyaret ederseniz hakkımda daha çok şey öğrenebilirsiniz
Bu yazı Blogger Widget Tema İpucu içinde yayınlandı. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s