2017

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.

2 comentarios:

  1. Salutare Constantin .Imi poti expliac inca odata cum pot aplica aceste coduri?,deoarece tu spui :

    Acum inainte de linia ]]> adaugam codul de mai jos:

    Vezi codul --> [+/-]

    Eu dau acolo pentru a vedea codul si ma trimite pe o pagina de cautare Google
    Imi poti da mai multe detalii?
    Multumesc anticipat.

    RăspundețiȘtergere
  2. Salut Marius, ai dreptate pentru ca un script ce il aveam instalat PE BLOG, pentru a ascunde codul html nu mai functioneaza, motiv care deschidea pagina de google. Acum este inlocuit prin afisarea directa a codului, sper sa-ti fie de folos. SUCCES!

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc