dr-blogger2: image

Κρυφό Share Menu
ένα μενού που βρίσκεται στη δεξιά πλευρά του blog σας, στατικό, κρυφό, και ανοίγει όταν περνάει από πάνω το ποντίκι σας...

Αφαιρέστε το: Εγγραφή σε Αναρτήσεις (Atom)
Πολλοί από εσάς θέλετε να σβήσετε από το blog σας τη φράση "Εγγραφή σε Αναρτήσεις (Atom)"....

Εμφάνιση αναρτήσεων με ετικέτα image. Εμφάνιση όλων των αναρτήσεων

Lightbox για Είσοδο στο Blog σας

Νέοι bloggers γεια σας !!!Χωρίς πολλά λόγια σας δίνω ένα κώδικα για εικόνα, η βίντεο η κείμενο (στατικό) που καλωσορίζει τον επισκέπτη στο blog σας...DEMO...την εικόνα που βλέπετε, μπορεί να είναι και βίντεο, η κείμενο, και να δείχνει η γράφει οτιδήποτε !!!Και βέβαια, αντί για καλωσόρισμα μπορείτε να βάλετε ότι μήνυμα εσείς θέλετε...Δεν μπαίνει ο επισκέπτης στο blog σας αν δεν το κλείσει....
Ο ΚΩΔΙΚΑΣ: (βάλτε τον σαν gadget-javascript)

<div class="widget-content">
<style type="text/css">

</style>

<script type="text/JavaScript">

</script>

<script language="JavaScript1.2">

isMouseover = false;
isDragging = false;

function MouseDownLayer(e)
{
isIE = document.all;

documentTag = isIE ? "BODY" : "HTML";
srcElement = isIE ? event.srcElement : e.target;
layerElement = isIE ? document.all.Layer1 : document.getElementById("Layer1");

while (srcElement.id != "Layer1TitleBar" && srcElement.tagName != documentTag)
{
srcElement = isIE ? srcElement.parentElement : srcElement.parentNode;
}
if (srcElement.id == "Layer1TitleBar")
{
offsetX = isIE ? event.clientX : e.clientX;
offsetY = isIE ? event.clientY : e.clientY;
currentX = parseInt(layerElement.style.left);
currentY = parseInt(layerElement.style.top);
isDragging = true;
document.onmousemove = MouseMoveLayer;
}
}

function MouseMoveLayer(e)
{
if (!isDragging) return;

// Internet Explorer ?
if (document.all)
{
layerElement.style.left = currentX+event.clientX-offsetX;
layerElement.style.top = currentY+event.clientY-offsetY;
}
else
{
layerElement.style.left = currentX+e.clientX-offsetX + "px";
layerElement.style.top = currentY+e.clientY-offsetY + "px";
}
return false;
}

document.onmousedown = MouseDownLayer;
document.onmouseup = Function("isDragging=false");

</script>

<div id="Layer1"> <table border="0" bgcolor="#103C7B" width="100%" cellspacing="0" cellpadding="2">
<tbody><tr>
<td id="Layer1TitleBar" style="cursor:move" width="100%">
<ilayer width="100%" onselectstart="return false">
<layer width="100%" onmouseover="isMouseover=true" onmouseout="isMouseover=false">
<font face="Arial" color="#FFFFFF" style="font-size:13px;text-decoration:none"><b></b></font> </layer>
</ilayer>
</td>
<td style="cursor:hand" valign="top">
<a href="#" onclick="layerElement.style.visibility='hidden';return false">
<font color="#FFFFFF" face="Arial" style="font-size:13px;text-decoration:none"><b>Κλείσιμο</b></font>
</a>
</td>
</tr>
</tbody></table><a href="#" style=""><center><img height="550" width="700" src="http://i972.photobucket.com/albums/ae206/RuSsiA_Bboy/Welcome-to-my-page.gif" /></div></center></a></div>

