Instaleaza script care deschide link-urile externe in alt tab

Sunteti un blogger care arunca cu link-uri in stanga si in dreapta?
Daca da, atunci sigur v-ati gandit ca ar fi bine daca link-urile externe s-ar deschide in alt tab. Desigur, se poate face asta manual adaugand tag-ul  target="_blank" la link-ul nostru, dar daca s-ar face totul automat, cu ajutorul unui script?

Am gasit un cod javascript care face asta. Deschide toate link-urile externe in alt tab, iar cele care duc catre pagini din blogul propriu se vor deschide in aceeasi pagina.

Instalare script - nivel de dificultate: mediu
1. Descarcati codul javascript de aici.
2. Clic dreapta pe el si Open whit...  alegeti Notepad
3. La inceputul codului veti gasi aceste grupuri de cod:

//Open offsite links in new window script- http://www.dynamicdrive.com/
//Created: August 28th, 2007'

var ddwindowlinks={
//1)Enter domains to be EXCLUDED from opening in new window:
excludedomains: ["bloggerajutor.blogspot.com",],

Emoticoane Yahoo in postari si comentarii pe Blogger

In sfarsit am gasit un javascript care sa adauge automat emoticoane in postarile de pe Blogger. Insa el functioneaza la fel de bine si in privinta comentariilor si chiar a sidebarului. Tot ce trebuie sa facem este sa punem acest JavaScript in html-ul sablonului, apoi cand vrem ca emoticoanele sa apara in postari sau in comentarii trebuie doar sa tastam codul aferent emoticonului respectiv iar dupa publicare codul se v-a transforma in emoticon.

Scriptul poate transforma 79 de emoticoane Yahoo Smileys si 15 emoticoane diferite.
Toate functioneaza atat in postare cat si in comentarii.

Instalare script
Intrati la Aspect --> Editati html si salvati in calculator o copie a sablonului pe care il aveti instalat.
Folosind combinatia de taste Ctrl+F cautati acest cod (este la sfarsitul codului): </body>
si inaintea lui copiati acest cod:

<!--SMILIES-->
<script src='http://bloggeremoticons.googlecode.com/files/emoticons.js' type='text/javascript'/>
<!--SMILIES-->

Salvati sablonul. In acest moment scriptul este instalat si va puteti opri aici. Mergeti la blog si faceti cateva probe pentru a vedea daca functioneaza.

Instalati pe Blogger sistemul de comentarii Disqus

Toata lumea este nemultumita de formularul de comentarii pe care Blogger il pune la dispozitie. Toata lumea vrea un formular usor de folosit de genul celor de pe platforma Wordpress.
Pe mine sincer nu ma deranjeaza formularul de pe Blogger, adica daca vreau sa comentez pe un blog o voi face indiferent de modelul de formular gasit.

Dar pentru ca am fost intrebat mereu de o alternativa la formularul de comentarii de pe Blogger, m-am decis sa va arat o alternativa pe care multi bloggeri de pe blogspot o folosesc. Acest formular ne este oferit de catre site-ul  Disqus iar complexitatea implementarii pe Blogger este medie.




Demo

Optiuni in plus oferite de acest sistem de comentarii:
- posibilitatea de a posta replici la alte comentarii (reply)
- posibilitatea de a alege cate comentarii sa apara sub postare (paginatie).
- sortare comentarii (dupa popularitate. mai noi, mai vechi, etc)
- posibilitatea de a alege unde sa apara formularul - inaintea comentariilor sau sub ele.
- puteti alege diferite dimensiuni pentru avatare
- posibilitatea de a personaliza formularul cu ajutorul codului CSS.
- posibilitatea de a posta reactii
- posibilitatea ca vizitatorii sa se poata conecta si comenta cu ajutorul site-urilor sociale (twitter, facebook)
posibilitatea de a adauga Trackbacks  la comentarii
- posibilitatea de a adauga video in comentarii

Pentru mai multe detalii intrati pe centrul de ajutor al site-ului. (engleza)

Image Magnify - Zoom pe pozele din Blogger

La cererea Loredanei va prezint un script JavaScript care face poza sa se mareasca de 3 ori atunci cand cineva da clic pe ea.
Scriptul este unul foarte usor de instalat si este preluat de pe site-ul Dynamic Drive.

Din nou am sa va rog sa va hostati singuri scripturile pentru a nu risca sa ramaneti fara latime de banda si sa nu mai functioneze. Pentru a vedea cum sa va hostati singuri scripturile JavaScript cititi acest tutorial facut de mine.

Peteti vedea scriptul in actiune dand clic pe poza de mai jos.

Instalare script

Urmati calea Aspect --> Editati html si gasiti urmatorul cod (foloti Ctrl+F):

</head>

Dupa ce l-ati gasit chiar inainte de el copiati codul de mai jos:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://sites.google.com/site/myfilesdan/jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Apoi salvati sablonul.

Acum, pentru ca scriptul sa functioneze trebuie sa umblam la codul html al fiecarei poze pe care o punem in postarea noastra.
Atentie: Codul nu functioneaza la imaginile care au atribuit un link.

Codul unei imagini fara link asa cum ne trebuie noua arata cam asa:

<img src="http://i29.tinypic.com/2rdu2k7.jpg" style="width:200px; height:150px" />

Pentru ca imaginea sa se mareasca trebuie sa adaugam acest atribut Css  class="magnify" la codul imaginii.

Codul va arata asa:

<img src="http://i29.tinypic.com/2rdu2k7.jpg" class="magnify" style="width:200px; height:150px" />

Metoda de mai sus este pentru pozele care nu sunt adaugate prin metoda pusa la dispozitie de Blogger. Pentru ca scriptul sa functioneze si la pozele adaugate prin metoda Inserati imagine trebuie sa facem niste modificari si la acest cod.

Daca va uitati la codul unei imagini adaugate astfel el arata cam asa:

<a href="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s1600-h/Blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" /></a>

In prima faza trebuie sa scoatem link-ul imaginii. Faceti codul sa arate asa:

<img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" />

Acum adaugatii atributul Css  class="magnify":

<img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" class="magnify" />

Acum cand reveniti in modul normal de editare a textului pozitionati imaginea in ce parte doriti.
Publicati postarea si vedeti daca scriptul functioneaza.

Pune pe blog un set de bannere 125x125 pentru spatiu publicitar

Daca sunteti dintre acei bloggeri care au succes si vindeti spatiu publicitar pe blog atunci stiti ca cele mai folosite dimensiuni pentru banere sunt 125x125px.
Desi multi folosesc Css-ul pentru a plasa si controla banerele eu va voi arata un mod foarte simplu de a afisa anunturi 125x125 pe blog cu ajutorul tabelelor(table).


Duceti-va la Aspect --> Elemente de pagina --> Adaugati un obiect gadget si alegeti optiunea HTML/JavaScript.
In campul pentru continut adaugati codul de mai jos si salvati.:

<table align="center" border="0">
  <tbody>
    <tr>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
    </tr>
    <tr>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
    </tr>
  </tbody>
</table>

Acum de cate ori sunteti solicitati de catre advertiseri sa puneti bannerul lor pe blog, tot ce trebuie sa faceti este sa inlocuiti codul scris cu rosu cu codul pe care vi-l dau ei.




Daca sunteti norocosi si ati epuizat deja cele 4 spatii pentru publicitate, si vreti sa adaugati inca doua spatii, atunci copiati codul de mai jos dupa ultimul </tr> din cod

<tr>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
    </tr>

Dupa ce le adaugati pe blog ar fi bine sa inlocuiti 2 sau 3 poze cu alte bannere de la site-uri unde sunteti afiliati si sa lasati doar un singur banner cu Advertise here.Ar fi bine ca acest ultim banner sa duca catre o pagina de contact unde advertiserii sa poata sa va contacteze usor.




Puteti folosi si aceste bannere create de mine


     

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.

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!

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.

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.

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;

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.

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)

