Lupta Impotriva Spamerilor

Robotii (numiti si spideri, crawleri, sau boti) sunt programe care cauta neancetat paginile de pe internet si indexeaza linkurile site-urilor, blog-urilor sau forum-urilor gasite. Cand un robot de la un site de spam viziteaza site-ul, blog-ul, forum-ul tau, toate paginile vor fi analizate pentru eventuale adrese de e-mail folosite de tine. Aceste adrese de e-mail pot fi folosite pentru a-ti trimite reclame nesolicitate.

Acuma poti lupta impotriva lor.
Tot ce trebuie sa faci este sa pui un link care acest site. Astfel, de fiecare data cand un robot de spam scaneaza site-ul tau, el va fi atras catre acest site. Pentru a pune un link catre noi trebuie sa copii in pagina ta unul din textele de mai jos:

Poti pune linck text: Fight Spam! Click Here!

si acesta este codul:

<a href="http://english-1353593191.spampoison.com">Fight Spam! Click Here!</a>

Sau imagine: si codul sau:

<a href="http://english-1353594583.spampoison.com" target="_blank"><img src="http://pics8.inxhost.com/images/sticker.gif" border="0" width="80" height="15" /></a>

Aceste linkuri vor redirectiona robotii catre site-uri capcana ce le vor furniza robotilor un numar aproape infinit de adrese de e-mail generate automat, majoritatea fiind ale unor site-uri cunoscute de spam. Astfel spamerii se vor trezi ca primesc ei insisi e-mail-uri de la alte servicii de spam si vor face ca listele de e-mail-uri gasite sa fie nefolosibile.

Read More

Cum se realizeaza un scroll pentru blog

La rugamintea unui prieten care a vazut pe o pagina web un cod pentru scrolls dar care functiona numai in limbajul php, un cod ce nu poate fi folosit in sablonul blogger, azi voi prezenta cateva coduri html folosind <marquee> si care se adapteaza perfec in blogger si functioneaza bine in majoritatea browusere-lor.

Derulare text de la dreapta spre stanga
Pentru Webmasters

Copieaza codul urmator si adaugal pe blog:

<marquee>aici vine textul</marquee>

Daca vrei sa schimbi sensul foloseste urmatorul cod:

<marquee direction="right">Pentru Webmasters</marquee>

Pentru Webmasters

Scroll orizontal cu imagine in loc de text:


- codul este urmatorul:

<marquee><img src="URL_IMAGINE" width="64" height="60" class="imgizqda" /></marquee>

Acelasi scroll cu sens schimbat:


SI CODUL:

<marquee direction="right"><img src="URL_IMAGINE" width="64" height="60" class="imgizqda" /></marquee>

Scroll imagine + text;
Pentru Webmasters

si codul:

<marquee><img src="url_imagine" width="16" height="16" class="imgizqda" />aici vine textul</marquee>

Scroll text pe verticala:
Pentru Webmasters

<marquee direction="up" height="50">Pentru Webmasters</marquee>

Pentru Webmasters

<marquee direction="down" height="50">Pentru Webmasters</marquee>

Statie universala de incarcare 4 + 2 USB

Incarcatorul universal poate incarca pana la 6 dispozitive simultan. 4 sloturi interschimbabile pot fi echipate cu adaptoarele incluse pe panoul special de incarcare. In plus, dispozitivul este prevazut cu 2 porturi USB pe partea laterala, unde pot incarcate orice tipuri de dispozitive cu interfata USB. Datorita designului elegant si a culorii negru-pian, incarcatorul se integreaza perfect atat la birou cat si acasa.

<marquee behavior="scroll" scrollamount=1 direction="up" height="140">TITLU</p>
<p>Spatiu pentru descriere</p>
<p><a href="url_link" target="_blank"><img src="url_imagine" alt="logo señal" width="167" height="142" class="imgcen" /></a></marquee>

Read More

Cum adaugi bannere flash in Blogger

