Ads 468x60px

Featured Posts

  • Cougar

    Ενσωμάτωση υποτίτλων..

  • Lions

    Social network widget...

  • Snowalker

    Free Video to JPG Converter..

  • Howling

    Twitter Like box..Η λύση!!

  • Sunbathing

    JavaScript Image Slider ...

Παρασκευή, 15 Φεβρουαρίου 2019

Rollovers Icons

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε να
δώσουμε έμφαση και χιούμορ στις φωτογραφίες μας με το rollover effect!Έχουμε
δει και παλιότερα σε ανάρτηση παρόμοιο script με φωτογραφίες εδώ σήμερα θα το
δούμε με εικονίδια!


Δείτε το παράδειγμα

κάνοντας mouseover με τον κέρσορα:





Η εγκατάσταση είναι πάρα πολύ απλή και μπορούμε να χρησιμοποιήσουμε 2 τρόπους:
1ος

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--> ...............................................................................................................................................................

<center><script type="text/javascript">
// Pre load images for rollover
if (document.images) {
    smile = new Image;
    nosmile = new Image;

    smile.src = "https://lh3.googleusercontent.com/-__KROusL_PU/UMfBvr5xnAI/AAAAAAAACfM/NLhGod-cgl0/s95/emoticon-happy-128.png";
    nosmile.src = "https://lh6.googleusercontent.com/-rluANGp2laE/UMfBxuP4xMI/AAAAAAAACfs/S-rQTN0K6BU/s95/emoticon-sad.png";
}
function swapImage(thisImage,newImage) {
    if (document.images) {
        document[thisImage].src = eval(newImage + ".src");
    }
}
</script>  
<a href="/html/codes/" onmouseover="swapImage('jack','smile')" onmouseout="swapImage('jack','nosmile')"><img src="https://lh6.googleusercontent.com/-rluANGp2laE/UMfBxuP4xMI/AAAAAAAACfs/S-rQTN0K6BU/s95/emoticon-sad.png" width="100" height="100" border="0" name="jack" /></a></center>

...........................................................................................................................................................
 2ος
 Αντιγράψτε και επικολλήστε τον κώδικα στο HTML Section της εκάστοτε ανάρτησης!

ΑΛΛΑΓΕΣ 

Απλώς θα κάνετε αντικατάσταση και θα βάλετε τα url σας με τα δικά σας εικονίδια!Δύο διαφορετικά εικονίδια,
το 1 το βάζουμε στην διεύθυνση url του πράσινου φόντου, και το 2 το βάζουμε στην διεύθυνση
url του κίτρινου φόντου! Το 2 το βάζουμε 2 φορές!


Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to quackit.com



Edit by

Τρίτη, 12 Φεβρουαρίου 2019

Panic Button

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε μία εφαρμογή για
συσκευές με λειτουργικό σύστημα Android η οποία ευχόμαστε να είναι σε 
όλους αχρείαστη!
Παρόλα αυτά όπως λέει και ο δημιουργός της, εάν την χρειαστούμε καλό θα
είναι να την έχουμε, ειδικά για τα παιδιά είναι πολύ εύκολη και χρήσιμη εφαρμογή
!Το κουμπί πανικού ενεργοποιείται με το πάτημα ενός κουμπιού πχ 1 η 0,  η με
 κλήση σε έναν αριθμό πχ 123 κτλ 







και δηλώνει την ακριβή μας τοποθεσία εκείνη την στιγμή μέσω 2G / 3G & GPS
στέλνοντας σιωπηλό sms σε 3 τηλεφωνικούς αριθμούς που του έχουμε ορίσει
εμείς!!

Μπορείτε να προκαθορίσετε και το κείμενο του sms που θα σταλεί!






Το μόνο που έχουμε να κάνουμε μετά την εγκατάσταση είναι να:

Επιτρέψουμε στην εφαρμογή να έχει πρόσβαση στην τοποθεσία μας, βασικό αυτό
και να ορίσουμε την ενεργοποίηση του, και τους 3 τηλεφωνικούς μας αριθμούς!

Θα το βρείτε στις ρυθμίσεις - Πρόσβαση Τοποθεσίας! 

Υγ: Σημαντικό: Είναι αυτονόητο ότι η σύνδεση δεδομένων πρέπει να είναι ανοικτή για να λειτουργήσει απρόσκοπτα η εφαρμογή




Απαιτεί Android: 3.0  και άνω

Μέγεθος: 2.7Μ


Καλή επιτυχία!!!



 Edit by

Τρίτη, 5 Φεβρουαρίου 2019

PhotoTitle: Επεξεργάσια Εικόνων

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε το PhotoTitle
το οποίο είναι ένα freeware programm που μας επιτρέπει να ενσωματώνουμε
προτάσεις - κείμενα στις φωτογραφίες μας!Είναι πολύ εύκολο στην χρήση του
με πολλές λειτουργίες, όντας από τα καλύτερα στο είδος του!









Απλό Setup είναι και μόλις το ανοίξετε φορτώνετε (load) μία εικόνα σας, και
ακολουθείτε τον εικονογραφημένο οδηγό: 
















 Καλή επιτυχία!!! 

HOMEPAGE



 Edit by

Δευτέρα, 4 Φεβρουαρίου 2019

Author Profile widget with Social Media

Φίλες και φίλοι γεια σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο Author Profile
widget box, από το οποίο μπορούν να βλέπουν οι αναγνώστες-επισκέπτες μας,  εύκολα και
γρήγορα το προφίλ μας, λίγα λόγια για το blog μας, να διαβάσουν για τον ιδιόκτητη-διαχειριστή
του blog  και ότι άλλο εσείς θέλετε!Έχει ενσωματωμένα και social media links δίνοντας μας, μία
εξαιρετική επιλογή για το Author Profile box μας!!


Η εγκατάσταση του είναι πάρα πολύ απλή και για να γίνει αυτό

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--
........................................................................................................................................

<style>
/*widget by www.bloggerspice.com */
.BloggerSpice {width:auto;  height:83px;padding:5px}
.BloggerSpice-BS {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:5px solid #005C91;border-right:5px solid #04BDFA;border-bottom:5px solid #005C91;border-left:5px solid #04BDFA}
.BS-AP{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px;font-size:11px; color:#000000;text-align:justify;}
.BSfb, .BSgp, .BStw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; 

height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}
.BSfb {background: #3B5998;margin-left:76px}
.BSfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.BSgp {background: #D34836;font-size:11px;margin-left:86px}
.BSgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.BStw {background: #4099FF;margin-left:82px}
.BStw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}
</style>
 <!-- Author Profile By http://www.bloggerspice.com/ start -->
<div class='BloggerSpice'>
<img alt='
TO ΟΝΟΜΑ ΣΑΣ' src='ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ' title="TO ΟΝΟΜΑ ΣΑΣi" class='BloggerSpice-BS' />
<a class='BSfb' href='http://www.facebook.com/USERNAME FACEBOOK rel='nofollow' target="_blank">f</a>
<a class='BSgp' href='https://plus.google.com/GOOGLE PLUS ID' rel='nofollow' target="_blank">G</a>
<a class='BStw' href='http://twitter.com/USERNAME TWITTER' rel='nofollow' target="_blank">t</a>
<div class='BS-AP'>
ΕΔΩ <a href=https://plus.google.com/GOOGLE PLUS ID title="
TO ΟΝΟΜΑ ΣΑΣ" rel='nofollow' target="_blank">TO ΟΝΟΜΑ ΣΑΣ</a><br/>
ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΚΑΛΟΣΩΡΙΣΜΑΤΟΣ ΠΟΥ ΘΕΛΕΤΕ >><a style="color:#04BDFA;" href=" 

ΕΔΩ ΤΟ ΛΙΝΚ ΤΟΥ ΠΡΟΦΙΛ ΣΑΣ Η ΟΤΙ ΑΛΛΟ ΘΕΛΕΤΕ" target="_blank"> Read More &#187;</a>
</div></div>
<!-- Ends -->

..............................................................................................................................................................
ΑΛΛΑΓΕΣ 

TO ΟΝΟΜΑ ΣΑΣ-Εδώ βάζετε το όνομα σας,η το username του google+ σας!
ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ-Εδώ μπαίνει η εικόνα που θα φαίνεται στο box!


 USERNAME FACEBOOK
 GOOGLE PLUS ID                         Εδώ βάζετε τα αντίστοιχα usernames
 USERNAME TWITTER                   που έχετε στα εκάστοτε social media!


 ΕΔΩ ΤΟ ΛΙΝΚ ΤΟΥ ΠΡΟΦΙΛ ΣΑΣ Η ΟΤΙ ΑΛΛΟ ΘΕΛΕΤΕ-Εδώ βάζετε το λινκ της σελίδας-
προφίλ σας,που θα οδηγείτε ο αναγνώστης σας μετά το Read More!


000000-  Όποιος θέλει αλλάζει και το χρώμα του box

ΕΔΩ
ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΚΑΛΟΣΩΡΙΣΜΑΤΟΣ ΠΟΥ ΘΕΛΕΤΕ--Εδώ γράφετε το κείμενο
που θέλετε να φαίνεται!!!ΠΡΟΣΕΞΤΕ  το ΕΔΩ από που ξεκινά να μην κάνετε λάθος!Εκεί λέτε
γεια η ότι άλλο θέλετε και το κείμενο συνεχίζεται μετά τον σύνδεσμο!



Αυτά είναι όλα!

Καλή επιτυχία!!

DEMO



Πηγή κώδικα
Thanks to bloggerspice.com


Edit by 

Τρίτη, 11 Δεκεμβρίου 2018

Split Screen

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πρόσθετο(add-on)
για τον Chrome browser μας, το Split Screen!Το Split Screen μας βοηθά να
χωρίσουμε την οθόνη του Chrome σε 2 μέρη και να πλοηγηθούμε - σερφάρουμε
ταυτόχρονα!

Είναι πολύ χρήσιμη λειτουργία αν θέλουμε να συγκρίνουμε διάφορα προϊόντα
η πανομοιότυπα κείμενα!

Η λειτουργία του είναι απλή:

Μετά την εγκατάσταση του τοποθετείτε ένα εικονίδιο σε στυλ οθόνης πάνω δεξιά
στην μπάρα εργασίας του Chrome και κλικάροντας το:





Βλέπετε το χώρισμα της οθόνης και απλά βάζετε 2 διαφορετικά urls όπως δείχνουν
τα βελάκια και πατάτε enter!






 Αυτό ήταν!


Το χώρισμα δεν γίνεται μόνο δεξιά αριστερά αλλά και πάνω κάτω αν κλικάρετε
τα 2 βελάκια όπως βλέπετε στην εικόνα πάνω δεξιά:








Καλή επιτυχία!!! 


Update: Έχει γίνει αλλαγή της εφαρμογής με την αντίστοιχη -->  Dualless  που είναι
πανομοιότυπη και με περισσότερα frames!




 Edit by

Πέμπτη, 6 Δεκεμβρίου 2018

Blockquotes

Φίλες και φίλοι γεια σας, όλοι η σχεδόν όλοι ξέρετε τι σημαίνει το blockquote
μέσω του οποίου μπορούμε να τονίσουμε και να αναδείξουμε διάφορα μέρη
και σημεία μίας ανάρτησης!Οι τρόποι που μπορούμε να το
κάνουμε αυτό είναι πολλοί όπως: Μέσα σε παρένθεση, κείμενο με εικόνα,
παράγραφο μέσα σε text box και άλλοι πολλοί!


Σε αυτή την ανάρτηση θα δούμε μερικές παραλλαγές του blockquote που
μας επιτρέπουν να κάνουμε ότι είπαμε στον πρόλογο της ανάρτησης!

Οι κώδικες έχουν παραμετροποιηθεί έτσι ώστε να χρειάζεται να τους εγκαταστήσουμε
απλά μέσα στο Html section της ανάρτησης!



Κάτω από κάθε κώδικα υπάρχει το ανάλογο demo για να δείτε
την πλήρη ανάπτυξη τους!



ΚΩΔΙΚΑΣ ΠΡΩΤΟΣ...

 ........................................................................................................................

  <style>
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style>


<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
............................................................................................................................ 



ΚΩΔΙΚΑΣ ΔΕΥΤΕΡΟΣ...
 ...........................................................................................................
<style>
.post blockquote {
background: linear-gradient(#B8DB29, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.6em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #B5D928;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}
</style> 


<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 


 
ΚΩΔΙΚΑΣ ΤΡΙΤΟΣ....
.......................................................................................................................
 <style>
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px solid #E1E1E1;
background-color: #F6F6F6;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 




ΚΩΔΙΚΑΣ ΤΕΤΑΡΤΟΣ....
.......................................................................................................................

  <style>
.post blockquote {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(http://3.bp.blogspot.com/-gNZ5r7KaLIE/T33PEnGXSJI/AAAAAAAABoo/cDcreY3-mPc/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 


 ΕΓΚΑΤΑΣΤΑΣΗ:

Απλά γράφετε το κείμενο σας  στο-- ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ --
και πηγαίνεται στο Html Section της ανάλογης ανάρτησης και κάνετε επικόλληση
τον κώδικα!

                     
Καλή επιτυχία!!! 

Πηγή κώδικα


 Edit by

Τρίτη, 4 Δεκεμβρίου 2018

OOo4Kids: Office για τους μικρούς

Το OOo4Kids είναι μια παιδική σουίτα γραφείου βασισμένη στον κώδικα του openoffice!Απευθύνεται στους μικρούς μας φίλους ηλικίας 7-12 χρονών και ίσως και λίγο παραπάνω!


Ο σκοπός της εφαρμογής είναι να μάθει στα μικρά παιδιά τον τρόπο και την λειτουργία του Office, μέσα από ένα απλοποιημένο περιβάλλον!





Μπορείτε να το κατεβάσετε από ΕΔΩ διαλέγοντας την έκδοση λειτουργικού, και την γλώσσα που χρειάζεστε!





Όταν ανοίξει το βλέπουμε στην ακόλουθη εικόνα ότι διαθέτει 2 μπάρες εργασίας όπως δείχνουν
τα βελάκια!Η πάνω μπάρα έχει όλες τις ρυθμίσεις ως συνήθως, και η κάτω οριζόντια τις 
αντίστοιχες λειτουργίες του office:




"Κλικάροντας" την πρώτη επιλογή για να δημιουργήσουμε ένα κείμενο μας ανοίγει




όπως θα μας άνοιγε το αντίστοιχο word, ενώ εάν θέλουμε το αντίστοιχο excel" κλικάρουμε" 
την προτελευταία επιλογή και το βλέπουμε  έτσι:





Αναλόγως πράττουμε και με τις άλλες λειτουργίες της εφαρμογής!!Μία πολύ χρήσιμη και εύκολη εφαρμογή για να μάθουν η να πάρουν μία ιδέα τα μικρά παιδιά για τις λειτουργίες του office!!


Καλή επιτυχία!!!

Edit by

Τρίτη, 13 Νοεμβρίου 2018

Sitemap Widget for blogger blogs

Φίλες και φίλοι γεια σας, σε αυτήν την ανάρτηση θα δούμε ένα 

πολύ ωραίο και χρήσιμο Sitemap widget 

το οποίο μας δείχνει μαζεμένες σε μία σελίδα όλες τις αναρτήσεις 

του blog μας χωρισμένες ανά κατηγορία 

όπως τις έχουμε στις ετικέτες μας!





Δείτε εδώ:




               DEMO1        DEMO2




Η εγκατάσταση του είναι πάρα πολύ απλή



Πηγαίνετε blogger-->

Μενού-->Σελίδες-->

Νέα σελίδα-->Κενή Σελίδα,

προσθήκη κειμένου..,

και στην σελίδα που θα ανοίξει κλικάρετε το HTML part δίπλα από το

Σύνθεση και επικολλήστε μέσα τον παρακάτω κώδικα!


........................................................................................................................................................

/* Sitemap page for blogger by TwistBlogg.Blogspot.Com */
<style type="text/css">
#twistblogg{
width:99%;  
margin:5px auto;
border:1px solid #05a0ff;  
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#c2eafe 0%,#05a0ff 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#05a0ff),color-stop(1,#c2eafe));
border:1px solid #37c2dd;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #a0a0a0;
-moz-box-shadow:3px 3px 1px #a0a0a0;-webkit-box-shadow:3px 3px 1px #a0a0a0;display:block;
}
.labl a{color:#fff;
}
.labl:first-letter{text-transform:uppercase;
}
.new{color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.50,#fff),color-stop(1,#C2EAFE));
}
.postname li{border-bottom: #ddd 1px dotted;
margin-right:5px
}
/*This is optional - For full width Sitemap*/
.sidebar, #bottom, #blog-pager, h2.post-title, .comments {
display: none !important;
}
#content { width: 100% !Important; }
@media only screen and (max-width: 1089px) and (min-width: 980px) { #content { width: 100% !Important; } }  @media only screen and (max-width: 979px) and (min-width: 768px) { #content { width: 100% !Important; } } @media only screen and (max-width: 767px) and (min-width: 480px) { #content { width: 100% !Important; } }  @media only screen and (max-width: 479px) { #content { width: 100% !Important; } }
</style>

<div id="twistblogg">
<script src="https://amanbhattarai4400.github.io/csshosting/sitemap.js" type="text/javascript"></script>
<script src="ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΟΥ ΜΠΛΟΓΚ ΣΑΣ /feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

...................................................................................................................................

ΑΛΛΑΓΕΣ

1ον: ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΟΥ ΜΠΛΟΓΚ ΣΑΣ  Εδώ βάζετε την διεύθυνση του blog σας!

2ον: Πηγαίνετε δεξιά στις επιλογές και στα Σχόλια αναγνωστών βάζετε το να
μην επιτρέπεται και πατάτε Τέλος!

3ον: Μπορείτε να αλλάξετε και τους χρωματισμένους κωδικούς χρωμάτων αν θέλετε!

Είστε έτοιμοι πατάτε Αποθήκευση και Δημοσίευση!

 
Καλή επιτυχία!!



Πηγή https://twistblogg.blogspot.com

Edit by 

Δευτέρα, 12 Νοεμβρίου 2018

Grayscale Css Image Gallery

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
script για να αναπαράγουμε φωτογραφίες στο blog μας μέσω ενός κώδικα
Css!Μπορείτε να το τοποθετήσετε στην αριστερή μπάρα της σελίδας σας,
η στο κέντρο, η όπου έχετε χώρο και να προσέξετε οι φωτογραφίες να έχουν
το ίδιο μέγεθος!








 Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--

..............................................................................................................................................................

<style>

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

ul.gallery li{
  display: block;
  width: 200px; /* width of gallery */
  height: 50px; /* portion of each gallery image that's shown initially */
  position: relative;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


ul.gallery li img{
  position: absolute;
  width: 100%;
  border: 10px solid #D8D2A2;
 -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
    filter: url(#grayscale);
  filter: grayscale(1);
    -webkit-transition: all .5s ease-in-out; /* CSS3 transition setting */
    -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}


ul.gallery li:focus{ /* when a LI receives focus (clicked on) */
  z-index: 100;
    outline: none;
    -webkit-transform: rotate(3deg); /* rotate enlarged LI by 3 degrees */
    -moz-transform: rotate(3deg);
    transform: rotate(3deg);
    pointer-events: none; /* disable pointer events on enlarged LI so thumbnail(s) beneath it can receive those events */
}

ul.gallery li:nth-of-type(even):focus{ /* even LIs that received focus */
    -webkit-transform: rotate(-1deg); /* rotate enlarged LI by -1 degrees instead */
    -moz-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

ul.gallery li:focus img{
  -webkit-transform: scale(2) translateX(80%); /* enlarge focused image and move horizontally */
  -moz-transform: scale(2) translateX(80%);
  transform: scale(2) translateX(80%);
  top: 10px; /* shift enlarged image downwards by 10px */
    outline: none;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  -webkit-filter: grayscale(0); /* nullify grayscale effect */
  filter: none;
}

ul.gallery li:first-of-type:focus img{ /* first image within list of thumbnails that receives focus */
  top: 80px; /* move image down by 80px so it's not obscured by top of window edge */
}

svg{
    position: absolute;
    visibility: hidden;
}

</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0 0 0 1 0" />
    </filter>
</svg>
<ul class="gallery" title="Tab after clicking on a thumbnail to cycle though thumbnails">
<li tabindex="1"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="2"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="3"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="4"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="5"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="6"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
</ul>

........................................................................................................................................

ΑΛΛΑΓΕΣ

Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ --Εδώ βάζετε την διεύθυνση url από την δική σας
εικόνα!

Αποθήκευση και έτοιμοι!


Καλή επιτυχία!!! 

Πηγή κώδικα
thanks to dynamicdrive.com





Edit by
Icon Icon Icon

spice up your blog
1
Google+


Giveaway of the Day
Άδεια Creative Commons
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .