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.

vineri, 21 august 2009

Widget Posturi asemanatoare cu thumbnails pe Blogger



Unul din cele mai cautate trucuri pentru Blogger ramane posibilitatea de a afisa la sfarsitul articolului un widget care sa afiseze articolele similare cu articolul citit. Acum catva timp va prezentam un widget cu posturi asemanatoare  care afiseaza link-uri din aceeasi categorie cu articolul citit.

joi, 20 august 2009

Adauga Yahoo Smiley in comentarii pe Blogger

Cu totii stim ce sunt figurinele Yahoo Smiley. Le folosim foarte des cand vorbim pe mess si de multe ori ele exprima mai bine o stare de spirit decat ar face-o niste cuvinte.

Ne-am dori sa le putem folosi si in blogul nostru, dar din pacate Blogger nu ne ofera aceasta posibilitate. Si totusi, am gasit pe acest blog un truc prin care putem sa ne folosim de ele cand scriem comentarii.



Pentru a ne folosi de ele trebuie sa modificam putin html-ul sablonului prin adaugarea a doua grupuri de coduri, iar apoi cand vom lasa un comentariu nu trebuie decat sa tastam codul fiecarei figurine, la fel ca pe mess, si dupa ce comentariul v-a fi publicat, in locul codului va apare figurina respectiva.

Dar sa trecem la adaugarea codului. In prima faza trebuie sa va duceti la Aspect --> Editati Html si sa salvati o copie a sablonului in calculator. Asta pentru ca daca ceva nu va merge cum trebuie sa puteti reveni la forma lui actuala.

1. Bifati casuta de extindere a sablonului si cautati (Ctrl+F) urmatoarele 2 linii de cod:

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

si chiar intre ele copiati urmatorul grup de coduri

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>





2. In  articolul trecut va spuneam cum sa va hostati singuri scripturile JavaScript din anumite trucuri pe care le folositi in sablon in diferite ocazii. Ei bine acum este o astfel de ocazie si daca urmati cele spuse de mine in articolul trecut veti beneficia singuri de latimea de banda a scriptului.

Acestea sunt site-urile unde va puteti hosta scipturile

SigMirror.com
Boxstr.com
HotLink Files

Deci salvati scriptul din codul de mai jos si hostati-l pe unul din aceste site-uri, iar apoi inlocuiti url-ul din cod cu url-ul codului vostru.
Mai puteti descarca codul si de aici.

Cautati aceast cod (Ctrl+F):

</body>

si inainte de el copiati urmatorul grup de coduri:

<!--SMILIES-->
<script src='http://sites.google.com/site/myfilesdan/smiley2.js
' type='text/javascript'></script>
<!--SMILIES-->


Cei care au comentariul autorului pe alt fundal si au urmat tutorialul meu de la aceasta pagina, trebuie sa introduca acest cod in locul codului de mai sus:

<!--SMILIES-->
<script src='http://sites.google.com/site/myfilesdan/smiley5.js' type='text/javascript'></script>
<!--SMILIES-->

22-01-2010 Am modificat din nou codurile. Acum ar trebui sa mearga.
Salvati si postati un comentariu de proba. E posibil ca figurinele sa nu apara imediat.

joi, 13 august 2009

Hostati-va singuri scripturile JavaScript

Dupa cum am vazut platforma de blogging Blogger nu ofera prea multe facilitati precum platforma Wordpress. Pentru a aduce Blogger la un stadiu cat mai apropiat de wordpress sau creat o gramada de trucuri care sunt bazate pe JavaScript-uri de cele mai multe ori. JavaScript este un limbaj de programare folosit mai ales pentru introducerea unor funcţionalităţi în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Acest cod poate fi salvat cu extensia  .js  si poate fi hostat pe un server, apoi folosindu-se link-ul direct.

Din pacate Blogger ofera hosting decat pentru imagini si fisiere video, asa ca ele trebuie hostate in alta parte.
Cei care creeaza aceste trucuri si implicit javascript-urile reusesc sa hosteze aceste scripturi pe hosturi gratuite, dar pana la un punct. Pentru ca hosturile ofera o latime de banda limitata, iar daca scriptul este unul foarte folosit si coroborat cu alte fisiere uploadate, pot duce la terminarea latimii de banda, facand astfel scripturile nefunctionale.

Pe internet sunt multe astfel de hosturi, dar aproape toate nu ofera un link direct catre fisiere, asa cum ne trebuie noua. Dar sunt si cateva care fac acest lucru.

Iata 3 site-uri unde va puteti hosta gratuit fisiere si primi inapoi un link direct catre fisier. Daca mai stiti si altele va rog sa lasati un comentariu si eu le voi trece aici.

SigMirror.com
- acest site ofera:

- 5gb of space
- Max file size 10mb
- 7gb of bandwidth
- Hotlinking allowed on all files (no more download timers!)
- No Image Watermarks
- Many file formats permitted
- Illegal/Pornographic content not allowed

Boxstr.com
- acest site ofera:

Storage Capacity: 5.0 GB
Max Upload per File: 1.0 GB
Daily Bandwidth: 1.0 GB


HotLink Files
- acest site ofera:

1 Gbspatiu de stocare
8 Gb Bandwidth pe luna
50 Mb marime fisier

Desi unele ofera upload si fara inregistrare cel mai bine este sa va creati un cont pentru a va putea gestiona usor fisierele.




Deci , atunci cand mai folositi un truc pentru blogger ganditi-va ca ati putea sa-l hostati singur si astfel sa beneficiati numai voi de el.
Tot ce trebuie sa faceti este sa gasiti in trucurile pe care vreti sa le folositi un url de forma
http://javascripthost/numescript.js , si sa-l copiati in bara de adrese a browser-ului. El se va deschide sub forma de text. Copiati textul intr-un fisier Notepad si apoi salvati-l cu extensia  .js

Acum nu va mai ramane decat sa uploadati script-ul pe unul din hosturile de mai sus, apoi sa inlocuiti link-ul din cod cu link-ul vostru.

Hover opacity effect pentru imagini in Blogger

Poate ati vazut pe multe bloguri Wordpress acest efect, dar nici o data pe Blogger. Acum lucru este posibil si pe Blogger datorita unui truc facut de Bloggerstop.
Pentru a va face o idee despre cum arata acest efect miscati mouse-ul deasupra imaginilor de mai jos.











Daca va place si vreti asa ceva pe blog iata ce trebuie sa faceti.
Urmati calea Aspect --> Editati Html si gasiti (Ctrl+F) acest cod:

</head>

Chiar inainte de el copiati codul de mai jos:

<!--Link-opacity-stars-->
<style type="text/css">


a.linkopacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}


a.linkopacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5; }


</style>
<!--Link-opacity-stop-->

Dupa ce ati adaugat codul salvati sablonul.
Acum de cate ori vreti ca o imagine postata de voi sa aiba acest efect trebuie sa modificati putin codul imaginii prin adaugarea urmatorului cod.

class="linkopacity"

Deci daca codul html obisnuit al unei imagini arata asa:

<a href="http://bloggerajutor.blogspot.com"><img
 style="border: 0px solid ; width: 125px; height: 125px;"
 alt="Totul despre Blogger"
 src="http://i29.tinypic.com/2lw0z0x.jpg"></a>

noi trebuie sa il facem sa arate asa:

<a class="linkopacity" href="http://bloggerajutor.blogspot.com"><img
 style="border: 0px solid ; width: 125px; height: 125px;"
 alt="Totul despre Blogger"
 src="http://i29.tinypic.com/2lw0z0x.jpg"></a>

Si asta e tot.

Cum sa adaugi 3 coloane in footer pe Blogger

Dupa cum stiti blogurile de pe Blogger sunt prevazute cu o singura coloana pentru footer, exceptie facand doar sabloanele care sunt modificate deja.
3 coloane in footer-ul sablonului aduce un plus de flexibilitate  in adaugarea continutului, mai ales daca aveti widget-uri care nu au o latime prea mare.


