2017

cu reduceri
Se afișează postările cu eticheta meniu orizontal. Afișați toate postările
Se afișează postările cu eticheta meniu orizontal. Afișați toate postările

Meniu orizontal foarte simplu efect hover cu sageata


Acest meniu nu spun ca, este ceva nou si nici spectaculos dar este un meniu foarte simplu de aplicat, deschizi un nou gadget HTML/Javascript si adaugi codul de mai jos, daca esti atent, vezi unde se pot face modificari pentru adaptarea sa pe blogul tau.

Pentru url-link inlocuiesti ca de obicei cu link-ul care doresti sa apara, si Text 1-2-3-4-5-6 il schimbi cu descrierea ce vrei sa apara in meniu. Vezi cum arata meniul aici:

<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* poate sa fie "left", "right" o "center" */
font: bold 18px Georgia; /* marime litere */
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* spatiu intre link-uri */
}
ul.arrowunderline li a{ /* culoare text este neagra */
position:relative;
color:black;
padding-bottom:8px; /* distanta intre sageata si text */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* grosimea liniei de la sageata si culoarea este red */
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent red transparent; /* culoarea liniei este red */
}
</style>

<ul class="arrowunderline">
<li><a href="url-link">Text 1</a></li>
<li><a href="url-link">Text 2</a></li>
<li class="selected"><a href="url-link">Text 3</a></li>
<li><a href="url-link">Text 4</a></li>
<li><a href="url-link">Text 5</a></li>
<li><a href="url-link">Text 6</a></li>
</ul>

SUCCES !

Meniu orizontal simplu pentru blogul tau


meniu orizontal simplu pentru blogul tauCu câteva luni în urmă am aratat cateva meniuri pe care le poti adăuga la blog-ul tau rapid şi uşor.

Ei bine, azi a venit rândul să iti arat un nou meniu de navigare orizontal, un pic mai complex, dar simplu de implementat.

Poti vedea un exemplu a acestui meniu aici.

Pentru adaugarea meniu-lui mergi la Desen --> Element HTML/Javascript si adaugi urmatorul cod:
Meniu orizontal simplu pentru blogul tau
<hr />
<div id="meniu">
<ul id="navi1">
<li><a href="URL_LINK">Acasa</a></li>
<li><a href="URL_LINK">Desen</a></li>
<li><a href="URL_KINK">Stiri</a></li>
<li><a href="URL_LINK">Contact</a></li>
</ul>
</div>

<style type="text/css">
#navi1 {
margin:0px;
padding:0px;

}
#navi1 li {
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
color:#000000;
margin:5px;
padding:3px;
width: 100px;
border:1px solid black;
text-align:center;
list-style:none;
font-family: Segoe UI, Arial;
font-size: 14px;
float:left;
}
#navi1 li:hover {
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
color:#000000;
border:1px solid black;
}
#navi1 li a:hover {
color: #003366;
font-style: Italic;http://www.blogger.com/img/blank.gif
text-decoration: none;
}
#navi1 a {
color: #CCCCCC;
font-weight: bold;
}
</style>
Bun acum poti modifica tot ce este de culoare rosie cu informatia ce doresti sa apara in meniu si inlocuirea URL_LINK cu link-ul unde vrei sa fie directionata respectiva informatie.

Daca cauti un meniu orizontal interesant cu efetul Dock il poti gasi aici

Meniu orizontal cu text in miscare (MARQUEE)

Un elegant meniu orizontal cu un text in miscare in partea superioara (se poate scrie un text de intimpinare sau orice alta informatie).A nu se uita! marimea de text, culorile de fond sau de text se pot adapta dupa desenul blogului tau.

Pentru a vedea un exemplu de meniu cu text in miscare click AICI.

Cum se poate adauga acest meniu pe un blog?
Se merge la Desing --> Editare HTML cu ajutorul CTR+F i cauta linia de cod: ]]></b:skin> si exact deasupra ei adaugi urmatorul cod:
#menu-title {
padding:5px;
background:#333; /* Culoare de fond de la marquee */
border-bottom:1px solid #fff;
}
#menu-title h3 {
padding:0; margin:0;
color:#ccc; /* Culoare de text de la marquee */
font-family:Verdana, serif;
font-weight:bold;
font-size:130%; /* Marime text de la marquee*/
}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:#ccc; /* Culoare fond de meniu */
border-bottom:1px solid #999;
}
#nav li{float:left; margin:0; padding:0;}
#nav a {
float:left;
display:block;
padding:6px 30px 6px 5px;
text-decoration:none;
font-family:Verdana, serif;
font-weight:bold;
font-size:90%; /* Marime text de meniu */
color:#666; /* Culoare text de meniu */
/* Culoare fond de meniu */
background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihY-dn724X6sAR_RLvNl_4Bv_as22sLfV9xO7i7TsFkS7iwaF7yruLXK0ErIvTcATwJ0FEWrjrEhlsz54oqgG0-YaLqdAlIXsUJIPcUJ4cZdCKguWPZd4VRld-luhUab1DM5OS2Lt-O1E/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}

