2014. február 9., vasárnap

#Segítség-Menü kód

Szép jó reggelt mindenkinek! Megint nem kritikával jelentkezem, most egy kis segítséggel. Bizonyára már nektek is meggyűlt a bajotok a HTML kódok szerkesztésével. Én most ebben próbálok segítséget nyújtani. Egy menü kódban fogom most ismertetni. Kezdjünk is hozzá.


FŐOLDALRENDELÉSEKKARAKTEREKHÁTTEREKSEGÍTSÉGEK


<center>
<div class="noscript" id="cssmenu">
<a href="LINK">NÉV</a> <a 
href="LINK">NÉV</a> <a
 href="LINK">NÉV</a> <a
 href="LINK">NÉV</a> <a 
href="LINK" 
target="_blank">NÉV</a></div>
<style type="text/css">
#cssmenu a  {
   font-family: Betűtípus
   display: block;
   clear: both;
   width: Menü szélessége
   font-size: Betű mérete
   line-height: 30px;
   padding: 0 10px 0 20px;
   color: Betű színe
   text-decoration: none;
   margin: 0.5em;
   background: Menü háttere
   -moz-box-shadow: 2px 2px 2px Doboz árnyéka
   -webkit-box-shadow: 2px 2px 2px Doboz árnyéka
   box-shadow: 2px 2px 2px Keret árnyéka
   -moz-border-radius: Keret
   -webkit-border-radius: Keret;
   border-radius: Keret
   text-shadow: 1px 1px 1px Szöveg árnyéka
}
#cssmenu a:hover { 
   color: Betű színe ha ráviszed az egeret;}
#cssmenu.noscript a:hover { 
   background: háttér, ha ráviszed az egeret;}
</style>
</center>


Magyarázat: LINK: ide az egyik oldal linkjét írd /ez a link természetesen nem mindenhol ugyanaz/
NÉV: ide az oldal nevét írd 
Betűtípus: itt tudod állítani, hogy milyen legyen a szöveg betűtípusa
Menü szélessége: itt azt tudod beállítani, hogy mekkora legyen a menü  /fontos: a méretet px-ben add meg!/
Betű mérete: itt a szöveg betűméretét tudod beállítani / ezt is px-ben add meg! /
Betű színe: itt a szöveg színét tudod beállítani /szám kóddal írd le/
Menü háttere: itt azt tudod beállítani, hogy milyen legyen a menü mögötti rész /szín is lehet, de kép is lehet a háttér. Amelyik képet szeretnéd azt ide linkeld be de a link elé írd oda h url és a linket tedd zárójelbe!/
Doboz árnyéka: Itt azt tudod beállítani, hogy a doboz árnyéka milyen színű legyen /színkóddal írd be/
Keret árnyéka: itt a keret árnyékának a színét tudod beállítani /ezt is színkóddal írd be!/
Keret: itt a keret szélességét adhatod meg /px-ben add meg, pl 0 9px 0 9px /
Szöveg árnyéka: itt a szöveg árnyékának színét adhatod meg /színkóddal!/
Betű színe ha ráviszed az egeret: itt azt tudod beállítani, hogy a szöveg milyen színű legyen ha ráviszed az egeret /színkóddal!/
Háttér ha ráviszed az egeret: Itt azt tudod beállatyni, hogy milyen legyen a menü háttere ha ráviszed az egeret /lehet szín, ezt színkóddal írd be. Lehet kép vagy minta is amit linkel illesz be úgy h a link elé oda írod, hogy url és a linket zárójelbe teszed/

És akkor most mutatok erre egy példát:

<center>
<div class="noscript" id="cssmenu">
<a href="http://kritikatolunkneked.blogspot.hu/">FŐOLDAL</a> <a href="http://kritikatolunkneked.blogspot.hu/p/rendelesek.html">RENDELÉSEK</a> <a href="http://kritikatolunkneked.blogspot.hu/p/karakterek.html">KARAKTEREK</a> <a href="http://kritikatolunkneked.blogspot.hu/p/hatterek.html">HÁTTEREK</a> <a href="http://kritikatolunkneked.blogspot.hu/p/segitsegek.html" 
target="_blank">SEGÍTSÉGEK</a></div>
<style type="text/css">
#cssmenu a  {
   font-family: Tahoma; 
   display: block;
   clear: both;
   width: 200px;
   font-size: 12px; 
   line-height: 30px;
   padding: 0 10px 0 20px;
   color: #F43989; 
   text-decoration: none;
   margin: 0.5em;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1270481519_06.gif); 
   -moz-box-shadow: 2px 2px 2px #B1B1B1; 
   -webkit-box-shadow: 2px 2px 2px #B1B1B1; 
   box-shadow: 2px 2px 2px #B1B1B1; 
   -moz-border-radius: 0 9px 0 9px;
   -webkit-border-radius: 0 9px 0 9px; 
   border-radius: 0 9px 0 9px; 
   text-shadow: 1px 1px 1px #B1B1B1; 
}
#cssmenu a:hover { /
   color: #000000;}
