Ads 468x60px

Δευτέρα 30 Σεπτεμβρίου 2013

Text Boxes

Φίλες και φίλοι γεια σας σε αυτή την ανάρτηση θα δούμε πως μπορούμε να κρατάμε
σημειώσεις online στο blog μας, μέσω των Text Boxes χωρίς να χρειάζεται να ανοίγουμε,
άλλες σελίδες η προγράμματα!Μέσω του text box μπορούμε εμείς και οι αναγνώστες μας
να γράφουμε ό,τι θέλουμε και να σερφάρουμε ταυτόχρονα!



Δείτε το παράδειγμα πιο κάτω και γράψτε κάτι...

 



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

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

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

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

<textarea style="WIDTH: 332px; HEIGHT: 70px" onfocus="this.select();" name="textarea" cols="14">ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</textarea>...........................................................................................................................................
Αποθήκευση και είστε έτοιμοι!

Με το βελάκι που υπάρχει κάτω δεξιά στο πλαίσιο μπορείτε να αυξομειώνεται το
μέγεθος του text box!

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


Πηγή κώδικα



Edit by vaiol!!!!

Contact Form

Φίλες και φίλοι γεια σας, υπάρχουν πολλοί και διάφοροι τρόποι να επικοινωνούν με μας οι αναγνώστες μας μέσω emails απευθείας μέσα από τα blog μας, και σε αυτή την ανάρτηση
θα δούμε πως μπορούμε απλά εύκολα και γρήγορα να βάλουμε μια φόρμα email (contact form)
στο blog μας, σε διάφορα σημεία έτσι ώστε οι αναγνώστες επισκέπτες μας να επικοινωνούν
μαζί μας!!

 
Δείτε το Demo

και για να το εγκαταστήσετε και εσείς

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

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

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

<form action="mailto:ΕΔΩ ΒΑΖΕΤΕ ΤΟ EMAIL ΣΑΣ" method="post" enctype="text/plain"><table border="0" cellspacing="0" cellpadding="4" width="70%"><tr><td width="30%"><div align="right"><b>Name:</b></div></td><td width="70%"><input type="text" name="name" size="20" /></td></tr><tr><td><div align="right"><b>Email:</b></div></td><td><input type="text" name="email" size="20" /></td></tr><tr><td><div align="right"><b>Comment:</b></div></td><td><textarea name="comment" cols="30" wrap="virtual" rows="4"></textarea></td></tr><tr><td>&nbsp;</td><td><input type="submit" name="submit" value="Submit" /><input type="reset" name="reset" value="Reset" /></td></tr></table></form>
...............................................................................................................................................................
Βάζετε το email σας και πατάτε Αποθήκευση!Αυτό ήταν!Δείτε και την fhoto σαν παραδείγμα
με τα στοιχεία!



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


Πηγή κώδικα


Edit by vaiol!!!

Παρασκευή 27 Σεπτεμβρίου 2013

Recent Comment Widget

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



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

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

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


 <style type="text/css">

    ul.ST_recent_comments{list-style:none;margin:0;padding:0;}
    .ST_recent_comments li{background:none !important;margin:0 0 6px !important;
padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:
none;}
    .ST_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-
