M-a intrebat cineva cum introduce lightbox pe platforma blogger? Eu stiu o varianta care nu merge pe toate blogurile, are codul mai restrans insa sar putea sa va dea dureri de cap. Am gasit pe blogul Peste noapte o a doua varianta, voi alegeti :D
1
Pasi:
1: Introduceti in <head> </head> urmatorul cod:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2: Introduceti cudul:
-inainte de ]]></b:skin>
-dupa ]]></b:skin>
-intre <style></style> (daca nu gaseste style apasa pe extinde sablon)
Codul:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"
2
Intre <head></head> copiaza codul:
<script src='http://www.geckoandfly.com/wp-content/uploads/js/prototype.js' type='text/javascript'/>
<script src='http://www.geckoandfly.com/wp-content/uploads/js/scriptaculous.js' type='text/javascript'> </script>
<script src='http://www.geckoandfly.com/wp-content/uploads/js/effects.js' type='text/javascript'/>
<script src='http://www.geckoandfly.com/wp-content/uploads/js/lightbox.js' type='text/javascript'/>
2.Inainte de ]]></b:skin> copiaza codul:
/* Footer
----------------------------------------------- */
#footer {
width:100%;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
#lightbox{
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://photos1.blogger.com/blogger/7994/1253/1600/blank.0.gif) no-repeat; /* Trick IE into showing hover
*/
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://photos1.blogger.com/blogger/7994/1253/1600/prevlabel.0.gif) left 15%
no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://photos1.blogger.com/blogger/7994/1253/1600/nextlabel.0.gif) right 15%
no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}
#imageData{
padding:0 10px;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline-block;
width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
</style>
Ca sa functioneze trebuie sa introduceti pozele in urmatorul format:
<a href="
http://farm4.static.flickr.com/3160/2788039215_d0ceb60494.jpg" rel="lightbox"><img alt="
titlu" src="
http://farm4.static.flickr.com/3160/2788039215_d0ceb60494.jpg" /></a>
<a href="
linkimagine.png" rel="lightbox"><img alt="
titlulfoto" src="
linkimagine.png" /></a>
Fotografiile eu mi le tin pe flick.com sau photobucket.com. Pozitionarea se face printr-un click pe ea si apasare pe pozitionare la dreapta/stanga/mijloc/ etc ca si in cazul textului. Iar marimea fotografiei se face tot printr-un click ea iar pe ecran iti va apare anumite marimi ..
Succes!
[+/-] Read More...
[+/-] Summary only...
Dupa cum se vede, in dreapta este o sectiune(Vorbeste cu mine), prin care vizitatorii pot sa vorbeasca cu mine pe messenger, daca sunt online.
Am gasit un nou template pentru blogger, arata destul de bine. Merge si adsense pe el, un patrat de 250/250 in sidebar sau 468/60 sub posturi.