Cateva trucuri pentru blogul tau. Bannerele Flash sunt cunoscute pentru capacitatea lor de a aduce un plus de interactiune ofertei comerciale prezentate clientului, fata de cele obisnuite, statice. Desi aspectele legate de rata lor de conversie sunt in continuare relativ controversate, superioritatea bannerelor flash a fost evidentiata de-a lungul timpului. Indiferent de performantele lor fata de bannerele web obisnuite, bannerele flash reprezinta o unealta utilizata in mod curent de majoritatea advertiserilor.

In situatia in care utilizati platforma Blogger a celor de la Google, probabil ca v-ati confruntat de-a lungul timpului cu o serie de probleme referitoare la utilizarea bannerelor Flash care au implementat in cadrul lor parametrul clickTAG.

 Desi majoritatea inconvenientelor sesizate in trecut par sa se fi rezolvat in versiunea curenta a platformei Blogger, una din problemele cunoscute se referea la faptul ca toate caracterele scrise cu majuscule erau transformate implicit in minuscule, pentru orice cod de embed utilizat, iar clickTAG-ul bannerelor flash devenea astfel inactiv.

Drept urmare, bannerele afisate nu functionau corect de fiecare data, iar utilizatorii care dadeau click pe o astfel de unealta nu erau redirectionati catre paginile advertiserilor promovati.

Pentru a va asigura ca bannerele flash preluate din orice site functioneaza corect in cadrul platformei Blogger, tot ce trebuie sa faceti este sa urmati pasii de mai jos: 1. Preluati codul html de embed al bannerului flash.

2. Inlocuiti toate ghilimelele simple (‘) din cadrul codului de embed cu ghilimele duble (“)
3. Plasati bannerul in blog, fie printr-un widget, fie direct in continutul post-ului vostru.

Adaugarea bannerelor flash prin widgeturi in platforma Blogger:

4. Testati bannerele adaugate.

Urmand acesti 4 pasi simpli va puteti asigura ca bannerele Flash cu clickTAG implementat vor functiona corect daca site-ul vostru are in spate platforma Blogger.

Intr-un viitor post voi explica cum se ataseaza bannere flash pe o plataforma de WordPress

Read More

Cum se deschide TOTUL intr-o noua fereastra?

Eticheta BASE este unul dintre acele coduri HTML care nu le luam mai nici o data in considerare:

<base target="content" />

Stabileste destinatia in mod implicit a linck-urilor unei pagini web, mai ales atunci cand se utilizeaza iframe.

Pe de alta parte, stiu ca adaugarea atributul target="_blank" la orice link il forteaza sa se deschida intr-o fereastra noua:

<a href="directie_URL" target="_blank"> LINK </a>

Daca vrem ca toate link-urile de pe o pagina sa se deschida intr-o fereastra noua, dar nu dorim sa adaugam atributul target="_blank" la fiecare link in parte, atunci vom folosi valoare BASE care sa faca acest lucru:
Imediat dupa <head> se va aduga

<base target="_blank" />

Prudenta mare, adaugarea acestei etichete afecteaza toate link-urile, inclusiv cele care folosesc JavaScript, astfel utilizarea sa este destul de limitata.

Read More

Meniu orizontal foarte simplu efect hover cu sageata

---

Acest meniu nu spun ca, este ceva nou si nici spectaculos dar este un meniu foarte simplu de aplicat, deschizi un nou gadget HTML/Javascript si adaugi codul de mai jos, daca esti atent, vezi unde se pot face modificari pentru adaptarea sa pe blogul tau.

Pentru url-link inlocuiesti ca de obicei cu link-ul care doresti sa apara, si Text 1-2-3-4-5-6 il schimbi cu descrierea ce vrei sa apara in meniu. Vezi cum arata meniul aici:

<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* poate sa fie "left", "right" o "center" */
font: bold 18px Georgia; /* marime litere */
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* spatiu intre link-uri */
}
ul.arrowunderline li a{ /* culoare text este neagra */
position:relative;
color:black;
padding-bottom:8px; /* distanta intre sageata si text */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* grosimea liniei de la sageata si culoarea este red */
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent red transparent; /* culoarea liniei este red */
}
</style>

<ul class="arrowunderline">
<li><a href="url-link">Text 1</a></li>
<li><a href="url-link">Text 2</a></li>
<li class="selected"><a href="url-link">Text 3</a></li>
<li><a href="url-link">Text 4</a></li>
<li><a href="url-link">Text 5</a></li>
<li><a href="url-link">Text 6</a></li>
</ul>

