Meniu drop-dawn Blogger

Uneori avem atât de multe articole scrise pe blog, încât ne-am dori să organizăm mai eficient toată informaţia strânsă în decursul timpului şi creăm categorii, dar acestea nu pot structura aşa cum ne-am dori toată informaţia şi atunci un meniu drop-dawn cu categorii şi subţietori ne-ar fii de un real succes. Acest articol îl scriu pentru aceia dintre dvs. care doresc crearea unui astfel de meniu într-un mod simplu şi rapid...

  Conectaţi-vă la contul Blogger şi apoi intraţi pe blog-ul la care doriţi să adăugaţi acest meniu cu categorii şi sub-categorii - Aspect - adăugaţi un obiect gadget nou - </>HTML/java Script şi aici Paste-aţi codul pe care îl voi lăsa mai jos  (asta după ce aţi introdus datele specifice site-ului dvs.) şi daţi Save - Salvaţi aranjarea.

This tutorial is a simple CSS styled drop-down menu for Blogger. For add this menu go to blogger account, then go to Layout > Add a new HTML/Javascript Gadget and add the following code to it

 Copiați acest cod după care inlocuiți cu datele site-ului dvs. conform indicațiilor.

<div id="menubar">
     <ul id="menus">
      <li>
        <a href="URL-UL PAGINI">NAMELE PAGINI</a>
    </li>
    <li>
       <a href="URL-UL PAGINI">NAMELE PAGINI</a>      
      <ul>
    <li><a href="url-ul label/sub-categorie1">subcategorie1</a></li>
      </ul>
      </li>
      <li>
        <a href="URL-UL PAGINI">NAMELE PAGINI</a>            
       <ul>
    <li><a href="url-ul label/sub-categorie1">subcategorie1</a></li>
    <li><a href="url-ul label/sub-categorie2">subcategorie2</a></li>      
     </ul>
      </li>
      <li>
         <a href="URL-UL PAGINI">NAMELE PAGINI</a>            
       <ul>
    <li><a href="url-ul label/sub-categorie1">subcategorie1</a></li>
    <li><a href="url-ul label/sub-categorie2">subcategorie2</a></li>     
    <li><a href="url-ul label/sub-categorie3">subcategorie3</a></li>         </ul>
      </li>
    </ul>
  </div>

Dacă doriți să adăugați o altă categorie cu sub-categorii urmați logica si adaugați

   <li>
        <a href="URL LINK TO PAGE">NAME PAGE</a>
        <ul>
    <li><a href="url link to label/sub-category1">subcategory1</a></li>
    <li><a href="url link to label/sub-category2">subcategory2</a></li>
    <li><a href="url link to label/sub-category3">subcategory3</a></li>
        </ul>

Dacă doriți să adăugați o sub-categorie urmati logica si adăugați

<li><a href="url link to label/sub-category4">subcategory4</a></li>

  

  Acum vă trebuii să adăugăm un cod în şablonul blog-ului.: Şablon - Editaţi HTML - Căutaţi linia ]] ></b:skin> (apăsaţi CTRL+F şi scrieţi, sau Copy şi Paste-aţi în căsuţa Search ]] ></b:skin>)
  După ce aţi copiat acest cod (căruia îi puteţi modifica valorile de design) îl lipiţi (paste) deasupra liniei ]] ></b:skin> - Salvaţi dacă ceva nu funcţionează vă aştept cu comentări (puteţi şterge oricând acest cod fiind uşor de identificat datorită liniilor de început şi sfârşit.

/*-------- INCEPUT Drop Down Menu -------*/

 #menubar {

    background: #8E8E8E;

    width: 840px;

    color: #FFF;

        margin: 0px;

        padding: 0;

        position: relative;

        border-top:1px solid #B2FFFF;

        height:35px;

}

#menus {

    margin: 0;

    padding: 0;

}

 #menus ul {

    float: left;

    list-style: none;

    margin: 0;

    padding: 0;

}

 #menus li {

    list-style: none;

    margin: 0;

    padding: 0;

        border-left:1px solid #1A6680;

        border-right:1px solid #1A6680;

        height:35px;

}

#menus li a, #menus li a:link, #menus li a:visited {

    color: #FFF;

    display: block;

   font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

}

 #menus li a:hover, #menus li a:active {

    background: #130000; /* Menu hover */

    color: #FFF;

    display: block;

    text-decoration: none;

        margin: 0;

    padding: 9px 12px 10px 12px;      

}

 #menus li {

    float: left;

    padding: 0;

}

 #menus li ul {

    z-index: 9999;

    position: absolute;

    left: -999em;

    height: auto;

    width: 160px;

    margin: 0;

    padding: 0;

}

 #menus li ul a {

    width: 140px;

}

 #menus li ul ul {

    margin: -25px 0 0 160px;

}

 #menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {

    left: -999em;

}

 #menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {

    left: auto;

}

 #menus li:hover, #menus li.sfhover {

    position: static;

}

 #menus li li a, #menus li li a:link, #menus li li a:visited {

    background: #B3B3B3; /* drop down background color */

    width: 120px;

    color: #FFF;

    display: block;

    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

    margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

z-index:9999;

border-bottom:1px solid #1A6680;

}

 #menus li li a:hover, #menusli li a:active {

    background: #130000; /* Drop down hover */

    color: #FFF;

    display: block;     margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

} 
 /*-------- SFARSIT Drop Down Menu -------*/

  Dacă se întâmplă ca acest menu drop-dawn să nu apară mergeţi din nou în Şablon - Edit HTML - Căutaţi .tabs-outer - schimbaţi overflow: hidden; în overflow: visible; - Save.

Despre Autor
Pasionat de IT dornic sa aduc ceva nou care sa va fie de ajutor