Cum pun like box pe blog

In primul rand trebuie sa aveti o pagina de facebook pentru blog. Daca nu aveti, vedeti aici cum se face, daca aveti intrati pe http://developers.facebook.com/docs/reference/plugins/like-box/ , unde trebuie sa scrieti url-ul paginii de facebook al blogului, sa editati latimea, alegeti culoarea deschisa sau inchisa si asa mai departe.. apoi apasati pe get code si copiati-l in trun fisier Html/Java Script.

Cum se face o casuta cu bara de scroll pentru poze

Codul pentru casuta cu bara de scroll pentru poze este cel de mai jos, care trebuie sa il copiati intrun fisier HTML/JavaScript.(Cum va arata casuta vedeti la sfarsitul articolului).
Modificati in cod ce este scris colorat si anume:
Cu albastru inlocuiti cu url-ul imaginii
Cu rosu inlocuiti cu un link (atunci cand se da click pe poza va trimite spre acest link)
Cu verde o scurta descriere (exemplu: puneti o poza cu un telefon, link catre o pagina/ articol despre telefoane si descriere: Aplicatii pentru telefoane)
Pentru a adauga mai multe poze, puneti in continuarea coloanei scrisa cu portocaliu in cod:
photo[6]="IMG_1006.JPG"
photo[7]="IMG_1007.JPG"
photo[8]="IMG_1008.JPG"
Si asa mai departe cate poze doriti...
De cate ori adaugati un rand in coloana cu portocaliu, trebuie sa adaugati si in coloana de mai jos (unde scrieti url,descriere,legatura)
Ex:
Pentru 
photo[6]="IMG_1006.JPG" 
adaugam
 <a href="Legatura" onclick="ff(6)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a>
Si asa mai departe modificati numarul cu portocaliu "ff(6)"
Marimea si culoarea de fundal a casutei in care vor fi pozele le puteti modifica de la inceputul codului scrise cu roz.
Daca nu doriti sa para imaginea in dreapta casutei cu scroll stergeti ce este ecris cu gri la sfarsitul codului

<title>Picture Gallery</title> <style>   body{background-color:}   #small_img{width:290px;height:600px;float:left;overflow:scroll;text-align:center;background-color:06AEFF;}   img {border:none;} </style> <script>   var photo = new Array();   photo[0]="IMG_1000.JPG"   photo[1]="IMG_1001.JPG"   photo[2]="IMG_1002.JPG"   photo[3]="IMG_1003.JPG"   photo[4]="IMG_1004.JPG"   photo[5]="IMG_1005.JPG"   function ff(code)   {   document.images.home.src=photo[code];   } </script> <div id="small_img"> <a href="Legatura" onclick="ff(0)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(1)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(2)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(3)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(4)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(5)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> </div> <div> <img height="600" name="home" src="url_imagine.JPG" /> </div>

Acesta este rezultatul:

Box Scroll: simplu, color, pentru imagini, cu chenar color si cu scroll orizontal

Box scroll basic

<div style="height:120px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">Textul tau aici </div>

Copiati codul de mai sus intrun fisier HTML/JavaScript sau, in postare, la edtitati HTML!  Rezultatul este acesta!!

Box scroll color

<div style="height:90px;width:160px;overflow:scroll;background-color:pink;">Textul tau aici</div>

Copiati codul de mai sus intrun fisier HTML/JavaScript sau, in postare, la edtitati HTML! Rezultatul este acesta!!

Box scroll pentru imagini

<div style="height:221px;width:330px;overflow:scroll;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTUyrYYwmJsfDwFF5e3MIDbYfBMCNAyuR0BllQ4JRXd0UKOHhSpiVRMl8d-uqeA9if8wpW50uyCDarLZ9XWqWF_fvctKPCtNkVZJKl4aMi4Auulyx1fBmEBfEWn7VgM1bcfptvr0oZ58w/" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTUyrYYwmJsfDwFF5e3MIDbYfBMCNAyuR0BllQ4JRXd0UKOHhSpiVRMl8d-uqeA9if8wpW50uyCDarLZ9XWqWF_fvctKPCtNkVZJKl4aMi4Auulyx1fBmEBfEWn7VgM1bcfptvr0oZ58w/" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /> </div>

Rezultatul este acesta de jos!
Modificati ce este scris cu roz in cod, cu adresele imaginilor dvs!

Box scroll cu chenar color

<div style="height:80px;width:180px;overflow:scroll;border:1px solid pink;">Textul tau aici</div>

Copiati codul de mai sus intrun fisier HTML/JavaScript sau, in postare, la edtitati HTML!  Rezultatul este acesta!

Box scroll orizontal

<div style="border:1px solid black;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;"> <p style="width:250%;">Textul tau aici</p> </div>

Copiati codul de mai sus intrun fisier HTML/JavaScript sau, in postare, la edtitati HTML! Rezultatul este acesta!!

Caseta redimensionabila cu bara de scroll

Ati vazut, probabil, pe multe site-uri genul acesta de caseta. Daca vreti sa stiti cum se face, copiati codul de mai jos intrun fisier HTML/ JavaScript .
Daca trageti de coltul dreapta jos, caseta se va mari. Cand textul va fi mai mult decat dimensiunea casetei, va aparea o bara de scroll.

<textarea cols="18" input="" name="emailaddr" onfocus="this.select()" onmouseover="this.focus()" rows="2" size="31" type="text" value="your e-mail">textul tau aici </textarea>