Acest truc este gasit aici (Create Three Column Footer in Blogger)


Aceasta metoda creeaza 3 noi coloane in footer lasand totusi intacta coloana pe care o aveti deja in footer. Din pacate gadget-urile deja existente vor fi afectate, dar modalitatea de a le pastra este urmatoarea:
Inainte de a umbla la html-ul sablonului duceti-va la Aspect --> Elemente de pagina si mutati toate gadgeturile din footer in sidebar, sau sub postare. Asta pana cand vom modifica footer-ul, apoi le veti putea muta din nou la loc.

Acum vom trece la modificarea sablonului. Urmati calea Aspect --> Editati Html si primul lucru pe care il veti face este sa salvati o copie a sablonului, in calculatorul vostru.
Lasati casuta pentru extinterea sablonului NEBIFATA.

Cautati urmatorul cod:

]]></b:skin>

si inainte de el copiati codul de mai jos.

#footer-column-container {
clear:both;
}


.footer-column {
padding: 10px;
}

Al doilea pas consta in gasirea urmatorului grup de coduri:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Codul va arata asa doar daca ati mutat gadget-urile din footer, sau daca nu aveati oricum nici un gadget adaugat.
Acum pentru a termina treaba inlocuiti aceasta linie:
<b:section class='footer' id='footer'/>
cu acest cod:

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

Previzualizati pentru a vedea daca va da vreo eroare si apoi salvati. Duceti-va la Elemente de pagina si veti vedea ca cele 3 coloane s-au format, nemaitrebuind decat adaugarea de continut in ele. Observati ca a ramas si coloana originala. In ea puteti la fel sa adaugati continut, sau puteti sa o lasati goala.






Daca vreti sa personalizati footer-ul nu trbuie decat sa adaugati definitii dupa acest cod:
#footer-column-container {
dar daca folositi si footer-ul original atunci trebuie sa il personalizati si pe acesta.

duminică, 9 august 2009

Navigatie cu numere la sfarsitul posturilor in Blogger

 Update 02 februarie 2010
Intrati aici - Navigatie cu numere in Blogger - corectata
Aici gasiti acest truc corectat si functioneaza perfect

Spre deosebire de stilul de navigatie deja existent cu "Postari mai vechi si Postari mai noi", navigarea cu numere ofera un cu totul alt stil de a te misca prin multitudinea de postari pe care le strange un blogger de-a lungul timpului. Din pacate Blogger nu ofera alta posibilitate decat cea amintita mai sus.

Bloggeri din toata lumea s-au chinuit sa creeze un sistem de navigare cu numere precum cel din Wordpress si se pare ca au reusit. Dar in momentul acesta daca cauti pe net acest truc pentru al instala in sablonul propriu cu greu vei gasi unul care sa mearga. Pentru ca multi au copiat codul dintr-o parte si l-au pus in alta parte cu mici modificari care pana la urma au facut codul sa nu mai mearga si sa cauti pana inebunesti dupa un cod care sa faca treaba.

Acum catva timp, dupa multe cautari am gasit un cod care instalat functioneaza destul de bine. Si spun destul de bine pentru ca el mai are cateva probleme la care din pacate nu am gasit nici o rezolvare. Din aceasta cauza nu am facut inca un tutorial despre el. Problema ar fi ca atunci cand dai clic pe Next sau pe numarul urmator, mai sunt posturi pe care le sare, sau posturi care au fost in pagina trecuta se regasesc si in pagina urmatoare.

Si pentru ca am fost intrebat de foarte multe ori cum se pune navigatia cu numere, cu toate ca nu merge foarte bine, m-am hotarat sa fac totusi un tutorial despre acest truc.Voi scrie aici tot ce stiu despre script si din pacate daca voi fi intrebat de eventualele erori nu voi putea sa ajut pe nimeni.

Trucul are 2 modalitati de instalare, una mai usoara si una mai grea. Le voi prezenta pe amandoua, ramanand la alegerea voastra pe care sa o folositi.