SUCCES !

Read More

Efecte imagine pentru blogul tau

Cateva trucuri pentru a modifica o imagine si a o adapta la un sptiu anume pe blogul tau. Cu ajutorul unui simplu cod html se poate modifica: grosimea de margine, rotunjirea colturilor fara a folosi programe complicate de pe net sau dimensiunile respectivei imagini.

<img src="url-imagine" style="height: 125px; width: 125px;-moz-border-radius: 8px;background-color: #ccc; border: 1px solid #2e2e2e;" /></a>

In codul de mai sus se poate modifica (marginea de la imagine 1px) schimband cifra 1 cu 2,3 sau 4 grosimea margini se mareste, vezi exemplele de mai jos:


Pentru rotunjirea margini de imagine apelam la functia: radius: 8px;
in exemplul urmator radius: 10px, 20px, 30px, 40px


Pentru modificarea dimensiuni unei imagini utilizam atributele height si width vezi exemplele; height: 125px; width: 125px;, height: 150px; width: 150px; sau height: 200px; width: 200px;

Read More

Imagini la intimplare

Acest cod este foarte simplu de adaugat intr-un gadget pe blog, ne ajuta sa folosim o imagine diferita ori de cate ori incarcam pagina de blog, cu alte cuvinte (Imaginea va fi diferit de fiecare dată cand intri pe blog)

Cum se adauga pe blog?
Mergi la Desing --> si intr-un nou gadget HTML/Javascript adaugi urmatorul cod:

<div style="text-align: center;">
<script type="text/JavaScript">
//<![CDATA[
var vkurandom = new Array()
vkurandom[1] = '<a href="url_pagina_web" target="_blank"><img src="url_imagine"/></a>';
vkurandom[2] = '<a href="url_pagina_web" target="_blank"><img src="url_imagine"/></a>';
vkurandom[3] = '<a href="url_pagina_web" target="_blank"><img src="url_imagine"/></a>';
vkurandom[4] = '<a href="url_pagina_web" target="_blank"><img src="url_imagine"/></a>';

var rn = Math.floor(Math.random() * vkurandom.length)
if (rn == 0) {
rn = 1
}
document.write(vkurandom[rn])
//]]>
</script>
</div>

in acest cod vei inlocui url_pagina_web si url_imagine cu pagina unde doresti sa fie redirectionata respectiva imagine, vezi exemplul de aici:

daca vrei sa adaugi o alta imagine in plus adauga la cod urmatoarea linie:

vkurandom[1] = '<a href="url_pagina_web" target="_blank"><img src="url_imagine"/></a>';

Read More

Meniu vertical - clase CSS

Adaug azi un nou meniu vertical folosind clase CSS, acesta utilizeaza o imagine de fond unica pentru a realiza 3 efecte diferite.

Pentru incorporarea lui intr-un blog se respecta urmatori pasi:

1. Copiaeza urmatoarea imagine in PC-ul tau, o gazduiesti intr-un servidor de imagini care iti ofera url-ul de la imagine.


2. Mergi la Desing --> Editati HTML , cu ajutorul tastelor Control + F cauta urmatoarea linie ]]></b:skin> si exact deasupra ei adauga urmatorul cod clase CSS:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.arrowgreen{
width: 180px; /*width of menu*/
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 0px;
border-width: 0px;
}

.arrowgreen ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.arrowgreen li a{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
display: block;
background: transparent url(url_imagine) 100% 0;
height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
padding: 4px 0 4px 10px;
line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
text-decoration: none;
}

.arrowgreen li a:link, .arrowgreen li a:visited {
color: #5E7830;
}

.arrowgreen li a:hover{
color: #26370A;
background-position: 100% -32px;
}


.arrowgreen li a.selected{
color: #26370A;
background-position: 100% -64px;
}

</style>

Inlocuieste url_imagine cu url-ul imagini gazguite. Salveaza modificarile si mergi la ultimul pas:

3. Deschde un nou gadget HTML/Javascript si adauga urmatorul cod html:

<div class="arrowgreen">
<ul>
<li><a href="url_link" >Home</a></li>
<li><a href="url_link" >CSS Library</a></li>
<li><a href="url_link" >DD Whois</a></li>
<li><a href="url_link" >Forums</a></li>
<li><a href="url_link" >Webmaster Tools</a></li>
<li><a href="url_link" >JavaScript</a></li>
</ul>
</div>

Inlocuieste ce este in culoare rosie cu url-ul paginilor care doresti sa apara si ce este de culoare albastra inlocueste cu descrierea sau titlul fiecarei pagini.

Un exemplu al acestui meniu vertical il gasesti pe blogul meu de proba clik aici

Read More

Elimina bara de navigare (NavaBar) in Blogger

Navabar este o bara de navigare care apare in partea de sus a blog-ul tau de blogger, şi poate fi eliminata foarte simplu daca te deranjeaza.

Mergi la Desing cauta "Editi HTML" şi inseraţi urmatorul cod înainte de linia </head> pentru a o gasi mai usor foloseste tastele "Control + F".

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

O data adaugat in sablon codul arata asa:

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style></head>

Salveaza modificarile si bara de navigare "NavaBar" a disparut.

Read More

O imagine diferita in fiecare zi din luna!

---

Pentru toti ce doresc sa adauge pe blogul lor o imagine diferita in fiecare zi in mod automat, pot utiliza un script ce functioneaza perfect in sbloanele de blogger.

Codul se poate adauga in urmatorul fel: mergi la Desing --> Adaugati un obiect gadget --> HTML/Javascript si aici introduci urmatorul cod:

<script type="text/javascript">
//<![CDATA[
// http://loseasi.blogspot.com
// Vku
var dvku=new Date();
var vkuday=new Array();

vkuday[1]='<img src="http://......"/>';
vkuday[2]='<img src="http://......"/>';
vkuday[3]='<img src="http://......"/>';
vkuday[4]='<img src="http://......"/>';
vkuday[5]='<img src="http://......"/>';
vkuday[6]='<img src="http://......"/>';
vkuday[7]='<img src="http://......"/>';
vkuday[8]='<img src="http://......"/>';
vkuday[9]='<img src="http://......"/>';
vkuday[10]='<img src="http://......"/>';
vkuday[11]='<img src="http://......"/>';
vkuday[12]='<img src="http://......"/>';
vkuday[13]='<img src="http://......"/>';
vkuday[14]='<img src="http://......"/>';
vkuday[15]='<img src="http://......"/>';
vkuday[16]='<img src="http://......"/>';
vkuday[17]='<img src="http://......"/>';
vkuday[18]='<img src="http://......"/>';
vkuday[19]='<img src="http://......"/>';
vkuday[20]='<img src="http://......"/>';
vkuday[21]='<img src="http://......"/>';
vkuday[22]='<img src="http://......"/>';
vkuday[23]='<img src="http://......"/>';
vkuday[24]='<img src="http://......"/>';
vkuday[25]='<img src="http://......"/>';
vkuday[26]='<img src="http://......"/>';
vkuday[27]='<img src="http://......"/>';
vkuday[28]='<img src="http://......"/>';
vkuday[29]='<img src="http://......"/>';
vkuday[30]='<img src="http://......"/>';
vkuday[31]='<img src="http://......"/>';
document.write(vkuday[dvku.getDate()]);
//]]>
</script>

Inlocuieste fiecare http://...... cu url-ul imagini ce doresi sa apara in fiecare zi.

Daca vrei sa adaugi un link la imagine atunci foloseste urmatoarea linie:
<a href="http://nouwidget.blogspot.com"><img src="http://......"/></a>

Acest script a fost realizat de prietenului meu VKU

Read More

Legatura cu blogul tau prin intermediul unui Widget

---

Cu această metodă oferi vizitatorilor tai un buton de legatura (link) intre blog-ul tu si al lor, el foloseste acelaşi sistem pentru a adăuga un widget în mod automat.

1. Mai intai desenam un buton,daca nu ai timp atunci poti construi un buton in cateva minute cu ajutorul CoolText.

2.Descarca imagine buton in pc -->gazdueste -->hosting şi copia URL-ul acestuia (adresă).

3.Mergi la Desing --> Adaugati un obiect gadget --> HTML/Javascript si adaugi urmatorul cod:

<img src="URL_IMAGINE_BUTON"/>
<form action="http://beta.blogger.com/add-widget" method="POST">
<input value="FAVORITO" name="widget.title" type="hidden"/>
<textarea style="display:none;" name="widget.content">

<a href="URL_BLOGUL_TAU"><img src="URL_IMAGINE_BUTON" alt="TITLU_BLOG"></a>

</textarea>
<input
value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>
<input
value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>
<input value="Ia-ma cu tine" name="go" type="submit"/>
</form>

Inlocueste ce este scris cu litere mari cu datele tale (url_imagine_buton, url_blogul_tau si titlu blog).

Un exemplu funcional fa o proba:

<br /><br /><a href="http://nouwidget.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh9erEZ6KFDraWJSXk6qUKHUuxzka0dLI199xnQvCxleepMW48O-ivalkCkhFvhGrDmJNNugJxRMOzFMKpsw27tG0C9RzSeTkLwj5-szeVXxcyeEZjWLbtd5GoT7ejo_i0cFK1tbCltHpU/s400/cooltext519648493.png" alt="Pentru Webmasters" /></a><br />

Read More

Tabele cu margini originale

In acest post prezint cateva coduri pentru realizarea unor tabele cu anumite efecte.

1. Tabel cu linie punctata, acesta este codul:

<table style="BORDER: red 6pt dotted" width="200" border="0"><br /><br /><tbody><tr><td> <br /><br /><br /><br />AICI SCRIE TEXTUL <br /><br /><br /><br /></td></tr></tbody></table>

REZULTATUL ESTE URMATOR:

AICI SCRIE TEXTUL

2. Tabel cu linie in dungi, acesta este codul:

<table style="BORDER: blue 6pt dashed" border="0" width="200"><br /><br /><tbody><tr><td> <br /><br /><br /><br />TEXT <br /><br /><br /><br /> </td></tr></tbody></table>

REZULTATUL ESTE URMATOR:

TEXT

3. Tabel cu linii duble, aici este codul:

<div align="center"><br /><br /><table style="BORDER: green 4.5pt double; WIDTH: 170.8pt; HEIGHT: 134.8pt" border="0"><br /><br /><tbody><tr><td> <br /><br /><br /><br /><center>TABEL CU DOUA LINII</center> <br /><br /><br /><br /></td></tr></tbody></table> <br /><br /><br /><br /></div><br /><br />

REZULTATUL ESTE URMATOR:

TABEL CU DOUA LINII

4. TABEL STIL TABLOU, acesta este codul:

<br /><table cellspacing="5" width="200" align="left" border="15"><br /><br /><tbody><tr><br /><br /><td valign="top"> <br /><br /><br /><br />TABEL STIL TABLOU <br /><br /><br /><br /></td></tr></tbody></table><br /><br />

REZULTATUL ESTE URMATOR:

TABEL STIL TABLOU

Read More

Deschide un video intr-o fereastra (PapUp)

---

Unele template de blogger sunt un pic mai inguste, şi adaugand un videoclip acesta trece de marimea unui post, deşi se poate edita dimensiunea ecranului video, uneori, video nu poate fi văzut ca în dimensiunea originală, in acest caz o solutie buna este deschiderea unui videoclip într-o fereastră pop-up.

Cum functioneaza?
Simplu vom inlocui video cu o imagine si in momentul cand se da clic pe ea se deschide o fereasra pop-up unde poate fi vizionat respectivul video. Folosind urmatorul cod HTML rezolvam aceasta problema:

<a title="Vezi video" href="javascript:void(0);" onclick="window.open('http://www.youtube.com/v/DnzuKKG6-AA&autoplay=1', 'popup', 'left=390, top=200, width=425, height=344, toolbar=0, resizable=1')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ36xNF40x56un47__W-g9epu3BKPyyzLZGJj-_W__GiMLHb5GbvwWKsMC5D_OBZ_GbdDc4I1RDd1DS3rc9eTHSqAX5XddcUVD1Pg_ctIFZN8d7h1KjCXgulzncQf0aEaW48dSG1cdEQd1/s400/video-youtube.jpg" title="Vezi video" /></a>