#cssmenu.noscript a:hover { 
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1261824073_45.gif);} </style>
</center>

A kód használata:
 
Megnyitod a bloggert---->Sablon--->Személyre szabás--->Speciális--->Stílus lap (CCS) hozzáadása /a menük között le kell görgetned, hogy megtaláld. Ez az utolsó lesz/---> és a fehér részre illeszd be a kódot.

Ha beillesztetted a kódot és már kész van, akkor kattints az Alkalmazás a blogon-ra és utána menj vissza a bloggerhez.

Elrendezés-->Modul hozzáadása--->HTML/Java Script



Ha ezzel végeztél, kattints az Elrendezés mentésére és már kész is a menüd.
Remélem tudtam segíteni. Ha nem értettétek volna meg akkor írjatok bátran és szóljatok, ha még szeretnétek ilyent.


30 megjegyzés:

  1. Szia! Én szeretném, ha több ilyen menü kódot hoznál, mert nagyon hasznosak!

    VálaszTörlés
  2. Szia :) segitesz nekem? nem értek igy se hozzá

    VálaszTörlés
    Válaszok
    1. szia! Ha még most sem értesz semmit akkor nyugodtan írj az anastasia_b@freemail.hu e-mail címemre és segítek.

      Törlés
  3. Kedves Anastasia B.!

    Felhasználtam a kódot az egyik blogomnál :) Ki fogom írni, hogy tőletek van :) Köszönöm :-*!

    Love Ya,
    Mace

    VálaszTörlés
  4. nagyon jó de hogyan lehet olyan vörös izét körécsinálni?

    VálaszTörlés
  5. Halii. Vittem a kódot, köszönöm:)))

    VálaszTörlés
  6. Helló, figyi hogy rakjam be az oldalmodulba ezt a menüt hogy tudjam használni?

    VálaszTörlés
    Válaszok
    1. az elrendezésnél rakd be egy html/javascript modulba

      Törlés
  7. Hahi, vittem a kódot, nagyon köszönöm! :)

    VálaszTörlés
  8. Szia. Vittem a kódot és köszönöm :)
    Nagyon kezdő vagyok szóval hogy lehet szerkeszteni azt hogy ha rákattintok akkor az a tartalom jöjjön be?

    VálaszTörlés
    Válaszok
    1. szia!
      FŐOLDAL <a
      LINK szöveg helyére linkeld be azt az oldalt, amire kattintáskor szeretnél eljutni

      Törlés
  9. Szia!Vittem,csak beillesztettem azt a példa kódot,javítottam rajta és kész is!♥

    VálaszTörlés
  10. Szia!
    Vittem a kódot.
    Nagyon köszönöm, hogy raktál fel ilyen jellegű bejegyzést!
    Sokat segítettél!

    VálaszTörlés
  11. Szia!
    Felhasználom a kódot a - még publikálatlan - blogomra. Aminr nyilvános lesz, természetesen forrást is írok majd mellé. :)

    VálaszTörlés
  12. Szia. Köszi a segítséget, én is vittem :)

    VálaszTörlés
  13. Felhasználtam ezt meg azt a képelhalványítót :D Köszönöm sokat segítettél :)

    VálaszTörlés
  14. Vittem forrással együtt. Köszi szépen:)

    VálaszTörlés
  15. Nagyon jó kis kód, a leírásod pedig nagyon hasznos a hozzám hasonló kezdőknek. Vittem ^^

    VálaszTörlés
  16. Szia :) Vittem a kódleírásodat, hihetetlenül sokat segített :)

    VálaszTörlés
  17. Szia! Loptam a kódot :D A blogra ki van írva, hogy őletek ;) Köszönöm a hasznos bejegyzést :)

    VálaszTörlés
  18. Szia :)
    Vittem a kódot, köszönöm! :)

    VálaszTörlés