sâmbătă, 29 august 2009

Cum sa adaugi un meniu orizontal pe Blogger




Meniul este unul din cele mai importante parti a unui site sau blog, el oferind vizitatorilor un acces mult mai usor la continutul blogului
Printre optiunile de pe Blogger nu se numara, din pacate, si posibilitatea de a face pagini statice, ca in Wordpress unde se genereaza automat si meniul. Pe Blogger trebuie sa facem singuri acest lucru,umbland pe la codul sablonului, lucru care nu e chiar usor pentru cineva care nu se pricepe.


In acest articol vreau sa va arat o cale destul de usoara de a va pune meniu pe blog, doar cu o mica modificare in Html-ul sablonului.




Pentru inceput trebuie sa va alegeti paginile care vor forma meniul si sa le scrieti url-ul si titlul intr-un editor de text cum ar fi Notepad.

Apoi urmati calea 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.

Acum duceti-va la pagina "Elemente de pagina" si veti vedea ca acum aveti posibilitatea de a aduga un obiect gadget si deasupra header-ului.



Dati clic pe Adaugati un element gadget si alegeti optiunea Html/JavaScript. In campul pentru continut copiati urmatorul 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">Home</a></li>
<li><a href="http://url-ul tau">Feed</a></li>
<li><a href="http://url-ul tau">About Me</a></li>
<li><a href="http://url-ul tau">Contact</a></li>
</ul>
</div>

Inlocuiti ce este scris cu rosu "http://url-ul tau" cu url-ul paginilor pe care le-ati ales, iar ce este cu albastru inlocuiti-le cu numele paginilor alese. Aceste cuvinte vor aparea in meniul vostru, deci alegeti un nume care sa fie reprezentativ pentru continutul paginii.
Dupa ce ati copiat codul, salvati gadgetul si trageti-l sub header. Salvati editarea si vedeti cum arata meniul.


Cam asta ar fi, dar sunt convins ca fiecare are diferite culori pe blog asa ca, culorile pe care eu le-am ales eu pentru demo nu se potrivesc cu ale voastre. Sau poate vreti scrisul mai mic, sau vreti ca meniul sa apara in partea stanga, sau in partea dreapta, asa ca in continuare va voi arata cum sa modificati partea de Css a codului pe care vi l-am aratat.

Voi copia din nou prima parte a codului de mai sus si va voi arata ce puteti schimba la el pentru a se nimeri cu sablonul vostru.

#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 vreti ca meniul sa apara in partea stanga atunci dupa aceasta linie:

#meniu {

copiati urmatorul cod:


float:left;

Daca vreti ca meniul sa apara in parte dreapta atunci dupa aceasta linie:

#meniu {

copiati urmatorul cod

float:right;
Daca mai intampinati si alte probleme atunci lasati un comentariu si voi incerca sa va ajut.


vineri, 28 august 2009

Activati noul editor de postari din Blogger




Testat pana acum in Blogger in draft, noul editor este disponibil de astazi (cel putin astazi am vazut eu) si in varianta normala a platformei.

Noul editor vine cu cateva imbunatari la optiunile vechi dar si cu altele noi noute menite sa ne ajute cat mai mult atunci cand scriem un articol.

Deci daca nu ati vazut inca cum arata si ce optiuni noi are, si vreti sa-l testati iata ce trebuie sa faceti: Urmati calea Setari--> Elementar si derulati pagina pana ajungeti la Setari generale. Aici bifati optiunea "Editor actualizat" si salvati setarea


Acum cand vreti sa scrieti un articol editorul va arata asa:





Optiuni noi si imbunatatiri

Adauga Adsense in interiorul postari
Dupa cum scriam intr-un articol trecut, Blogger permitea prin versiunea sa Blogger in draft sa adaugam codul Adsense direct in html-ul articolului. Era de ajuns sa selectati optiunea Editati Html a editorului si sa copiati acolo codul Adsense.
Acum daca selectati noul editor de postari puteti adauga codul Adsense chiar de aici, prin aceeasi metoda.

Afirea simpla a codurilor Html
Se stie ca daca vroiai sa pui in pagina un cod html, css, sau orice alt cod acesta nu se afisa corect, deoarece vechiul editor interpreta automat codul iar acesta pur si simplu se deforma.
Acum datorita noului editor acest lucru este posibil. Nu trebuie decat sa dati clic pe Optiuni de publicare si sa bifati optiunea: Afişaţi HTML simplu



Adaugarea link-urilor
Modul de adaugare a link-ului s-a schimbat si el. Acum in fereastra de adaugare a link-ului aveti posibilitatea de a introduce si textul care v-a fi link-uit.
Alta optiune este aceea de a testa link-ul introdus, si o alta de a introduce o adresa de email.
In pagina daca dai clic pe un link apare o mica fereastra in care poti schimba sau sterge link-ul.


Din pacate optiunea pe care eu o asteptam si anume posibilitatea de a face link-ul sa se deschida in alt tab inca nu a fost adaugata.


Adaugarea pozelor
La adaugarea imaginilor s-a adus o modificare destul de importanta. S-a renuntat la fereastra clasica a pozelor, unde puteai sa selectezi in ce parte sa apara imaginea si s-a ajuns la o adaugare mai simpla, fara sa mai selectezi in ce parte sa apara poza, selectia facandu-se dupa ce poza apare in pagina.


Dupa ce poza apare in pagina, cu un clic pe ea se deschide o mica fereastra in care poti selecta in ce parte sa apara si cat de mare sa fie poza.