Acum, schimba URL-ul de video de pe YouTube, te rugăm să reţi că trebuie să schimbi doar ultima parte a adresei, vezi litere care sunt în albastru de pe cod, altfel întreaga fereastră de YouTube se va deschide.

Acest cod este programat sa deschida automat video daca doresi sa nu se deschida asa atunci, se elimina din codul HTML aceasta parte : &autoplay=1'

VEZI VIDEO

Acest cod nu functioneaza cu Internet Explorer, se deschide in Opera,Firefox,Safary etc.

Read More

Suprapune un text pe o imagine

Există multe modalităţi de a suprapunere text pe o imagine. Cele mai comune este de a plasa o imagine ca fundal intr-un bloc DIV. Cateva exemple se vad mai jos unde apare un text scris la inceputul imagini si in a doua imagine textul apare in partea de jos a imagini.Logic textul apare in prima imagine sus, pentru aplicarea lui jos trebuie adaugat in DIV proprietatea position: relative si la continul propietatea position: absolute.In acest mod folosind left, right, top si bottom se poate adauga textul in orice loc intr-o imagine.

---

Un buchet de flori
Pentru toate femeile de 8 Martie

<div style="background: url(URL_Imagine) no-repeat scroll left top transparent; height: 293px; margin: 0pt auto; width: 400px;">
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; color: rgb(255, 255, 255); margin: 0pt; padding: 5px 10px; width: 300px;">Text prima linie
Text a doua linie</h4></div>

Un buchet de flori
Pentru toate femeile de 8 Martie

<div style="position: relative; background: url(URL_Imagine) no-repeat scroll left top transparent; margin: 0pt auto; height: 293px; width: 400px;"><h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: rgb(255, 255, 255); margin: 0pt; padding: 5px 10px; position: absolute; width: 300px;">Text prima linie
Text a doua linie</h4></div>

Un alt exemplu mai simplu de a scrie un text pe o imagine gasesti aici

Read More

Meniu orizontal cu text in miscare (MARQUEE)

Un elegant meniu orizontal cu un text in miscare in partea superioara (se poate scrie un text de intimpinare sau orice alta informatie).A nu se uita! marimea de text, culorile de fond sau de text se pot adapta dupa desenul blogului tau.

Pentru a vedea un exemplu de meniu cu text in miscare click AICI.

Cum se poate adauga acest meniu pe un blog?
Se merge la Desing --> Editare HTML cu ajutorul CTR+F i cauta linia de cod: ]]></b:skin> si exact deasupra ei adaugi urmatorul cod:

#menu-title {
padding:5px;
background:#333; /* Culoare de fond de la marquee */
border-bottom:1px solid #fff;
}
#menu-title h3 {
padding:0; margin:0;
color:#ccc; /* Culoare de text de la marquee */
font-family:Verdana, serif;
font-weight:bold;
font-size:130%; /* Marime text de la marquee*/
}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:#ccc; /* Culoare fond de meniu */
border-bottom:1px solid #999;
}
#nav li{float:left; margin:0; padding:0;}
#nav a {
float:left;
display:block;
padding:6px 30px 6px 5px;
text-decoration:none;
font-family:Verdana, serif;
font-weight:bold;
font-size:90%; /* Marime text de meniu */
color:#666; /* Culoare text de meniu */
/* Culoare fond de meniu */
background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihY-dn724X6sAR_RLvNl_4Bv_as22sLfV9xO7i7TsFkS7iwaF7yruLXK0ErIvTcATwJ0FEWrjrEhlsz54oqgG0-YaLqdAlIXsUJIPcUJ4cZdCKguWPZd4VRld-luhUab1DM5OS2Lt-O1E/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}

Acum cauta <body> si imediat dupa adauga codul meniului de mai jos:

<div id="menu-title">
<h3><marquee behavior="alternate">Aici vine textul</marquee></h3>
</div>
<ul id="nav">
<li id="nav-1"><a href="URL de LINK">Acasa</a></li>
<li><a href="URL de LINK">Director</a></li>
<li><a href="URL de LINK">Contact</a></li>
<li><a href="URL de LINK">Noutati HTML</a></li>
</ul><div class='clear'/>

