Faceţi căutări pe acest blog

Se încarcă...

vineri, 29 mai 2015

Cum adaugam un buton "Back to top" in blog

Daca ai un blog sau un site cu postari multe si lungi, atunci cand vizitatorul ajunge in partea de jos a paginii, pentru a ajunge in meniul principal trebuie sa roteasca butonul de scroll al mouse-ului la nesfarsit, ceea ce il poate incomoda. Pentru a usura navigarea este bine sa avem un buton Back to Top in footer-ul paginii, situat in partea stanga sau dreapta, dupa dorinta fiecaruia.

In fapt ce este butonul Back to Top? Reprezinta un simplu link, care in timp ce este accesat, va trimite instant utilizatorul la inceputul paginii. Sunt sigur ca ati vazut pe multe site-uri aceste butoane, care stau fixe oricat ai derula pagina. Aceasta functie poate fi realizata prin apasarea imaginii unui buton, sau prin simplu text care in timp ce este accesat va trimite cititorul in partea din fata a blogului.
Buton Back to top in blog
Iti voi prezenta mai jos un scurt tutorial care te va ajuta sa adaugi un buton Back to Top in blogul tau gazduit de platforma Blogger. Pozitia butonului va fi fixa, chiar daca vei derula pagina si  poti personaliza atat imaginea butonului, pozitia stanga - dreapta, cat si distanta lui fata de partea de jos a paginii. 
La inceput e bine sa cauti imaginea unui buton pe Google si sa o urci pe un site de genul: Picassa,Tinypic, My.imageshack.us, Box.net, etc. Dupa ce uploadam imaginea butonului pe unul din site-urile mentionate, dam copy pe Direct Link si il vom copia pentru a-l introduce ulterior in cod asa cum va voi explica mai jos.

Pasii de urmat:

1. Te loghezi in contul tau Blogger;
2. Navighezi in Sablon apoi in Editati HTML, Cautati tagul </body>   asa cum am invatat aici si chiar deasupra lui adaugam urmatorul cod:

<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top"><img style="border: none;" src="URL butonul tau"/></a>

Inlocuieste URL butonul tau cu URL-ul imaginii uploadate (Direct Linkul ei).

Daca preferi ca in locul imaginii unui buton sa apara un mesaj text de genul Back to Top si odata apasat sa te trimita in partea din fata a paginii, atunci procedati la fel ca mai sus numai ca deasupra tagului </body>  veti adauga codul:
<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Click to go to top">Back to Top</a>
 
Inlocuiti daca doriti textul Back to Top cu orice text doriti.

Personalizare:
Butonul sau mesajul va apare in partea de jos a paginii, in stanga. daca doriti sa apara in dreapta, pur si simplu inlocuiti left cu right. In acest cod, butonul este amplasat la 5px fata de partea din stanga a paginii (left:5px) si tot la 5px fata de marginea de jos a acesteia (bottom:5px). Daca doriti modificarea distantelor pur si simplu inlocuiti 5px in codurile de mai sus cu distanta dorita de voi.

Salvati sablonul si asta e tot. Ati adaugat astfel un buton Back to Top in partea de jos a blogului, care va trimite rapid utilizatorul la inceputul paginii. Daca v-a fost util articolul nu uitati sa dati un like blogului. 
Cele bune!
Read More »

miercuri, 27 mai 2015

Cum inseram un tabel in postarile din Blogger

Inserarea unui tabel in postare folosind editorul Blogger, este o operatiune destul de dificila si este nevoie de cunostinte HTML ca sa construiesti tabelul manual. Trebuie sa fi familiarizat cu codurile HTML pentru a face acest lucru. Cu toate acestea, sunt mai multe moduri de a construi un tabel in postare, fara a fi nevoie sa cunosti HTML. Va voi explica mai jos una din aceste metode.

Cum vom proceda? Prima oara vom construi tabelul folosind Microsoft Word, vom converti tabelul in cod HTML si apoi il vom insera in postarea din blog.

Pentru a crea un tabel in Microsoft Word:
1. Deschideti o pagina Word;
2. Va duceti in Insert--->Table--->Insert Table;
3. Va alegeti numarul de coloane si randuri;
4. Completati tabelul cu ceea ce vreti sa scrieti;
5. Salvati si selectati tot tabelul, ca in exemplul urmator, apoi il copiati:
Tabel word

Cum convertim tabelul in HTML?
1.Navigati la Tableizer si lipiti tabelul copiat in campul pentru text;
tabel html pentru blogger
2. Personalizati Font size, Header color, Font style;
3. Apasati apoi Tableize it! Se va converti tabelul in cod HTML.

Cum inseram tabelul astfel convertit in cod HTML in blogul nostru?
1. Ne logam in contul Blogger;
2. Navigam in Postari---> Creati postare noua ---> HTML 
3. Lipim codul HTML al tabelului acolo unde dorim iar apoi comutam din HTML in Scrieti.
blogger editor posts

4. Previzualizati si daca totul este in ordine salvati.


Aceasta este metoda de a insera un tabel in postare fara a avea cunostinte de HTML. Daca intampinati probleme nu ezitati sa ma contactati, prin e-mail sau in comentarii.
Read More »

marți, 26 mai 2015

Culori HTML in cod hexadecimal

Pentru acei dintre voi care utilizati culori in web design sau in editoare de imagini, etc, prin cod HTML sau CSS, va prezint mai jos un tabel cu culorile sigure. Va intrebati probabil ce sunt culorile sigure? Ei bine culorile sigure utilizate in web design sunt acele culori care sunt afisate de majoritatea browserelor de navigare. De exemplu daca vei folosi o culoare in pagina ta web si nu ai verificat-o sa vezi daca face parte din lista culorilor sigure, este posibil ca o parte din vizitatorii paginii tale sa vada o alta culoare.

Va dati seama ca nu veti sti pe dinafara codurile culorilor, de aceea e bine sa va salvati aceasta pagina, pentru a va fi la indemana atunci cand doriti sa le utilizati.

 TABEL CULORI SIGURE IN COD HEXA


Aliceblue
F0F8FF
Antiquewhite
FAEBD7
Aqua
00FFFF
Aquamarine
7FFFD4
Azure
F0FFFF
Beige
F5F5DC
Bisque
FFE4C4
Black
000000
Blanchedalmond
FFEBCD
Blue
0000FF
Blueviolet
8A2BE2
Brown
A52A2A
Burlywood
DEB887
Cadetblue
5F9EA0
Chartreuse
7FFF00
Chocolate
D2691E
Coral
FF7F50
Cornflowerblue
6495ED
Cornsilk
FFF8DC
Crimson
DC143C
Cyan
00FFFF
Darkblue
00008B
Darkcyan
008B8B
Darkgoldenrod
B8860B
Darkgray
A9A9A9
Darkgreen
006400
Darkkhaki
BDB76B
Darkmagenta
8B008B
Darkolivegreen
556B2F
Darkorange
FF8C00
Darkorchid
9932CC
Darkred
8B0000
Darksalmon
E9967A
Darkseagreen
8FBC8F
Darkslateblue
483D8B
Darkslategray
2F4F4F
Darkturquoise
00CED1
Darkviolet
9400D3
deeppink
FF1493
Deepskyblue
00BFFF
Dimgray
696969
Dodgerblue
1E90FF
Firebrick
B22222
Floralwhite
FFFAF0
Forestgreen
228B22
Fuchsia
FF00FF
Gainsboro
DCDCDC
Ghostwhite
F8F8FF
Gold
FFD700
Goldenrod
DAA520
Gray
808080
Green
008000
Greenyellow
ADFF2F
Honeydew
F0FFF0
Hotpink
FF69B4
Indianred
CD5C5C
Indigo
4B0082
Ivory
FFFFF0
Khaki
F0E68C
Lavender
E6E6FA
Lavenderblush
FFF0F5
Lawngreen
7CFC00
Lemonchiffon
FFFACD
Lightblue
ADD8E6
Lightcoral
F08080
Lightcyan
E0FFFF
Lightgoldenrodyellow
FAFAD2
Lightgreen
90EE90
Lightgrey
D3D3D3
Lightpink
FFB6C1
Lightsalmon
FFA07A
Lightseagreen
20B2AA
Lightskyblue
87CEFA
Lightslategray
778899
Lightsteelblue
B0C4DE
Lightyellow
FFFFE0
Lime
00FF00
Limegreen
32CD32
Linen
FAF0E6
Magenta
FF00FF
Maroon
800000
Mediumauqamarine
66CDAA
Mediumblue
0000CD
Mediumorchid
BA55D3
Mediumpurple
9370D8
Mediumseagreen
3CB371
Mediumslateblue
7B68EE
Mediumspringgreen
00FA9A
Mediumturquoise
48D1CC
Mediumvioletred
C71585
Midnightblue
191970
Mintcream
F5FFFA
Mistyrose
FFE4E1
Moccasin
FFE4B5
Navajowhite
FFDEAD
Navy
000080
Oldlace
FDF5E6
Olive
808000
Olivedrab
688E23
Orange
FFA500
Orangered
FF4500
Orchid
DA70D6
Palegoldenrod
EEE8AA
Palegreen
98FB98
Paleturquoise
AFEEEE
Palevioletred
D87093
Papayawhip
FFEFD5
Peachpuff
FFDAB9
Peru
CD853F
Pink
FFC0CB
Plum
DDA0DD
Powderblue
B0E0E6
Purple
800080
Red
FF0000
Rosybrown
BC8F8F
Royalblue
4169E1
Saddlebrown
8B4513
Salmon
FA8072
Sandybrown
F4A460
Seagreen
2E8B57
Seashell
FFF5EE
Sienna
A0522D
Silver
C0C0C0
Skyblue
87CEEB
Slateblue
6A5ACD
Slategray
708090
Snow
FFFAFA
Springgreen
00FF7F
Steelblue
4682B4
Tan
D2B48C
Teal
008080
Thistle
D8BFD8
Tomato
FF6347
Turquoise
40E0D0
Violet
EE82EE
Wheat
F5DEB3
White
FFFFFF
Whitesmoke
F5F5F5
Yellow
FFFF00
YellowGreen
9ACD32

Read More »
Back to Top