Acum cauta <body> si imediat dupa adauga codul meniului de mai jos:
<div id="menu-title">
<h3><marquee behavior="alternate">Aici vine textul</marquee></h3>
</div>
<ul id="nav">
<li id="nav-1"><a href="URL de LINK">Acasa</a></li>
<li><a href="URL de LINK">Director</a></li>
<li><a href="URL de LINK">Contact</a></li>
<li><a href="URL de LINK">Noutati HTML</a></li>
</ul><div class='clear'/>

Inainte de a salva modificarile nu uita sa schimbi "URL de LINK" cu url-ul ce doresti sa apara in meniu si de asemenea textul.

Meniu orizontal in culori cu CSS

Un interesant meniu orizontal in culori adaptat pentru blogger realizat cu CSS.Mai jos este doar o imagine dar il poti vedea cum apare instalat pe blog in exemplul urmator: click aici

meniu orizontal in culori cu cssCum se instaleaza acest meniu?
Mergi la Aspect (Desing) --> Editare HTML cauta linia ]]></b:skin> si exact inaintea ei adaugi urmatorul cod CSS:
#middle {
width: 765px;
float:center;
padding:10px 10px 10px 10px;
margin:10px 0;
background:#BDDFEB url() no-repeat;
}
.category {
width:133px;
float:left;
border-top:8px solid #333;
margin:5px;
padding:15px 10px 10px 10px;
background:#33AAFF;
}
.category p {
margin:0;
}

#cat-1 {width:133px; margin:0; border-top:8px solid #9977FF; color:#000000;}
#cat-2 {width:133px; margin:0; border-top:8px solid #66BB88; color:#000000;}
#cat-3 {width:133px; margin:0; border-top:8px solid #FF55FF; color:#000000;}
#cat-4 {width:133px; margin:0; border-top:8px solid #9911FF; color:#000000;}
#cat-5 {width:133px; margin:0; border-top:8px solid #FFDD33; color:#000000;}

#cat-1 h2, #cat-2 h2, #cat-3 h2, #cat-4 h2, #cat-5 h2 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
color:#333;
}
.category a {
color:#ffffff;
display:block;
background:none;
}
.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}
#cat-1:hover {background:#9977FF; color:#352726; }
#cat-2:hover {background:#66BB88; color:#352726; }
#cat-3:hover {background:#FF55FF; color:#352726; }
#cat-4:hover {background:#9911FF; color:#352726; }
#cat-5:hover {background:#FFDD33; color:#352726; }
#cat-1 h2 a:hover, #cat-2 h2 a:hover, #cat-3 h2 a:hover, #cat-4 h2 a:hover, #cat-5 h2 a:hover {
color: #fff;
}
verifica daca totul este bine si salveaza modificarile.

Pasul 2 Editare nou gadget HTML/Javascript si adauga urmatorul cod html:
<div class='clearfloat' id='middle'>
<div class='cat-1'>
<div class='category section' id='cat-1'><div class='widget text' id='text1'>
<h2 class='title'><a href='URL 1'></a></h2><b>TEXTUL 1</b>
</div></div></div>

<div class='cat-2'>
<div class='category section' id='cat-2'><div class='widget text' id='text2'>
<h2 class='title'><a href='URL 2'></a></h2><b>TEXTUL 2</b>
</div></div></div>

<div class='cat-3'>
<div class='category section' id='cat-3'><div class='widget text' id='text3'>
<h2 class='title'><a href='URL 3'>/a></h2><b>TEXTUL 3</b>
</div></div></div>

<div class='cat-4'>
<div class='category section' id='cat-4'><div class='widget text' id='text4'>
<h2 class='title'><a href='URL 4'></a></h2><b>TEXTUL 4</b>
</div></div></div>

<div class='cat-5'>
<div class='category section' id='cat-5'><div class='widget text' id='text5'><h2 class='title'><a href='URL 5'></a></h2><b>TEXTUL 5</b>
</div></div></div></div>

Latimea de meniu se poate modifica de aici:
#middle {
width: 765px;

Se poate schimba culoarea textului de aici:
.category a
color:#ffffff;

