joi, 30 iulie 2009

Pune un widget cu cele mai populare posturi pe Blogger

In utima vreme am fost intrebat tot mai des daca stiu vreun widget care sa afiseze cele mai populare posturi din blog. Cautand pe net am gasit o gramada de astfel de widget-uri, dar din pacate majoritatea nu functionau.

Totusi am gasit si un widget care merge. El arata ca in poza de mai jos iar aici este blogul autorului. BloggerStop.net



Acest widget se bazeaza pe un Javascript care cu ajutorul Yahoo Pipes gaseste numarul de comentarii pe care le are un post apoi afisandu-le in acest widget in ordine descrescatoare.

Pentru a adauga acest widget pe blogul vostru blogspot nu trebuie decat sa adaugati un cod intr-un gadget html/javascript. Deci urmati calea 'Aspect --> Elemente de pagina' si apoi dati clic pe 'Adauga un obiect gadget'. Din lista care apare alegeti optiunea 'Html/JavaScript'  si copiati codul de mai jos in campul pentru continut.

Inainte de a va arata codul vreau sa va spun ca sunt doua metode de a afisa link-urile catre postare si deci tot 2 coduri care sa produca cele 2 tipuri de widget-uri. Puteti alege metoda care vreti.

Important:
Nu uitati sa schimbati adresa blogului meu cu a voastra.
Nu folositi http://.
Numarul scris cu verde este numarul de link-uri care vor aparea in widget si il puteti modifica dupa cum doriti.
Acest cod creaza fundalul widget-ului:

background-color:#FFFFFF;

modificati-l cum doriti pentru a arata bine in blogul vostru.

Daca vreti ca link-urile sa arate asa:

  • Cea mai comentata postare (28)
  • A doua postare (21)
  • A trea postare (12)
copiati codul de mai jos.