Inainte de a salva modificarile nu uita sa schimbi "URL de LINK" cu url-ul ce doresti sa apara in meniu si de asemenea textul.

Read More

Gadget de testare pe blog

Un gadget de testare este diferit de un gadget de sondaje pe care il ofera blogger. In sondaje nu ai raspunsuri adevarate sau false,corecte sau incorecte in schimb in testare ai. Cum se creaza un gadget test? simplu,folosind un cod html.

Mergem la Desing --> Adauga un gadget HTML/Javascript si adauga codul de mai jos dar ATENTIE! inainte de salvar modificarile trebuie sa inlocuiesti datele cu intrebarea si raspunsurile dorite de tine pentru test.

<center><div style="background-"&gt;<span >Care este capitala Columbiei?</span></div></center><div style="background-">
<input name="b1" onclick="alert('Corect');b1.checked;" type="radio">Bogota<br>
<input name="b2" onclick="alert('Incorect');b2.checked;" type="radio">SAN MARINO<br>
<input name="b3" onclick="alert('Aproape');b3.checked;" type="radio">MOSQUIERA<br>
<input name="b4" onclick="alert('Incearca din nou');b4.checked;" type="radio">LIMA<br></div>

Si rezultatul in vezi mai jos fa o proba:

Care este capitala Columbiei?

Bogota

SAN MARINO

MOSQUIERA

LIMA

Read More

Link automat

Un prieten mi-a pus o intrebare curioasa:
Exista posibilitatea de a pune un link si cand trece mouse-ul peste el sa se deschida automat?

Sincer nu imi trecuse prin cap asa ceva dar pentru ca, omul astepta un raspuns, am modificat un cod adaugand un mic truc "onmouseover" si rezultatul este urmatorul:

fa o proba treci cu mouse-ul peste link-ul de mai jos.

TrendBook
Cod link automat:

<a href="URL pagina web" onmouseover="window.location=this.href"> Descriere link</a>

inlocuieste "URL pagina web" si "Descriere link" cu url-ul si respectiv descrierea ce doresi sa apara in link.

Un comentariu nu strica !!! Spune-ti parerea !

Read More

Tag-uri in miscare pentru blog

Sigur ai vazut in unele bloguri un gadget cu tag-uri in miscare. Daca doresit sa adaugi la blogul tau un gadget atunci poti folosi eticheta (tag cloud) în bara laterală de Blogger cu efect flash.

Mai jos gasesti codul acestui gadget.

Mergem la Desing --> Editare HTML si cautam linia de cod urmatoare:

<b:section class='sidebar' id='sidebar' preferred='yes'>

- daca nu gasesti linia de mai sus este posibil ca in anumite sabloane de blogger sa apara urmatoarea linie:

<b:section-contents id='sidebar-right-1'>

exact sub aceste lini adaugam urmatorul cod.

<b:widget id='Label99' locked='false' title='Tag-uri' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type="application/x-shockwave-flash" data="http://ciudadblogger.hostzi.com/tagcloud.swf" width="190" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://ciudadblogger.hostzi.com/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

- ce se poate modifica in acest gadget:
- "Tag-uri" titlu gadget
- "190 si 200" inaltimea si latimea gadget
- "#ffffff" modifica culoarea de fond gadget
- style='12' marimea literei

salveaza modificarile si deja ai instalat un gadget de tag-uri in miscare pe blogul tau.

Read More

TITLU POSTARE IN DIFERITE CULORI

Va explic acum cum se poate modifica toate sau o parte din culoarea unui intrare. Acest lucru este foarte util pentru a evidenţia orice cuvânt în titlu, sau să diferenţieze în mod clar o intrare de alta. Puteţi vedea în titlul acestui post un exemplu.

Pentru a face acest lucru trebuie doar să se adauge în Editor Post, unde scrie "Titlu:" un cod ca acesta:

<font >TITLU INTRARE</font>

Inlocuieste "TITLU INTRARE" cu titlul sau cuvântul dorit, 000000 reprezinta culoarea neagra se poate inlocui cu ori ce culoare folosind codul hexadecimal.

