Tooltips cu CSS

Tooltips sunt descrieri de avertizare explicative pentru un anumit text sau informatie. Ceva asemanator in HTML este atributul title ce face acelasi lucru, afiseaza o descriere de un linck sau de o imagine de exemplu pune mouse-ul aiciacesta este un exemplu de avertizare

Tooltips este si are acelas efect precum atrubutul title dar diferenta este urmatoarea cu primul se poate personaliza: culoarea de fond , textul etc.

In acest caz vom vedea cum se creeaza un tooltips folosind stilul CSS fara nici un fel de Javascript care face mai lenta o pagina web sau blog. Poti vedea rezulttul aici.treci cu mouser-ul pesteacesta este un tooltips realizat cu CSS la trecerea mouse-ului peste el afiseaza o descriere si va dispare o data cu retragerea lui

Pentru aplicarea acestui truc mergi la Aspect --> Editare HTML si inainte de ]]></b:skin> adaugi urmatoarele date:

a.tooltip { /* Estilos del texto que tiene el tooltip */
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0F8;
color: #000;
text-align: center;
}

salvezi modificarile.

Si acum ori de cate ori ai nevoie sa adaugi o explicatie sau informatie pe un linck sau imagine vei folosi urmatorul cod:

<a class="tooltip">text de proba<span>Aici vine scrisa informatia care doresti sa apara la trecerea de mouse</span></a>

In acest cod ai doar trei lucruri de tinut minte:
Ori de cate ori folosesti codul de mai sus stilul class="tooltip" nu trebuie sa lipseasca.
Inlocuieste text proba si Aici vine scrisa informatia care doresti sa apara la trecerea de mouse cu ce doresi sa apara.

Read More

Original motor de cautare interna pentru blog

Pe cat de eficient acest motor de cautare interno pentru blog pe atat de original prin desenul sau. Pentru al instala pe blogul tau mai precis in sitebar (partea dreapta a blogului) sau unde doresti sa apara va trebui sa folosesti cele doua coduri de mai jos.

<form action="/search" style="display:inline;" method="get">
<input id="s" onfocus="this.value=''" value="Cautare in blog" class="formsuch" name="q" size="17" type="text"/>
<input alt="Cautare" src="http://img142.imageshack.us/img142/7/searchiconry7.png" class="searchicon" value="Search" name="submit" type="image"/>
</form>

Salveaza modificarile si mergi la Aspect --> Editare HTML --> aici cautam linia ]]></b:skin>: si exact inaintea ei adaugam urmatorul cod CSS:

.searchicon:focus {
background-color: white;
color : black;
outline : none; }

input:focus {
background-color: #FFFFCC;
color : black;
outline : none; }

legend {
padding: 0.5em 0.5em 0 0.5em;
font: 30px Georgia,Verdana,sans-serif;}

input {
border : 1px solid black;
padding: 4px;
outline : none; }

.searchicon {
margin-left : -26px;
margin-bottom : -29px;
border : 0;}

Rezultatul este urmatorul desi in acest post este doar o imagine a acestui motor:

Daca doresti un alt desen pentru un motor de cautare interna vezi aici

Read More

Efectul <strike> utilizand CSS

Acesta este un truc rapid si usor de a corecta un text sau o parte dintr-un document. Tag-ul <strike> il folosim atunci cand dorim sa anulam un text care nu ne mai intereseaza, incadreaza respectivul text intre <strike>aici vine textul</strike>

si rezultatul este acesta:
corecteaza un text sau o parte dintr-un document

Acum pentru a folosi acest truc cu ajutorul CSS apelam la urmatoarul exemplu: mergem la sablonul blogului si Aspect --> Editare HTML si inaite de linia </head> adaugam urmatorul cod:

<style type='text/css'>
strike {text-decoration:none; background:transparent url(url_de_la_imagine) repeat-x left 55%}
</style>

In acest caz trebuie doar sa inlocuiesti (url_de_la_imagine) cu cel de la imaginea care doresti, vin in ajutorul tau cu cateva imagini care le poti folosi, alege imaginea clik copieaza si adauga la codul de mai sus.

copiaza

copiaza

copiaza

copiaza

copiaza

copiaza

Salveaza modificarile si acum ori de cate ori doresti sa corectezi un text foloseste <strike>aici vine textul</strike>

Read More

Meniu vertical animat pentru blog

• Home


• Blog


• About


• Contact

