Bloggerda Yana Menü Yapmak (Haraketli)

“Takip Listem” için yaptığım blog düzenlemelerini paylaşmanın zevkine varabilmek, vaktimi ayırdığım işin boşa gitmediğini sizlere de gösterebilmek ve biten işin sefasını sürmek için yazıyorum. Şimdi sizlere 'Bloggerda yana menü yapmayı' anlatacağım. Menü’ye kendi sayfanızdan istediğiniz başlıkları yerleştirebilirsiniz. Ayrıca sizin sayfada aşağı yukarı hareketlerinizde sizinle beraber hareket edecektir.

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"; // <IMG> 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.)

Ayrıca, farklı yöntemler için Blogger'da JavaScript Nasıl Kullanılabilir? isimli yazımdan yardım alabilirsiniz.

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.

<style type="text/css">
<!--
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;}
//-->
</style>




<SCRIPT SRC="http://www.hotlinkfiles.com/files/2441004_x49az/ssmItems.js" language="JavaScript1.2">
//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
</SCRIPT>
<SCRIPT SRC="http://www.hotlinkfiles.com/files/2440580_tot5m/ssmItems.js" language="JavaScript1.2"></SCRIPT>

Ş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 </head> 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.

Benzer Yazılar;
Pratik Yatay Menü
Alt Kategorili Menü
Sidebar'ınızı Menü ile Şenlendirin
Hareketli Menü
Multi Açılır Menü
Gizli yazı imkanı
Tabbed Menu