De fapt, in realitate in editorul de post in spatiul rezervat "titlului" se admite coduri HTML, astfel încât se poate schimba culoarea textului sau adăuga o imagine mică, de asemenea putem schimba dimensiunea textului si forma literei bold, italic, etc . Întotdeauna ţinând cont de faptul că ceea ce este explicat aici este destinat utilizării pe unul sau mai multe intrări, şi evident, nu in toate. Este doar o modalitate de a evidenţia un cuvânt din titlu.

---

Read More

Meniu orizontal in culori cu CSS

Un interesant meniu orizontal in culori adaptat pentru blogger realizat cu CSS.Mai jos este doar o imagine dar il poti vedea cum apare instalat pe blog in exemplul urmator: click aici

Cum se instaleaza acest meniu?
Mergi la Aspect (Desing) --> Editare HTML cauta linia ]]></b:skin> si exact inaintea ei adaugi urmatorul cod CSS:

#middle {
width: 765px;
float:center;
padding:10px 10px 10px 10px;
margin:10px 0;
background:#BDDFEB url() no-repeat;
}
.category {
width:133px;
float:left;
border-top:8px solid #333;
margin:5px;
padding:15px 10px 10px 10px;
background:#33AAFF;
}
.category p {
margin:0;
}

#cat-1 {width:133px; margin:0; border-top:8px solid #9977FF; color:#000000;}
#cat-2 {width:133px; margin:0; border-top:8px solid #66BB88; color:#000000;}
#cat-3 {width:133px; margin:0; border-top:8px solid #FF55FF; color:#000000;}
#cat-4 {width:133px; margin:0; border-top:8px solid #9911FF; color:#000000;}
#cat-5 {width:133px; margin:0; border-top:8px solid #FFDD33; color:#000000;}

#cat-1 h2, #cat-2 h2, #cat-3 h2, #cat-4 h2, #cat-5 h2 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
color:#333;
}
.category a {
color:#ffffff;
display:block;
background:none;
}
.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}
#cat-1:hover {background:#9977FF; color:#352726; }
#cat-2:hover {background:#66BB88; color:#352726; }
#cat-3:hover {background:#FF55FF; color:#352726; }
#cat-4:hover {background:#9911FF; color:#352726; }
#cat-5:hover {background:#FFDD33; color:#352726; }
#cat-1 h2 a:hover, #cat-2 h2 a:hover, #cat-3 h2 a:hover, #cat-4 h2 a:hover, #cat-5 h2 a:hover {
color: #fff;
}

verifica daca totul este bine si salveaza modificarile.

Pasul 2 Editare nou gadget HTML/Javascript si adauga urmatorul cod html:

<div class='clearfloat' id='middle'>
<div class='cat-1'>
<div class='category section' id='cat-1'><div class='widget text' id='text1'>
<h2 class='title'><a href='URL 1'></a></h2><b>TEXTUL 1</b>
</div></div></div>

<div class='cat-2'>
<div class='category section' id='cat-2'><div class='widget text' id='text2'>
<h2 class='title'><a href='URL 2'></a></h2><b>TEXTUL 2</b>
</div></div></div>

<div class='cat-3'>
<div class='category section' id='cat-3'><div class='widget text' id='text3'>
<h2 class='title'><a href='URL 3'>/a></h2><b>TEXTUL 3</b>
</div></div></div>

<div class='cat-4'>
<div class='category section' id='cat-4'><div class='widget text' id='text4'>
<h2 class='title'><a href='URL 4'></a></h2><b>TEXTUL 4</b>
</div></div></div>

<div class='cat-5'>
<div class='category section' id='cat-5'><div class='widget text' id='text5'><h2 class='title'><a href='URL 5'></a></h2><b>TEXTUL 5</b>
</div></div></div></div>

Latimea de meniu se poate modifica de aici:
#middle {
width: 765px;

Se poate schimba culoarea textului de aici:
.category a
color:#ffffff;

La fel se poate schimba culoarea textului cand trece mouse-ul :
.category a:hover
color:#fff;

Pare un pic complicat cu atatea modificari dar merita incercat.

Read More