- Cu metoda Drag and Drop de asemenea poti modifica asezarea pozei in pagina.
- O alta modificare ar fi ca acum poza nu mai apare deasupra scrisului, trebuind apoi sa o tragi unde vrei, ci acum ea va apare acolo unde ati dat clic inainte de a o adauga.
- Daca in postarea noastra vrem sa punem mai multe poze, acum noul editor pastreaza toate imaginile in fereastra de adaugat poze, putand astfel sa vedem cate poze am pus sau sa adaugam din nou o poza daca vrem.


Adaugare video
Din cate vad eu se pare ca a disparut posibilitatea de a uploada fisiere video. Nu inteleg de ce, pentru ca in editorul vechi aceasta optiune este inca valabila.


O modificare a aparut in cazul in care adaugati un video prin metoda Embed. Aici dupa ce copiezi codul in Html, cand revii in varianta de scriere a editorului ai un preview al lui si dupa ce dai dublu-clic pe el poti sa-l redimensionezi si sa-l tragi unde vrei sa apara.




Previzualizati
Aceasta optiune ofera acum un preview al postari mai aprope de adevar, prin afisarea dimensiunii reale a latimii blogului

Bara de unelte
Si aici sunt cateva modificari.


- una dintre ele este posibilitatea de a face Undo si Redo.
- acum avem posibilitatea de a taia orice cuvant prin apasarea butonului ABC
- putem adauga o culoare de fundal pentru text
- si ultima optiune pe care o vad este posibilitatea de a elimina formatarea textului prin apasarea ultimului cuvant din bara.

Adauga un buton "Back to top" si "Go down" la blog

Pentru cei care scriu articole lungi ori au setat sa apara pe prima pagina multe postari, acest mic widget este un lucru foarte folositor. Acesta te ajuta sa ajungi la inceputul paginii sau la sfarsitul ei printr-un singur clic.


Mai demult va aratam cum sa puneti un astfel de widget dar cu un singur buton: Back to top. Consider ca acesta este mult mai folositor datorita celui de-al doilea buton care are functia de a te duce la sfarsitul paginii dintr-un singur clic.



Deci cine vrea sa puna acest widget pe blog trebuie sa urmeze urmatorii pasi:

1. Logati-va in contul vostru Blogger si urmati calea Aspect --> Editati Html.
Aici trebuie sa gasiti acest cod (este chiar la sfarsitul codului sablonului):

</body>

si chiar inaintea lui adaugati urmatorul cod:

<a name='jos'/>

2. Navigati la Aspect --> Elemente de pagina si apoi dati clic pe Adaugati un obiect gadget. Alegeti optiunea Html/JavaScript si in campul pentru continut adaugati urmatorul cod:

<a style="display:scroll;
position:fixed;
bottom:50px;
right:5px;
" href="#" title="Back to Top">
<img src="http://i25.tinypic.com/b7zxgz.jpg"/></a>

<a style="display:scroll;
position:fixed;
bottom:15px;
right:5px;
" href="#jos" title="Go Down">
<img src="http://i25.tinypic.com/1z5kal2.jpg"/></a>

Daca vreti sa modificati distanta la care apare widget-ul fata de partea de jos a ecranului modificati cifrele scrise cu verde in cod.
Daca vreti sa schimbati imaginile nu trebuie decat sa inlocuiti adresa imaginii din cod, scrisa cu rosu, cu adresa imaginii voastre.
 Daca vreti ca imaginile sa apara in partea stanga doar schimbati cuvantul right din cod cu left.
Descarcati un set de 7 imagini pe care il puteti folosii. Descarcati imginile, alegeti ce set vreti sa folositi si punetile pe hostul vostru (http://tinypic.com). Folositi apoi link-ul direct al imaginilor.

Acum Salvati si verificati daca functioneaza.



Succes!

miercuri, 26 august 2009

Optiune noua pe Blogger - Categorii sub forma de Tag Cloud (nori)




Pe 23 august Blogger a implinit 10 ani de cand s-a lansat. Cu aceasta ocazie au anuntat ca vor introduce o serie de noi optiuni pe blog.

Prima este chiar aceasta. Categorii sub forma de Tag Clouds. Acum nu mai trebuie sa alergam dupa diferite coduri, create de alte persoane, pentru a avea aceasta optiune pe blog. O putem face doar cu cateva clicuri din setarile Etichetelor. Pe langa faptul ca putem afisa categoriile sub forma de Nori, acum avem si optiunea de a selecta ce categorii sa afisam.

Acum fereastra pentru adaugarea etichetelor arata asa:


Daca vreti sa afisati etichetele sub forma de Tag Cloud nu trebuie decat sa bifati optiunea "Nori" si apoi sa Salvati. Categoriile vor deveni Tag Cloud.
Daca cumva nu merge, incercati sa eliminati etichetele si apoi sa le adaugati din nou, selectand de la inceput optiunea Nori.


Daca vreti sa selectati ce etichete sa apara, bifati optiunea Etichete selectate si apoi dati clic pe editati.


In fereastra nou deschisa bifati si debifati etichtele dupa cum vreti sa apara, apoi dati clic pe Terminat.



Nu va mai ramane decat sa Salvitati si gata, ati terminat.


Blogger promite in continuare noi optiuni pentru Blogger asa ca stati pe faza si nu uitati sa va abonati la feed-ul blogului.