La fel se poate schimba culoarea textului cand trece mouse-ul :
.category a:hover
color:#fff;

Pare un pic complicat cu atatea modificari dar merita incercat.

Meniu simplu cu efect onmouseover



Am fost intrebat de mai multi prieteni ai acestui blog daca exista un meniu mai simplu pentru al folosi pe blog-urile lor, raspunsul este da. Rezultatul este meniul de sus din acest post.
Pentru inceput mergem la Aspect --> Editare HTML si cautam linia urmatoare: ]]></b:skin> si exact deasupra ei adaugam urmatorul cod:
#menu div.colormenu,
#menu div.colormenu a.menu {
font-family: sans-serif, Verdana, Arial;
font-size: 12pt;
color: white;
}
#menu div.colormenu {
text-align: left;
}
#menu div.colormenu a.menu {
background-color: #0D95F5;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#menu div.colormenu a.menu:hover {
background-color: #940f04;
}

Culorile se pot schimba după cum urmează.
- schimba culoarea de fond: #0D95F5;
- schimba cand trece mouse-ului peste meniu: #940f04;

Salveaza modificarile.

Si la final editeaza un nou gadget HTML/Javascript unde adaugi urmatoarele:
<div id="menu"><div class="colormenu">
<a class="menu" href="#">Text 1</a> <a class="menu" href="#">Text 2</a> <a class="menu" href="#">Text 3</a> <a class="menu" href="#">Text 4</a> <a class="menu" href="#">Text 5</a> <a class="menu" href="#">Text 6</a>
</div></div>

Inlocuieste: "Text 1,2,3,4,5,6" cu textul care doresi sa apara.
Inlocuieste "#" cu URL-ul pagini care doresti sa faca legatura.

Meniu orizontal simplu cu stilul CSS

Un meniu este o piesa importanta intr-un blog pentru ca ne ajuta sa punem ordine in continutul lui. Un meniu creat cu CSS este mai usor de adaugat pe un blog decat un meniu creat cu un script.

Acest meniu este foarte usor de adaptat la un blog pentru ca exsta posibilitatea de al adapta la culoare sau dimensiune cu respectivul. Pentru adaugare mergem la Aspect --> HTML/Javascript si inainte de linia ]]></b:skin> adaugi urmatorul cod CSS:
#navigation {
margin-left:100px; /* Margina stanga */
top:25px; /* Margina sus */
}
#navigation li {
float:left;
}
#navigation a {
background-color:#000000; /* coloare de fond */
border-bottom:3px solid #FFFFFF; /* Línie inferioara *
color:#FFFFFF; /* Coloare de text */
display:inline-block;
font-size:13px; /* Marime de text */
font-weight:normal;
margin-right:1px;
padding:10px 20px 10px; /* Inaltime si latime de meniu */
text-decoration:none;
text-transform:uppercase; /* Litere mari */
text-shadow:0 1px 1px #CDCDCD ;/* Umbra text */
}
#navigation a:hover {
border-bottom:3px solid #05C7C0; /* Linia inferioara cand trece mouser-ul (hover) */
color:#05C7C0; /* Culoare cand trece mouser-ul (hover) */
}
#navigation li.selected a {
border-bottom:3px solid #05C7C0; /* Coloare linie inferioara fixa (Home) */
color:#05C7C0; /* Coloare text fix(Home) */
}
#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
salveaza modificarile,si ultimul pas deschide un gadget HTML/Javascript si adaugi urmatorul cod HTM:
<div id='navigation'>
<ul>
<li class='selected'><a href='#'>HOME</a></li>
<li><a href='#'>Link-1</a></li>
<li><a href='#'>Link-2</a></li>
<li><a href='#'>Link-3</a></li>
<li><a href='#'>Link-4</a></li>
</ul>
</div>

In acest cod se poate inlocui Home sau Link cu ce doreti tu sa para in meniu

Meniu silul Dock pentru blogger

Meniurile Dock sunt stilul caracteristic calculatoarelor Mac şi sunt extrem de atractive pentru utilizator prin felul în care se modifica iconurile atunci când trecem mouse-ul peste ele. Nu sti ce vreau sa spun?
Uită-te la cele doua meniuri care se află in antetul acestui blog.(un meniu normal si unul cu efect jQuery) vezi exemplul aici...
Tine cont de faptul că, dacă ai mai multe script-uri instalate pe blog pentru a forma copertine meniul nu funcţionează.
Dupa ce am inteles despre ce este vorba continuam cu instalarea. Mergem la Aspect -> Editare HTML si cautam linia <head> imediat dupa adaugam codul urmator:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js' type='text/javascript'/>