<div style="background-color:#FFFFFF;padding:5px;">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
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('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2Fbloggerajutor.blogspot.com&num=10" type="text/javascript"></script>
</div>


Daca vreti ca link-urile voastre sa arate asa

  • Cea mai comentata postare
  • A doua postare
  • A trea postare

copiati acest cod:

<div style="background-color:#FFFFFF;padding:5px;">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
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=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2Fbloggerajutor.blogspot.com&num=10" type="text/javascript"></script>
</div>



vineri, 24 iulie 2009

Widget cu Social Bookmarks dupa fiecare postare pe Blogger

De ceva timp am observat ca site-urile de social bookmarks gen Digg.com, Twitter.com, Reddit.com, Delicious.com si alte cateva au inceput sa fie folosite tot mai des si de bloggerii din Romania. E adevarat ca blogurile in limba romana nu au asa de multe avantaje ca blogurile scrise in engleza, dar dupa cate am observat pe un alt blog al meu, bookmark-uri se fac si la posturi in romana. Acum depinde cat de bine sunt scrise si posturile pentru ca numai calitatea lor pot face un vizitator sa salveze un articol, sau sa-l trimita spre votare pe site-uri precum Digg.



Widget creat de Social bookmarking widget

Si ca sa nu mai lungim vorba, iata ce trebuie sa faceti pentru a pune acest widget pe blogul vostru Blogger - Blogspot:

1. Conectati-va in contul vostru Blogger si urmati calea Aspect --> Editati Html. Aici primul lucru pe care trebuie sa il faceti este de a salva o copie a sablonului in calculator, pentru ca daca ceva nu v-a merge cum trebuie sa puteti reveni  la forma lui actuala.

Bifati casuta care extinte sablonul, si cautati (Ctrl+F) codul : </head> si imediat dupa el adaugati urmatorul cod:

<script src='http://files.bloggerplugins.org/simpletricks.js'></script>




2. Dupa ce am incheiat pasul 1 trebuie sa adaugam si cel de-al doilea cod.
Puteti adauga codul dupa una din cele 3 linii de cod de mai jos:

<div class='post-footer-line post-footer-line-1'>
cod aici

<div class='post-footer-line post-footer-line-2'>
sau aici

<p class='post-footer-line post-footer-line-3'>
sau aici

Vedeti unde arata mai bine.

Download cod

Acum previzualizati si daca sub post se vad iconitele de la widget inseamna ca ati reusit. Salvati sablonul si incercati widget-ul.


miercuri, 22 iulie 2009

Instaleaza Read more automat, cu poza, pe Blogger

Daca sunteti un blogger care scrie articole lungi atunci cu siguranta v-ati dori ca posturile care apar pe prima pagina a blogului sa fie prezentate doar sub forma unui sumar de cateva randuri lungime si cu un link spre articolul integral.
 Dupa cum stiti, pe Wordpress exista aceasta posibilitate, insa Blogger nu s-a ocupat deocamdata de aceasta optiune. Si daca va intereseaza asa ceva si ati cautat deja un truc care sa faca posibil lucrul acesta si pe Blogger, ati vazut cu siguranta ca sunt prezentate o gramada de astfel de trucuri pe internet. Unul mai diferit decat altul.

Adauga si celelalte gadget-uri oferite de Blogger


Astazi mi-am cumparat pesti; dati clic pe acvariul meu de mai jos sau in sidebar daca mai este instalat pentru a hrani pestii.
Era o gluma evident, ca nu i-am cumparat ci mi i-a dat Blogger. Pai sa vedeti cum am reusit sa fac asta. Astazi ma uitam pe Blogger in draft sa vad daca au mai scos baietii astia vreun gadget nou si cum la Elemente de baza nu era nimic nou, am zis sa ma uit si la celelalte.





De obicei nu prea se uita lumea pe la ele, asa cum nici eu nu prea o fac, dar cand am intrat am gasit alte cateva gadget-uri destul de intertesante si usor de adaugat in sidebar precum cele de baza.

De exemplu la categoria "Prezentat"  gasim 4 widget-uri create de Blogger Buster, care va da posibilitatea sa adaugati in sidebar widget-uri cu Recent PostsTwitter Updates, Recent Comments, sau Picasa Photostream. Toate cele 4 widget-uri sunt usor de adaugat si foarte usor de personalizat.

La categoria "Mai multe gadgeturi" am mai remarcat pe a doua pagina widget-ul "Recent Posts"  creat de Blogger Widgets, care pe langa titlul postarii poti adauga si un sumar al articolului, poti adauga numarul de comentarii la posturi si chiar poti seta sa afiseze poza din post in format mic (thumbnails).

Ar mai fi un calendar de adaugat, un countdown si desigur widget-ul cu pestii. Acesta mi s-a parut foarte dragut, mai ales ca eu sunt fan al aplicatiilor in flash. Acest widget te lasa sa alegi pana la 10 pesti de orice culoare doresti si te lasa sa pui orice poza drept fundal.

Cam astea ar fi cele mai interesante gadget-uri pe care Blogger ni le ofera, dar noi nu prea stim de ele.

Cum sa importati blogul de pe Wordpress pe Blogger, si invers

Daca ai un blog gratuit hostat pe Wordpress.com si bazat pe platforma de blogging Wordpress si vrei sa te muti pe Blogger nu exista nici o solutie pusa la dispozitie de cele 2 platforme. Wordpress ofera o posibilitate de a exporta blogul, dar fisierul XML pe care il produce nu este compatibil cu fisierul care trebuie importat pe Blogger.

Exista totusi o solutie si anume de convertire a fisierului produs de Wordpress pentru a putea fi incarcat pe Blogger. Exista un site care poate face conversia pentru tine.

Important
Acest site va face conversia pentru fisiere cu o marime maxima de 1 MB, asta inseamna ca nu toate blogurile vor putea fi convertite ci numai blogurile mai mici ca numar de posturi. Ca sa va faceti o idee, blogul importat de mine are 19 posturi medii ca lungime si 40 de comentarii, iar Wordpress a exportat un fisier cu o marime de 110 KB, iar dupa ce site-ul a convertit-o a adus-o la marimea de 74 KB.

Dar haideti sa vedem care ar fi pasii pe care trebuie sa ii urmati:
1. Conecteaza-te in contul tau de pe Wordpress.com si dute la "Panoul de control" al blogului pe care vrei sa-l exporti. Aici cauta tabul "Unelte' (este pe partea stanga, al treilea tab de jos in sus) si dati clic pe functia "Export".
Se va deschide o noua pagina unde vei avea posibilitatea sa alegi posturile carui autor vrei sa le descarci. Daca vrei sa le descarci pe toate atunci lasa optiunea toti autorii selectata si da clic pe butonul "Downloadeaza fisierul de export". Salveaza fisierul XML intr-un folder la indemana pentru a fi usor gasit.

2. Dute pe site-ul wordpress2blogger.appspot.com si dati clic pe butonul "Choose" pentru a selecta fisierul descarcat de pe Wordpress. Selecteaza fisierul si da clic pe "Convert" apoi salveaza fisierul convertit pentru Blogger intr-o locatie la indemana.




3. Acum dute la Blogger.com si daca nu ai cont fa-ti unul gratuit urmand tutorialul de aici. Daca ai deja un cont atunci conecteaza-te si dute la blogul pe care vrei sa-ti publici posturile de pe Wordpress.com.
 Clic pe tabul Setari, apoi pe Elementar. La "Instrumente pentru blog"   alegeti optiunea "Importaţi blogul". In pagina nou deschisa alegeti fisierul convertit si daca vreti ca posturile importate sa fie publicate automat bifeaza si optiunea "Publică automat toate postările importate".
Apoi dati clic pe "Importati Blogul" si toate articolele si comentariile vor fi publicate automat cu data la care au fost scrise si in categoriile originale, care au fost si ele importate.

Am observat ca pozele apar si ele in posturile unde au fost publicate, dar au ramas hostate tot pe Wordpress, asa ca ar fi bine sa nu va stergeti blogul cel vechi sau sa va stergeti contul pentru ca s-ar putea sa ramaneti fara ele.

Update: Tot acest site iti da posibilitatea sa convertesti fisierele si invers, adica fisierul cu posturile de pe Blogger pentru a putea fi importat pe Wordpress.Pentre a face asta urmati pasii invers:
1. Pe Blogger in loc de Importati alegeti Exportati si salvati fisierul.
2. Va duceti aici si alegeti fisierul salvat de pe blogger apoi convertiti si salvati.
3. Pe Wordpress, de pe aceeasi pagina de unde se face exportarea fisierelor se face si importarea.

Daca aveti nelamuriri nu ezitati sa ma intrebati.

marți, 21 iulie 2009

Cum sa modifici fundalul la sabloane pe Blogger

In acest acest tutorial as vrea sa va arat cum sa modificati culorile de fundal sau adaugarea de imagini la elementele unui sablon.
Priviti-l ca o continuare la celelalte 2 tutoriale despre cum sa creezi un sablon cu 3 coloane si cum sa creezi un sablon cu 3 coloane - varianta 2
Vom lucra din nou pe sablonul default de la Blogger si anume sablonul Minima. Pentru un aspect mai placut al sablonului vom modifica putin dimensiunile pe care le are acest sablon, dar vom ramane tot la un sablon cu 2 coloane (sidebar dreapta)

Sa zicem ca vrem ca sablonul nostru sa aiba corpul de 815 pixeli, cu o coloana de postare de 550 pixeli si un sidebar de 250 pixeli.

Pentru asta vom cauta urmatoarele coduri:

#header-wrapper {
#outer-wrapper {
#footer {

iar sub ele vom gasi aceasta linie: 

width: 660px;

modifica pe 660 cu 815 si astfel vom mari corpul sablonului, latimea header-ului si a footer-ului.

In acest moment daca previzualizati veti vedea ca latimea corpului sablonului a crescut dar coloana de postare si sidebar-ul au ramas la aceeasi dimensiune. Pentru a rezolva asta trebuie sa marim cele 2 elemente ale sablonului.

Pentru a mari coloana de postare (main-wrapper) cautati aceste coduri:

#main-wrapper {
  width: 410px;

si modifica pe 410 cu 565.

Pentru a mari latimea sidebar-ului cautati aceste coduri:

#sidebar-wrapper {
  width: 220px;

si modifica pe 220 cu 250.

Acum avem cele 2 elemente care adunate latimile ne da 815, exact cat ne doream. Dar daca previzualizati sablonul veti vedea ca cele 2 coloane sunt lipite una de alta. Pentru a rezolva si asta vom adauga o distanta de 15 pixeli intre ele.

Cautati acest cod:

#main-wrapper {

si imediat sub el adaugati aceasta linie

margin-right: 15px;

Previzualizati si vedeti ca sidebarul a cazut sub coloana de postare din cauza celor 15 pixeli adaugati. Aceasta problema o vom rezolva prin gasirea codului

#main-wrapper {

si putin mai jos prin gasirea codului care defineste latimea coloanei de postare

width: 565px;

modificati pe 565 cu 550.

Previzualizati si vedeti ca sidebar-ul a revenit pe pozitie. Acum sablonul nostru arata exact asa cum ne doream.



Dupa ce am adus corpul sablonului (#outer-wrapper) la latimea de 815 pixeli observam ca in stanga si dreapta avem ramasa o portiune nefolosita. Aceste portiuni plus tot spatiul de sub outer-wrapper formeaza fundalul (background-ul) sablonului. Acesta are o latime de 1024 pixeli.
Fundalul sablonului este dat de aceasta definitie:

body {
  background:$bgcolor;

in care body { reprezinta tot fundalul sablonului si este trecut in codul de mai sus pentru a sti ce sa cautati, iar background:$bgcolor; reprezinta codul care produce fundalul si de care ne vom ocupa in continuare.

La inceputul sablonului veti gasi acest text: /* Variable definitions iar sub el se afla toate codurile unde se pot modifica toate elementele care se pot schimba si din pagina "Fonturi si culori" , adica fundalul sablonului, culoarea textului, a link-ului, marimea fontului etc.

De exemplu pentru a modifica fundalul fara a umbla la definitia pe care am aratat-o mai sus, puteti modifica aici unde este scris cu rosu:

<Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">


Si apoi fiecare linie de genul asta aplica cate o schimbare elementelor de care aminteam mai sus.

Am vazut ca pentru a modifica fundalul sablonului nu trebuie sa umblam la definitia pe care o are primita in portiunea body { a sablonului. Dar daca totusi dorim asta atunci modificarea va arata asa:

body {
  background: #857553;

Acum sablonul nostru v-a arata ca in poza de mai jos.



Puneti o poza ca fundal

Dar ce se intampla daca vreti sa puneti o poza drept fundal pentru blog. Pai sa zicem ca sunteti fan Batman si aveti un wallpapers care ar arata super drept fundal. In prima faza trebuie sa va hostati poza pe un host care va pune la dispozitie un link direct catre poza. Dupa ce aveti link-ul pozei ne intoarcem la editarea sablonului. Aici va recomand un program micut care recunoaste orice culoare (vezi aici cum functioneaza Pixie) si cu ajutorul lui eu am aflat ca partea de jos a pozei este negru perfect. Asta ma ajuta pentru ca vreau ca poza pusa ca fundal sa nu se repete pe toata lungimea sablonului, ci sa fie afisata decat odata.

Deci voi inlocui acest cod:

body {
  background:$bgcolor;

cu acesta

body {
  background:#000000 url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmTvJPc2sCI/AAAAAAAAJ3M/a8SECdge7Zo/s1600/Dark_Knight6.JPG') no-repeat;

Daca previzualizati veti vedea ca fundalul sablonului este chiar poza noastra, dar daca derulam pagina , mai jos vedem ca fundalul este negru. Asta se intampla pentru ca pe langa faptul ca am pus o poza drept fundal, am pus si o culoare (#000000 - negru) care sa continue ca fundal sub poza.



Daca totusi vreti ca poza sa se repete doar pe lungime atunci codul va arata asa:

body {
  background:#000000 url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmTvJPc2sCI/AAAAAAAAJ3M/a8SECdge7Zo/s1600/Dark_Knight6.JPG') repeat-y;

Previzualizati si vedeti ca poza se repeta la infinit, oricat de lung ar fi sablonul nostru. Observati ca am pastrat si culoarea pentru fundal; asta pentru ca poza ar putea fi mai mica de 1024 si atunci ar ramane spatiu neocupat. Acum ce va ramane de facut este sa modificati si culorile textului.

Ar mai fi si varianta in care nu vreti ca poza sa se deruleze odata cu celelalte parti ale sablonului, adica sa ramana in permanenta pe ecran chiar daca vizitatorul face scroul pentru a citi textul;

atunci codul va arata asa:

body {
  background:#000000 url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmTvJPc2sCI/AAAAAAAAJ3M/a8SECdge7Zo/s1600/Dark_Knight6.JPG') no-repeat;
  background-attachment:fixed;

Salvati sablonul si veti vedea ca acum poza voastra ramane fixa pe ecran

Sa cautam pe Google cuvintele "web backgrounds" si vom da peste un site care ofera gratuit o gramada de fundaluri pe care le puteti folosi. Daca vreti sa le folositi copiati unul in calculator si apoi hostati-l pe un host gratuit care va ofera link direct catre poza.



Dupa cum vedeti poza noastra este foarte mica si nu acopera tot fundalul sablonului. Nu este nici o problema pentru ca fiind o poza special creata pentru fundaluri ea se poate repeta si pe latime si pe lungime facand un tot unitar. Asta se poate realiza astfel:

body {
  background: url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmVaIp63xOI/AAAAAAAAJ3U/tx7kbempyK0/s1600/brown003.jpg');

Previzualizati si vedti ca poza noastra a acoperit tot fundalul. Daca analizam acest cod vedem ca am eliminat culoarea pentru fundal deoarece nu mai avem nevoie de ea, poza ocupand absolut toate spatiile din fundal. Am scos si functia de no-repeat si am lasat setarea implicita a codului care este de a se repeta si pe latime si pe lungime. Din nou ce va ramane sa faceti este sa schimbati culoarea textului.

O alta varianta pe care o voi prezenta este repetarea pe latimea blogului.
Tot pe site-ul pe care l-am gasit pe Google avem posibilitatea de a crea un fundal gradient, adica vom pleca de la o culoare si vom ajunge la alta. Vom avea deci pe fundalul sablonului 2 culori.

Aceste culori este bine sa nu fie prea diferite pentru ca textul sa poata fi citit pe ambele culori.

Intrati aici pe site-ul gasit si la pasul 1 bifati "Vertical", la pasul 2 puneti valoarea 500, iar la pasul 3 vom alege culorile fundalului. Le puteti alege pe care doriti din tabel, dar eu am ales un portocaliu (#ffeecc) la culoarea de sus si am lasat albu (#ffffff) la culoarea de jos. Derulati mai jos si dati clic pe "Make the Gradient Texture". In pagina deschisa va arata o montra de cum va arata fundalul vostru. Derulati un pic mai jos pana la "Instructions" si dati clic la punctul 1 pe "the texture". Se va deschide o noua pagina cu fundalul nostru si dupa cum vedeti este doar un firicel de culoare care trece de la portocaliu la albu.
Dati clic pe imagine pentru a mari.



Salvati poza si hostati-o pe hostul vostru. Acum dupa ce avem link-ul pozei vom merge la editarea sablonului si vom modifica codul fundalului astfel:

body {
  background:#ffffff url('http://3.bp.blogspot.com/_i6co2fwMbTo/SmVk8nZ1PiI/AAAAAAAAJ3c/gM2CpfZuL88/s1600/gradient81043431.png') repeat-x;

Previzualizati si vedeti ca fundalul nostru este acum in 2 culori, incepand de la portocaliu si pierzindu-se in alb. Analizand codul nostru vom vedea ca din nou avem o culoare ca fundal si anume albul care formeaza fundalul dupa ce se termina poza. Apoi observati ca dupa url-ul imaginii am pus functia de repeat-x. Aceasta face ca poza noastra subtire sa se repete pe toata latimea sablonului oricat de mare ar fi ea.

Ultima varianta pe care v-o prezint este repetarea pe lungime a unei poze foarte ingusta. Am gasit pe acest site un fundal care da impresia de
agenda sau cam asa ceva.
Clic pe imagine pentru a mari.



Cu aceasta poza codul nostru va arata asa:

body {
  background: url('http://2.bp.blogspot.com/_i6co2fwMbTo/SmVpBaLVDtI/AAAAAAAAJ3k/JKONhmfjr-w/s1600/bordb2.gif') repeat-y;

Previzualizati si vedeti in partea stanga efectul de agenda si faptul ca poza se repeta pe toata lungimea sablonului. Acest lucru se datoreaza functiei de "repeat-y" pe care i-am dat-o fundalului.

Ce v-am aratat eu aici sunt doar cateva metode a aplica un fundal nou unui sablon blogspot, dar se pot face o gramada de alte lucruri, depinde de cat de mult Css inveti si de imaginatia pe care o ai.

Aceste metode pe care le-am aratat mai sus in cazul fundalului sablonului, se pot aplica si celorlalte elemente ale sablonului.
De exemplu daca vreti sa schimbati numai fundalul corpului sablonului (outer-wrapper) si sa zicem ca avem un fundal pe negru pentru intreg sablonul, dar vrem ca corpul sa fie alb atunci cautam urmatorul cod:

#outer-wrapper {

si imediat dupa el adaugam urmatorul cod:

background: #ffffff;



Daca previzualizati vedeti ca partea in care sunt incluse elementele sablonului este alba. Dar nu suntem multumiti doar cu atat si vrem ca, coloana de postare sa fie bleo, atunci cautati codul:

#main-wrapper {

si imediat dupa el adaugati acest cod:

background: #D6E7FF;

Daca vreti sa folositi o imagine o puteti face dupa metodele aratate mai sus. La fel puteti proceda si cu sidebar-urile (adauga-ti codul dupa #sidebar-wrapper { ) sau cu footer-ul (adaugati codul dupa #footer { ).


Aplicati un fundal pentru Header
In cazul header-ului (header-wrapper) puteti la fel de bine aplica metodele aratate in cazul celorlalte elemente aplicand codul pentru fundal dupa acest cod #header-wrapper {, dar totusi header-ul este un pic mai special pentru ca acolo multi prefera sa puna o poza personalizata, care sa reflecte un pic si continutul din blog.

Dar haideti sa vedem cum facem. Dupa cum stim avem un sablon cu latimea de 815 pixeli, si pentru a nu arata ciudat am marit si header-ul la aceeasi dimensiune. Acum pentru a adauga o imagine ar fi bine sa adaugam si un height (o latime pentru header). Deci haideti sa facem un header cu: width: 815 si height 200. Codul pentru width il avem deja adaugat, mai ramane sa adaugam codul pentru height.

Gasiti codul :

#header-wrapper {

si imediat sub el adaugati

height: 200px;

Dupa cum vedeti header-ul nostru sa marit dar avem 2 randuri de borduri si vrem sa le stergem.
Un pic mai jos de #header-wrapper { gasim acest cod:

border:1px solid $bordercolor;

Pentru sterge bordura exterioara a header-ului fie stergeti toata linia, fie schimbati pe 1 cu zero.
Dupa ce am rezolvat cu bordura exterioara trebuie sa o stergem si pe cea interioara.

Cautati codul:

#header {

si putin mai jos veti gasi acest cod:

border: 1px solid $bordercolor;

Procedati ca mai sus.

Acum daca previzualizati veti vedea ca nu mai avem nici o bordura si este timpul sa adaugam poza noastra. Am gasit pentru blogul nostru un header cu dimensiunile care ne trebuiau.



Deci dupa ce faceti rost de un astfel de banner, hostati-l undeva si cu link-ul obtinut vom face codul pentru header
Cautati codul:

#header-wrapper {

si imediat dupa el adaugati urmatorul cod care trebuie sa cuprinda link-ul spre poza voastra:

background: url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmV9XaSAVHI/AAAAAAAAJ3s/GeN9W3qXGyk/s1600/Coffee_Cup_Newspaper.jpg') no-repeat;

Previzualizati si vedeti ca poza noastra a aparut pe pozitie.

Observati ca avem totusi o mica problema si asta din cauza ca outer-wrapper-ul sablonului are si el un padding de 10 pixeli care inconjoara tot corpul blogului. Daca vreti sa scapati de acei 10 pixeli, tot ce trebuie sa faceti este sa gasiti urmatorul cod:

#outer-wrapper {

si putin mai jos veti gasii aceasta linie:

padding:10px;

Stergeti aceasta linie sau schimbati pe 10 cu zero.



si gata ca a iesit un tutorial super lung. Succes si daca mai aveti si alte intrebari nu ezitati sa ma intrebati.

Pixie - Program care te ajuta sa alegi culorile

As vrea sa va prezint un mic programel care vă va ajuta in munca voastra de a crea sabloane blogger. De multe ori cand fac un sablon totul merge struna pana cand ajung la culori. Aici chiar imi este de folos Pixie, ca asa se cheama programul si il puteti descarca de aici. Pixie te ajuta sa copiezi codul html al oricarei culori o gasiti pe ecranul calculatorului, indiferent ca sunteti pe net sau doar va uitati la desktop.
Dar sa vedem cum functioneaza acest program


In primul rand atunci cand il porniti se descide o mica fereastra la fel ca in poza care sta activa pe ecran pana cand o opriti.

In al doilea rand cand miscati mouse-ul el indica orice culoare peste care mouse-ul trece, afisand codul Htlm al culorii, codul HEX si codul RGB.

In al treilea rand atunci cand gasiti o culoare care va place si vreti sa o folositi este de ajuns sa pozitionati mouse-ul asupra ei, Pixie aratand si culoarea la care v-ati oprit, si sa apasati combinatia de taste Ctrl+Alt+C pentru a copia codul Html al culorii apoi cu un simplu Paste lipiti codul acolo unde doriti.




La fel puteti proceda cu orice culoare pe care vreti sa o folositi.
Atentie: Pixie copiaza doar partea formata din cifre si litere, voi trebuind sa adaugati in fata lor simbolul # (diez)

luni, 20 iulie 2009

Creaza sablon cu 3 coloane pentru Blogger - varianta 2

Dupa cum am vazut in primul tutorial pe care l-am scris despre cum sa faci un sablon cu 3 coloane pe Blogger, ne-am folosit de un sablon default pe care blogspot ni-l pune la dispozitie si anume Minima. Atunci am vazut cum sa faci un sablon cu coloana de postare pe mijloc si 2 sidebar-uri laterale, unul stanga si unul dreapta.

Astazi vom vedea cum sa facem un sablon cu coloana de postare in stanga si 2 sidebar-uri in dreapta. Vom ajunge la un sablon precum il vedeti in poza de mai jos.



Pentru cei care au deja un blog cu sablonul Minima instalat si vor sa-l modifice ar fi bine sa salveze o copie a acestuia in calculator, pentru ca in cazul in care ceva nu merge cum trebuie sa puteti reveni la el. Eu va recomand sa va faceti un blog test pe care sa incercati acest experiment.

Si pentru ca deja am vorbit despre aceasta modificare in celalalt articol, de data aceasta voi trece direct la subiect.

Duceti-va la pagina "Editati Html" si lasa-ti nebifata casuta cu "Extindeţi şabloanele control" . Dupa cum ati vazut deja, Minima are o latime de 660 pixeli. Noi trebuie sa ajungem la o latime de 970 pixeli pentru a face loc si celui de-al doilea sidebar.

Cautati (Ctrl+F) aceasta linie de cod :

#outer-wrapper {

si imediat sub ea veti gasi acest cod:

width: 660px;
Pentru a mari latimea corpului sablonului schimbati pe 660 cu 970.

Acum vom aduce si Header-ul si Footer-ul la aceeasi dimensiune. Cauta urmatoarele coduri:

#header-wrapper {
si
#footer {

imediat sub fiecare dintre ele vom gasii urmatoarea linie:

width:660px;

schimbati pe 660 cu 970. Aceasta modificare a latit cele 2 elemente ale sablonului. Previzualizati sablonul. Observati cat de mult sa latit sablonul nostru, dandu-ne astfel posibilitatea sa introducem un al doilea sidebar.

Pentru a crea al doilea sidebar trebuie sa urmam acesti pasi:

Cauta acest grup de cod:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Selecteaza tot codul, da-i un Copy si apoi Paste imediat sub el. Deci practic copiem inca o data sidebar-ul existent pentru a crea prima parte a celui de-al doilea sidebar.
Dupa cum am vazut in celalalt articol, sidebar-urile trebuie sa aibe o denumire unica, asa ca vom modifica aceasta parte:

    #sidebar-wrapper {

cu aceasta

    #sidebar2-wrapper {

si pentru ca acest nou sidebar sa fie la mijloc intre coloana de postare si primul sidebar vom

modifica si aceata parte:

    float: $endSide;

cu aceasta:

    float: $startSide;
Acum pentru a termina al doilea sidebar si al face vizibil trebuie sa gasiti acest grup de cod:

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postări de blog' type='Blog'/>
</b:section>
      </div>

si imediat dupa el sa adaugati urmatorul cod:

<div id='sidebar2-wrapper'>
        <b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
      </div>

Acest cod adaugat reprezinta identitatea celui de-al doilea sidebar si dupa cum vedeti are denumirea "sidebar2" la fel cum am schimbat si mai sus.Acum este momentul sa salvati sablonul si daca nu aveti nici o eroare inseamna ca totul a decurs cum trebuie. Duceti-va la "Elemente de pagina" si veti vedea ca al doilea sidebar este definit dar nu are nici un obiect gadget in el. Pentru cei care au alte gadgeturi instalate in celalat sidebar puteti sa mutati cateva si in cel format nou. Daca nu aveti alte gadget-uri puteti adauga unele noi sub forma de text. Aici gasiti text care nu inseamna nimic dar care se aseaza foarte bine in coloane astfel observand mai bine ce se intampla cand editam sablonul.



Daca priviti acum blogul vostru vedeti ca avem 3 coloane dar cu latimi care in total  nu au latimea corpului sablonului. Pentru asta trebuie sa mergem din nou la "Editati Html" si sa marim coloana de postare si cele 2 sidebar-uri.

In acest moment avem doua sidebar-uri cu o latime totala de 440 pixeli. Ne raman 530 de pixeli pentru coloana principala. Cautati urmatorul cod:

    #main-wrapper {

si imediat sub el veti gasi width: 410px; schimbati valoarea 410 cu 530.

In acest moment suma latimilor celor 3 elemente a ajuns la latimea corpului sablonului, dar dupa cum vedeti coloanele sunt lipite una de alta. Asa cum am facut si la sablonul cu sidebar-uri pe laterale si aici vom adauga o bordura in jurul celor 3 elemente.

Deci cautati in aceasta ordine urmatoarele linii de cod:

    #main-wrapper {
    #sidebar-wrapper {
    #sidebar2-wrapper {

si dupa fiecare dintre ele adaugati urmatoarea linie:

    border: 1px solid #000000;

Daca previzualizati veti vedea ca sidebar-ul din dreapta a cazut in jos si asta din cauza ca am adaugat bordura de 1 pixel in jurul fiecarui element. Pentru a face sidebarul sa revina pe pozitie trebuie sa scadem din coloana de postare 6 pixeli.

Cautati codul

    #main-wrapper {

si sub el gasiti width: 530px; modificati 530 cu 524
Previzualizati si vedeti ca sidebar-ul dreapta a revenit pe pozitie.
Urmatorul pas este de a desparti coloanele prin adaugarea unei margini. Deci cautati urmatoarele coduri

#main-wrapper {

si

#sidebar2-wrapper {

Adaugati urmatorul cod imediat dupa fiecare dintre ele.

margin-right: 10px;

Previzualizati si vedeti ca din nou sidebar-ul din drepta a cazut in jos, din cauza celor 20 de pixeli adaugati. Din nou vom scadea din latimea coloanei de postare.
Cautati deci codul:

    #main-wrapper {

si sub el gasiti width: 524px; schimbati pe 524 cu 504 si previzualizati.  Dupa cum vedeti sidebar-ul a revenit pe pozitie. Observati si spatiul dintre coloane.
Ar mai fi o problema de rezolvat si anume sa departam scrisul de bordura din jurul elementelor.

Pentru a face asta avem la dispozitie 2 metode

1. Daca nu doriti sa aveti bordura in jurul coloanelor tot ce trebuie sa faceti este sa cautati acolo unde ati adaugat aceasta linie :

    border: 1px solid #000000;

 si sa schimbati valoarea lui 1 cu 0 si bordurile vor disparea rezolvand astfel si problema textului lipit de bordura.

Stergand bordurile latimea celor trei elemente scade cu 6 pixeli. Acesti 6 pixeli ii vom adauga la main-wrapper.
Cautati deci aceste linii

#main-wrapper {
width: 504px;


si schimbati pe 504 cu 510.

Daca distanta de 10 pixeli creata prin adaugarea codului margin-right:10px;  intre coloane vi se pare mica atunci cresteti valoarea lui 10 cu ce dimensiune doriti dar apoi nu uitati sa-i scadeti ori din latimea coloanei de postare, ori din latimea sidebar-urilor.

2. Daca doriti sa pastrati bordura din jurul coloanelor atunci urmati aceasta varianta.  Cautati aceste linii:

    #main-wrapper {
    #sidebar-wrapper {
    #sidebar2-wrapper {

si dupa fiecare dintre ele adaugati urmatoarea linie:

    padding: 0 5px 0 5px;

Previzualizati.

Prin adaugarea acestei linii din nou sidebar-ul din dreapta cade, datorita adaugarii a 30 de pixeli in plus. Pentru a reveni la normal din nou trebuie sa taiem din latimea coloanelor. Deci acum

ramane la alegerea voastra din care sa taiati. Cautati urmatoarele linii:

    #main-wrapper {
    #sidebar-wrapper {
    #sidebar2-wrapper {


Sub fiecare dintre ele veti gasi si latimea :

#main-wrapper {
width: 504px;
   modificati 504 cu 494

#sidebar-wrapper {
width: 220px;
   modificati 220 cu 210

#sidebar2-wrapper {
width: 220px;
   modificati 220 cu 210




Previzualizati si daca va place cum arata sablonul creat de voi, salvati-l.
Din nou avem problema cu descrierea blogului care este deplasata spre stanga. Pentru a corecta asta gasiti acest fragment de cod:

    #header .description {
      margin:0 5px 5px;
      padding:0 20px 15px;
      max-width:700px;
      text-transform:uppercase;
      letter-spacing:.2em;
      line-height: 1.4em;
      font: $descriptionfont;
      color: $descriptioncolor;
     }

Stergeti aceasta linie

     max-width:700px;

si prezizualizati. Daca e bine salvati.

sâmbătă, 18 iulie 2009

Cum sa pui anunturi Adsense absolut oriunde in postare pe Blogger

 Update: Acum poti adauga Adsense in pagina si cand scrii pe Blogger clasic. Trebuie doar sa activati noul editor de postari si folosind metoda de mai jos puteti pune Adsense oriunde in pagina.
Citeste acest post pentru a vedea cum se activeaza noul editor de postari.

Cei care au blog gratuit pe Blogger si vor sa faca bani din blog cu ajutorul programului Google Adsense au de acum un motiv de bucurie. Una din cele mai bune metode a-ti mari profiturile cu Adsense se stie foarte bine ca este pozitionarea cat mai bine a blocurilor de anunturi in pagina. Si unde este mai bine decat in anumite parti ale postarii, acolo unde cititorul se uita cel mai mult.

-->


Si vestea buna este ca de acum Blogger te lasa sa faci si asta. Cu ajutorul versiuni Blogger in Draft a platformei Blogger acum poti sa adaugi anunturi oriunde in postare. De curand Blogger a lansat in beta cateva noi optiuni de postare si anume:

Setări pentru editarea HTML
Convertiţi liniile noi în
s
  --> Bifat
Ignoraţi liniile noi

si

Setări pentru compunere
Interpretează codul HTML introdus  ---> Bifat
Afişaţi HTML simplu

-->


Dar sa vedem cum facem sa adaugam un anunt in interiorul postarii.
Mai intai duceti-va la Blogger in Draft si logati-va la fel cum faceti pe blogger.com. Alegeti optiunea 'POSTARE NOUA' si scrieti-va articolul. Dupa ce a-ti terminat de scris logati-va in contul vostru Adsense si definiti un anunt nou. Dupa asta copiati codul care vi se da si intorceti-va inapoi la postare.  Lasati noile optiuni bifate cum am aratat mai sus si dati clic pe "Editati Html". Alegeti locul unde vreti sa apara anuntul si apoi reveniti la modul "Scrieti".

Acum tot ce va ramane sa faceti este sa salvati postarea si sa vedeti cum arata articolul cu anunturi Adsense prin ea.

Nota:
- Google Adsense permite doar 3 unitati de anunturi si 3 unitati de link-uri pe pagina.
- Daca blocul de anunturi pe care l-ati adaugat in pagina este nou creat, ar putea sa dureze cel putin 10 minute pana cand anunturile vor apare in pagina.

joi, 16 iulie 2009

Cum sa pui un formular de contact pe blog

Multi vizitatori m-au intrebat cum pot sa puna si ei pe blog un formular de contact la fel cum este cel din pagina mea de contact. In general nu e mare lucru, trebuie doar sa iti faci un cont pe site-ul Kontactr si ei iti ofera gratuit acest formular.
Si cum contul e facut de vreun an, nu mai stiu nici eu cum se face, de aceea imi voi crea un alt cont la ei pentru a putea sa va indrum pas cu pas cum se face.

Intrati pe site-ul Kontactr.com si in meniu de sus gasiti butonul de inscriere: Sing up. Dati clic pe el si se va deschide o pagina cu formularul de inscriere.



Cum sa faci bani cu blogul tau


Dupa ce ti-ai facut un blog si incepi sa scrii posturi de calitate, iti promovezi blogul prin diferite mijloace, vizitatorii incep sa se inmulteasca, auzi pe altii cum ca ei fac bani doar avand un blog, incepi sa te gandesti ca ai putea sa faci si tu asta, dar din pacate nu stii cum sa incepi.

Metode de a face bani cu ajutorul unui blog sunt foarte multe si fiecare in parte iti poate aduce bani. Dar eu voi vorbi din punctul meu de vedere si doar de cele pe care eu le-am incercat cu blog in limba romana

Cea mai raspandita ar fi Pey per click, gen Google Adsense, adica vei afisa diferite anunturi pe blogul tau si vei fi platit de fiecare data cand un vizitator va da clic pe un astfel de anunt, valoarea unui click variind in functie de diferite criterii, apoi alte programe de acest fel intr-o ordine aleatorie ar mai fi:

duminică, 12 iulie 2009

Cautare Google personalizata

Incepand de acum va voi prezenta o serie de site-uri care mi s-au parut interesante si folositoare (ma rog intr-o oarecare masura) si peste care am dat cand ma plimb pe internet.


Primul site ar fi "Hai să-ți caut eu asta pe Google". Acest site practic inregistreaza cautarea voastra si va ofera un link cu acest filmulet care se transforma intr-o cautare identica cu cea pe care ati efectuat-o.

Exemplu: Blogger

Dar sa vedem ce trebuie sa faceti:

E foarte usor; trebuie sa tastati ce cuvant sau cuvinte vreti sa cautati si apoi dati click pe butonul cu 'Cautare Google'. Siteul va pune automat la dispozitie un link scurt pe care il puteti pune in pagina voastra, aratand cuiva ce sa caute pe Google.

Widget pentru Blogger cu Ultimele postari pe blog

Acum ceva timp scriam despre importanta unui widged cu ultimele postari pe blog si aratam si cum sa puneti unul pe blog.

Acum va voi arata un widget cu ultimele postari de pe blog creat cu ajutorul Google Api. Acest widget se foloseste tot de feed-ul default de la blogger dar posturile sunt extrase cu ajutorul unui JavaScript. Widget-ul afiseaza ultimele 4 postari de pe blog luandu-le pe fiecare in parte si aratand si cateva cuvinte din articol. Mai jos aveti o poza cu widget-ul asa cum arata el.

Din pacate el arata bine doar pe blogurile cu sidebar de culoare alba si cu o latime de peste 300 de pixeli. Pentru ceilalti incerc sa modific partea de Css din acest cod pentru al face sa arate bine si pe alte culori.


vineri, 10 iulie 2009

Adauga un widget cu Ultimele comentarii pe blog

Acum catva timp am facut un post despre cum sa adaugi un gadget cu comentarii recente pe Blogger, deci nu voi mai vorbi despre importanta acestui widget.

De curand am dat peste un alt site (Tips for New Bloggers) care prezinta un alt mod de a afisa ultimele comentarii pe blog. Acest widget foloseste un script JavaScript pentru a extrage din feed ultimele comentarii de pe blog. Modul de afisare este altfel, un pic mai bine zic eu decat in modul clasic, asa ca poate vreti sa-l folositi pe acesta.

Widget-ul arata asa:




luni, 6 iulie 2009

Descarca Black Rounded sablon pentru Blogger



Black Rounded Template este un sablon gratuit pentru Blogger - Blogspot. Acest sablon este creat de mine si este un template cu 2 coloane destul de spatioase.

Sablonul are o latime de 830 pixeli si are integrate urmatoarele:

- Header banner integrat
- Meniu orizontal inclus (vezi aici cum se modifica meniul in blogger)
- Coloana de postare are o latime de 500 pixeli
- Sidebar-ul are o latime de 268 pixeli

Acest sablon se poate aplica oricarui tip de blog. Clic aici pentru a vedea un ghid complet de schimbare a sablonui.

Pentru cei care descarca si instaleaza acest template va rog sa nu scoateti link-ul din partea de jos a sablonului.






Cuvinte cheie: blogger templates, blogspot templates, free templates, gratis, gratuit, download blogger templates, blogspot sabloane, blogger sablon, sablon blogger gratuit, sablon cu doua coloane

Blogger - Widget cu Total posturi si comentarii pe blog

Acest widget pentru blogurile de pe Blogger se adauga in sidebar si arata numarul total de posturi si comentarii de pe blog. Se foloseste de feed-ul default al blogului pentru a extrage numarul de postari si numarul de comentarii, deci trebuie sa aveti activat feed-ul blogului pe una din variante "Complet" sau "Pe scurt".

Widget-ul este gasit aici (total comment count in blogger) si modificat de mine prin adaugarea catorva elemente CSS pentru a arata cum doresc eu.

Widget-ul arata asa:


Deci daca doriti acest widget pe blogul vostru blogspot, in prima faza trebuie sa va conectati in contul vostru Blogger si apoi sa urmati calea "Aspect --> Elemente de pagina --> Adaugati un obiect gadget". Din pagina deschisa alegeti "HTML/JavaScript" si puneti un titlu, oricare doriti.

Post la intamplare (random post) in Blogger

Oarecum o idee interesanta ar fi sa pui in sidebar un widget cu posturi la intamplare (random post). Ideea ar fi ca, daca dai clic pe acel link sa se afiseze un articol la intamplare din blogul tau.





Daca doriti sa faceti asta, urmati calea "Aspect --> Elemente de pagina" si dati clic pe "Adauga un obiect gadget". Din lista de gadget-uri alegeti "HTML/JavaScript".

Dati un titlu gadget-ului, de tipul Post la intamplare sau Random post, sau daca vreti puteti sa-l lasati gol. In campul pentru continut adaugati urmatorul cod: