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

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 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.