***τα χρωματιστά σημεία, σας δείχνουν τα μεγέθη, τις διαστάσεις και με το μπλε φόντο, σας δείχνω που θα βάλετε τη φωτογραφία, το βιντεο η το κείμενο
***ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ .....επειδή δεν πρέπει να λειτουργεί συνέχεια και σε όλες τις σελίδες του blog σας, (γιατί θα σπάσετε τα νεύρα στους επισκέπτες σας που θα πρέπει να το κλείνουν σε κάθε ανάρτηση σας που θα διαβάζουν), διαβάστε αυτην την ανάρτηση, ΚΑΝΤΕ ΤΑ WIDGETS ΟΡΑΤΑ/ΚΡΥΦΑ ΣΕ ΣΥΓΚΕΚΡΙΜΕΝΕΣ ΣΕΛΙΔΕΣ για να βάλετε αυτό το gadget ΜΟΝΟΝ στην αρχική σελίδα....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(για απορίες σας, στείλτε email η γράψτε σχόλιο)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Gif (Κινούμενη εικόνα) στο Blogger

Νέοι bloggers γεια σας !!! Ναι !!! ο θείος Blogger μισεί τα gif ...και για να γίνω πιο κατανοητός, το εξηγώ...ο θείος blogger, το "παρακλάδι" της google, αλλά και η μαμά google, μισούν τις κινούμενες εικόνες...Η ωραιότερη μορφή εικόνας, το gif, δεν έχει ακόμα συγκινήσει τον blogger, ώστε να μη παιδευόμαστε όλοι εμείς (τα εκατομμύρια) οι bloggers, και να "ανεβάζουμε" τις κινούμενες εικόνες μας κατ' ευθείαν από την ανάρτησή μας.....
Κατά καιρούς έγιναν κάποιες απόπειρες από τον blogger, αλλά (δεν γνωρίζω γιατί), ματαιώθηκαν μετά από λίγο καιρό...Αλήθεια τι φοβάται ο blogger, η μάλλον γιατί δεν ασχολείται (τεχνολογικά) ώστε να διορθώσει αυτό το βάσανο...Γιατί βάσανο είναι να πρέπει να ανεβάζουμε τα gif μας σε ένα host site εικόνων, και μετά να τα μεταφέρουμε στην κάθε ανάρτησή μας.....
Βέβαια, υπάρχει το piccasa ...ο χώρος που "ανεβαίνουν" όλες οι εικόνες μας που περιέχονται στα blog μας....αλλά η διαδικασία είναι χρονοβόρα !!! Ανεβάζουμε τα gif στο piccasa,... και μετά κάνουμε copy-paste τη διεύθυνση (url) για να φαίνονται κινούμενα στις αναρτήσεις μας...Γιατί αυτός είναι ο δρόμος που ακολουθούμε όλοι...και επειδή πολλοί νέοι bloggers δεν το γνωρίζουν, τώρα σας το είπα έμμεσα...
Κάθε blog μας, έχει το χώρο του να φιλοξενεί τις εικόνες μας στο piccasa (ιδιοκτησίας google) !!!Οπότε, ψάξε νέε blogger να βρεις τη διεύθυνση της φιλοξενίας των εικόνων της σελίδας σου, και να "ανεβάζεις" τις κινούμενες εικόνες σου εκεί...https://picasaweb.google.com/home
***Σας συστήνω να χρησιμοποιείτε το picassa και όχι άλλες host σελίδες όπως πχ το photobucket...
σας δίνει πολύ μεγάλο χώρο αποθήκευσης, και δεν πρόκειται ποτέ να σβηστούν η αποκλειστούν οι αγαπημένες σας εικόνες, ακόμα κι αν κλείσει το blog σας!!!Και πάντα Δωρεάν...
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Gif (Κινούμενη εικόνα) στο Blogger

Amazing CSS Slideshow

Νέοι bloggers γεια σας...χωρίς πολλά λόγια, σας δίνω DEMO & DEMO , και σας δίνω το κώδικα που θα βάλετε σαν gadget HTML/JavaScript...Είναι ένα απίθανο slide show που θα αναδείξει τις εικόνες σας, και μπαίνει εύκολα, χωρίς να καθυστερεί το άνοιγμα της σελίδας σας....
Βάλτε απλά σαν gadget τον παρακάτω κώδικα:

<style type='text/css'>

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<style>
#cssplayGallery a,
body {behavior:url(cssplay18/trigger.htc)}

#cssplayGallery {position:relative; width:482px; margin:0 auto; height:382px; overflow:hidden;}
#cssplayGallery .cover {width:482px; height:100px; background:url(trans.gif); position:absolute; left:0; top:0; z-index:30;}
#cssplayGallery a {display:block; width:482px; height:302px; position:absolute; outline:0; background-color: 'transparent';
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#cssplayGallery a.p1 {top:100px; z-index:10;}
#cssplayGallery a.p2 {top:80px; z-index:9;}
#cssplayGallery a.p3 {top:64px; z-index:8;}
#cssplayGallery a.p4 {top:51px; z-index:7;}
#cssplayGallery a.p5 {top:41px; z-index:6;}
#cssplayGallery a.p6 {top:33px; z-index:5;}
#cssplayGallery a.p7 {top:26px; z-index:4;}
#cssplayGallery a.p8 {top:21px; z-index:3;}
#cssplayGallery a.p9 {top:17px; z-index:2;}

#cssplayGallery a.p1 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p5 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p6 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p7 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p8 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=10);}
#cssplayGallery a.p9 img {width:80px; padding:0 200px; opacity:0.1; filter: alpha(opacity=10);}

#cssplayGallery a img {display:block; border:0px solid #fff;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
/* IE browsers */
#cssplayGallery a:active {opacity:0;}

#cssplayGallery a.p1:active ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:active ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:active ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:active ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:active ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:active ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:active ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:active ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:active ~ a.p2 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p1:active ~ a.p3 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p1:active ~ a.p4 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p1:active ~ a.p5 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p1:active ~ a.p6 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p1:active ~ a.p7 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p1:active ~ a.p8 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}
#cssplayGallery a.p1:active ~ a.p9 img {width:100px; padding:0 190px; filter: alpha(opacity=15);}

#cssplayGallery a.p2:active ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:active ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:active ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:active ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:active ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:active ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:active ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:active ~ a.p3 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p2:active ~ a.p4 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p2:active ~ a.p5 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p2:active ~ a.p6 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p2:active ~ a.p7 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p2:active ~ a.p8 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p2:active ~ a.p9 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}

#cssplayGallery a.p3:active ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:active ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:active ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:active ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:active ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:active ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:active ~ a.p4 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p3:active ~ a.p5 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p3:active ~ a.p6 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p3:active ~ a.p7 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p3:active ~ a.p8 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p3:active ~ a.p9 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}

#cssplayGallery a.p4:active ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:active ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:active ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:active ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:active ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:active ~ a.p5 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p4:active ~ a.p6 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p4:active ~ a.p7 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p4:active ~ a.p8 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p4:active ~ a.p9 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}

#cssplayGallery a.p5:active ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:active ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:active ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:active ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:active ~ a.p6 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p5:active ~ a.p7 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p5:active ~ a.p8 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p5:active ~ a.p9 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}

#cssplayGallery a.p6:active ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:active ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:active ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:active ~ a.p7 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p6:active ~ a.p8 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p6:active ~ a.p9 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}

#cssplayGallery a.p7:active ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:active ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:active ~ a.p8 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p7:active ~ a.p9 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}

#cssplayGallery a.p8:active ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:active ~ a.p9 img {width:480px; padding:0; filter: alpha(opacity=100);}

#cssplayGallery a.p8:active {top:200px; z-index:13;}

/* non-IE browsers */

#cssplayGallery a:focus {opacity:0;}

#cssplayGallery a.p1:focus ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:focus ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:focus ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:focus ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:focus ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:focus ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:focus ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:focus ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:focus ~ a.p2 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p1:focus ~ a.p3 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p1:focus ~ a.p4 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p1:focus ~ a.p5 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p1:focus ~ a.p6 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p1:focus ~ a.p7 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p1:focus ~ a.p8 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p1:focus ~ a.p9 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=15);}

#cssplayGallery a.p2:focus ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:focus ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:focus ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:focus ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:focus ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:focus ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:focus ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:focus ~ a.p3 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2:focus ~ a.p4 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p2:focus ~ a.p5 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p2:focus ~ a.p6 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p2:focus ~ a.p7 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p2:focus ~ a.p8 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p2:focus ~ a.p9 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}

#cssplayGallery a.p3:focus ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:focus ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:focus ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:focus ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:focus ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:focus ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:focus ~ a.p4 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p3:focus ~ a.p5 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3:focus ~ a.p6 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p3:focus ~ a.p7 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p3:focus ~ a.p8 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p3:focus ~ a.p9 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}

#cssplayGallery a.p4:focus ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:focus ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:focus ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:focus ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:focus ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:focus ~ a.p5 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p4:focus ~ a.p6 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p4:focus ~ a.p7 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4:focus ~ a.p8 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p4:focus ~ a.p9 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}

#cssplayGallery a.p5:focus ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:focus ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:focus ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:focus ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:focus ~ a.p6 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p5:focus ~ a.p7 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p5:focus ~ a.p8 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p5:focus ~ a.p9 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}

#cssplayGallery a.p6:focus ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:focus ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:focus ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:focus ~ a.p7 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p6:focus ~ a.p8 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p6:focus ~ a.p9 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}

#cssplayGallery a.p7:focus ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:focus ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:focus ~ a.p8 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p7:focus ~ a.p9 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}

#cssplayGallery a.p8:focus ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:focus ~ a.p9 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}

#cssplayGallery a.p8:focus {top:200px; z-index:13;}</style>

<center>ΤΙΤΛΟΣ ΜΕΝΟΥ</center>

<div id="cssplayGallery">

<div class="cover"></div>

<a class="p1" href="#url" tabindex="1"><img src="JPG" alt="" /></a>

<a class="p2" href="#url" tabindex="2"><img src="JPG" alt="" /></a>

<a class="p3" href="#url" tabindex="3"><img src="JPG" alt="" /></a>

<a class="p4" href="#url" tabindex="4"><img src="JPG" alt="" /></a>

<a class="p5" href="#url" tabindex="5"><img src="JPG" alt="" /></a>

<a class="p6" href="#url" tabindex="6"><img src="JPG" alt="" /></a>

<a class="p7" href="#url" tabindex="7"><img src="JPG" alt="" /></a>

<a class="p8" href="#url" tabindex="8"><img src="JPG" alt="" /></a>

<a class="p9" href="#url" tabindex="9"><img src="JPG" alt="" /></a>

</div>

***απλά βάλτε τις φωτογραφίες σας, όπου βλέπετε "JPG"........

***MH βάλετε περισσότερες εικόνες...

***μη βγάλετε τα στοιχεία του δημιουργού...εκτιμήστε τον κόπο που έκανε να σας το χαρίσει...

***τους κώδικες CSS σας τους έβαλα αναλυτικά, για να μην εξαρτάται από την "εξαφάνιση" τους....

***να ξέρετε οτι ένας κώδικας CSS μπαίνει πάντα ανάμεσα στις λέξεις <style> CSS </style>

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!!!

Πηγή : www.cssplay.co.uk/ thanks to Stu Nicholls

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Amazing CSS Slideshow

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

***απλά βάλτε τις φωτογραφίες σας, όπου βλέπετε "JPG"........

***MH βάλετε περισσότερες εικόνες...

***μη βγάλετε τα στοιχεία του δημιουργού...εκτιμήστε τον κόπο που έκανε να σας το χαρίσει...

***τους κώδικες CSS σας τους έβαλα αναλυτικά, για να μην εξαρτάται από την "εξαφάνιση" τους....

***να ξέρετε οτι ένας κώδικας CSS μπαίνει πάντα ανάμεσα στις λέξεις <style> CSS </style>

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!!!

Πηγή : www.cssplay.co.uk/ thanks to Stu Nicholls

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Amazing CSS Slideshow

Διαβάστε περισσότερα »

Image Zoom 2 (code)

Φίλοι bloggers γεια σας !!!Το προηγούμενο zoom in άρεσε πάρα πολύ, και έτσι σκέφτηκα να παρουσιάσω άλλο ένα zoom του Professor Cloud !!! Εφαρμογές θα βρείτε σε πολλά εμπορικά e-shops όπου χρησιμοποιούν με αυτό το κώδικα τη μεγέθυνση του προϊόντων τους...DEMO
Στις εικόνες δείτε πού μπαίνουν οι κώδικες:

...και ΠΡΙΝ το </head> , επικολλήστε τον κώδικα:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://www.professorcloud.com/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://pantel.googlecode.com/files/cloud-zoom.1.0.2.js"></script>

...μετά πηγαίνετε =>

και επικολλήστε τον κώδικα :

<div class="zoom-section">
<div class="zoom-small-image"><a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 1' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4"><img src="ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 1" alt='' title="ΤΙΤΛΟΣ ΤΟΥ GALLERY" /></a></div>
<div class="zoom-desc">
<h3>OI ΕΙΚΟΝΕΣ ΜΟΥ</h3>
<p><a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 1' class='cloud-zoom-gallery' title='TITLOΣ' rel="useZoom: 'zoom1', smallImage: 'ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 1' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 1" alt = "Thumbnail 1"/></a>

<a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 2' class='cloud-zoom-gallery' title='ΤΙΤΛΟΣ' rel="useZoom: 'zoom1', smallImage: ' ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 2' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 2" alt = "Thumbnail 2"/></a>
<a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 3' class='cloud-zoom-gallery' title='ΤΙΤΛΟΣ' rel="useZoom: 'zoom1', smallImage: 'ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 3' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 3" alt = "Thumbnail 3"/></a></p>
</div>
</div>

***Δεν είναι μόνον zoom in, αλλά και gallery εικόνων
***Διαλέξτε τις ανάλογες εικόνες (μικρή-100px)(μεσαία-400px)(μεγάλη-1400px)...η ίδια εικόνα δηλαδή σε 3 διαφορετικές διαστάσεις....
***Η google ξανά έβαλε σε εφαρμογή το slideshow των εικόνων στις αναρτήσεις, χωρίς να μεγεθύνει πιά την εικόνα "read more" (το διόρθωσε)...έτσι θα σας δημιουργήσει μία μικρή σύγχυση στην αλλαγή του thumbnail ....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(αν χρειαστείτε βοήθεια, στείλτε μήνυμα η σχόλιο)

Πηγή : thanks to Professor Cloud

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Image Zoom 2 (code)

Πηγή : thanks to Professor Cloud

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Image Zoom 2 (code)

Διαβάστε περισσότερα »

Απλό CSS + HTML Slideshow / gallery

Νέοι bloggers γεια σας !!! Σήμερα σας παρουσιάζω ένα απλό image gallery...μπορείτε να δείτε το DEMO και να δοκιμάσετε να φτιάξετε ένα παρόμοιο, παρουσιάζοντας τις δικές σας εικόνες...

Ο ΚΩΔΙΚΑΣ CSS: (ΠΑΝΩ από το </head>)

<style type="text/css">


</style>

O ΚΩΔΙΚΑΣ HTML: (σαν Gadget / JavaScript)

<div class="slideshow">
<ul>
<li>
<img src="ΕΙΚΟΝΑ 1" />
<div>
<a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
<img src="ΕΙΚΟΝΑ 1" alt="ΤΙΤΛΟΣ" /> </a>
<p>ΚΕΙΜΕΝΟ</p>
</div>
</li>
<li> <img src="ΕΙΚΟΝΑ 2" />
<div>
<a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
<img src="ΕΙΚΟΝΑ 2" alt="ΤΙΤΛΟΣ" />
</a>
<p>ΚΕΙΜΕΝΟ</p>
</div>
</li>
<li>
<img src="ΕΙΚΟΝΑ 3" />
<div>
<a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
<img src="ΕΙΚΟΝΑ 3" alt="ΤΙΤΛΟΣ" />
</a>
<p>ΚΕΙΜΕΝΟ</p>
</div>
</li>
<li>
<img src="ΕΙΚΟΝΑ 4" />
<div>
<a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
<img src="ΕΙΚΟΝΑ 4" alt="ΤΙΤΛΟΣ" />
</a>
<p>ΚΕΙΜΕΝΟ</p>
</div>
</li>
</ul>
</div>

***Οι άπειροι, μπορούν να ενώσουν και τους 2 κώδικες και να το δουν πως φαίνεται στο DEMO BLOG μου
***Φυσικά και μπορείτε να ενώσετε και τους 2 κώδικες και να το βάλετε στο blog σας σαν gadget !

***Αντικαταστήστε τις λέξεις ΛΙΝΚ, ΚΕΙΜΕΝΟ, ΤΙΤΛΟΣ, ΛΙΝΚ με τα ανάλογα δικά σας...

***Oσοι γνωρίζουν πως, μπορούν να πειράξουν μεγέθη, χρώματα κλπ στον πρώτο κώδικα...όσοι δεν γνωρίζουν, ας το αφήσουν όπως είναι, η να ρωτήσουν απορίες στα σχόλια, η με email ...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
(Πηγή θα βρείτε όταν δείτε και το demo)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Απλό CSS + HTML Slideshow / gallery

***Αντικαταστήστε τις λέξεις ΛΙΝΚ, ΚΕΙΜΕΝΟ, ΤΙΤΛΟΣ, ΛΙΝΚ με τα ανάλογα δικά σας...

Απλό CSS + HTML Slideshow / gallery

Διαβάστε περισσότερα »

Simple Slideshow/Απλή Εναλλαγή Εικόνων

Νέοι bloggers γεια σας !!! Ξέρετε πια ότι έχω ιδιαίτερη αδυναμία σε widgets και gadgets για προβολές εικόνων...σας έχω παρουσιάσει ήδη αρκετούς κώδικες για προβολή εικόνων !!! Βρήκα λοιπόν σε ένα forum έναν νέο κώδικα που είναι πολύ απλός και ελαφρύς για το blog σας, για ένα slideshow...έχω ήδη ένα DEMO ΕΔΩ, και μπαίνει εύκολα σαν gadget...

Κάντε αντιγραφή - επικόλληση τον παρακάτω κώδικα :

<script type="text/javascript">
var slides = new Array(
{ img:'Temp01a.jpg', alt:'', lnk:'#', cap:'Caption 1' },
{ img:'Temp02a.jpg', alt:'', lnk:'#', cap:'Caption 2' },
{ img:'Temp03a.jpg', alt:'', lnk:'#', cap:'Caption 3' },
{ img:'Temp04a.jpg', alt:'', lnk:'#', cap:'Caption 4' },
{ img:'Temp05a.jpg', alt:'', llnk:'#', cap:'Caption 5' },
{ img:'Temp06a.jpg', alt:'', lnk:'#', cap:'Caption 6' },
{ img:'Temp07a.jpg', alt:'', lnk:'#', cap:'Caption 7' },
{ img:'Temp08a.jpg', alt:'', lnk:'#', cap:'Caption 8' },
{ img:'Temp09a.jpg', alt:'', lnk:'#', cap:'Caption 9' },
{ img:'Temp010a.jpg', alt:'', lnk:'#', cap:'Caption 10' },

);
var i=0;

function cycle1()
{
var banner1 = document.getElementById('adBanner1');
banner1.src = slides[i]['img'];
banner1.alt = slides[i]['alt'];
document.getElementById('adLink1').href = slides[i]['lnk'];
document.getElementById('adCaption1').innerHTML = slides[i]['cap'];
i = (i + 1) % slides.length;
setTimeout('cycle1();', 6000);
}
window.onload = cycle1;
</script>

<div style="text-align:center;">
<a target="_blank" href="http://www.dr-blogger.com/" id="adLink1" target="_top">
<img src="Temp01.jpg" id="adBanner1" border="0" width="500" height="350" />
</a>
<div id="adCaption1">xxx</div>
</div>

***όπου =>  width="500" height="350" είναι οι διαστάσεις του slidershow
***όπου => Temp01a.jpg μπαίνει η Διεύθυνση της κάθε εικόνας
***όπου => Caption 1  μπαίνει ο τίτλος της κάθε εικόνας
***όπου=>    lnk:'#' βάζετε αν θέλετε μια διεύθυνση να ανοίγει ένα link...(ίσως της εικόνας)
τα άλλα αν δεν ξέρετε μην τα πειράξετε
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Simple Slideshow/Απλή Εναλλαγή Εικόνων

Διαβάστε περισσότερα »

Lightbox TopUp Για τις Εικόνες του Blog σας

Φίλοι bloggers γεια σας !!! Σήμερα σας παρουσιάζω ένα lightbox για image gallery, που έχω εδώ και καιρό σε ένα demo-blog μου !!!Μπορεί και μεγεθύνει εικόνες , βίντεο, και link...με μέγεθος που θα καθορίσετε εσείς...Υπάρχει σε 2 τύπους......Σήμερα θα σας παρουσιάσω τον ένα τύπο (το slideshow θα σας μπερδέψει)!!!...
Στο τέλος της ανάρτησης, θα βρείτε και demo και download για να κατεβάσετε το script και να το ανεβάσετε σε δική σας σελίδα...

Το script θα το επικολλήσετε ως εξής:
(δείτε στην εικόνα) με Ctrl-F βρείτε τη φράση </head> και ΠΡΙΝ από αυτή βάλτε τη φράση:
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>

...Πατήστε ΑΠΟΘΗΚΕΥΣΗ !!!
...Πάμε να βάλουμε τον κώδικα HTML όπως θα δείτε στην εικόνα :

ο κώδικας είναι ο εξής :

<a href="photos/1.jpg" class="top_up"><img src="thumbnails/1.jpg"/></a>
<a href="photos/2.jpg" class="tu_ql"><img src="thumbnails/2.jpg"/></a>
<a href="http://www.google.nl" class="tu_iframe_800x600">Open Google</a>

....δηλαδή ...για τις εικόνες :
<a href="ΔΙΕΥΘΥΝΣΗ ΜΕΓΑΛΗΣ ΦΩΤΟΓΡΑΦΙΑΣ" class="top_up"><img src="ΔΙΕΥΘΥΝΣΗ ΜΙΚΡΗΣ ΦΩΤΟΓΡΑΦΙΑΣ"/></a>
(απ ότι καταλάβατε χρειάζεστε 2 μεγέθη της εικόνας...κανονική & εικονίδιο)

...για βίντεο :
<a href="ΔΙΕΥΘΥΝΣΗ ΒΙΝΤΕΟ" class="tu_iframe_600x400"><img src="ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΙΔΙΟΥ ΦΩΤΟΓΡΑΦΙΑΣ ΤΟΥ ΒΙΝΤΕΟ"/></a>
(απ' ότι καταλάβατε θα βάλετε μια εικόνα μικρή για το βίντεο)

...για link :
<a href="ΔΙΕΥΘΥΝΣΗ LINK ΣΕΛΙΔΑΣ" class="tu_iframe_800x600">ΟΝΟΜA ΣΕΛΙΔΑΣ</a>
(εδώ βάζετε απλά το λινκ της σελίδας και το όνομα της....)

ΔΕΙΤΕ ΕΔΩ ΤΟ DEMO
ΚΑΤΕΒΑΣΤΕ / DOWNLOAD TopUp

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!
Πηγή : thanks to : http://gettopup.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}