1. Adaugarea trucului cu ajutorul gadget-ului Html/JavaScript
(varianta care este si pe blogul meu si este preluata de pe blogul Page Navigation Menu)

Dupa cum cred ca ati banuit aceasta este metoda usoara de adaugare a trucului si pasii de adaugare sunt acestia:

a) Logati-va in contul vostru Blogger si urmati calea Aspect --> Elemente de pagina.
b) Dati clic pe Adaugati un obiect gadget in footer.
c) Alegeti optiunea Html/JavaScrpt si in campul pentru continut adaugati codul de mai jos:
Deoarece codul este foarte lung l-am pus intr-un fisier text.

Descarcati codul si adaugati-l in obiectul gadget.

d) Pentru a modifica numarul de posturi care vor aparea in urmatoarea pagina trebuie sa gasiti urmatoarea linie de cod

var pageCount=5;

si sa schimbati numarul 5 cu ce numar doriti.

e) Salvati obiectul gadget apoi trageti-l sub coloana de postare. (vedeti poza de mai jos)
f) Clic pe salvati si apoi verificati cum arata si cum se comporta.






2. Adaugarea trucului prin editarea Html-ului sablonului.
(metoda modificata de Amanda dupa varianta originala)

Desi este ceva mai greu de instalat, cred ca trucul functioneaza mai bine prin aceast aceasta metoda.  Deci daca alegeti aceasta varianta iata ce trebuie sa faceti:

a) Urmati calea Aspect --> Editati Html si primul lucru pe care trebuie sa-l faceti este sa salvati o copie a sablonului in calculator. Asta in caz ca ceva nu merge cum trebuie sa puteti reveni la forma lui initiala.
b) Lasati nebifata casuta care extinde sablonul.
c) Cautati urmatorul cod (folositi Ctrl+F)

]]></b:skin>

si inaitea lui adaugati codul de mai jos

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Acest cod adaugat reprezinta Css-ul codului JavaScript care va fi adaugat mai departe.
Cei care se pricep pot modifica aceasta parte pentru a arata asa cum isi doresc.

d) Mai departe vom adauga codul JavaScript.
Gasiti urmatorul grup de coduri:

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

si imediat dupa tagul de inchidere : </b:section>  adaugati codul de mai jos.

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = &#39;Previous&#39;;
var downPageWord = &#39;Next&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

e) Dupa ce ati adaugat acest cod dati clic pe Previzualizati, si desi nu veti vedea schimbarea in acest mod, veti sti daca ati adaugat codul cum trebuie.
f) Inainte de a salva sablonul aveti posibilitatea de a modifica numarul de posturi care vor apare pe fiecare pagina si numarul de link-uri care vor apare in meniul de navigatie.

var pageCount = 5;  - modifica numarul de posturi
var displayPageNum = 5;   - modifica numarul de link-uri.

g) Salvati.

marți, 4 august 2009

Comentarii numerotate pe Blogger

Daca esti pe Blogger si ai multe comentarii la posturi, cateodata e destul de greu sa te orientezi si sa gasesti comentariul pe care il cauti.  De aceea comentariile numerotate sunt una din solutiile care te pot ajuta.
Sau poate doar vrei ca comentariile tale sa arate altfel dar nu stii cum sa faci. Comentariile numerotate pot da un stil aparte paginii.
Truc by Numbering Comment Trick
In aceasta poza vedeti cum arata ele.



Daca vreti sa aveti comentarii numerotate trebuie sa editati html-ul sablonului prin adaugarea catorva coduri.

Conectati-va in contul vostru Blogger si urmati calea: 'Aspect --> Editati Html'.
Aici primul lucru pe care trebuie sa-l faceti este sa descarcati o copie a actualului sablon in calculator. Acest lucru ajuta in cazul in care ceva nu merge cum trebuie sa puteti reveni imediat la el.