box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px 
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-
radius:100px;}
    .ST_recent_comments li img{padding:0px;position:relative;overflow:hidden;
display:block;}
    .ST_recent_comments li span{margin-top:4px;color: #666;display: block;font
-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 5,
    showAvatar     = true,
    avatarSize     = 40,
    roundAvatar    = true,
    characters     = 40,
    showMorelink    = false,
    moreLinktext    = "More »",
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src=" https://googledrive.com/host/0B_
1mqJd2tC8qdDdPb25PXzNiSUk"></script>
<script type="text/javascript" src="ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΟΥ BLOG ΣΑΣ/feeds/
comments/default?alt=json&callback=ST_recent_comments&max-results=5"></script>
.............................................................................
ΑΛΛΑΓΕΣ 
ΒΑΖΕΤΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΟΥ BLOG ΣΑΣ ΚΑΙ ΠΑΤΑΤΕ ΑΠΟΘΗΚΕΥΣΗ!ΑΥΤΟ ΗΤΑΝ! 
 
Καλή επιτυχία!! 
 
DEMO
 
Πηγή κώδικα 
thanks to safetricks.net 
 
 
 
Edit by vaiol!!!! 

Τετάρτη 25 Σεπτεμβρίου 2013

Post with Newspaper Style

Φίλες και φίλοι γεια σας σε αυτή την ανάρτηση θα δούμε ένα πολύ γνωστό τρυκ,
το οποίο μας βοηθά να χωρίζουμε τις αναρτήσεις-κειμενα μας σε 2 μέρη σαν να
διαβάζουμε εφημερίδα!





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


Εδώ γράφεται το κείμενο που θέλετε να φαίνεται στην αριστερή πλευρά της ανάρτηση σας!!Εδώ γράφεται το κείμενο που θέλετε να φαίνεται στην δεξιά πλευρά της ανάρτησης σας!

Για να λειτουργήσει το τρυκ χρειαζόμαστε αυτόν τον κώδικα..
.....................................................................................................................................

<table cellpadding="10" cellspacing="10"><tbody>
<tr><td align="justify" valign="top" width="320">Εδώ γράφεται το κείμενο που θέλετε να φαίνεται στην αριστερή πλευρά της ανάρτηση σας!!</td><td align="justify" valign="top" width="300">Εδώ γράφεται το κείμενο που θέλετε να φαίνεται στην δεξιά πλευρά της ανάρτησης σας!!</td></tr>
</tbody></table>

................................................................................................................................................
Η εγκατάσταση του είναι απλή η βάζετε τον κώδικα

στο HTML section της ανάρτησης η ακολουθείτε την γνωστή διαδικασία..

Blogger-->Διάταξη

Προσθήκη gadget-->Html javascript

και κάνετε επικόλληση τον κώδικα!!

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


Πηγή κώδικα
thanks to full-tricks.blogspot.gr



Edit by vaiol!!!!

Παρασκευή 20 Σεπτεμβρίου 2013

Back to Top button και Go down button

Φίλες και φίλοι γεια σας μετά απο το Back to top button και το scrool to top button 
που είδαμε αμφότερα σε παλαιότερες αναρτήσεις, έφτασε και η σειρά του Back to Top
button και Go down button!Η διαφορά του με τα άλλα είναι ότι εδώ έχουμε βελάκι και
για το τέλος της σελίδας μας και όχι μόνο για την αρχή της όπως στα άλλα!!Είναι από τα
πιο χρήσιμα widget για τα blog μας ειδικά όταν πρόκειται για μεγάλες σελίδες με πολλές
αναρτήσεις!

Δείτε εδώ το DEMO στο οποίο έχω χρησιμοποιήσει κουμπιά και για να το
εγκαταστήσετε και εσείς στα blogs σας...

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

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

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
..................................................................................................................................
<a href='#' style='display:scroll;position:fixed;bottom:110px;right:6px;' title='Back to Top'>
<img src='Εδώ το link της εικόνας που πηγαίνει στην αρχή της σελίδας' style='border:
0;'/></a> <br /> <br/> <br /> <a href='#GoDown' style='display:scroll;position:fixed;bottom:
68px;right:6px;' title='Go Down'><img src='Εδώ το link της εικόνας που πηγαίνει στο 
τέλος της σελίδας' style='border:0;'/></a> <br /><a name='GoDown'></a>
................................................................................................................................................
ΑΛΛΑΓΕΣ

Εδώ το link της εικόνας που πηγαίνει στην αρχή της σελίδας
Εδώ το link της εικόνας που πηγαίνει στο τέλος της σελίδας

Βάλτε τις δικές σας διευθύνσεις από τα βέλη-κουμπιά σας στα αντίστοιχα
πλαίσια του κώδικα και πατήστε Αποθήκευση!Αυτό ήταν!

Εδώ σας έχω και έτοιμα ζευγάρια!           Όπως τα βλέπετε με την σειρά!
Από κάτω από κάθε ζεύγος βρίσκονται και οι διευθύνσεις τους!!

1:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5T0noseaRYHjXQn5Z3PDB_P_d83MKXRnOAy4MOBBdBk-RI0Qzh752cVkImO0UO2CuoQSArk-IzCJ4dA4P5ec8ZZippxuGr6SoUmtzFPwxgwa7lfpmmIE66aIN7GNYh1ajKsswcrAky3c/s65/page-up-icon.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWo3zsfwZGU6rGUpVj6Oq3ytaM4jCc9dQ9L22WsGEvQsav7DpLD8VB20kbe0XaZf_oJN_cecFShYxd4qW0AsIQuAsjPhWTo3x07tUcUNG4XAOPWXZbXp-a2NwqI4ETUG35E0ipp5oZJ0/s65/page-down-icon.png

2:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4jlUaFvdIGqDSIoQOz3ZvaCVJtoo3FEPm1MlEIME_F8Te9Ma1_mQ1iWIzIqyhP491OWv86o2iRNNM7WMSSug2OFt8O6HU5TUI5jEKBtQyN5qwzHvJOUXyNUD1AECfAXJkqQ2rg7s312Q/s48/onebit_30.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0cqeD_KsVhuZYTr8Rpn6LgzKUhh_UBdjKYaCQ0N-_NdUvMUqAcUgiOCTIM_NBarMVJWNKLnWHONXZH165xLkCTv973uYphn5mFa7BSvm2atz-gG3xVRKxTWdUjz_bbh6C2qd2gfqQSA/s48/onebit_28.png

3:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3gZmU2n7Bm9gJPZkjxsupPn2_rY9GAq6k2Y6pTlbhsgA3_12jKz_HuYHYjlFEeet2lfY-eqVxWX1-wNHcGxpxRJo1e3zcp16-417oPZ-EXizFnfk8CeqONi4sLXh835vmNpz80ByZZ4/s44/arrow-up.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8a2QRPnBrCKj4r0TYqeJm3O9hZrVtYZpZJ0Y_QxSjwPWvnrAaREEpoemmC48Smg_hhMB8JHP0wS7WRewjrh2SwkbG7OvNjeLVCY1keuSxI3RZy1xarEIbOcmNxDNpuTy4ljWA3Sq8Ts/s44/arrow-down.png

4:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8a2QRPnBrCKj4r0TYqeJm3O9hZrVtYZpZJ0Y_QxSjwPWvnrAaREEpoemmC48Smg_hhMB8JHP0wS7WRewjrh2SwkbG7OvNjeLVCY1keuSxI3RZy1xarEIbOcmNxDNpuTy4ljWA3Sq8Ts/s44/arrow-down.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMZBZeoZGBhANNepEyTzZWwatV4PyrOC9PwpbrmTHP7vDEbQjw0Sc3CPUVm1uT1JDuZ1JT0Tk1ODBUVuZm_TiDjP9dxdII_wMnPWdlNeLvhyP7q_dipXqP4Vj2E2INBp-xr9TqeH7ceE/s44/arrow-down.png

5:


 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQToknfYaussu4S1tavgHye8MhGlQVcHEMf9BI8wVtOt6reLZkH90vzbQw6sCJTQYUBvOpvfaYNoyTL8lVFTuzJpH1StMcc_Q0fN9FzR2UYHA326Ehyphenhyphen7mHW5axguULueMm4a1j30ugiI/s48/arrow-up.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnIFsAlx3AhZ83589UWLKyFbK6wuplfoX6bapDCw2VlfwSGV5AbOxfPCGFWy1jx-6kVmtL5XeXWXYvyP21gJROuFovKRILJQJIU_Zd_cLgfTJh70PFoCW1iTcm-YVwF2m_DhSiqGcs-w/s48/arrow-down.png

6:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxigsCpmkMalfjJEzgGRHg1_z1qV1Ukz_oEyA2O14ZiAFT-dwxp4rJxBkL8a7WH2hw3cynjuzkfcpsNcvtmuhSK8r1WLkA7Qk4VeUneCq4cfoVV80siYsF-OgqOzJ4YGYSDos-j1AWTRs/s48/arrow-up.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA3nYYcQh8peBgFdjR3pBqtKKbks4lPnKl378IbqC_XPbgXNAlZfqpx0_3LEiXLwG1Wt322wF5REBPZZlyAG32oqMKsW6az57MHe-6b_QosbfKg_O06AhvI06YlzfbgNrYMqI081lEe58/s48/arrow-down.png

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


Edit by vaiol!!!!

Τρίτη 10 Σεπτεμβρίου 2013

Simple Image Gallery

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

Η εγκατάσταση είναι η γνωστή διαδικασία και για να γίνει αυτό

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

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

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

<style type="text/css"> #simplegallery2 { //CSS for sample Gallery position: relative; visibility: hidden; border: 5px solid black; margin: auto; } #simplegallery2 .gallerydesctext { //CSS for description DIV of Example 1 (if defined) text-align: left; padding: 2px 5px; font-family: calibri; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B_
1mqJd2tC8qSXNrNUl2YnhUZnc">
</script>

<script type="text/javascript">
var mygallery2=new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [

   ["ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ", "ΕΔΩ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΣΑΣ"rel='
     nofollow' ", 
     "_new", "ΕΔΩ Ο ΤΙΤΛΟΣ ΣΑΣ"],

 
    ["ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ", "ΕΔΩ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΣΑΣ", "_new",
     "ΕΔΩ Ο ΤΙΤΛΟΣ ΣΑΣ"],

 
   ["ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ", "ΕΔΩ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΣΑΣ", "_new",
    "ΕΔΩ Ο ΤΙΤΛΟΣ ΣΑΣ"],

 
   ["ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ", "ΕΔΩ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΣΑΣ", "_new",
     "ΕΔΩ Ο ΤΙΤΛΟΣ ΣΑΣ"],

 ],

 autoplay: [true, 3500, 2], //[auto_play_boolean, delay_btw_slide_millisec,
 cycles_before_stopping_int]
 persist: true,
 fadeduration: 1000, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 },

 onslide:function(curslide, i){ //event that fires after each slide is shown
 //curslide: returns DOM reference to current slide's DIV (ie: try alert
(curslide.innerHTML)
 //i: integer reflecting current image within collection being shown 
(0=1st image, 1=2nd etc)
 }
})
</script>
<div id="simplegallery2"></div> 
.................................................................................
ΑΛΛΑΓΕΣ 
ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ 
 