Dezactivati right click (click dreapta) in Blogger

Clicul pe butonul drept al mouse-ului este foarte important in orice browser. La click dreapta se deschide un meniu care ne permite sa copiem textul dintr-o pagina, sa copiem poze, sa facem bookmark la o pagina, sa vedem sursa paginii si multe altele.

Acest lucru ne ajuta foarte mult atunci cand navigam pe internet. Dar ce facem daca suntem un webmaster sau blogger? Ce facem daca avem un blog foto unde postam pozele facute de noi si pe care dorim sa nu le poata copia nimeni? Sau daca avem un blog cu tutoriale si dorim ca articolele noastre sa nu poata fi copiate?
Daca aveti blog pe Blogger acum exista o solutie. Cu ajutorul limbajului Java Script putem devactiva Right Click pe blogurile Blogger.

Pentru a face acest lucru, mergeti la Blogger si in tabul "Aspect --> Elemente de pagină" dati clic pe "Adaugati un obiect gadget" si apoi pe "HTML/JavaScript Adăugare ".

Tabel de culori in Html

Schimbarea culorii fundalului blogului, a scrisului sau a bordurii poate schimba fata blogului vostru in bine.
Puteti face asta urmand calea : "Aspect --> Fonturi şi culori". Dar din pacate aici culorile sunt limitate. Puteti insa copia un cod al culorii (in html) care va place din tabelul de mai jos si folositi-l pentru a schimba fundalul, scrisul sau bordurile in blog. Aveti la dispozitie peste 300 coduri html de culori din care sa alegeti.

