Butoane pe blog,site sau forum.
Live Demo Download
Pentru adaugarea acestor butoane in blog-ul Blogger urmati pasii urmatori:
Ne logam la contul blogger;
Clik pe sablon;
Inainte de a edita html-ul ar fi bine sa va salvati o copie a sablonului in calculator, in caz ca ceva nu merge bine,sau apasati pe butonul Salvati fara a Previzualiza. Astfel puteti reveni la vechiul sablon oricand doriti. Dati clic pe,
"Descărcaţi şablonul complet" si salvati o copie;
Clik pe editati html;
Dam un clik in interiorul html-ul-ui;
Apoi apasam simultan tastele Ctrl si F,iar in casuta care va aparea scriem urmatorul cod:
</b:skin>
4. Dupa ce il gasiti adaugati imediat deasupra lui urmatorul cod CSS:
.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
Salvati sablonul.
Acum nu ne mai ramane decat sa adaugam butoanele pentru Download si Demo in articolele unde dorim sa le inseram. Pentru a le adauga, dati click in editorul HTML al postarii si in locul unde doriti sa le adaugati lipiti urmatoarele coduri:
Pentru butoul Demo;
<a class="demobutton button" href="pune link-ul tau aici" rel="nofollow" style="float: center;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>
Pentru butonul Download;
<a class="button downloadbutton" href="pune link-ul tau de download aici" rel="nofollow" style="float: center;" target="_blank"><span style="display: inline-block;">Download</span></a>
Inlocuiti,"pune link-ul tau aici" si "pune link-ul tau de download aici" din cele doua coduri, cu link-urile voastre.
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
Salvati sablonul.
Acum nu ne mai ramane decat sa adaugam butoanele pentru Download si Demo in articolele unde dorim sa le inseram. Pentru a le adauga, dati click in editorul HTML al postarii si in locul unde doriti sa le adaugati lipiti urmatoarele coduri:
Pentru butoul Demo;
<a class="demobutton button" href="pune link-ul tau aici" rel="nofollow" style="float: center;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>
Pentru butonul Download;
<a class="button downloadbutton" href="pune link-ul tau de download aici" rel="nofollow" style="float: center;" target="_blank"><span style="display: inline-block;">Download</span></a>
Inlocuiti,"pune link-ul tau aici" si "pune link-ul tau de download aici" din cele doua coduri, cu link-urile voastre.
Niciun comentariu:
Trimiteți un comentariu