Intr-un post anterior prezentam un model de meniu vertical foarte usor de instalar pe un blog sau site. Azi va prezint un alt meniu interesant in felul sau, este un meniu animat,care la trecerea mausului peste el fiecare parte din el se deplaseaza.Il poti folosi in partea stanga sau dreapta a blogului tau.

Pentru inceput mergem la Aspect ---> Editare HTML/Javascript si exact inainte de linia ]]></b:skin> adaugam urmatorul cod:

Stil CSS

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none; }

#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:160px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;

text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;

transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

Salveaza modificarile si acum copieaza codul html de mai jos si il instalezi in zona in care vrei sa-ti apara meniul pe blog (dreapta sau stanga)

cod HTML

<div id="list8">
<ul>
<li><a href="url">Home</a></li>
<li><a href="url">Blog</a></li>
<li><a href="url">About</a></li>
<li><a href="url">Contact</a></li>
</ul>
</div>

Vei inlocui "url" cu url-ul care doresti sa apara si deasemenea descrierea.
Salveaza modificarea si asta este tot ai un meniu animat instalat.

Read More

Motor de cautare interna pentru blog

Pentru a usura munca celor care viziteaza blogul tau in cautarea unei informatii poti folosi un motor interno foarte eficient si usor de instalat .

Cum instalam codul html? Mergem la Aspect -> Adaugare gadget -> HTML/Javascript si adaugam urmatorul cod:

<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Cauta in Blog";' onfocus='if (this.value == "Cauta in Blog") this.value = "";' type='text' value='Cauta in Blog'/>
<input class="submit" type="submit" value="Go" />
</form>

Daca vrei sa folosesti o imagine (o lupa) inlocuind textul "Go" atunci poti folosi urmatorul cod:

<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Cauta in Blog";' onfocus='if (this.value == "Cauta in Blog") this.value = "";' type='text' value='Cauta in Blog'/>
<input alt='Cauta' border='0' src='http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Crystal_Clear_app_xmag.png/32px-Crystal_Clear_app_xmag.png' type='image'/>
</form>

Salveaza modificarea si ai un motor de cautare interno instalat pe blog.

Read More

Widget paginator blog cu scrollbar

Cu acest script se poate depasi numararea a peste 500 de postari pe un blog . Stilul widget-ului este diferit de cel clasic de numarare pagini acesta fiind o barascroll care apare afisata la sfarsitul fiecarei pagini de blog . Pentru a instala aceasta bara pe blogul tau trebuie efectuati urmatori pasi:


Mergi la Editare HTML si cauti linia ]]></b:skin> si exact inainte adaugi cod de mai jos :

Stilul CSS

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPITo40egHhX1DWO-7eBOaIYCszqUE_8KM9YTTzIUvbWy2-OWNz8fwfg6O7cLhYydCgCsnLGNh6X5SLEtZESHZ4fFdc-qHBa8FCTVxPFABhBtPACSYQE6vxjWaaZcyqE0Une8h3CLLVRQ/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}

.fullsize .scroll_thumb {
display:none;
}

.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

Pasul doi cautam linia </body> si exact inainte adaugam codul:

JavaScript

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Salvezi modificarile si gata ai bara de numarare pagini instalata pe blog.
Poti vedea cum arata barascroll instalata aici

Read More

Generator cod HTML de culori complet

Hex Code Generator V1
Un complet generator de coduri pentru culori creat in flash si se poate folosi pentru generarea codurilor hexadecumal,HSL,HSV care ne dau codul BGR de la culoarea alesa.

În plus, se evidenţiază o caracteristică foarte important care vă sugerează culori care s-ar portivi cu o culoare aleasa , ceea ce face mai uşor combinatia de culoare.
Daca vrei sa postezi acest generator in bara lateral a blogului va trebui sa copiezi codul de mai jos .

<span style="direction: ltr; text-align: left;"></span>
<div id="TrixCGv1">
<span style="direction: ltr; text-align: left;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" height="430" width="400"><param name="movie" value="http://e-infotainment.com/trixapps/trixcg/trixcgv1/trixcgv1.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#cccccc">
<embed src="http://e-infotainment.com/trixapps/trixcg/trixcgv1/trixcgv1.swf" flashvars="lng=Tamil&timeint=30&skt=yes" quality="high" bgcolor="#cccccc" width="400" height="430" name="flash" align="middle" play="true" loop="false" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></span>
</div>

Du-te la Layout(Aspect) -> Adăugaţi Gadget alege HTML / JavaScript şi inserteaza codul.Pentru a redimensiona schimba ceea ce este de culoare roşie, proprietatea height = inaltimea , width = lăţimea unde se pune dimensiunea dorită.

Read More