Acum inainte de linia ]]></b:skin> adaugam codul de mai jos:

/* Menu Dock
----------------------------------------------- */
.dock {
text-align: center;
height: 60px;
position: relative;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
.dockItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}

Si in ultimul rand mergem la Aspect alegem un Element HTML/Javascript si adaugam codul de mai jos:
<div id="dock" class="dock">
<div class="dockContainter">

<a class="dockItem" href="URL de legatura"><img src="http://img686.imageshack.us/img686/261/iconhome.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img412.imageshack.us/img412/2995/iconrss.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img695.imageshack.us/img695/3296/icontwitter.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img412.imageshack.us/img412/1619/iconfacebook.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img412.imageshack.us/img412/946/iconpicasa.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img412.imageshack.us/img412/7628/icon009.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img695.imageshack.us/img695/2604/iconhelp.png"/><span>Titlu</span></a>

</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)

}
);

</script>

Schimba "URL de legatura" cu URL-ul dorit de tine ca si "Titlu" cu denumirea care vrei sa apara vizibil in meniu.

Cum sa adaugi un meniu orizontal pe blog

Meniul este unul din cele mai importante parti a unui site sau blog, el oferind vizitatorilor un acces mult mai usor la continutul blogului

In optiunile pe care Blogger le are nu se numara,si posibilitatea de a face pagini statice.
In acest caz trebuie sa facem singuri acest lucru,modificand codul sablonului, lucru care nu e chiar usor pentru cineva care nu se pricepe.

Pentru a usura munca vreau sa va arat o cale destul de usoara de a va pune meniu pe blog, doar cu o mica modificare a coduli html.

Pentru inceput mergeti Aspect --> Editati Html si cautati urmatoarea linie de cod:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Dupa ce ati gasit-o (folositi Ctrl+F) schimbati pe 1 cu 3 si pe no cu yes, apoi salvati sablonul.

Mergeti la pagina "Elemente de pagina" si veti observa acum ca aveti posibilitatea de a aduga un obiect gadget deasupra header-ului.

Clik pe Adaugati un element gadget si alegeti optiunea html/JavaScript. Copieaza urmatorul cod html de mai jos si lipestel in campul pentru continut.

COD HTML:

<style type="text/css">

#meniu {
margin-left:-40px;
}

#meniu ul li{
display:inline;
list-style-type: none;
font-size:120%;
font-weight: bold;
padding:0px;
margin:0px;
}

#meniu li a{
margin:2px;
padding:5px 10px 5px 10px;
color:#ffffff;
background-color:#2D0089;
border:1px solid #FF6702;
}

#meniu li a:hover {
color: #ffffff;
background: #3CC3FD;
}
</style>

<div id="meniu">
<ul>
<li><a href="http://url-ul tau">Acasa</a></li>
<li><a href="http://url-ul tau">Feed</a></li>
<li><a href="http://url-ul tau">Contact</a></li>
<li><a href="http://url-ul tau">Informatii</a></li>
</ul>
</div>


Inlocuiti ce este scris cu rosu "http://url-ul tau" cu url-ul paginilor care va intereseaza, iar ce este cu albastru inlocuiti-le cu numele paginilor alese
Salvati editarea si gata avesti instalat meniul pe blog.
De asemenea ai posibilitatea de a modifica anumiti parametri cum ar fi: textul mai mic sau mai mare,sau vrei ca meniul sa apara in partea stanga sau dreapta.

Aeste modificari le explic mai jos,am copiat din nou codul html si am notat in dreptul fiecarui parametru ce se poate modifica.

Exemplu de modificari cod:

#meniu ul li{
display:inline;
list-style-type: none;
font-size:120%; - modifica marimea textului in procente
font-weight: bold; - face textul bold; pentru text normal inlocuiti bold cu normal
padding:0px;
margin:0px;
}

#meniu li a{
margin:2px; - mareste distanta intre texte
padding:5px 10px 5px 10px; - pune o distanta intre text si bordura care inconjuara textul; sus - dreapta - jos - stanga
color:#ffffff; - modifica culoarea textului
background-color:#2D0089; - modifica fundalul textului
border:1px solid #FF6702; - pune o bordura in jurul textului; 1 = grosimea bordurii; #FF6702 = culoarea bordurii
}

#meniu li a:hover {
color: #ffffff; - modifica culoarea textului la mouseover(atunci cand treceti mouse-ul peste text
background: #3CC3FD; - modifica fundalul textului la mouseover
border:1px solid #FF6702; - modifica bordura la mouseover
}


Daca intampini vre-o problema atunci lasati un comentariu si voi incerca sa te ajut.