Cum sa faci un meniu cu file

Bună ziua, Kate! Am fost interesat de un articol despre „articole de design frumoase pe blog-ul,“ adevărul, nu am decis încă cel mai bine cum să-l folosească în blog-ul său. Dar nu este problema. Faptul că am insera de multe ori video în mesajele dumneavoastră (de exemplu, YouTube) și aș dori să economisi spațiu (puteți, desigur, reduce dimensiunea videoclipului în sine, dar nu-mi place sa ma uit la video în astfel de cantități mici, și du-te la o altă pagină N-aș vrea să). Pe unele site-uri am întâlni, atunci când video sunt inserate în același mesaj ca și în cazul în care pe file diferite, de exemplu, aici

Cum sa faci un meniu cu file

dar eu nu știu. Poate ajuta frumos rezolva această problemă?

În general, aceste file sunt numite file, din fila Engleză (file). Acest cuvânt are multe înțelesuri, și care dintre ele a fost numele filele de meniu nu știu.

Meniul filă poate fi utilizat ca principal blog-ul meniu orizontal în bara laterală (bara laterală) a blogului, precum și direct în corpul mesajelor. Totul depinde de nevoile și obiectivele personale.

Sincer, nu am deranja mult codul pentru meniul tab. Faptul că eu sunt în liniște pregătesc un nou șablon pentru acest blog, asa ca aici este un design nou, voi avea doar un astfel de meniu. Codul pentru acesta a fost inventat de designerul șablon.

Așa că ia-o în afară în părțile sale componente, pentru a înțelege că, pentru ceea ce este necesar pentru a face acest cod să funcționeze și este acum despre asta și spune. Acest cod este testat numai pentru șabloane pentru Blogger. În ceea ce privește codul este bun din punct de vedere al programării - Nu pot spune. Principalele lucrari :). Să începem.

Jquery conecta biblioteca la fila de meniu

În primul rând, fără de care acest meniu nu va exista - fără a conecta o bibliotecă specială Jquery.Prezhde, vă conectați, verificați dacă ați probabil conectat deja.

Pe Blogger, cred că toate conectate, pentru că puteți utiliza JavaScript și un link către fișierul este implicit pe această platformă. Deschideți blogul dvs. (nu admin, și anume, pe blog-ul), apoi faceți clic dreapta oriunde, alegeți o comandă (în funcție de browser-ul dvs.) - Codul sursă al paginii codului / Vezi pagina sursa / HTML View / Source Code. Aceasta deschide o fereastră nouă (sau tab) și mai aproape de partea de sus a paginii, între etichetele aici Cautam doar o astfel de linie:

Numerele din link-ul poate fi diferit, în funcție de versiunea de script-ul (dacă am înțeles corect). Cine este această linie nu este găsit, atunci trebuie să-l încorpora pe cont propriu. Este foarte puțin probabil ca pe Blogger nu a avut astfel de linii, dar încă doar în cazul în care voi descrie procesul.

Deschideți Design - Editare HTML. descoperim . Și deasupra ei lipiți locul „meu“.

Biblioteca este conectat. Apoi, trebuie să conectați un alt scenariu, prin care funcțiile și filele de meniu.

Instalați script-ul pentru un meniu cu file

$ ( 'Widget-meniu Tab ul li: mai întâi.') AddClass ( 'selectat') ;.