Scoate bordura din jurul pozelor din postarile pe Blogger

In Blogger toate pozele pe care le adaugam in postare au o bordura de 1 pixel in jurul lor si pe care multi dintre noi ar dori sa o scoata.
Ea nu se poate scoate din setari ci doar din Html-ul sablonului.



Deci daca doriti sa renuntati la aceasta bordura trebuie sa va conectati in contul vostru Blogger - blogspot si sa urmati calea 'Aspect --> Editati Html' .
In html cautati urmatorul cod:

.post img {
padding:4px;
border: 1px solid $bordercolor;
}

sau daca nu il gasiti apasati Ctrl+F si cautati umatorele cuvinte: post img

Dupa ce ati gasit codul de mai sus nu trebuie decat sa schimbati cifra 1 in cifra zero si imaginile din postarile voastre nu vor mai avea nici o bordura. Previzualizati si daca va place cum arata puteti sa salvati sablonul. Daca vreodata doriti totusi ca pozele voastre sa aiba bordura, reveniti la acest cod si schimbati din zero in ce valoare doriti.


Scoate bordura de la poza de la profil

Daca in sidebar aveti adaugat gadget-ul cu profilul vostru Blogger si aveti si poza adaugata atunci si aceasta va avea o bordura in jurul ei.
Daca doriti sa o scoateti si pe aceasta atunci cautati urmatorul cod:

.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}

sau Ctrl+F si cauta; profile-img

Ca sa scoti bordura pozei la fel ca mai sus, schimba cifra 1 cu cifra zero.

Nu uitati ca inainte de a edita html-ul sablonului este bine sa descarcati in calculator o copie a acestuia, astfel daca ceva nu merge bine sa puteti reveni la sablonul normal.

Abonati-va la feed-ul blogului

Cum sa pui FeedBurner pe Blogger - Blogspot

Inainte de a afla cum se pune un Feed de la FeedBurner pe Blogger sa vedem mai intai ce este un feed (flux web).

Ce este un Feed?

Potrivit Wikipedia un feed este "un format de date utilizat pentru a oferi utilizatorilor conţinut sau sumaruri de conţinut web împreună cu legături către conţinutul complet al respectivei surse de informaţii şi alte metadate, actualizate frecvent. Fluxurile web oferă această informaţie sub forma unui fişier XML".

Feed-urile permit cititorilor fideli ai unor bloguri sau site-uri sa fie informati de actualizarea acestora prin folosirea unui soft special numit feed reader (aggregator).

Deci, in mod normal un distribuitor de conţinut publică un link spre un flux la care utilizatorii se pot abona folosind un aggregator, care poate fi un serviciu online sau un program ce rulează pe calculatorul utilizatorului. Acest program verifică periodic feed-urile şi anunţă dacă apare continut nou.

Dupa ce am vazut ce este un Feed cred ca ar fi bine sa vedem si ce este FeedBurner.

Ce este FeedBurner?

FeedBurner este un manager si un furnizor de feed si care preia feed-urile de pe bloguri si site-uri si le converteste intr-un feed special. El furnizeaza analiza de trafic foarte amanuntita in legatura cu abonatii la feed. Si pentru ca Google a cumparat site-ul Feedburner acum puteti sa introduceti si reclama Adsense pe feed.
Deci practic FeedBurner ne intereseaza pentru ca el se ocupa de tot, iar noi doar vedem cati abonati avem.