Bifati casuta de langa 'Extindeţi şabloanele control'. Folositi combinatia de taste Ctrl+F si copiati in caseta de cautare urmatorul cod:  dl id='comments-block.

Veti gasi un grup de cod ca cel de mai jos sau asemanator. Diferenta de la un sablon la altul este destul de mica asa ca fiti un pic atenti si veti reusi sa gasiti codul. In grupul de cod gasit adaugati codurile scrise cu rosu asa cum vedeti mai jos .

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number' style='float: right; font-size: 20px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>

Puteti modifica marimea fontului prin inlocuirea numarului 20 cu un numar care credeti ca va arata bine in blogul vostru. Salvati si daca va place cum arata va puteti opri aici.

Daca vreti sa arate altfel trebuie sa adaugam un cod CSS care sa il faca sa arate ca in poza de mai jos.



Pentru al face sa arate asa gasiti codul de mai jos

]]></b:skin>

si inainte de el copiati urmatorul cod:

/*begin Css code for number comment number*/
.comment-number {
float: right;
background: url(http://2.bp.blogspot.com/-V5pDWwRoI2Q/Tg7-popdnQI/AAAAAAAANyk/yLbDBII3vVo/s1600/norisori.png) no-repeat;
width:53px;
height:53px;
padding:5px 0 0 0;
margin-right: 5px;
margin-top: -20px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

/*since the numbers are actually links, we need to force the color properties*/

.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}
/*end Css code for number comment number*/

 Salvati si vedeti cum arata.
Daca aveti probleme cu pozitia lor modificati urmatoarele coduri pana cand va convine cum arata.

margin-right: 5px;
margin-top: -20px;

sâmbătă, 1 august 2009

Widget cu Top comentatori cu backlinks pentru Blogger

Cu ceva timp in urma am prezentat un widget care arata un clasament al celor mai buni comentatori pe blog. Acel widget afisa in sidebar un top al celor mai buni comentatori si link catre fiecare comentariu.

Widget creat de Top Commentator Widget for Blogger with Backlinks

Astazi va voi arata un widget asemanator, care foloseste aceeasi metoda de a obtine topul, dar numele comentatorilor care apar in sidebar au link catre propriu lor blog. Pentru ca link-ul sa duca catre blogul lor este necesar ca cei care comenteaza sa aleaga varianta Nume/Adresa URL, si nu varianta cu profilul lor pe Blogger pentru ca comentand astfel widget-ul va arata un link catre profilul lor .

Un link catre blogul lor in sidebarul unui blog cu siguranta va face vizitatorii care au un blog sa comenteze mai des pe blogul vostru, asa ca acest widget este o foarte buna metoda de a face oamenii sa comenteze.




Deci, daca vreti sa puneti acest widget pe blogul vostru nu trebuie decat sa adaugati codul de mai jos intr-un gadget html/javascript. Pentru a face asta trebuie sa va logati in contul vostru Blogger - blogspot si sa urmati calea 'Aspect --> Elemente de pagina', aici dati clic pe 'Adaugati un obiect gadget' si din pagina deschisa alegeti optiunea Html/JavaScript. Dati un titlu gadget-ului iar in campul pentru continut adaugati codul de mai jos.

Atentie:
Nu uitati sa inlocuiti adresa blogului meu cu a blogului vostru, si Nu folositi http:// sau www.
Numarul 10 din cod scris cu verde este numarul de nume care vor aparea in widget. Schimbati-l cu ce numar vreti voi.
Cuvantul Anonim din cod este numele care nu v-a apare in widget. Deci daca vreti ca un nume de comentator sa nu apara in widget doar inlocuiti Anonim cu ce nume doriti, sau daca vreti ca numele vostru sa nu apara acolo inlocuiti-l cu numele vostru cu care va semnati in comentarii.

<script type="text/javascript">
function pipeCallback(obj) {
 document.write('<ol>');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2Fbloggerajutor.blogspot.com&number=10&Nametobeexcluded=Anonim" type="text/javascript"></script>

Acum doar salvati gadgetul si sa vedeti cum arata pe blog.