$ ( 'Tab-ul widget-meniu li'). Faceți clic (function ()

$ ( 'Tab widget-meniu ul li.') RemoveClass ( 'selectat') .;

$ ( '# Tab-Sidebar .widget1') echiv ($ ( 'tab-ul widget-meniu li.') Index (acest lucru).) FadeIn (500) ..;

Definirea stiluri de meniu

lățime: 500px; / * Lățime bloc * /

fundal: nici unul repeta parcurgere 0 0 #FFFFCC; / * Culoarea filei activă * /

float: left; / * Poziția orizontală a filelor * /

border-dreapta: 1px solid # ECEDE8; / * Frame din filele * /

culoare: # 555; / * Culoare text * /

background-color: # 006DFF; / * Blocul de culoare cu conținutul * /

padding: 31px 5px 5px; / * Câmpurile din jurul conținutului * /

frontieră: solid 1px # ECEDE8; / * Toc bloc cu un conținut * /

Inserare filă de meniu pentru blog

Acum, du-te direct la meniul nostru cu file. Așa cum a scris mai sus, meniul poate fi ca în bara laterală a blogului, și în posturi.

Dacă doriți să setați meniul din bara laterală, design deschis - Elemente de pagină - Adăugați un obiect gadget. Alegerea unui obiect gadget HTML / JavaScript.

Dacă meniul ar trebui să fie inserat în posturi pe blog, la momentul scrierii acestui articol, accesați fila Editare HTML și inserați următorul cod:

  • Numele primului tab
  • Numele celui de al doilea tab
  • Numele celui de al treilea file
  • Conținutul prima filă

    Conținutul al doilea tab

    Conținutul treia file

    Nu recomand schimbarea clasei și ID-ul (cu excepția

    ) În acest cod, deoarece el a respectat cu strictețe codul pe care le-am stabilit în șablonul blogului. Dar atribui o nouă clasă sau id (în cazul în care nu este) posibilă. Acest lucru poate fi necesar dacă doriți să modificați aspectul filelor.

    Sper că este clar din comentariile mele, în cazul în care ar trebui să fie.

    Sper că va plăcut această decizie și vă va face față cu ușurință instalarea acestuia. Dacă ceva nu funcționează, întrebați în comentarii, voi încerca să ajute. Apropo, pentru WordPress pentru aceste cazuri există plugin-uri gata, dar poate fi, de asemenea, găsit și script-uri care sunt instalate manual. În articolele viitoare, și vă spun despre asta. Iar pentru fanii DLE Vă recomandăm să aibă grijă de securitatea site-ului dvs. și să învețe despre patch-uri de pe DLE. Ei bine, că pentru Blogger, nu avem nevoie să se gândească la lucruri, cum ar fi hacking. Desigur, aveți posibilitatea să hack orice, dar noi sunt protejate de Google în sine, iar acest lucru este o firmă serioasă, așa că dormi rezidenți ai strans Blogger.Udachi.

    Mesaj de navigare

    Cum sa faci un meniu cu file - meniul Tab (fila): 45 comentarii

    bucurați-vă întotdeauna procesul meu detaliat și claritatea stilului! Vă mulțumesc, Kate! Brilliant ca întotdeauna!

    De asemenea am o întrebare pentru tine (sau o idee pentru un nou post) -!)

    De multe ori, codul, care este publicat într-un articol care nu se potrivește cu dimensiunea blocului care urmează să fie soobscheniy.Mozhet știi cum să faci defilare?

    Acesta este unul din mai devreme, cum ar nu a scris. Se răcește Katya rece, care ar fi fără tine, bloggeri români a făcut!

    Din câte știu, formatul video de pe YouTube este doar unul. Sub fereastra unui film este butonul „Embed“ - a emis doar un singur tip de cod, și că-l complet pentru a fi introdus. Puteți doar pre-specificați dimensiunea ferestrei, culoarea cadrului, și mai mult Coy orice setări.

    Desigur, înainte de a-am scris, dar sunt de acord, este foarte puțin.

    Nu-i încerci să indiciu pentru mine că ar trebui să folosesc scroll? 😉 mă gândesc la asta ...

    Voi scrie, cum să facă următorul scroll ca răspuns la întrebări.

    Nu există indicii, Katiușa -!)

    Pur și simplu, este foarte important!

    Și totuși (cu excepția defilare) a văzut o versiune foarte interesantă a butonului, în cazul în care un cod imens deschide o nouă filă - ar fi interesant să pună în aplicare -!)

    Butonul Opțiune - Știu despre acest lucru, știu unde pentru a obține, dar atunci când este instalat pe un blog de test, codul este foarte buggy. Problema a fost că dezvoltator de aplicații nu și-a actualizat-l. Doar recent, în același blog de test a observat că un bug ca nu. De îndată ce timp liber, am re toate punctele de vedere, și dacă nu există nici o problemă, atunci va spune cum să o facă.

    Vă mulțumesc ca întotdeauna pentru un blogger informatsiyu.S util în mișcare, dar va veni la îndemână în orice)

    Katya, multumesc pentru marele articol, m-am întâlnit nicăieri și niciodată o astfel de soluție interesantă pentru video - foarte convenabil, nu aveți nevoie pentru a deschide o pagină separată, plus un mod elegant si original =)

    Am o întrebare pentru tine - Am înțeles că nu se încadrează în domeniul de aplicare a acestui post, dar cred că această problemă va deveni în curând foarte urgentă pe care le plasează pe paginile de conținutul video blog-uri - de la YouTube, alte partajare video, încărcați ei înșiși. Cum pot să-i facă indexat, astfel încât acestea a lovit video Google emisiunii? Să presupunem că am postat pe YouTube videoclipuri și încorporați-l pe blog-ul. Pe YouTube va indexa rapid, dar vreau să fie indexate exact video (nu pagina, și video), care este situat pe pagina blog-ul meu. Există exemple de unele volumul de lucru? Am citit documente Google, chiar și făcute în conformitate cu recomandările și trimise la Google date Sitemap video vebmasters încorporate în videoclipul meu de pe YouTube, dar videoclipul nu a fost indexat. Spune-mi, te rog, dacă sunteți interesat de subiect video de indexare? =)

    Kate, vă mulțumesc foarte mult))

    în codul de script, după cum deja menționat Vlad Igolkin, în valoare de o marcă în plus, în primul rând, la sfârșitul /

    Singura neponyatka - cât mai mult posibil pentru a mări distanța dintre filele? pentru că textul le-au fuzionat într-un singur șir de caractere, spații nu ajuta „rama din filele“ de culoare prea ...

    Lasă un comentariu pentru porecla ta nu a fost o referire la tweeter, și un link către blog. O să vină și să vadă. Este vorba despre blogger. Priviți cu atenție, 99% din ceea ce nu aveți nevoie pentru a conecta biblioteca.

    Da, blogger. dacă nu adăugați codul pentru a conecta Jquery nimic bibliotecă funcționează.

    Îmi pare rău, am fost cufunde in comentarea că este mai convenabil.

    Încercați să specificați o astfel de adresă

    există o altă versiune, personal am acest blog doar un astfel de link.

    Google pentru a indexa video, aveți nevoie pentru a crea un sitemap.xml fișier special, și chiar blogger obișnuit acolo. Astăzi, uite ce altceva poti folosi un canal special mRSS nu am stima mai mult, dacă este posibil să se facă pe Blogger, voi scrie despre asta.

    Am făcut-o prin noi WordPress, crea sitemap.xml - există un plugin special pentru card de sitemap video, puteți genera automat o auto- + adaugă informații suplimentare la bloggeri, cred că, pentru a realiza aceasta trebuie să fie într-un fel diferit. Prin mRSS canal nu încercați, vom aștepta vești de la tine =)))

    Katia, a pus fundal, am amestecat-video spre stânga ... aș dori să fac un buton din stânga jos fără liniuță, și o înălțime de la ...

    Va cere?! Am încercat să pun codul cheie în jos, dar în cele din urmă se deschide imediat 2 film ... vezi ce sa întâmplat pe blog-ul meu în știri eticheta ...

    Vă mulțumesc, Katya! Voi fi de așteptare -!)

    Și cum să folosească această oportunitate de a combina widgetului comentarii Vkontakte și standartnyt comentarii mediu blogger într-o singură unitate, dar cu o alegere de acest lucru sau că sistemul de comentarii?

    Adică, este puțin probabil ca această metodă să reușească aplice, dar alte soluții sunt posibile, doar că nu am la îndemână soluții gata făcute. Poate mai târziu, voi scrie ceva despre asta.

    Kate, vă mulțumesc foarte mult pentru articol. Dar aș vrea să știu cum aceste file de instalare de WordPress.

    Este acest cod în WordPress mea de test nu a primit în sus. Dar puteți încerca. Este posibil ca puteți obține. Punerea în aplicare este aceeași, doar script-urile diferite pot intra în conflict unele cu altele. Deci, eu știu că sunt gata pentru widget-uri WP. Cuvinte cheie de căutare Tab. În mod similar, în motoarele de căutare sunt în căutarea pentru acel cuvânt cheie. Multe răspândit script-uri lor de meniu, care poate fi integrat în orice CMS. Important pentru a găsi unul care nu va intra în conflict cu script-uri existente.

    Katherine, nu înțeleg cel mai important, cum de a încorpora video într-o filă de meniu gata? adăugați codul în corpul unui mesaj, iată ce se întâmplă:

    amatori Ne pare rău! Am primit un meniu albastru inchis nu este la fel de frumos ca tine. Am făcut totul așa cum este descris. Ie meniul este gri și este îngust, și am albastru și iese în afară din partea laterală a blogului.

    Este posibil să nu se execută script-ul propus de mine. Acest lucru se poate datora faptului că ați folosit de bibliotecă JQuery, și ambele conflicte script-uri unul cu celălalt. Există două opțiuni pentru a rezolva problema. Sau caută un alt script pentru a afișa meniul. Sau cum să se ocupe cu meniu script conflicte și adăugați un cod special. Aici am v-ar ajuta cu plăcere, dar eu nu sunt bun la asta. Este numit jquery noconflict. Documentația pe această temă.

    Meniul meu - Acest lucru este ceva care se află în bara laterală? Așa că mi-e sub designul lor personalizat. Puteți schimba, de asemenea meniu. Pentru apariția întâlnește codul, care este descris, incepand cu subtitlul Definirea stilurilor pentru meniul. uita-te atent, există comentarii, puteți schimba toate în funcție de culoarea de blog și coloana lățime.

    Mulțumesc, Catherine. totul funcționează, am pășit, atunci când a făcut prima dată

    Ceva nu funcționează. Script-ul funcționează ca, dar nu par să aplice stiluri.

    Ei bine, pentru a-mi o poză cu nimic spune. Noi ar trebui să descrie într-un fel mai în detaliu, ceea ce faci.

    Mai există încă un conflict cu un alt scenariu?

    Îmi pare rău, nu am înțeles că ați adăugat. Poate că faci ceva greșit. Prea puține informații pentru a putea consilia ceva.

    Și pe Internet există o mulțime de tastaturi virtuale. Este foarte greu de citit transliterații.

    Buna ziua! vă arată cum să facă instanța implicită, a doua fila activă?

    O privire în codul după titlul „Setați script-ul la un meniu cu file“ este un șir de caractere:

    Deci WIDGET1 - conținutul primului widget. Cuvântul «primul» - acesta este primul, cuvântul «selectat» - este evidențiată. În general, încercați în loc să specificați WIDGET1 WIDGET2. Dar aceasta este doar o presupunere, eu nu sunt codurile și experimente foarte versat sunt efectuate. Dar se poate obține :).

    Da, lucru rece am fost un pic modificat de către rețeaua socială poate fi vizualizat aici http://gorod33.blogspot.com/2011/12/chernyi-spisok.html

    Vă mulțumesc pentru toate lucrările, toate elementare personalizabile, dar nu pot găsi cum să eliminați o piesă care urcă după a treia file și se odihnește în câmpul din dreapta? Și aici, în blog-ul meu (http://indatim.blogspot.com) într-un fel că nu arată bine, că este, Vreau să fie la fel de widget reale și a stat în mijloc!

    Creați un fișier pentru stilul css codul de încorporare rămâne, dar aici e lucrul pe care îl fac toate modificările de design site-ului. cum pot face acest lucru în mijlocul fila din partea de jos, așa cum au fost, în cazul în care articolele sunt scrise Infa și tot ce. și nu pentru a schimba designul site-ului. Aș fi foarte fericit dacă vă spun, pe multe site-uri au aceste file și bloguri scrise ca un set, dar nu am înțeles.

    Bună ziua, cu același nume! Kate, te rog spune-mi care articol în blogul dvs., trebuie să învețe să găsească răspunsul la întrebarea mea: Vreau să schimb un tag-uri de arhivă plictisitor pe blog. Ie pentru a împrăștia dosare de articol. Acum, toate articolele am salvat automat la data publicării lor. Vă mulțumim anticipat pentru răspunsul dumneavoastră

    Ei bine, doar clasa !! chiar totul clar! Respectă autorului)

    Multumesc pentru articol util! Voi fi aplicat în practică.

    te felicit - te

    Articolele, care sunt incluse în meniu?

    iată un citat: „Rezultatele

    Testele arată că JavaScript înțelege

    Google și motor de căutare română Nigma.

    Restul motoarelor de căutare (Yahoo, Bing,

    Yandex, Rambler, Altavista) cu JavaScript nu este

    ceea ce faci pe javascript - nu este

    indexate „“ label inițial

    Stânga informații duplicat și închis

    acest articol

    Du-te prin meniul drop-down în loc de

    prin paginile nu vor fi indexate,

    vezi articolul din meniul drop-down, du-te la

    mi meniul fără Jquery, accesați pagina

    Se trece prin meniu

    Am unul și același articol și din meniul (

    poziționată orizontal) și dreapta

    coloană, unde paginile.

    Aș dori să eliminați gadgetul la toate

    „Pagini“. Dar apoi în cazul în care am de gând să scrie

    Paginile nu se șterge obiect gadget și să le ascundeți

    afișa în blog. lăsați numai

    că ea a fost la partea de sus. Dar apoi ea a fost singur

    Acesta ocupă întregul panou orizontal, și

    Meniul Fila sub el pe al doilea panou.

    Și lângă „principal“ bara de meniu este

    a pus. Așa că ei au fost pe aceleași

    Este posibil să se introducă codul HTML, ceea ce sa întâmplat pentru a muta meniul, în cazul în care există lasa PJ Codul de lucru 🙂

    Vă mulțumesc, toate în mod clar și de înțeles, a pus pe DLE 9.6 lucrari

    articole similare