Pentru a putea pune FeedBurner pe Blogger trebuie doar sa ne conectam pe site cu ajutorul contului Google. Intri pe Google Feedburner si completezi casutele cu datele de la acontul tau Google. Dupa ce v-ati conectat veti vedea o casuta in care trebuie sa introduceti adresa blogului sau a feedului.



Cel mai simplu este sa introduceti adresa blogului iar sistemul va detecta automat adresa de feed. Dati clic pe Next si cum Blogger are doua surse pentru feed vi se va cere sa bifati una dintre ele. Bifati pe oricare dintre ele si apasati Next.



In pagina urmatoare veti vedea noua adresa de feed si titlul feed-ului. Dati iar clic pe Next si gata feed-ul tau este live.

Dati clic pe "Skip directly to feed management" din partea de jos a paginii pentru a va administra feed-ul. Apoi clic pe tabul "Publicize" si apoi alegeti "Chicklet Chooser".



Bifati una din primele 2 iconite, derulati pagina in jos si veti gasi codul Html pe care trebuie sa il puneti in blogul vostru. Dati 'Copy' la cod apoi logati-va in contul vostru Blogger. Urmati calea "Aspect ---> Elemente de pagina ---> Adaugati un Gadget" si alegeti optiunea 'Adauga Html'. Adaugati codul copiat de pe FeedBurner si dati un un titlu gadget-ului. Salvati si vedeti blogul.

Daca totul arata ca in imaginea de mai jos atunci felicitari tocmai v-ati pus feed de la feedBurner.



Adauga si un FeedCount

FeedCount este un buton in care este afisat numarul de abonati ai blogului.
Pentru a adauga counter-ul la blog trebuie sa va duceti la FeedBurner dati clic pe tab-ul "Publicize" apoi pe "FeedCount". Alegeti unul din butoane apoi puteti modifica culorile butonuli.

Copiaza codul html, dute la Blogger si urmeaza aceeasi pasi ca mai sus pentru a publica butonul pe blog. Sau puteti sa il puneti in acelasi element de pagina pe care l-ati ales pentru Chicklet.



Nu uitati sa va abonati la Feed-ul blogului.

Adauga un buton "back to top" in Blogger - blogspot

Am un blog despre filme noi pe care am scris niste articole foarte lungi si cautam ceva sau mai bine zis un script care sa ajute vizitatorii blogului ca atunci cand ajung la sfarsitul articolului doar sa apese pe o iconita si sa ajunga la inceputul pagini doar cu un clik.

Am vazut pe multe site-uri asa ceva dar era un buton fix si atat. Pe blogurile de la Blogger - blogspot nu vazusem niciodata si oricum nu aveam nici o idee cum sa fac.

Apoi am gasit pe pe acest blog exact ce imi trebuia. Un buton asezat in marginea dreapta a blogului care ramane pe loc desi tu derulezi pagina, iar functia lui era "back to top" si era si pe un blog de la Blogger - blogspot.

Am cautat si am gasit un articol scris despre asta unde dadea si scriptul respectiv.

Vezi un exemplu aici pe blogul meu. Uita-te in partea dreapta jos dupa un buton (o sageata) si da clic pe ea.
(exemplu nu mai este valabil - codul functioneaza bine)

Vezi si acest articol: Adauga un buton "Back to top" si "Go down" la blog

Cum sa instalezi butonul "Back to top" in blog

Pentru a instala acest buton in blogurile Blogger trebuie sa va duceti la Aspect --> Elemente de pagina --> Adaugati un obiect gadget si sa alegeti obiectul HTML/JavaScript. Lasati gol campul pentru titlu, iar in campul pentru continut adaugati urmatorul cod:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://blog.danielnicolae.googlepages.com/top3.gif"/></a>

Pentru a schimba imaginea din exemplu cu imaginea voastra doar inlocuiti url-ul din cod cu url-ul vostru.
Daca vreti sa schimbati pozitia imagini puteti umbla la urmatoarea parte a codului:

bottom: 5px; - puteti schimba cifra 5 cu alta dorita de voi; mai mica sau mai mare
right: 5px; - aici ar fi bine doar sa scadeti numarul ca sa nu arate urat daca il mariti.

Iata si cateva poze pe care le puteti folosi daca vreti.

Download imagini