ΕΔΩ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΣΑΣ 
 
ΕΔΩ Ο ΤΙΤΛΟ ΣΑΣ

ΑΝΤΙΚΑΤΑΣΤΗΣΤΕ ΟΤΙ ΒΛΕΠΕΤΕ ΜΕ ΤΙΣ ΔΙΚΕΣ ΣΑ ΔΙΕΥΘΥΝΣΕΙΣ-ΔΙΕΥΘΥΝΣΗ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ-
ΤΟ URL ΤΟΥ ΠΡΟΟΡΙΣΜΟΥ ΣΑΣ ΚΑΙ ΤΟ ΤΙΤΛΟ ΤΗΣ ΚΑΘΕ ΦΩΤΟΓΡΑΦΙΑΣ ΚΑΙ ΜΟΛΙΣ ΤΕΛΙΩΣΕΤΕ
ΠΑΤΗΣΤΕ ΑΠΟΘΗΚΕΥΣΗ!! 

400 ΕΙΝΑΙ ΤΟ ΜΕΓΕΘΟΣ ΠΟΥ ΠΡΕΠΕΙ ΝΑ ΕΧΕΙ ΚΑΘΕ ΦΩΤΟΓΡΑΦΙΑ ΓΙΑ ΤΗΝ ΣΩΣΤΗ ΑΝΑΠΑΡΑΓΩΓΗ
ΤΗΣ ΑΠΟ ΤΟ SLIDER.ΕΑΝ ΜΕΓΑΛΩΣΕΤΕ Η ΜΙΚΡΥΝΕΤΕ ΤΟ ΜΕΓΕΘΟΣ ΤΟΥ SLIDER TOTE ΘΑ ΠΡΑΞΕΤΕ
ΑΝΑΛΟΓΑ ΚΑΙ ΓΙΑ ΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ!!
 
Εάν θέλετε να προσθέσετε και άλλες αναρτήσεις,΄τοτε επαναλαμβάνετε αυτό το
κομμάτι στον κώδικα..
 
   ["ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ", "ΕΔΩ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΣΑΣ", "_new",     
     "ΕΔΩ Ο ΤΙΤΛΟΣ ΣΑΣ"], 

Το true, 3500 είναι η ταχύτητα του slider.Aν αυξήσουμε το 3500 πάει πιο σιγά
αν το μειώσουμε πάει πιο γρήγορα!!Αυτά είναι τα πιο βασικά!!  
 
 
Καλή επιτυχία!!!!
 
Demo
 
 
Πηγή κώδικα
Thanks to Safetricks.net 
 
 
 
Edit by vaiol!!! 

Subscribing Widget Box

Φίλες και φίλοι γεια σας, σε αυτήν την ανάρτηση θα δούμε άλλη μια παραλλαγή της
Subscription form με την μόνη διαφορά ότι αυτή έχει όλα τα social μαζεμένα και όχι
μόνο το feedburner!Aν όχι όλα τα social έχει τα πιο σημαντικά:facebook, twitter,
google plus, feedburner!Είναι δηλαδή ένα πολύ χρήσιμο Subscribing Widget Box για τα
blog μας!

Για να το εγκαταστήσετε

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

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

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

<style> 
/* Safe Tricks Social Widget */
#ST-mashable-bar { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; }
.fb-likebox { background: #fff; padding: 10px 10px 0 10px; border: 1px solid #
D8E6EB; margin-top: -2px; height:65px; } 
.googleplus { background: #F5FCFE; border-top: 1px solid #FFF; border-bottom: 1px
 solid #ebebeb; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB;
 border-image: initial; font-size: .90em; font-family: "Verdana","Helvetica",sans
-serif; color: #000; padding: 9px 15px; line-height: 1px;}
.googleplus span { color: #000; font-size: 11px; position: absolute; display:
inline-block; margin: 9px 70px;}.g-plusone { float: left;}
.twitter { background: #EEF9FD; padding: 10px; border: 1px solid #C7DBE2; border
-top: 0;} 
#mashable { background: #EBEBEB; border: 1px solid #CCC; border-top: 1px solid 
white; padding: 2px 8px 2px 3px; text-align: right; border-image: initial;}
#mashable .author-credit {} #mashable .author-credit a { font-size:10px; font-
weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration:none;} 
#email-news-subscribe .email-box{ padding: 5px 10px; font-family: "Verdana","
Helvetica",sans-serif; border-top: 0; border-right: 1px solid #C7DBE2; border-left:
 1px solid #C7DBE2; border-image: initial; height:35px;} 
#email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 
1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 
3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px;
 -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-
family: "Verdana","Helvetica",sans-serif;} #email-news-subscribe .email-box input
.email:focus{color:#333} 
#email-news-subscribe .email-box input.subscribe{ background: -moz-linear-
gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient
(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); 
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-
background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Verdana",
"Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-
border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 
1px 1px 0; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px;
 cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input
.subscribe:hover{ background: #ff9b00; background-image:-moz-linear-gradient
(top,#ffda4d,#ff9b00); background-image:-webkit-gradient(linear,left top,left 
bottom,from(#ffda4d),to(#ff9b00)); filter:progid:DXImageTransform.Microsoft.
Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:
0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 background
:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop
(1,#ff9b00)); background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%)
; -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; 
-moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; 
color:#FFFFFF; text-shadow:#d08d00 1px 1px 0} #other-social-bar { background-
color: #D8E6EB; box-shadow: 0 1px 1px #FFFFFF inset; padding: 5px; font-family:
 "Verdana","Helvetica",sans-serif; font-weight:bold; overflow: hidden; border: 
1px solid #B6D0DA; height:35px; }
</style>  <!--[if IE]> 
<style> 
#email-news-subscribe .email-box input.subscribe{ background: #FFCA00; } 
</style> 
<![endif]--> 

<!--begin of social widget--> 
<div style="margin-bottom:10px;">
<div class="fb-likebox">
<!-- Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like-box" data-
href="https://www.facebook.com/username facebook" data-width="280" data-height="88" data
-show-faces="false" data-stream="false" data-header="false"></div></div>
<div class="googleplus"> 
<!-- Google --><span>Recommend Us!</span><div class="g-plusone" data-size="medium">
</div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script></div>
<div class="twitter"> 
<!-- Twitter -->
<iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button"
 src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=en&amp;link_color=
&amp;screen_name=username twitter&amp;show_count=&amp;show_screen_name=&amp;text_color="
 frameborder="0" scrolling="no"></iframe></div>
<div id="email-news-subscribe"> 
<!-- Email Subscribe -->
<div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post"
 target="popupwindow" onsubmit="window.open('http://feedburner.google.com
/fb/a/mailverify?uri=username feed', 'popupwindow', 'scrollbars=yes,width=550,
height=520');return true"><input class="email" type="text" style="width: 150px;
 font-size: 12px;" id="email" name="email" value="Your Email Here.." onfocus="
if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.
value==&#39;&#39;)this.value=this.defaultValue;" /><input type="hidden" 
value="username feed" name="uri" /><input type="hidden" name="loc" value="en_US"
 /><input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form></div></div>
<div id="other-social-bar">
<!-- Other Social Bar -->
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_6"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a></div><script type="
text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa
-4f22ed8a16c66e93"></script></div>
<div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top:
 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: 
initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> 
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;">
<a href="http://www.safetricks.net" target="_blank" >Get This »</a></span></div>
<!-- AddThis Button END -->
</div>
<!--Social Sharing Widget By SafeTricks.Net End-->
 
............................................................................... 
 ΑΛΛΑΓΕΣ 


username facebook  username twitter  username feed 
 
ΑΝΤΙΚΑΤΑΣΤΗΣΤΕ ΟΛΑ ΤΑ USERNAMES ΜΕ ΤΑ ΑΝΤΙΣΤΟΙΧΑ ΔΙΚΑ ΣΑΣ ΚΑΙ ΠΑΤΗΣΤΕ
ΑΠΟΘΗΚΕΥΣΗ!!ΑΥΤΟ ΗΤΑΝ! 
 
 
Καλή επιτυχία!!
 
 
 
 
 
Πηγή κώδικα 
Thanks to safetricks.net 
 
 
 
Edit by 

Παρασκευή 6 Σεπτεμβρίου 2013

Subscription form update 1

Φίλες και φίλοι γειά σας μετά την πρώτη μας ανάρτηση πού αφορούσε την Subscription form
για το blog μας,τώρα σε αυτήν την ανάρτηση θα δούμε διάφορες παραλλαγές της που έχώ
ετοιμάσει!!Ο κώδικας παραμένει ο ίδιος και απλά θα αλλάξουμε τα εικονίδια!

Πάμε να δούμε τι έχουμε:

1:






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQYTiSuQADVkg3eDZloCgZmmBpO34aSeWwqcClw2OORxvLtAXK3cyaFI7wcFmPSXOBtDcVrs_r5gUmNLCUUFcC8oPy9BxwWmgR-nSIu873rbNHykTajj3zelUTPLgAB0jApLuORcN24co/s55/email27a.gif






2:






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMt9IgQXDGGiSLnichVZTAaGJPUKt0kSbpUg897hNJSF4x218ZB8qEqmKYETjwG1PgmKla51v6m11pJXBGXiQRNQaQnVRyUIgUJQujNKWmnArILhU-OpJhwmUluXWpqU17Urz9iWh6ROE/s64/n2.gif








3:








https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXp79w089AmPmUgxAE2svt6iPyEvQ3_gEezH0xtMgETEth9P82Cm_zZMCr8swoN2NtPvb0SRrQecFATj9LvxVSxUbKt8iN-P3URmVIp2j1qzRGwzqKlFTew7GaJEj-UWxCHjyIimJM5m8/s55/mail_post_to.png

4:






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZqqRhNwQeCDIlhCyUsHecB76pJEWt8kBHLWacdTVxFvrBPwcfJq9Z7oWD12O0Y9mu0qeArQBI5qKRaEwXBJj3Fd4vHiEE6CUpk0eH5etpdBPZjxKXbgC4apCW7awK0WESFo03QllFuAU/s55/mail_forward%25281%2529.png

5:






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkz1ot_piynmRIlSBA7njBW6A_srBbOlhK2f_wiKv30WUz4W0vPinhknx9VnApmf7pbV4o0xsinRe0_aHeT_zVu1H-O862kcl_d0zIFHWmfhn97_nJ_QIiQqqiGob-HwJDTzxYKEaNMwQ/s55/forward_email.png



Οι 2 πρώτες photos είναι gif  για αυτό έκανα και αναπαραγωγή ενώ στις άλλες είναι 
οπως τα βλέπετε απο πάνω!!

Η εγκατάσταση είναι η ίδια και για να γίνει αυτο...

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

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

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
..........................................................................................................................
<style>
.mbt-email{
background:url(ΕΔΩ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑ ΣΑΣ) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;  
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?
uri=ΕΔΩ ΒΑΖΕΤΕ ΤΟ FEED ΣΑΣ', 'popupwindow', 'scrollbars=yes,width=550,height=520');
return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;)
{this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ FEED ΣΑΣ" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>
..............................................................................................................................................
ΑΛΛΑΓΕΣ

ΕΔΩ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑ ΣΑΣ--Εδώ βάζετε την δική σας φώτο!
Διαλέγετε πιο url θέλετε από τα παραδείγματα πάνω η βάζετε το δικό σας!!

 ΕΔΩ ΒΑΖΕΤΕ ΤΟ FEED ΣΑΣ--Εδώ βάζετε την διεύθυνση του feed σας!!


Subscribe via Email--Όποιος θέλει αλλάζει και το κείμενο όπως έχω κάνει και στην
 τελευταία φόρμα!

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


Edit by vaiol!!!!

Δευτέρα 2 Σεπτεμβρίου 2013

Socials icons update1

Φίλες και φίλοι γειά σας σε αυτήν την ανάρτηση θα συνεχίσουμε με την παρουσίαση από μεμονωμμένα (free) social icons τα οποία μπορούμε να τα τοποθετούμε σε διάφορα σημεία των
blog μας!Θα δούμε σε photos πρώτα πως είναι το κάθε εικονίδιο και μετα τους  κώδικες τους!!

YOYTUBE












                                                                               RSS


EMAIL ME












                                                                                                                                   FACEBOOK











                                                                        TWITTER

Ο κώδικας έιναι έτσι ώστε να ανοίγουν οι σύνδεσμοι σε νέο παράθυρο και η λέξη
κείμενο φαίνεται όταν περάσει ο κέρσορας από πάνω από τα εικονίδια!!

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

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

Διάταξη --> Προσθήκη gadget-->

HTML/JavaScript

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

YOYTUBE
..............................................................................................................

<a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMpglWGdZHLg9bwDEM8-nsENEy3aLyZeLgo_XdW894ILsCBDCkesx-mq4Y63mX9B-ShvP7Hi12zv5EePGZM5QgwyVQILg0YxX6k1WjDuN7tXclzPHU7cSJBL3CkNuxbQB9PAUEK5IsQYM/s256/youtube-shop-icon.png" title="ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ" width="220" height="154" border="0" /></a>
....................................................................................................................
RSS
.......................................................
<a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-1MfKjjxOnUJgk0iNji5G3Jeu7DsIdQReahVd9QL3iM0OUS8SHb-XLa8B35k1AEFZ94LSaKK2-R4m-LCwOLaEFd_VKTiM-2_Z3vQ2fn0vUG4hgxBIU-2C3pgzqYp7-sOisVaRJvmfVHU/s256/rss-shop-icon.png" title="ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ" width="220" height="154" border="0" /></a>
......................................................................................................................
EMAIL ME
.......................................................................................................................
<center><a href="mailto:ΕΔΩ ΤΟ EMAIL ΣΑΣ">
<img width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlwkVslsVlwnLpOdbikI3qEJQr9Epf4B4EeOGtvMak1p055TJzBpBxJN8PXjPqPqVxKf8yb7uCYg0CuGvHe-zxOf4uLnEUqT7vOmeraIMvjxRem7po1fNPUzzEj94qQavDnMBNAYGTBw/s512/contact.jpg" height="100" title="Ο ΤΙΤΛΟΣ ΣΑΣ" /></a></center>
............................................................................................................................................
 FACEBOOK
..............................................................................................................

<a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXT7zuWREfOtDnjenYRtZc7DMmUUDub61Za9sWWdaL7zMsXziJQ7-ZJvhX5tGPIE8Jj6nMLSy5Vkv7YTO6DBa42164mEFCQLZMBwnrYKi4kGmdVn2qwHnmMbYZ-FCeUIpL3KzHr6NfPB4/s512/facebook.jpg" title="ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ" width="220" height="154" border="0" /></a>
....................................................................................................................
TWITTER
.......................................................
<a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPocvHhJ0FytV7Ks1HOeLXzrZdA_Gr4kZ6a266zkBFR1mSdjeKt96ZbEPCc7RXJZN1BFJHsFGp7Un6vPafvCzVBNA39lRtjpQ4absrnXro9ALJQDCpR3ZZprvKDly3644HHYdIzHtuI4/s512/twitter.jpg" title="ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ" width="220" height="154" border="0" /></a>
......................................................................................................................
ΑΛΛΑΓΕΣ
ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ--Εδώ βάλτε την διεύθυνση που έχετε
στα αντίστοιχα κοινωνικά δίκτυα.

ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ-Εδώ τον τίτλο που θέλετε!

Μόλις τελιώσετε πατήστε Αποθήκευση!!

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


Edit by vaiol!!!!!

JavaScript Image Slider

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

Για να το εγκαταστήσετε

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

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

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

<style type="text/css"> /* JavaScript Image Slider By SafeTricks.Net/ */ #mcis { display: none; } #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://lh4.googleusercontent.com/-PaZmF2DqE1I/UeukDrceUkI/AAAAAAAADGA/
PeEmTauoA9I/s109/slider-ribbon.png) no-repeat; 
z-index: 7; } #slider { width: 500px;  height: 218px; background: #fff url(https://lh6.googleusercontent.com/-dUlRL_1uvb8/UeukrC4KLdI/AAAAAAAADGI
/BPMUH-Ky3PM/s50/load.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover{ color: #DA0; } div.navBulletsWrapper { top: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://lh4.googleusercontent.com/-5lXfFwjn3Zc/Ueuk9-
d55YI/AAAAAAAADGQ/f-BPiMxCK9M/s22/slider-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: 
translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style> <script src="https://od.lk/s/MTBfMzUwNjM0MDdf/0B_1mqJd2tC8qLXpKRHhzd2RXTlU.js" type="text/javascript"></script>  <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider">
<a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a> </div></div><br/><br/><br/> 
.................................................................................................
ΑΛΛΑΓΕΣ

width: 500px;  Εάν αυξήσουμε το 500 μεγαλώνει το πλάτος του slider,αν το μειώσουμε μικραίνει height: 218px; και εάν αυξήσουμε το 218 αυξάνεται το ύψος του slider και το αντίστροφο αν
μειώσουμε το 218!ΠΡΟΣΟΧΗ οι φωτογραφίες μας πρέπει να είναι στο ίδιο μέγεθος όπως το slider!


ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ Εδώ μπαίνει το λινκ της διεύθυνση μας!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ Εδώ μπαίνει η διεύθυνση της φώτο που θα φαίνεται!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ Εδώ γράφουμε τι θέλουμε να φαίνεται!

Τα δύσκολα τελείωσαν!!

Εάν θέλετε να προσθέσετε και άλλες αναρτήσεις τότε πριν το </div> στο τελος του κώδικα
προσθέστε επιπλέον

<a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ"><img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a>

Εάν αυξήσετε το μέγεθος του slider τότε πρέπει και να πειράξετε και το

top: 250px; left: 190px; είναι η θέση των σφαιρών(Bullets)που πρέπει να είναι στο κέντρο
οπότε θα πειράξετε το 250 και το 190 για να τις κεντράρετε!

Όποιος δεν θέλει το whats hot όπως θα δείτε στο DEMO αφαιρέστε από τον κώδικα αυτό..

#ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://lh4.googleusercontent.com/-PaZmF2DqE1I/UeukDrceUkI/AAAAAAAADGA/
PeEmTauoA9I/s109/slider-ribbon.png) no-repeat; 
z-index: 7; 


Αυτά ήταν όλα πατήστε Αποθήκευση και είστε έτοιμοι!!

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


Πηγή κώδικα
thanks to safetricks.net


Demo στο οποίο έχω κάνει όλες τις αλλαγές που περιέγραψα πιο πάνω μπορείτε να
δείτε εδώ στο Tech Time στην αρχική του σελίδα, και ατόφιο το slider 
όπως είναι στον κώδικα
μπορείτε να το δείτε ΕΔΩ



Edit by

Icon Icon Icon

spice up your blog


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