Στάλες στο γαλάζιο ®: Image Effects

Στάλες στο γαλάζιο ®: Image Effects

6 Lens Flare Effects High Resolution 2500x2500px (Part 3).

12:59 μ.μ. Liza Giannouri 0

<center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi18ImAXlnnTzfEHQ1BsIple6Q9TaRsWzQo87IazqNT7tZkbWpLfjVs-SBbcb_8avevNrVECsDMbdeUH_WozHqEk7jvLja5y3OzyknCvaWfa9GtWr5fIrwo06V-g7m8vtvtaFCM4n1L18k/s1600/6+Lens+Flare+Effects++Part+3.+preview.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi18ImAXlnnTzfEHQ1BsIple6Q9TaRsWzQo87IazqNT7tZkbWpLfjVs-SBbcb_8avevNrVECsDMbdeUH_WozHqEk7jvLja5y3OzyknCvaWfa9GtWr5fIrwo06V-g7m8vtvtaFCM4n1L18k/s640/6+Lens+Flare+Effects++Part+3.+preview.jpg" /></a> <br />
6 Lens Flare Effects High Resolution 2500x2500px  PNG Transparent Easy Editable on Photoshop. <br />
<a href="https://mega.nz/#!7tAkDISa!-4vLa2D88QJDnRUymceseBY746J6HgFlI_qp2wEvV2A" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCZ3ozU7dbvtxr9e_KQtn3lz-xz_v2ZGqGFw0RRdMI4biH7rq2nwuj9gj0jT_VQuf25E-lV1NRcPErnvePTuvc2SyAq-rUe9nlGqcqhJV8TJtkOgBlBL37ZBs_CNsIzQ1vPsMWF3BYUI/s1600/DownloadLE.png"></a></center>

6 Lens Flare Effects High Resolution 2500x2500px (Part 3).

Image Effects Photoshop Stuff 6 Lens Flare Effects High Resolution 2500x2500px (Part 3).

6 Lens Flare Effects High Resolution 2500x2500px PNG Transparent Easy Editable on Photoshop.

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

6 Lens Flare Effects High-Res - Part 5.

3:19 μ.μ. Liza Giannouri 0

<center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiekhrqBAbr3O8SkILLS8DQvgjWzzJtUiRxo3KRa_Ks8NHFqHIDM-MEmbjzRV6pdJesEwitMkDTx_bcBt8xcUQ3xNU902T6RhnI4xo_0l_fstgPvkQdxiIE-_T0CNBdROTK1btLisQ-r_A/s1600/6+Lens+Flare+Effects++Part+5.+preview.jpg" imageanchor="1"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiekhrqBAbr3O8SkILLS8DQvgjWzzJtUiRxo3KRa_Ks8NHFqHIDM-MEmbjzRV6pdJesEwitMkDTx_bcBt8xcUQ3xNU902T6RhnI4xo_0l_fstgPvkQdxiIE-_T0CNBdROTK1btLisQ-r_A/s640/6+Lens+Flare+Effects++Part+5.+preview.jpg" width="315" /></a> <br />
6 Lens Flare Effects High Resolution 2500x2500px  PNG Transparent Easy Editable on Photoshop. <br />
<a href="https://mega.nz/#!7kwlkJhJ!tmRit_7cMBLUtLc81HgsdyzCx_oh_O4huN_Ov0h1tQI" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCZ3ozU7dbvtxr9e_KQtn3lz-xz_v2ZGqGFw0RRdMI4biH7rq2nwuj9gj0jT_VQuf25E-lV1NRcPErnvePTuvc2SyAq-rUe9nlGqcqhJV8TJtkOgBlBL37ZBs_CNsIzQ1vPsMWF3BYUI/s1600/DownloadLE.png"></a></center><br />

6 Lens Flare Effects High-Res - Part 5.

Image Effects 6 Lens Flare Effects High-Res - Part 5.

6 Lens Flare Effects High Resolution 2500x2500px PNG Transparent Easy Editable on Photoshop.

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

6 Lens Flare Effects High-Res (Part 4).

1:59 μ.μ. Liza Giannouri 0

<center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOJ-NgiudoxJa-ROktGam2E2YtZjfowrP4XioTcuNUkbYxZcM_ccWoSm_iDMrDdzEwJAlW6X-hM7sA7boa66lS2PaoluH4NGQYgzxVt0Y7VZBEoJoM6O8a2RANlV2L-R1owRrYMLpvguA/s1600/6+Lens+Flare+Effects++Part+4.+preview.jpg" imageanchor="1"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOJ-NgiudoxJa-ROktGam2E2YtZjfowrP4XioTcuNUkbYxZcM_ccWoSm_iDMrDdzEwJAlW6X-hM7sA7boa66lS2PaoluH4NGQYgzxVt0Y7VZBEoJoM6O8a2RANlV2L-R1owRrYMLpvguA/s640/6+Lens+Flare+Effects++Part+4.+preview.jpg" width="540" /></a> <br />
6 Lens Flare Effects High Resolution 2500x2500px  PNG Transparent Easy Editable on Photoshop. <br />
<a href="https://mega.nz/#!Ol50TBaB!7u4iZbjZRG3HZWcM8R393D7niDAVSMq8kyttrjg76EU" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCZ3ozU7dbvtxr9e_KQtn3lz-xz_v2ZGqGFw0RRdMI4biH7rq2nwuj9gj0jT_VQuf25E-lV1NRcPErnvePTuvc2SyAq-rUe9nlGqcqhJV8TJtkOgBlBL37ZBs_CNsIzQ1vPsMWF3BYUI/s1600/DownloadLE.png"></a></center>

6 Lens Flare Effects High-Res (Part 4).

Cliparts Image Effects 6 Lens Flare Effects High-Res (Part 4).

6 Lens Flare Effects High Resolution 2500x2500px PNG Transparent Easy Editable on Photoshop.

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

Face off: Δημιουργήστε φωτογραφίες συνδυάζοντας το πρόσωπο σας (Video).

1:01 μ.μ. LoneEagle 0

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6X7F6zT1DCkEkUmNgg9Q3X88Eg86Qg1hlWndElbFZQ9_B00TRVudY6HGQbd89ngpqzMHJnpg_qOpx0QN7QR4onkQGx0rA-6F2VMEjOJwkqdkzC853IWKYBHAG4x_gfnV0IkF9eFPw5do/s1600/Face_Off_face_changer.jpg" imageanchor="1"><img border="0" height="382" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6X7F6zT1DCkEkUmNgg9Q3X88Eg86Qg1hlWndElbFZQ9_B00TRVudY6HGQbd89ngpqzMHJnpg_qOpx0QN7QR4onkQGx0rA-6F2VMEjOJwkqdkzC853IWKYBHAG4x_gfnV0IkF9eFPw5do/s640/Face_Off_face_changer.jpg" width="640" /></a></div>Το <b>Face off</b> θα σας βοηθήσει να δημιουργήσετε φωτογραφίες συνδυάζοντας το πρόσωπο σας σε διαφορετικά σώματα.<br />
Διαθέτει μια μεγάλη ποικιλία από templates που θα σας δώσουν την δυνατότητα να μεταμορφωθείτε σε διάφορους χαρακτήρες.<br />
<br />
<center><h4><b>Δείτε το βίντεο.</b></h4><div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAIuYMFmzsDIFbBV_pDugQ01dRwJmC-1RVvBLyTUPQQITX27NyJf3uwQ17PCXYJwo4GXMHFiEVAJOLZnQ80-FYBnPO6HuEMUi7AWTGiZhvRhsUBE3m6-FYUdLkXwsqMtXmmiPjIeMmDb8/s1600/StalesStoGalaziopad.png) no-repeat top left;height:450px;margin:0px 13px auto;padding:56px 0 0 68px;text-align:left;width:600px;"><iframe allowfullscreen="" frameborder="0" height="370" src="https://www.youtube.com/embed/uaMJc6z1-8k?rel&showinfo=0" width="515"></iframe></div></center><br />
<center><a href="https://play.google.com/store/apps/details?id=com.pn.faceoff&hl=el" target="_blank"><img oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCZ3ozU7dbvtxr9e_KQtn3lz-xz_v2ZGqGFw0RRdMI4biH7rq2nwuj9gj0jT_VQuf25E-lV1NRcPErnvePTuvc2SyAq-rUe9nlGqcqhJV8TJtkOgBlBL37ZBs_CNsIzQ1vPsMWF3BYUI/s1600/DownloadLE.png"></a></center>

Face off: Δημιουργήστε φωτογραφίες συνδυάζοντας το πρόσωπο σας (Video).

Android Google Play Image Effects Face off: Δημιουργήστε φωτογραφίες συνδυάζοντας το πρόσωπο σας (Video).

Το Face off θα σας βοηθήσει να δημιουργήσετε φωτογραφίες συνδυάζοντας το πρόσωπο σας σε διαφορετικά σώματα. Διαθέτει μια μεγάλη ποικιλία α...

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

ZombieBooth 2: Μεταμορφωθείτε σε Zombie για τον εορτασμό της αποκριάς.

12:50 μ.μ. LoneEagle 0

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmk3UZtDa64wsHKctsJObH4Qzv8ySX6t1b6LInO_fMErjh1SAMLqhj8OYXZxxaBp50MzONGtD0Wgj8cCYj5_Wq1VsuwBcSPiPkvN7iN1kHMxhxyINB6HvLgj7-kqIb3oYhC3iI8Ur01CA/s1600/ZombieBooth+2.jpg" imageanchor="1"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmk3UZtDa64wsHKctsJObH4Qzv8ySX6t1b6LInO_fMErjh1SAMLqhj8OYXZxxaBp50MzONGtD0Wgj8cCYj5_Wq1VsuwBcSPiPkvN7iN1kHMxhxyINB6HvLgj7-kqIb3oYhC3iI8Ur01CA/s640/ZombieBooth+2.jpg" width="541" /></a></div>Δώστε την ευκαιρία στον εαυτό σας να μεταμορφωθεί σε Zombie.<br />
<br />
Το <b>ZombieBooth 2</b> σου δίνει την δυνατότητα να δημιουργήσεις μια 3D κινούμενη φωτογραφία και να τρομάξεις τους φίλους σου! <br />
Περιλαμβάνει αρκετά Special effects και μια υπέροχη διαδραστική επαφή με τον χρήστη.<br />
<br />
<center><h4><b>Δείτε το βίντεο:</b></h4><div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAIuYMFmzsDIFbBV_pDugQ01dRwJmC-1RVvBLyTUPQQITX27NyJf3uwQ17PCXYJwo4GXMHFiEVAJOLZnQ80-FYBnPO6HuEMUi7AWTGiZhvRhsUBE3m6-FYUdLkXwsqMtXmmiPjIeMmDb8/s1600/StalesStoGalaziopad.png) no-repeat top left;height:470px;margin:0px 25px auto;padding:48px 0 0 58px;text-align:left;width:650px;"><iframe allowfullscreen="" frameborder="0" height="400" src="https://www.youtube.com/embed/U6aSWYVo2cs?rel&showinfo=0" width="524"></iframe></div></center><center><a href="https://play.google.com/store/apps/details?id=com.tyffon.ZombieBooth2&hl=el" target="_blank"><img oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCZ3ozU7dbvtxr9e_KQtn3lz-xz_v2ZGqGFw0RRdMI4biH7rq2nwuj9gj0jT_VQuf25E-lV1NRcPErnvePTuvc2SyAq-rUe9nlGqcqhJV8TJtkOgBlBL37ZBs_CNsIzQ1vPsMWF3BYUI/s1600/DownloadLE.png"></a></center>

ZombieBooth 2: Μεταμορφωθείτε σε Zombie για τον εορτασμό της αποκριάς.

Android Google Play Image Effects ZombieBooth 2: Μεταμορφωθείτε σε Zombie για τον εορτασμό της αποκριάς.

Δώστε την ευκαιρία στον εαυτό σας να μεταμορφωθεί σε Zombie. Το ZombieBooth 2 σου δίνει την δυνατότητα να δημιουργήσεις μια 3D κινούμενη ...

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

20 Soft Photoshop Brushes (abr) Vol.4

8:30 π.μ. Liza Giannouri 0

<center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWhUHaWDvWh3IbRbiVHwOWHkmIkC3Ne778VUVg0omQgj40hVr9WN4SCe-DVQxlb_WvfcI7IkJ8XtnbinrwTFIQQe9QsvtEPWXgz0lQgFZBA463XU3DwfGfNt9-qA4GYpFp7lxtwdN8Jl8/s1600/20+Soft+Brushes+Vol.4+Preview.jpg" imageanchor="1"><img border="0" height="448" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWhUHaWDvWh3IbRbiVHwOWHkmIkC3Ne778VUVg0omQgj40hVr9WN4SCe-DVQxlb_WvfcI7IkJ8XtnbinrwTFIQQe9QsvtEPWXgz0lQgFZBA463XU3DwfGfNt9-qA4GYpFp7lxtwdN8Jl8/s640/20+Soft+Brushes+Vol.4+Preview.jpg" width="640" /></a> <br />
20 Soft Photoshop Brushes (abr) High Res 2500 px Vol.4  Romantic & Glamorous Focus Photo Effect. <br />
<a href="https://www.brusheezy.com/brushes/58832-20-soft-ps-brushes-abr-vol-4" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCZ3ozU7dbvtxr9e_KQtn3lz-xz_v2ZGqGFw0RRdMI4biH7rq2nwuj9gj0jT_VQuf25E-lV1NRcPErnvePTuvc2SyAq-rUe9nlGqcqhJV8TJtkOgBlBL37ZBs_CNsIzQ1vPsMWF3BYUI/s1600/DownloadLE.png"></a><br />
</center>

20 Soft Photoshop Brushes (abr) Vol.4

Image Effects Photoshop Brushes Photoshop Stuff 20 Soft Photoshop Brushes (abr) Vol.4

20 Soft Photoshop Brushes (abr) High Res 2500 px Vol.4 Romantic & Glamorous Focus Photo Effect.

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

3 Τρόποι για να κάνετε τις φωτογραφίες στο blog σας να ξεχωρίζουν με javascript.

1:30 μ.μ. Σοφία 0

Σήμερα θα δούμε μερικούς τρόπους για να κάνουμε τις εικόνες στο blog μας να τραβούν τα βλέμματα και να ξεχωρίζουν με πολύ απλά βήματα .    <br />
<h4><b>1ος Τρόπος: <span style="color: blue;">Reflex.</span></b></h4><a href="http://1.bp.blogspot.com/_L116RpGjEMY/TDOekSxWr1I/AAAAAAAADFY/AYlL-GvoByc/s1600/a%5B13%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_L116RpGjEMY/TDOekSxWr1I/AAAAAAAADFY/AYlL-GvoByc/s320/a%5B13%5D.png" /></a><br />
<br />
<center><a class="button" href="http://bloggertricstest.blogspot.com/2010/03/cover-flow-reflex.html" target="_blank">Preview</a></center><br />
Reflex επιτρέπει να προσθέσετε ένα Cover Flow αποτέλεσμα στις εικόνες στην ιστοσελίδα σας. Το script σας επιτρέπει να προσθέσετε μεμονωμένα σύνορα, tiltings και reflections στις εικόνες. <br />
<br />
Λειτουργεί με όλες τις μεγάλες μηχανές αναζήτησης - Mozilla Firefox 1.5 +, Opera 9 +, Safari και IE6 +. <br />
<br />
Για να δώσουμε στις εικόνες μας Cover Flow αποτέλεσμα κάνουμε τα εξής: <br />
Εισάγουμε στο πρότυπο μας πάνω από την ετικέτα <b><span style="color: red;"></head></span></b> τον παρακάτω κώδικα:   <br />
<br />
<div class="code"><div class="code_content"><script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/reflex.js' type='text/javascript'/> <br />
</div></div>Και αποθηκεύετε το πρότυπο σας.  <br />
Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιήσετε <b><span style="color: red;">class "reflex"</span> </b>ενεργοποίησης. <br />
<br />
<b>Δείτε ένα παράδειγμα χρήσης:</b> <br />
<br />
<div class="code"><div class="code_content"><div class="image"> <br />
<img alt="" class="reflex " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdbBlQmZKxZZgXvaCwqAerdrQnnnx1yB-ojPw5cH5ch8Sg4dONevBw0oACTZX3OG5rfZ01gZSIrnLuObz-xtVwCb08eg2WUYLjibrcphi6Lj1fenHjz2QRYWZ27xWkIWSX4eqJ8Vfpbw/s320/none.jpg" width="200" /> <br />
</div> <br />
</div></div><br />
<h4>class attributes‎</h4><br />
Μπορείτε επίσης να προσθέσετε διαφορετικά <b>class attributes‎</b> για διαφορετικά αποτελέσματα : <ol><li>Ενεργοποίηση <b><span style="color: red;">class "reflex"</span></b> </li>
<li>διαφοροποιεί την αντανάκλαση με την προσθήκη <b><span style="color: red;">idistance </span></b>ακολουθείται από το επιθυμητό <b>height </b>σε pixel: <b><span style="color: red;">class "idistance"</span></b> ( - min=0 max=100 default=0 ) </li>
<li>διαφοροποιεί την αντανάκλαση με την προσθήκη<span style="color: red;"><b> iheight</b> </span><span style="color: grey;">ακολουθείται από το επιθυμητό <b>height </b>σε pixel: </span><b><span style="color: red;">class "iheight"</span></b> ( - min=10 max=100 default=33 ) </li>
<li>διαφοροποιεί την αντανάκλαση με την προσθήκη <b><span style="color: red;">iopacity</span></b> ακολουθούμενη από την επιθυμητή αδιαφάνεια σε ποσοστό: <b><span style="color: red;">class "iopacity" </span><span style="color: grey;">(</span></b> - min=0 max=100 default=33 ) </li>
<li>διαφοροποιεί τα border με την προσθήκη <b><span style="color: red;">iborder </span></b>ακολουθείται από το επιθυμητό <b>wide</b> σε pixel: <b><span style="color: red;">class "iborder"</span></b> ( - min=0 max=100 default=0 ) </li>
<li>διαφοροποιεί το χρώμα στα border με την προσθήκη <b><span style="color: red;">iColor </span></b>ακολουθείται από το επιθυμητό χρώμα σε <b>hex</b> : <b><span style="color: red;">class "icolor"</span></b> ( - min=000000 max=ffffff default=f0f4ff ) </li>
<li>διαφοροποιοει το <b>3D Z-Tilt direction</b> , προσθέτοντας ένα από τα ακόλουθα:  <br />
<b><span style="color: red;">class "itiltright" </span></b>ή <b></b><span style="color: red;"><b>class "itiltnone</b>"</span> ή <span style="color: red;"><b>class "itiltleft"</b></span> </li>
</ol><br />
π.χ. <b><div class="image"><img src="images/left.jpg" width="200" class="reflex iopacity50" alt="" /></div></b> <br />
<br />
<h4><b>2oς Τρόπος: <span style="color: blue;">Instant picture</span></b></h4><br />
<center><a class="button" href="http://bloggertricstest.blogspot.com/2010/03/instant-picture.html" target="_blank">Preview</a></center><br />
Δίνει στις φωτογραφίες σας instant picture εφέ , επίσης μπορείτε να τις κάνετε να μοιάζουν σαν παλιές. Για να δώσουμε στις εικόνες μας instant picture αποτέλεσμα κάνουμε τα εξής :  <br />
<br />
Εισάγουμε στο πρότυπο μας πάνω από το <b><span style="color: red;"></head></span></b> τον παρακάτω κώδικα :  <br />
<br />
<div class="code"><div class="code_content"><script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/instant.js' type='text/javascript'/> <br />
</div></div><br />
Και αποθηκεύετε το πρότυπο σας. <br />
Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιηθεί <b><span style="color: red;">class="instant"</span> </b>ενεργοποίησης.  <br />
<br />
<b>Δείτε ένα παράδειγμα χρήσης :</b> <br />
<br />
<div class="code"><div class="code_content"><div class="image"> <br />
<img class="instant" src="images/ΧΧΧΧ.png" width="180" height="140" border="0" alt=""> <br />
</div> <br />
</div></div><br />
<h4>class attributes‎ </h4><br />
Μπορείτε επίσης να χρησιμοποιήσετε διαφορετικά <span style="color: red;"></span><b><span style="color: red;">class attributes‎</span> για διαφορετικά αποτελέσματα:</b> <br />
1 . Ενεργοποίηση <span style="color: red;">class="instant" </span>2. Προσθέστε σκιά, με την προσθήκη ishadow ακολουθούμενη με το επιθυμητο <b><span style="color: red;">opacity</span></b> σε ποσοστά : <b><span style="color: red;">class "ishadow"</span></b> ( - min=0 max=100 default=33 ) <br />
π.χ. <b>class="instant ishadow40 "</b>  <br />
3 . διαφοροποιήστε το πλαίσιο, με την προσθήκη <b><span style="color: red;">iColor </span></b>ακολουθείται από το επιθυμητό <b>χρώμα hex:</b> <b><span style="color: red;">class "icolor" </span><span style="color: grey;">( </span></b>- min=000000 max=ffffff default=f0f4ff )  <br />
<b>π.χ. class="instant icolorFFFCE9 "</b>  <br />
4 . διαφοροποιήστε την κατεύθυνση κλίσης προσθέτοντας ένα από τα ακόλουθα:  <br />
<b><span style="color: red;">class "itiltleft"</span></b> η <b><span style="color: red;">"itiltnone"</span></b> η<b> </b><span style="color: red;"><b>"itiltright"</b> </span><b>π.χ. class="instant itiltleft"</b>  <br />
5 . αποτρέψτε τη σκίαση με την προσθήκη <b><span style="color: red;">noshading</span></b>:  <b><span style="color: red;">class "noshading" </span>π.χ. class="instant noshading"</b>  <br />
6 . διαφοροποιήστε το σχεδιασμό των border design προσθέτοντας <b><span style="color: red;">historical</span></b>: <b><span style="color: red;">class "historical" </span>π.χ. class="instant historical"</b>  <br />
7 . Στρογγυλεμένες γωνίες με την προσθήκη <b><span style="color: red;">nocorner</span></b>: <b><span style="color: red;">class "nocorner" </span></b>8 . διατηρήστε την αναλογία διαστάσεων εικόνας προσθέτοντας <b><span style="color: red;">preserve </span></b>:  <br />
<b><span style="color: red;">class "preserve"</span></b> <br />
9 . διαφοροποιήστε το κείμενο σχόλιων με την προσθήκη <b><span style="color: red;">itxtcol </span></b>ακολουθείται από το επιθυμητό χρώμα ως <b>hex</b>: <b><span style="color: red;">class "itxtcol"</span></b> ( - min=000000 max=ffffff default=000000 )  <br />
10. Παράγει το κείμενο από<b> alt χαρακτηριστικό</b> προσθέτοντας<b><span style="color: red;"> itxtalt</span></b>: <b><span style="color: red;">class "itxtalt" </span></b>11. Παράγει το κείμενο από το <b>χαρακτηριστικό title</b> με την προσθήκη <b><span style="color: red;">itxttitle </span></b>:  <br />
<b><span style="color: red;">class "itxttitle"</span></b> <br />
<br />
<b>Παράδειγμα χρήσης συνδυάζοντας διαφορετικά class attributes‎</b> :<br />
<br />
<div class="code"><div class="code_content"><div class="image"> <br />
<img class="instant ishadow40 itiltleft icolorFFFCE9 historical" src="<span style="color: red;">images/historical.jpg</span>" width="400" height="400" border="0" title="onClick event" alt=""> <br />
</div> <br />
</div></div><br />
<h4><b>3ος Τρόπος: </b><span style="color: blue;">filmed.</span></h4>filmed σας επιτρέπει να προσθέσετε λωρίδα φωτογραφικού φιλμ και σκιά στις εικόνες σας  <br />
<a href="http://picasaweb.google.com/109878937881440461891/Demo2?authkey=Gv1sRgCKS0mfHglu2_Dg#5443044278218883634"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVIANiaQP5ZH7a-5P63KemX0-I7RouUGcWJ-sK0OzZU-UhxQwhAImMFbdR7aZf5yU-Oq0lwCasJLJOrShdS4_9jUokehQfeQO0gzKQaqqlpYLitmY8suY4oB-XNQcUVV2oYfKDxQu8xU/s1600/g.png" style="display: block; float: none; margin-left: auto; margin-right: auto;" /></a> <br />
<br />
<center><a class="button" href="http://bloggertricstest.blogspot.com/2010/03/filmed.html" target="_blank">Preview</a></center><br />
Για να δώσουμε στις εικόνες μας αυτό το αποτέλεσμα κάνουμε τα εξής : Εισάγουμε στο πρότυπο μας πάνω από το <b><span style="color: red;"></head></span></b> τον παρακάτω κώδικα : <br />
<br />
<div class="code"><div class="code_content"><script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/filmed.js' type='text/javascript'/>  <br />
</div></div><br />
Και αποθηκεύετε το πρότυπο σας <br />
Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιηθεί <b><span style="color: red;">class="filmed"</span> </b>ενεργοποίησης.<br />
<br />
<b>Δείτε ενα παράδειγμα χρήσης :</b> <br />
<br />
<div class="code"><div class="code_content"><div class="image"> <br />
<img src="images/test.jpg" width="150" height="100" class="filmed" alt="" /> <br />
</div> <br />
</div></div><br />
<h4><b>class attributes‎</b></h4><br />
Μπορείτε και σε αυτή την περίπτωση να βάλετε διαφορετικά <b>class attributes‎</b> για διαφορετικά αποτελέσματα :  <br />
1 .Ενεργοποίηση <b><span style="color: red;">class "filmed" </span></b>2 . Διαφοροποιεί την ταινία με την προσθήκη <b><span style="color: red;">iColor</span></b> ακολουθείται από το επιθυμητό χρώμα ως <b>hex:</b> <b><span style="color: red;">class "icolor"</span></b> ( - min=000000 max=ffffff default=000000 )  <br />
3. Διαφοροποιεί την διαφάνεια με την προσθήκη <b><span style="color: red;">istrip </span></b>ακολουθούμενη από το επιθυμητό <b>opacity </b>σε ποσοστό: <b><span style="color: red;">class "istrip"</span></b> ( - min=0 max=100 default=100 )  <br />
4 . Διαφοροποιεί την αντανάκλαση , με την προσθήκη<b><span style="color: red;"> ishine</span></b> ακολουθούμενη από το επιθυμητό <b>opacity</b> σε ποσοστά: <b><span style="color: red;">class "ishine"</span></b> ( - min=0 max=100 default=25 )  <br />
5 . Ρυθμίστε την σκιάση , με την προσθήκη <b><span style="color: red;">ishadow </span></b>ακολουθούμενη από το επιθυμητό <b>opacity</b> σε ποσοστά : <b><span style="color: red;">class "ishadow"</span></b> ( - min=0 max=100 default=33 )  <br />
6 . Προσθέστε <b><span style="color: red;">softshadow</span></b> : (<b>χρήση σε μεγάλες εικόνες μόνο) <span style="color: red;">class "softshadow"</span></b> ( - default=false )  <br />
7 . Ρυθμίστε την σκίαση με την προσθήκη <b><span style="color: red;">noshadow</span></b> : <b><span style="color: red;">class "noshadow"</span></b> ( - default=false ) <br />
<br />
<b>Παράδειγμα χρήσης συνδυάζοντας διαφορετικά class attributes‎</b>  <br />
<br />
<div class="code"><div class="code_content"><div class="image"> <br />
<img src="images/girl.jpg" class="filmed istrip50 icolor402000" alt="" /> <br />
</div> <br />
</div></div><div align="center">ή</div><div class="code"><div class="code_content"><div class="image"> <br />
<img src="images/test.jpg" width="150" height="100" class="filmed icolor300000" alt="" /> <br />
</div> <br />
</div></div><br />
Μπορείτε βεβαία να χρησιμοποιήσετε και τους 3 <span class="Apple-style-span" style="font-family: 'MS Shell Dlg'; font-size: 13px; white-space: pre;">javascript </span> κωδικούς μαζί στην ιδία σελίδα . <br />
Λοιπόν τι περιμένετε ?!!! Δώστε ζωή στις φωτογραφίες σας. <br />
Αν έχετε κάποια ερώτηση μπορείτε να αφήσετε τα σχόλια σας . <br />
Καλή σας επιτυχία ! <br />

3 Τρόποι για να κάνετε τις φωτογραφίες στο blog σας να ξεχωρίζουν με javascript.

Blogger Help Blogger Tutorials Image Effects JavaScript 3 Τρόποι για να κάνετε τις φωτογραφίες στο blog σας να ξεχωρίζουν με javascript.

Σήμερα θα δούμε μερικούς τρόπους για να κάνουμε τις εικόνες στο blog μας να τραβούν τα βλέμματα και να ξεχωρίζουν με πολύ απλά βήματα . ...

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

Dynamic Image Effect.

9:49 μ.μ. LoneEagle 0

<br />
</br> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiytRhvCdZeJs4YcqtfJRxKI_v7ItHP2rfoWQAnv5eml4inzutwirkzEpVp4Yx7BcjenvyPhUamGZZ08C5nCLoUMld7-dNkpWalMqEoPQ_xP9yCTz89uSpYfFRT4oOiuGm0cgosgVx1tLc/s1600/Image+Effects_1.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5471924950206866626" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiytRhvCdZeJs4YcqtfJRxKI_v7ItHP2rfoWQAnv5eml4inzutwirkzEpVp4Yx7BcjenvyPhUamGZZ08C5nCLoUMld7-dNkpWalMqEoPQ_xP9yCTz89uSpYfFRT4oOiuGm0cgosgVx1tLc/s1600/Image+Effects_1.jpg" style="display:block; cursor:pointer; cursor:hand;width:autopx;" /></a><span style="float:left;font-family:geneva;font-size:100px;line-height:80px;padding-right:5px;padding-top:1px;">Α</span>υτό το gadgetάκι είναι ένας δυναμικός επιλογέας εικόνας που επιτρέπει στους επισκέπτες σας να δουνε μία-μία τις εικόνες μέσα από έναν κατάλογο επιλογής σας. Το περιχόμενο του κώδικα είναι δυναμικό, δεδομένου ότι οι εικόνες δεν ειναι απαραίτητο να είναι των ιδίων διαστάσεων, ένας περιορισμός που τα περισσότερα scripts εικόνων δε το έχουν.  <br />
<center><img src="http://i46.tinypic.com/20p2crb.jpg" /></center>Φανταστείτε ότι μπορείτε τώρα να έχετε μια λίστα από εικόνες διαφόρων διαστάσεων & να τις παρουσιάζετε κατά αυτόν τον τρόπο μέσα στο ιστολόγιο σας, για παράδειγμα τα banners των φίλων σας. Φυσικά αν είναι τις ιδίας διάστασης θα είναι πολύ πιο όμορφο το αποτέλεσμα, αλλά κοιτάξαμε να σας παρουσιάσουμε κάτι, που θα μπορεί να το διαμορφώσει κι ένα νέος blogger που δεν έχει ούτε τις στοιχειώδεις γνώσεις. Εσείς το μόνο που έχετε να κάνετε είναι να βρείτε τις εικόνες που θέλετε, να τις ανεβάσετε σε κάποιον image hosting, να πάρετε τα direct links και να τα προσθέσετε στα σημεία <b><span style="color: #BC110A;">( ....direct link image.... )</span></b> του παρακάτω κώδικα. <br />
Κατόπιν να προσθέσετε τους συνδέσμους ( τις διευθύνσεις από τα ιστολόγια των φίλων σας ) και να πατήσετε ΑΠΟΘΗΚΕΥΣΗ. Μπορείτε να προσθέσετε επιπλέον εικόνες εύκολα & γρήγορα αρκεί να συμπληρώσετε τις παρακάτω δύο γραμμές κώδικα, στα αντίστοιχα σημεία, για κάθε επιπλέον εικόνα. Το αντίθετο θα πράξετε στην περίπτωση αφαίρεσης συνδέσμων. <br />
<div class="code"><div class="code_content"><option value="....direct link image...." /><b><span style="color: #9BF2EF;">....ο τίτλος της εικόνας.....</span></b>  <br />
</div></div><div class="code"><div class="code_content">description[....]="<b><span style="color: #59F222;">...Ο σύνδεσμος για την εικόνα...</span></b>" <br />
</div></div>Στις "τελίτσες" [...] θα βάλετε το επόμενο νούμερο, κατά αύξοντα αριθμό, από την τελευταία σας εικόνα στην συγκεκριμένη περίπτωση το 5 στο επόμενο το 6 κτλ.... <br />
Ακόμα μπορείτε να παίξετε άφοβα ( γιατί δεν το έχετε περασμένο μέσα στο html σας, αλλά σε ξεχωριστό gadget, οπότε ότι λάθος κι αν κάνετε, δε θα επηρεάσει το ιστολόγιο σας, απλά δε θα φαίνεται σωστά το widget ) με διαστάσεις, περίγραμμα, πλάτος, ύψος...κι ότι άλλο σας έχω με χρώμα. <br />
Ένα πραγμα που θα πρέπει να προσέξετε στην περίπτωση που οι εικόνες σας δεν έχουν την ίδια διάσταση είναι, να έχετε επιλέξει το σωστό σημείο που θα περάσετε το gadget, έτσι ώστε να υπάρχει ο ανάλογος χώρος δίπλα του & να μην πέφτουν οι εικόνες στο άνοιγμα τους πάνω σε βιντεάκια & άλλα gadgets που συνήθως υπάρχουν στα ιστολόγια.  <br />
Η διαδικασία εγκατάστασης είναι η εξής.... <br />
Ανοίγετε τον Πίνακα ελέγχου σας --> Διάταξη --> Προσθήκη gadget --> Eπιλογή Html/Jscript και κάνετε επικόλληση τον παρακάτω κώδικα.  <br />
Αφού πρώτα έχετε περάσει τους συνδέσμους ( links ) για τις εικόνες σας & τα κείμενα. <br />
Και τέλος πατήστε ΑΠΟΘΗΚΕΥΣΗ κι είστε ΟΚ. <br />
<div class="code"><div class="code_content"> <br />
<form name="LoneEagleselector"> <br />
<table border="<b><span style="color: #84D1C9;">0</span></b>" width="<b><span style="color: #5C54D1;">70%</span></b>" cellspacing="<b><span style="color: #15D1C4;">0</span></b>" cellpadding="<b><span style="color: #91D121;">0</span></b> height="<b><span style="color: #1DD11D;">100</span></b>"><tr> <br />
<td width="<b><span style="color: #D1A71B;">55%</span></b>" valign="top" align="<b><span style="color: #6DCED1;">left</span></b>"> <br />
<select name="LoneEagleselector2" size="5" onchange="generateimage(this.options[this.selectedIndex].value)"> <br />
<option value="<b><span style="color: #D11B76;">....direct link image....</span></b>" selected /><b><span style="color: #9BF2EF;">....ο τίτλος της εικόνας 1..... π.χ. Στάλες στο γαλάζιο</span></b>  <br />
<option value="<b><span style="color: #D11B76;">....direct link image....</span></b>" /><b><span style="color: #9BF2EF;">....ο τίτλος της εικόνας 2.....</span></b>  <br />
<option value="<b><span style="color: #D11B76;">....direct link image....</span></b>" /><b><span style="color: #9BF2EF;">....ο τίτλος της εικόνας 3.....</span></b>  <br />
<option value="<b><span style="color: #D11B76;">....direct link image....</span></b>" /><b><span style="color: #9BF2EF;">....ο τίτλος της εικόνας 4.....</span></b>  <br />
<option value="<b><span style="color: #D11B76;">....direct link image....</span></b>" /><b><span style="color: #9BF2EF;">....ο τίτλος της εικόνας 5.....</span></b>  <br />
</select> <br />
</td> <br />
<td width="65%" valign="top" align="left"><ilayer id="LoneEagle1" width=100% height=178><layer id="LoneEagle2" width=100% height=178><div id="LoneEagle3"></div></layer></ilayer></td> <br />
</tr> <br />
</table> <br />
</form> <br />
<script> <br />
var description=new Array() <br />
description[0]="<b><span style="color: #59F222;">...Ο σύνδεσμος για την εικόνα 1...π.χ. http://loneeagle110.blogspot.com/</span></b>" <br />
description[1]="<b><span style="color: #59F222;">...Ο σύνδεσμος για την εικόνα 2...</span></b>" <br />
description[2]="<b><span style="color: #59F222;">...Ο σύνδεσμος για την εικόνα 3...</span></b>" <br />
description[3]="<b><span style="color: #59F222;">...Ο σύνδεσμος για την εικόνα 4...</span></b>" <br />
description[4]="<b><span style="color: #59F222;">...Ο σύνδεσμος για την εικόνα 5...</span></b>" <br />
var ie4=document.all <br />
var ns6=document.getElementById <br />
var tempobj=document.LoneEagleselector.LoneEagleselector2 <br />
if (ie4||ns6) <br />
var contentobj=document.getElementById? document.getElementById("LoneEagle3"): document.all.LoneEagle3 <br />
function generateimage(which){ <br />
if (ie4||ns6){ <br />
contentobj.innerHTML='<center>Loading image...</center>' <br />
contentobj.innerHTML='<center><img style="cursor:pointer;" onclick=\'javascript:window.open(""+description[tempobj.options.selectedIndex]+"");\' src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>' } <br />
else if (document.layers){ <br />
document.LoneEagle1.document.LoneEagle2.document.write('<center><img style="cursor:pointer;" onclick=\'javascript:window.open(""+description[tempobj.options.selectedIndex]+"");\' src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>') <br />
document.LoneEagle1.document.LoneEagle2.document.close() } <br />
else <br />
alert('You need NS 4+ or IE 4+ to view the images!') } <br />
function generatedefault(){ <br />
generateimage(tempobj.options[tempobj.options.selectedIndex].value) } <br />
if (ie4||ns6||document.layers){ <br />
if (tempobj.options.selectedIndex!=-1){ <br />
if (ns6) <br />
generatedefault() <br />
else <br />
window.onload=generatedefault } <br />
} <br />
</script> <br />
 <br />
</div></div><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee> <br />
<br />

Dynamic Image Effect.

Blogger Help Blogger Tutorials Image Effects JavaScript Dynamic Image Effect.

Α υτό το gadgetάκι είναι ένας δυναμικός επιλογέας εικόνας που επιτρέπει στους επισκέπτες σας να δουνε μία-μία τις εικόνες μέσα από έναν κα...

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

Thumbnail Viewer with Text or Image.

12:00 μ.μ. LoneEagle 3

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCIUkP82OmmbEfb4JMtCaUYCXrktVE4xmR_8dt3RYgjtwpisH0_g_yqOUvozGUHNaDdh-mQFtaeyPTLa7DFeYEuDaYkFW7F9Zrg7Q6DLiTpoE1zjriTR487oyXcMsvfj4wKpk2OX9aXg8/s1600/Image+Thumbnail+Viewer.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Thumbnail Viewer with Text or Image" border="0" id="BLOGGER_PHOTO_ID_5532389082291198866" oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCIUkP82OmmbEfb4JMtCaUYCXrktVE4xmR_8dt3RYgjtwpisH0_g_yqOUvozGUHNaDdh-mQFtaeyPTLa7DFeYEuDaYkFW7F9Zrg7Q6DLiTpoE1zjriTR487oyXcMsvfj4wKpk2OX9aXg8/s400/Image+Thumbnail+Viewer.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 284px;" /></a><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;"><span style="float:left;font-family:'Apple Chancery',cursive;font-size:70px;line-height:50px;margin:5px 5px 0px 0px; position:relative;text-shadow:2px 2px 2px rgb(153, 102, 255);">Σ'</span> αυτήν την ανάρτηση θα σας δείξω έναν τρόπο για να εντυπωσιάσετε τους επισκέπτες σας, αλλά & να παρουσιάσετε με ωραίο τρόπο τις εικόνες σας, είτε μέσα από μικρογραφίες ή κρυμένες μέσα σε συνδέσμους.<br />Ευκαιρία λοιπόν να το δοκιμάσετε και ν'αφήσετε τους άλλους ν'απορούν για το πώς το κάνατε αυτό.<br />Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server.<br /><br /><center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br /><img align="middle" border="0" height="12" oncontextmenu="return false" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/ThumbnailViewer.css" target="_blank">thumbnailviewer.css</a><br /><img align="middle" border="0" height="12" oncontextmenu="return false" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/ThumbnailViewer.js" target="_blank">thumbnailviewer.js</a><br /><img align="middle" border="0" height="12" oncontextmenu="return false" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/loading.gif" target="_blank">loading.gif</a><br /><br />Στο script <span style="color: green;"><b>thumbnailviewer.js</b></span> θα πρέπει μόλις το κατεβάσετε να το ανοίξετε με το WordPad, με το Σημειωματάριο ή με κάποιον άλλον editor και να προσθέσετε το direct link της εικόνας του loading. <br /><br />Θα το βρείτε μέσα στο script, στο σημείο που λέει.... <br /><br />defineLoading: '<img src="<span style="color: orange;"><b>loading.gif</b></span>" /> Loading Image...',<br /><br /><center><img oncontextmenu="return false" src="http://i987.photobucket.com/albums/ae359/LoneEagle110/ThumbnailViewer.jpg" width="500"></center><br /><br />Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a><br /><br />Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML.<br /><br />Και με το Ctrl + F θα κάνετε αναζήτηση για το....<br /><br /><div class="code"><div class="code_content"><br /><head><br /></div></div><br /><br />Μόλις το βρείτε, θα πάτε στην επόμενη γραμμή από το <strong><em><span style="color:#cc0000;"><head></span></em></strong><br />και θα προσθέσετε τα scripts του Slideshow.<br /><br /><div class="code"><div class="code_content"><br /><link rel="stylesheet" href="....thumbnailviewer.css...." type="text/css" /><br /><script src="....thumbnailviewer.js...." type="text/javascript"></script><br /></div></div><br /><br />Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση >>> Στοιχεία σελίδας >>> Προσθήκη gadget και θα κοιτάξετε να βρείτε  το HTML/JavaScript.<br /><br /><center><img oncontextmenu="return false" src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center><br /><br />θα το ανοίξετε & θα ρίξετε μέσα τον κώδικα από όποιον τρόπο θέλετε από τους δύο.<br /><br /><center><img oncontextmenu="return false" src="http://i56.tinypic.com/24cegdl.jpg"></center><br /><br /><span style="color: blue;"><b>1ος Τρόπος.</b></span><br /><br /><span style="color: yellow;"><b>Για εικόνες μόνο:</b></span><br /><br /><div class="code"><div class="code_content"><br /><br /><center><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /></center><br /><br /></div></div><br /><br />Ο κώδικας που σας έχω βάλει παραπάνω είναι για 4 εικόνες.<br /><br />ΑΝ θέλετε περισσότερες, δεν έχετε παρά να προσθέσετε τον παρακάτω κώδικα όσες φορές χρειάζεται.<br /><br /><div class="code"><div class="code_content"><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /></div></div><br /><br /><blockquote><br /><span style="color: red;"><b>Σημείωση:</b></span><br /><br />Το πλάτος <span style="color: lightblue;"><b>width:100px;</b></span> & το ύψος <span style="color: yellow;"><b>height:70px;</b></span> μπορείτε να τα αλλάξετε με τις διαστάσεις που εσείς θέλετε.<br /></blockquote><br /><br /><span style="color: blue;"><b>2ος Τρόπος.</b></span><br /><br /><span style="color: yellow;"><b>Σε κείμενο όπου να ανοίγει σε εικόνα:</b></span><br /><br /><div class="code"><div class="code_content"><br /><br /><center><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /></center><br /><br /></div></div><br /><br />Για πρόσθετο κείμενο ... τον παρακάτω κώδικα.<br /><br /><div class="code"><div class="code_content"><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /></div></div><br /></span></h3><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Thumbnail Viewer with Text or Image.

Blogger Help Blogger Tutorials Image Effects JQuery Tutorials Thumbnail Viewer with Text or Image.

Σ' αυτήν την ανάρτηση θα σας δείξω έναν τρόπο για να εντυπωσιάσετε τους επισκέπτες σας, αλλά & να παρουσιάσετε με ωραίο τρόπο τις ε...

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

Pop-Up Image Viewer.

10:40 π.μ. LoneEagle 3

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hV2nVl7dlafVW2dy5h7ctHz3x5_dCaoEq-FJ6eL0t8DHNKHA3NuZ0YIfeWi1IypH97VtA1waZndo8rdDohOkBiilM465oN-5QGMMMlFnM940wg9DCJ0IerEE7baf-7vXF4m87uBQ4o8/s1600/Pop-Up+Image+Viewer.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5712741971735504130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hV2nVl7dlafVW2dy5h7ctHz3x5_dCaoEq-FJ6eL0t8DHNKHA3NuZ0YIfeWi1IypH97VtA1waZndo8rdDohOkBiilM465oN-5QGMMMlFnM940wg9DCJ0IerEE7baf-7vXF4m87uBQ4o8/s400/Pop-Up+Image+Viewer.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 240px;" /></a><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;">Δημιουργήστε όμορφα pop-up παράθυρα σε εικόνες ή συνδέσμους με χρήση css & html.<br />Ένα πολύ πρόχειρο παράδειγμα είναι το παρακάτω, που μπορείτε να χρησιμοποιήσετε ως css.<br />Από κει & πέρα μπορείτε να του προσθέσετε πολλά π.χ. εφέ αδιαφάνειας, αλλάγη στην εμφάνιση του περιγράμματος της εικόνας, σκιές....κτλ.<br /><br /><center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br /><div class="code"><div class="code_content"><br /><br /><style type=”text/css”><br />.imvle{<br />position:relative;<br />z-index:0;<br />}<br />.imvle:hover{<br />background-color:transparent;<br />z-index:50;<br />}<br />.imvle span{ <br />position:absolute;<br />background-color:fff;<br />padding:5px;<br />left:-1000px;<br />border:1px solid #111;<br />visibility:hidden;<br />color:#000;<br />text-decoration:none;<br />}<br />.imvle span img{ <br />border-width:0px;<br />padding:2px;<br />}<br />.imvle:hover span{ <br />visibility:visible;<br />top:0;<br />left:60px; <br />}<br /></style><br /><br /></div></div><br /><br />Και ο Html κωδικας του, είναι ο παρακάτω...<br /><br />Για κείμενο:<br /><br /><div class="code"><div class="code_content"><br /><br /><a class="imvle" href="..."><img src="..." width="80px" height="50px" border="0" /><span><img src="...." /></span></a><br /><br /></div></div><br /><br />Για εικόνα:<br /><br /><div class="code"><div class="code_content"><br /><br /><a class="imvle" href="...">....το κειμενο σας....<span><img src="...." /></span></a><br /><br /></div></div><br /></span></h3><br /><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Pop-Up Image Viewer.

Blogger Help Blogger Tutorials CSS Tutorials HTML Tutorials Image Effects Pop-Up Image Viewer.

Δημιουργήστε όμορφα pop-up παράθυρα σε εικόνες ή συνδέσμους με χρήση css & html. Ένα πολύ πρόχειρο παράδειγμα είναι το παρακάτω, που μπο...

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

Create Rollover Images effect in Blogger.

9:00 μ.μ. LoneEagle 0

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpLOFjL9jAHo3OzHjZ1Geu11nQkojTKj0FyPcTBO6kSbjNg5LRONe4nkNgAcf3cfzp_yLGNduQi2Asb4-lh9j9JzzD-hoLqcsXYVFTCilzJw0RMrXoQ7GbQR0MUmlq9fj4-IZOe80boM/s1600/Create+Rollover+Images+effect+in+Blogger.jpg"><img alt="Create Rollover Images effect to Blogger" border="0" id="BLOGGER_PHOTO_ID_5705724212234634498" oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpLOFjL9jAHo3OzHjZ1Geu11nQkojTKj0FyPcTBO6kSbjNg5LRONe4nkNgAcf3cfzp_yLGNduQi2Asb4-lh9j9JzzD-hoLqcsXYVFTCilzJw0RMrXoQ7GbQR0MUmlq9fj4-IZOe80boM/s400/Create+Rollover+Images+effect+in+Blogger.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 200px;" /></a><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;"><span style="float:left;font-family:'Apple Chancery',cursive;font-size:70px;line-height:50px;margin:5px 5px 0px 0px; position:relative;text-shadow:2px 2px 2px rgb(153, 102, 255);">Α</span>υτή την φορά θα σας δείξω το πιο απλό κολπάκι που μπορείτε να χρησιμοποιήσετε στις εικόνες του ιστολογίου σας, είτε αυτές είναι εικόνες ανάρτησης είτε οποιοδήποτε εικονίδιο.<br />Μπορείτε να το χρησιμοποιήσετε σε 2 διαφορετικές εικόνες και να κάνετε πρωτότυπη και δυναμική την παρουσίαση σας, απλά με το πέρασμα του δείκτη του ποντικιού.<br /><br /><div class="code"><div class="code_content"><br /><a href="<span style="color:lightgreen;"><b>...url συνδέσμου...</b></span>"><img src="<span style="color:orange;"><b>...direct link 1ης εικόνας...</b></span>" onmouseover="this.src='<span style="color:yellow;"><b>...direct link 2ης εικόνας...</b></span>'" onmouseout="this.src='<span style="color:orange;"><b>...direct link 1ης εικόνας...</b></span>'" /></a><br /></div></div><br /><br />Για να το καταλάβετε καλύτερα δείτε το παράδειγμα που ακολουθεί.<br /><br /><span style="color:#1929FF;"><b>Παράδειγμα:</b></span><br /><br /><div class="code"><div class="code_content"><br /><a href="http://loneeagle110.blogspot.com/"><img src="http://eikona_1.jpg" onmouseover="this.src='http://eikona_2.jpg'" onmouseout="this.src='http://eikona_1.jpg'" /></a><br /></div></div><br /><br /><span style="color:#1929FF;"><b>Αποτέλεσμα:</b></span><br /><br />Δείτε το στην πράξη... <br />Περάστε τον κέρσορα πάνω από την εικόνα....<br /><br /><center><a href="#"><img onmouseout="this.src='http://i35.tinypic.com/k562wm.jpg'" onmouseover="this.src='http://i54.tinypic.com/s16osm.jpg'" src="http://i35.tinypic.com/k562wm.jpg" /></a></center><br /><br />Εντυπωσιαστήκατε?<br /><br /><blockquote><br /><span style="color:#DE0202;"><b>Σημείωση:</b></span><br /><br />Για καλύτερα αποτελέσματα να χρησιμοποιείτε εικόνες των ιδίων διαστάσεων.<br /></blockquote><br /></span></h3><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>Καλές δημιουργίες!!!!</h2></span></em></strong></marquee>

Create Rollover Images effect in Blogger.

Blogger Help Blogger Tutorials Image Effects JavaScript Create Rollover Images effect in Blogger.

Α υτή την φορά θα σας δείξω το πιο απλό κολπάκι που μπορείτε να χρησιμοποιήσετε στις εικόνες του ιστολογίου σας, είτε αυτές είναι εικόνες αν...

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

Matrix effect for blogger.

8:00 π.μ. LoneEagle 1

<br/><br /><center><img src="http://i54.tinypic.com/2exvi8j.jpg" /></center><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;">Το φαινόμενο Matrix των αδελφών Γουακόφσκι, η πρώτη σεναριακά καινοτομική ιδέα που συνδύασε την περιπέτεια με το animation, την εικονική πραγματικότητα με το μεγαλείο των ειδικών εφέ, την εκτίναξη της αδρεναλίνης στα ύψη, το παιχνίδι της ψυχολογίας και του μυαλού του θεατή, δεν έφτασε στο τέλος του....<br /><br />Μπορείτε να το συνεχίσετε εσείς προσθέτοντας το, ως background στο ιστολόγιο σας.<br /><br />Θα πάτε στον Πίνακα ελέγχου σας --> Σχεδίαση --> Προσθήκη gadget --> HTML/JavaScript<br /><br />Ανοίξτε το ρίξτε μέσα τον παρακάτω κώδικα.<br /><br /><div class="code"><div class="code_content"><br /><style type="text/css"><br />body { background-image: url(....το direct link της εικόνας....);}</style><br /></div></div><br /><br />Στο σημείο (....το direct link της εικόνας....) βάλτε έναν από τους παρακάτω συνδέσμους.<br /><br /><center><img src="http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/number01.gif" /><br /><br /><div class="code"><div class="code_content"><br />http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/number01.gif<br /></div></div><br /><br /><img src="http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/redmatrix.gif" /><br /><br /><div class="code"><div class="code_content"><br />http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/redmatrix.gif<br /></div></div><br /><br /><img src="http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/lightbluematrix.gif" /><br /><br /><div class="code"><div class="code_content"><br />http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/lightbluematrix.gif<br /></div></div><br /><br /><img src="http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/bluematrix.gif" /><br /><br /><div class="code"><div class="code_content"><br />http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/bluematrix.gif<br /></div></div><br /><br /><img src="http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/blackredmatrix.gif" /><br /><div class="code"><div class="code_content"><br />http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/blackredmatrix.gif<br /></div></div><br /><br /><img src="http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/listener.gif" /><br /><br /><div class="code"><div class="code_content"><br />http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/listener.gif<br /></div></div><br /><br /><img src="http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/matrix.gif" /><br /><br /><div class="code"><div class="code_content"><br />http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/matrix.gif<br /></div></div><br /><br /><img src="http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/matrixgreen.gif" /><br /><br /><div class="code"><div class="code_content"><br />http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/matrixgreen.gif<br /></div></div><br /></center><br /><br />Αυτό ήταν!!!<br /><br />Πατήστε ΑΠΟΘΗΚΕΥΣΗ.<br /><br />Και κάντε ανανέωση στο ιστολόγιο σας για να χαρείτε την νέα του εμφάνιση.<br /><br /><blockquote><br /><span style="color:#cc0000;"><b>Σημείωση!!!!</b></span><br /><br />Θα εμφανίζεται σε όλη την σελίδα, μόνο αν το ιστολόγιό σας είναι καθαρά σχεδιασμένο με χρώμα. <br />Αν υπάρχουν εικόνες που να συμπληρώνουν την εμφάνιση του template, εκεί όπως καταλαβαίνετε δε θα εμφανίζεται.  <br /></blockquote><br /></span></h3><br /><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Matrix effect for blogger.

Blogger Help Blogger Tutorials Image Effects Matrix effect for blogger.

Το φαινόμενο Matrix των αδελφών Γουακόφσκι, η πρώτη σεναριακά καινοτομική ιδέα που συνδύασε την περιπέτεια με το animation, την εικονική πρα...

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

Image opacity effect with CSS and Java Script events in Blogger.

9:27 μ.μ. LoneEagle 3

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfDNxNeq2h-Sc-_Bo1yhrnOyRO_laoP8760qrOVZsIpCZ8SnB_AZPR2cMgXhPFK9CvZ-t6Xl5olRM3r9XL3V8DfA6qdTi8-6aFa6rzNXaOnIKJJC5LXfmZaJj9ghM-mXkfSiN_7_o1Tsw/s1600/Image+opacity+effect+with+CSS+and+Java+Script+events+in+Blogger.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Image opacity effect with CSS and Java Script events in Blogger." border="0" id="BLOGGER_PHOTO_ID_5539346542322229506" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfDNxNeq2h-Sc-_Bo1yhrnOyRO_laoP8760qrOVZsIpCZ8SnB_AZPR2cMgXhPFK9CvZ-t6Xl5olRM3r9XL3V8DfA6qdTi8-6aFa6rzNXaOnIKJJC5LXfmZaJj9ghM-mXkfSiN_7_o1Tsw/s400/Image+opacity+effect+with+CSS+and+Java+Script+events+in+Blogger.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 267px;" /></a><br />Δείτε έναν εύκολο τρόπο για να δημιουργήσετε όμορφα εφέ στις εικόνες που διακοσμούν το ιστολόγιό σας με χρήση css & javascript.<br /><br />Θα μπείτε στον Πίνακα ελέγχου του blog σας --> Σχεδίαση --> Επεξεργασία HTML.<br /><br />Και με το Ctrl + F θα κάνετε αναζήτηση για το....<br /><br /><div class="code"><div class="code_content"><br /></head><br /></div></div><br /><br />Μόλις το βρείτε, θα πάτε στην αμέσως προυγούμενη γραμμή από το <strong><em><span style="color:#cc0000;"></head></span></em></strong><br />και θα προσθέσετε τον παρακάτω κώδικα.<br /><br /><div class="code"><div class="code_content"><br /><style type='text/css'><br />a.opacity img { <br />filter:alpha(opacity=<span style="color: orange;"><b>70</b></span>);<br />-moz-opacity: <span style="color: orange;"><b>0.7</b></span>;<br />opacity: <span style="color: orange;"><b>0.7</b></span>;<br />-khtml-opacity: <span style="color: orange;"><b>0.7</b></span>;}<br /><br />a.opacity:hover img { <br />filter:alpha(opacity=100);<br />-moz-opacity: 1.0;<br />opacity: 1.0;<br />-khtml-opacity: 1.0; }<br /></style><br /></div></div><br /><br />Το 70 & το  0,7 <span style="color: orange;"><b>( με πορτοκαλί χρώμμα )</b></span> μπορείτε να τα αλλάξετε, μικραίνοντας το βαθμό διαφάνειας για μεγαλύτερη αντίθεση.<br /><br /><span style="color:#8091FF;">Παράδειγμα:</span><br /><br /><div class="code"><div class="code_content"><br /><style type='text/css'><br />a.opacity img { /* ρυθμίσεις για την αδιαφάνεια της εικόνας σας */<br />filter:alpha(opacity=<span style="color: orange;"><b>40</b></span>); /* τιμές από 10 έως 90 */<br />-moz-opacity: <span style="color: orange;"><b>0.4</b></span>; /* τιμές από 0,1 έως 0,9 */<br />opacity: <span style="color: orange;"><b>0.4</b></span>; /* τιμές από 0,1 έως 0,9 */<br />-khtml-opacity: <span style="color: orange;"><b>0.4</b></span>;} /* τιμές από 0,1 έως 0,9 */<br /><br />a.opacity:hover img { /* ρυθμίσεις για το ( hover δηλ. όταν πάει ο κέρσορας πάνω ) της εικόνας σας */<br />filter:alpha(opacity=100);<br />-moz-opacity: 1.0;<br />opacity: 1.0;<br />-khtml-opacity: 1.0; }<br /></style><br /></div></div> <br /><br />Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και τώρα, σε όποια εικόνα, banner θέλετε να δώσετε το εφέ αυτό θα το γράφετε όπως στο παρακάτω παράδειγμα<br /><br /><div class="code"><div class="code_content"><br /><a class="opacity" href="<span style="color:lightgreen;"><b>....το url....</b></span>"><img width="<span style="color:yellow;"><b>....το πλάτος της εικόνας....</b></span>" border="0" src="<span style="color:pink;"><b>....το direct link της εικόνας του banner....</b></span>" height="<span style="color:lightblue;"><b>....το ύψος της εικόνας....</b></span>" title="<span style="color:orange;"><b>....ο τίτλος του ιστολογίου....</b></span>"/></a><br /></div></div><br /><br />Δείτε ένα έτοιμο παράδειγμα από το banner μας για να το καταλάβετε καλύτερα....<br /><br /><div class="code"><div class="code_content"><br /><a class="opacity" href="<span style="color:lightgreen;"><b>http://loneeagle110.blogspot.com/</b></span>"><img width="<span style="color:yellow;"><b>150</b></span>" border="0" src="<span style="color:pink;"><b>http://i48.tinypic.com/1r4son.png</b></span>" height="<span style="color:lightblue;"><b>50</b></span>" title="<span style="color:orange;"><b>Στάλες στο γαλάζιο</b></span>"/></a><br /></div></div><br /><br /><center><span style="color:#C90E0E;"><h2>Σημείωση:</h2></span><br /><b><i>Τα width & height τα προσθέτουμε μόνο & μόνο όταν θέλουμε να δώσουμε ΕΜΕΙΣ συγκεκριμένες τιμές (διαστάσεις) στις εικόνες μας.<br /><br />Γιατί καμιά φορά, κάποιο φιλικό banner ή κάποιο βιντεάκι από το YouTube που θα πάρουμε, μπορεί να είναι πιο φαρδύ από το πλάτος της πλαϊνής μας στήλης και για να μην βγει εκτός ορίων μπορούμε να το μικρύνουμε μ'αυτόν τον τρόπο, χωρίς να το αλλιώσουμε. <br /><br />Κρατήστε το αυτό στη πίσω πλευρά του μυαλού σας και θα κάνουμε στο μέλλον μια πιο αναλυτική ανάρτηση για όλα αυτά.</b></i></center><br /><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Image opacity effect with CSS and Java Script events in Blogger.

Blogger Help Blogger Tutorials Image Effects Image opacity effect with CSS and Java Script events in Blogger.

Δείτε έναν εύκολο τρόπο για να δημιουργήσετε όμορφα εφέ στις εικόνες που διακοσμούν το ιστολόγιό σας με χρήση css & javascript. Θα μπείτ...

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

Text or Image Crawler.

10:25 μ.μ. LoneEagle 0

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOg5TTn6AigKRhivdsMAMWUPdrKLvlB3wvuiUvQ-u9Oohh4jPXfJXhloRRZ3W9bu9zbIw-XpBJKPZmLyfj36nk28IDIpNZaQdy_FgQHkPcyeEq0lfjQlcrULd1eYd58eMh1toSvomCz-g/s1600/Text+or+Image+Crawler.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Text or Image Crawler" border="0" id="BLOGGER_PHOTO_ID_5530590056360215058" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOg5TTn6AigKRhivdsMAMWUPdrKLvlB3wvuiUvQ-u9Oohh4jPXfJXhloRRZ3W9bu9zbIw-XpBJKPZmLyfj36nk28IDIpNZaQdy_FgQHkPcyeEq0lfjQlcrULd1eYd58eMh1toSvomCz-g/s400/Text+or+Image+Crawler.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 204px;" /></a><br />Εδώ θα σας δείξουμε μια υπέροχη εφαρμογή (Crawler) στην οποία μπορείτε να προσθέσετε εικόνες ή κείμενο.<br />Αξίζει να σημειωθεί ότι πηγαίνοντας τον κέρσορα στις άκρες του (crawler), κινείται από την αντίθετη πλευρά & με διαφορετική ταχύτητα.<br />Δηλαδή, όσο πιο άκρη είναι ο κέρσορας, τόσο, πιο γρήγορα γίνεται η κύλιση, ενώ, όσο πλησιάζετε τον κέρσορα προς το κέντρο η ταχύτητα κύλισης μειώνεται στο ελάχιστο.<br /><br />Δοκιμάστε το και δεν θα χάσετε.<br /><br />Καταρχήν θα πάτε να κατεβάσετε το script και να το ανεβάσετε σε κάποιον server.<br /><br /><a href="http://scriptsrb.googlecode.com/files/crawler.js" target="_blank">Crawler.js</a><br /><br />Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a><br /><br />Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML.<br /><br />Και με το Ctrl + F θα κάνετε αναζήτηση για το....<br /><br /><div class="code"><div class="code_content"><br /><head><br /></div></div><br /><br />Μόλις το βρείτε, θα πάτε στην επόμενη γραμμή από το <strong><em><span style="color:#cc0000;"><head></span></em></strong><br />και θα προσθέσετε το script.<br /><br />Στο σημείο που λέει <strong><em><span style="color:#cc0000;">...crawler.js...</span></em></strong> θα προσθέσετε την διεύθυνση από τον server που ανεβάσατε προηγουμένος το script.<br /><br /><div class="code"><div class="code_content"><br /><script type="text/javascript" src="....crawler.js...."></script><br /></div></div><br /><br />Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και....<br /><br />θα ξαναπάτε στον Πίνακα Ελέγχου σας ---> Σχεδίαση ---> Στοιχεία Σελίδας ---><br /><br />Προσθήκη Gadget.<br /><br />Και θα βρείτε το HTML/JavaScript<br /><br />Θα το ανοίξετε και θα ρίξετε μέσα στο gadget έναν από τους παρακάτω κώδικες αφού προσθέσετε το κείμενο που θέλετε ή τις ανάλογες εικόνες.<br /><br /><strong><em><span style="color:#4FF9FF;">Γιά Κείμενο:</span></em></strong><br /><br /><div class="code"><div class="code_content"><br /><br /><div class="marquee" id="mycrawler"><br />....το κείμενο σας...<br /></div><br /><br /><script type="text/javascript"><br />marqueeInit({<br />uniqueid: 'mycrawler',<br />style: {<br />'padding': '5px',<br />'width': '480px',<br />'color': '#fff',<br />'background': 'grey',<br />'font-family': 'sans-serif',<br />'border': '1px solid #BD0410'<br />},<br />inc: 8, <br />mouse: 'cursor driven', <br />moveatleast: 4,<br />neutral: 150,<br />savedirection: true<br />});<br /></script><br /><br /></div></div><br /><br /><strong><em><span style="color:#4FF9FF;">Για εικόνες:</span></em></strong><br /><br /><div class="code"><div class="code_content"><br /><br /><script type="text/javascript"><br />marqueeInit({<br />uniqueid: 'mycrawler',<br />style: {<br />'padding': '5px',<br />'width': '480px',<br />'background': 'black',<br />'border': '1px solid #BD0410'<br />},<br />inc: 8, <br />mouse: 'cursor driven', <br />moveatleast: 4,<br />neutral: 150,<br />savedirection: true<br />});<br /></script><br /><br /><div class="marquee" id="mycrawler2"><br /><img src="....image direct link...." /> <img src="....image direct link...." /> <img src="....image direct link...." /> <img src="....image direct link...." /> <img src="....image direct link...." /><br /></div><br /><br /><script type="text/javascript"><br />marqueeInit({<br />uniqueid: 'mycrawler2',<br />style: {<br />'padding': '5px',<br />'width': '480px',<br />'height': '180px'<br />},<br />inc: 5, <br />mouse: 'cursor driven', <br />moveatleast: 2,<br />neutral: 150,<br />savedirection: true<br />});<br /></script><br /><br /></div></div><br /><br />Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.<br /><br />Τέλος!!!<br /><br />Εμείς σας δείξαμε τον τρόπο, τώρα ή έμπνευση είναι δική σας.<br /><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Text or Image Crawler.

Blogger Help Blogger Tutorials Image Effects JQuery Tutorials Scrollers Sliders Text or Image Crawler.

Εδώ θα σας δείξουμε μια υπέροχη εφαρμογή (Crawler) στην οποία μπορείτε να προσθέσετε εικόνες ή κείμενο. Αξίζει να σημειωθεί ότι πηγαίνοντας ...

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

Floating images effects with jQuery.

9:40 μ.μ. LoneEagle 0

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwn5Rw7hMR6x3kb41mJtdCleri_iJp6qoZ_YDTO4y79ivgBJg-v1ydlaHJpOh6y5yYJuRjt0_kQTtQcCt_ZyQE-R8gAMxvQ4X4OSz7IYE1PCF4XZpslBI8745jZaupHwYZylLYsU-F4mw/s1600/Floating+images+effects+with+jQuery..jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Floating images effects with jQuery" border="0" id="BLOGGER_PHOTO_ID_5527819705221635634" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwn5Rw7hMR6x3kb41mJtdCleri_iJp6qoZ_YDTO4y79ivgBJg-v1ydlaHJpOh6y5yYJuRjt0_kQTtQcCt_ZyQE-R8gAMxvQ4X4OSz7IYE1PCF4XZpslBI8745jZaupHwYZylLYsU-F4mw/s400/Floating+images+effects+with+jQuery..jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 385px;" /></a><br />Σ' αυτήν την ανάρτηση θα σας δείξουμε τον τρόπο, πως μπορείτε μέσω τριών ή & περισσοτέρων εικονιδίων να δώσετε ένα πρωτότυπο εφέ στη σελίδα σας.<br /><br />Τοποθετήστε ότι εικονίδιο θέλετε κι αφήστε το να αιωρείται και να εξωστρακίζετε μέσα στα πλαίσια του παραθύρου της σελίδας σας.<br /><br />Μπορείτε επίσης να τα χρησιμοποιήσετε και σαν συνδέσμους (πολύ πρακτικό) ,που με ένα πάτημα να μεταφέρουν το επισκέπτη σας, στη σελίδα που επιθυμείτε.<br /><br />Εμφανίζετε σωστά με τους browsers IE, Google Chrome & Opera.<br /><br />Ας πάμε να δούμε, πως θα το περάσετε.<br /><br />Τα βήματα είναι τα εξής....<br /><br />Καταρχήν θα πάτε να κατεβάσετε το script και να το ανεβάσετε σε κάποιον server.<br /><br /><a href="http://scriptsrb.googlecode.com/files/moveobj.js" target="_blank">moveobj.js</a><br /><br />Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a><br /><br />Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML.<br /><br />Και με το Ctrl + F θα κάνετε αναζήτηση για το....<br /><br /><div class="code"><div class="code_content"><br /></head><br /></div></div><br /><br />Μόλις το βρείτε & πριν από το κλείσιμο του <strong><em><span style="color:#cc0000;"></head></span></em></strong><br />Θα προσθέσετε τον παρακάτω κώδικα.<br /><br />Στο σημείο που λέει <strong><em><span style="color:#cc0000;">...the script moveobj.js...</span></em></strong> θα προσθέσετε την διεύθυνση από τον server που ανεβάσατε προηγουμένος το script.<br /><br /><br /><div class="code"><div class="code_content"><br /><script type="text/javascript" src="...the script moveobj.js..."></script><br /><script type="text/javascript"><br />var flyimage1, flyimage2, flyimage3<br />function pagestart(){<br />flyimage1=new Chip("flyimage1",64,64);<br />flyimage2=new Chip("flyimage2",64,64);<br />flyimage3=new Chip("flyimage3",64,64);<br />movechip("flyimage1");<br />movechip("flyimage2");<br />movechip("flyimage3");<br />}<br />if (window.addEventListener)<br />window.addEventListener("load", pagestart, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", pagestart)<br />else if (document.getElementByid)<br />window.onload=pagestart<br /></script><br /></div></div><br /><br />Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και....<br /><br />θα ξαναπάτε στον Πίνακα Ελέγχου σας ---> Διάταξη ---> Στοιχεία Σελίδας ---><br /><br />Προσθήκη Gadget.<br /><br />Και θα βρείτε το HTML/JavaScript<br /><br />Θα το ανοίξετε και θα ρίξετε μέσα στο gadget τον παρακάτω κώδικα αφού προσθέσετε τις ανάλογες εικόνες & διευθύνσεις που θέλετε.<br /><br /><div class="code"><div class="code_content"><br /><div id="flyimage1" style="position:absolute; left: -500px; width:64; height:64;"><br /><a href="...direct link address..."><img src=".....direct link of your image .gif...." border=0></a></div><br /><div id="flyimage2" style="position:absolute; left: -500px; width:64; height:64;"><br /><a href="...direct link address..."><img src=".....direct link of your image .gif...." border=0></a></div><br /><div id="flyimage3" style="position:absolute; left: -500px; width:64; height:64;"><br /><a href="...direct link address..."><img src=".....direct link of your image .gif...." border=0></a></div><br /></div></div><br /><br />Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.<br /><br />Τέλος!!!<br /><br />Τώρα είσαστε έτοιμοι να κάνετε ανανέωση τη σελίδα σας και να απολαύσετε το εφέ που πρίν από λίγο τοποθετήσατε.<br /><br /><strong><em><span style="color:#cc0000;">Επεξήγηση του κώδικα & παραμετροποιήσεις:</span></em></strong><br /><br /><strong><em><span style="color:#85F3FF;">α)</span></em></strong> Στις εικόνες που θα βρείτε να κοιτάξετε να έχουν διάφανο υπόβαθρο (δηλαδή το format τους να είναι σε μορφή <strong><em><span style="color:#cc0000;">.png</span></em></strong> ή <strong><em><span style="color:#cc0000;">.gif</span></em></strong>)<br /><br /><strong><em><span style="color:#85F3FF;">β)</span></em></strong> Στον κώδικα που σας δίνω, έχω δώσει διάσταση στις εικόνες <strong><em><span style="color:#cc0000;">64 Χ 64</span></em></strong>.<br />Αν εσείς θέλετε να είναι μικρότερες θα δώσετε τις ανάλογες διαστάσεις.<br /><br /><strong><em><span style="color:#85F3FF;">γ)</span></em></strong> Αν θελετε να προσθέσετε κι άλλες εικόνες θα πρέπει να προσθέσετε εντολές σε τέσσερα σημεία.<br />Τα οποία είναι.... <br /><br /><strong><em><span style="color:#ADE7FF;">Σημείο 1ο:</span></em></strong><br /><br />var flyimage1, flyimage2, flyimage3 π.χ. <strong><em><span style="color:#E6FF80;">,flyimage4 , flyimage5 , flyimage6 , ......</span></em></strong><br /><br /><strong><em><span style="color:#FF0A23;">ΠΡΟΣΟΧΗ! ΜΗΝ ξεχάσετε το σημείο στίξης κόμμα (,) ανάμεσα στις εικόνες.</span></em></strong><br /><br /><strong><em><span style="color:#ADE7FF;">Σημείο 2ο:</span></em></strong><br /><br />flyimage1=new Chip("flyimage1",64,64); <br />flyimage2=new Chip("flyimage2",64,64); <br />flyimage3=new Chip("flyimage3",64,64); <br /><strong><em><span style="color:#FFC757;">ΕΔΩ π.χ. flyimage4=new Chip("flyimage4",64,64); </span></em></strong><br />..........<br />..........<br />movechip("flyimage1"); <br />movechip("flyimage2"); <br />movechip("flyimage3");<br /><strong><em><span style="color:#FFC757;">ΕΔΩ π.χ. movechip("flyimage4");</span></em></strong><br />...........<br />...........<br /><br /><strong><em><span style="color:#75BAFF;">Και στα σημεία του κώδικα, που θα προσθέσετε στο HTML/JavaScript gadget.</span></em></strong><br /><br /><strong><em><span style="color:#ADE7FF;">Σημείο 3ο:</span></em></strong><br /><br />πριν από το κλείσιμο του <strong><em><span style="color:#cc0000;"></div></span></em></strong> το <strong><em><span style="color:#cc0000;"><a href="...direct link address..."><img src=".....direct link of your image .gif...." border=0></a></span></em></strong><br /><br /><strong><em><span style="color:#ADE7FF;">Σημείο 4ο:</span></em></strong><br /><br />Στο σημείο του κώδικα που λέει <strong><em><span style="color:#cc0000;">"flyimage<strong><em><span style="color:#7AFF6B;">3</span></em></strong>"</span></em></strong> θα αλλάξετε το νούμερο <strong><em><span style="color:#7AFF6B;">3</span></em></strong> με <strong><em><span style="color:#7AFF6B;">4,5,6</span></em></strong>....κτλ ανάλογα με πόσες εικόνες θα προσθέσετε.<br /><br /><strong><em><span style="color:#85F3FF;">δ)</span></em></strong> Στην περίπτωση που θέλετε να βάλετε τις εικόνες μόνο σαν εφέ, μπορείτε να διαγράψετε το κομμάτι της διεύθυνσης <strong><em><span style="color:#cc0000;"><a href="...direct link address..."></span></em></strong><br /><br /><strong><em><span style="color:#85F3FF;">ε)</span></em></strong> Στην περίπτωση που θέλετε να βάλετε τις εικόνες σαν σύνδεσμο (δηλαδή όπως είναι ο κώδικας που σας δίνω) και θέλετε ο κάθε σύνδεσμος να ανοίγει σε καινούργιο παράθυρο, τότε, το σημείο <strong><em><span style="color:#cc0000;"><a href="...direct link address..."></span></em></strong><br /><br />θα το αντικαταστήσετε με το <strong><em><span style="color:#FFC757;"><a target="_blank" href="...direct link address..."></span></em></strong><br /><br />Εμείς σας δείξαμε τον τρόπο, τώρα ή έμπνευση είναι δική σας.<br /><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Floating images effects with jQuery.

Blogger Help Blogger Tutorials Image Effects JQuery Tutorials Floating images effects with jQuery.

Σ' αυτήν την ανάρτηση θα σας δείξουμε τον τρόπο, πως μπορείτε μέσω τριών ή & περισσοτέρων εικονιδίων να δώσετε ένα πρωτότυπο εφέ στη...

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

Όμορφες λεζάντες ( Captions ) με CSS στις φωτογραφίες σας

3:08 μ.μ. Ανώνυμος 2

Όπως ήδη ξέρετε το Blogger μας δίνει την δυνατότητα  να προσθέσουμε λεζάντες στις φωτογραφίες μας .<br /><br />Αν δεν ξέρετε πως να βάλετε λεζάντες λοιπόν δείτε πως να το κάνετε :<br /><br />1 . Ανεβάζετε κανονικά την φωτογραφία που θέλετε να δημοσιεύσετε στην ανάρτηση <i>( πιστεύω όλοι ξέρετε πως δημοσιεύουμε εικόνες στο blogger )</i> και όταν φορτώσει η εικόνα , πατήστε με τον κέρσορα σας ελαφρά πάνω στην φωτογραφία , μέχρι να εμφανιστεί ένα μικρό  μπλε πλαίσιο , απ’ όπου ρυθμίζετε την διάταξη και το μέγεθος της εικόνας .<br /><br /><a href="http://lh6.ggpht.com/_L116RpGjEMY/S-2_U15VAlI/AAAAAAAABtk/X3zRdn-oKl8/s1600-h/%C2%BB%C2%B5%C2%B6%C2%B1%C2%BD%C3%84%C2%B1%5B8%5D.png"><img alt="λεζαντα" border="0" height="170" src="http://lh3.ggpht.com/_L116RpGjEMY/S-2_V01yiUI/AAAAAAAABto/9wFsW43tIV0/%C2%BB%C2%B5%C2%B6%C2%B1%C2%BD%C3%84%C2%B1_thumb%5B6%5D.png?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="λεζαντα" width="346" /></a> <br /><br />2 .Εκεί θα δείτε ένα σύνδεσμο <span style="color: blue;"><b>Προσθήκη λεζάντας </b></span><span style="color: black;">,  πατήστε το και κάτω από την  φωτογραφία σας θα εμφανιστεί το  κείμενο <b>Προσθήκη λεζάντας</b></span><b><br /></b><br /><br /><a href="http://lh3.ggpht.com/_L116RpGjEMY/S-2_WgQviUI/AAAAAAAABts/TfMzTGlgLR8/s1600-h/%C2%BB%C2%B5%C2%B6%C2%B1%C2%BD%C3%84%C2%B11%5B9%5D.png"><img alt="λεζαντα1" border="0" height="194" src="http://lh6.ggpht.com/_L116RpGjEMY/S-2_XsPe7fI/AAAAAAAABtw/ofblvibNsXA/%C2%BB%C2%B5%C2%B6%C2%B1%C2%BD%C3%84%C2%B11_thumb%5B7%5D.png?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="λεζαντα1" width="364" /></a> <br /><br /><br />3 . Το διαγράφετε  αυτό το κείμενο και στην θέση του γράφετε  ότι εσείς θέλετε , έπειτα δημοσιεύετε την ανάρτηση σας  και το αποτέλεσμα θα μοιάζει κάπως έτσι :<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/_L116RpGjEMY/S-3INauIwJI/AAAAAAAABuU/jKroxAzxGwk/s1600/%CE%BB%CE%B5%CE%B6%CE%B1%CE%BD%CF%84%CE%B13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="261" src="http://3.bp.blogspot.com/_L116RpGjEMY/S-3INauIwJI/AAAAAAAABuU/jKroxAzxGwk/s320/%CE%BB%CE%B5%CE%B6%CE%B1%CE%BD%CF%84%CE%B13.png" width="320" /></a></div><br />Να σας πω την αλήθεια , δεν είναι και πολύ εντυπωσιακό !!!!!<br /><br />Ας το αλλάξουμε λοιπόν , να το κάνουμε να φαίνεται πιο  όμορφο .<br /><br />Για να το κάνουμε αυτό απλά θα τροποποιήσουμε τον αρχικό κώδικα στο πρότυπο μας .<br /><br /><i><b>Σημαντικό  :  Πριν επεξεργαστείτε το Πρότυπό σας κάνετε πάντα ένα αντίγραφο ασφάλειας , πατώντας τον σύνδεσμο   <span style="color: blue;">Λήψη πλήρους προτύπου</span></b></i><br /><br /><b>Βήμα 1ο :</b><br /><br />Πηγαίνετε  <b><span style="color: blue;">Σχεδίαση </span></b>–> <b><span style="color: blue;">Επεξεργασία HTML</span></b> και κάντε κλικ στο κουτάκι <b>Επέκταση προτύπων γραφικών στοιχείων</b><br /><br /><b>Βήμα 2ο :</b><br /><br />Τώρα βρείτε στο πρότυπο σας τον παρακάτω κώδικα :<br /><br /><blockquote>.post img, <b><span style="color: red;">table.tr-caption-container</span></b> {     <br />padding:4px;   <br />border:1px solid $bordercolor;     <br /><br />}     <br /><b><span style="color: red;">.tr-caption-container img {        </span></b><br /><b><span style="color: red;">  border: none;         </span></b><br /><b><span style="color: red;">  padding: 0;         </span></b><br /><b><span style="color: red;">} </span></b>    </blockquote><br /><br />Τώρα, αυτό που πρέπει να κάνετε είναι να διαγράψετε τις γραμμές τις  οποίες έχω τονίσει με κόκκινο χρώμα . <br /><br /><b>Βήμα 3ο :</b><br /><br />Αντιγράψτε τον κώδικα που σας δίνω παρακάτω και κολλήστε τον ακριβώς πάνω από την ετικέτα  <b><span style="color: red;">]]></b:skin></span></b><br /><br /><br /><blockquote>table.tr-caption-container {     <br />padding-top: 4px;    <br />margin: 10px;     <br /><b><span style="color: red;">background-color: #f4f3f3;</span></b>     <br />text-align: center;  <br />-moz-border-radius: 10px;    <br />-khtml-border-radius: 10px;     <br />-webkit-border-radius: 10px;     <br />border-radius: 10px;     <br /><b><span style="color: #004080;">border-color:#a8a8a8 #a8a8a8 #a8a8a8;</span></b>     <br />border-style:solid solid solid;     <br /><b><span style="color: blue;">border-width:1px 1px 1px;</span></b>     <br />}     <br />.tr-caption-container img {    <br />padding-top: 4px;     <br />margin: 10px;     <br /><b><span style="color: red;">background-color: #f4f3f3;</span></b>    <br /><br />}    <br /><br />.tr-caption{     <br />padding: 0 4px 5px;     <br />margin: 0;     <br />letter-spacing:.1em;     <br /><b><span style="color: red;">color: #000;</span></b>     <br />font-weight: bold;    <br />text-shadow:1px 1px 1px #fff;     <br />line-height: 17px;     <br />font: Cambria, "Chaparral Pro", Georgia, "Times New Roman", serif;    <br />} </blockquote><br />Αποθηκεύετε το πρότυπο σας και δείτε το αποτέλεσμα .

Όμορφες λεζάντες ( Captions ) με CSS στις φωτογραφίες σας

Blogger Help Blogger Tutorials Image Effects Όμορφες λεζάντες ( Captions ) με CSS στις φωτογραφίες σας

Όπως ήδη ξέρετε το Blogger μας δίνει την δυνατότητα να προσθέσουμε λεζάντες στις φωτογραφίες μας . Αν δεν ξέρετε πως να βάλετε λεζάντες λοι...

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

Πως να προσθέσετε μια εικόνα ή χρώμα ως φόντο στο κείμενο της ανάρτησή σας.

8:23 μ.μ. LoneEagle 0

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mqg4PD4gGSfY3i_UhNIbQNwNzvqTIsNGEzrhrRw0QsDHhcbZwYjE2Jfxw9jL4rcnThsHATqjr1y3MzX-fqMLOGnaI6A_gdGcIQVVnBm1kgdzGcq8Grq33grAyKJJwqFuvw0POgUVpq4/s1600/background+color.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5461936542910332130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mqg4PD4gGSfY3i_UhNIbQNwNzvqTIsNGEzrhrRw0QsDHhcbZwYjE2Jfxw9jL4rcnThsHATqjr1y3MzX-fqMLOGnaI6A_gdGcIQVVnBm1kgdzGcq8Grq33grAyKJJwqFuvw0POgUVpq4/s320/background+color.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 320px;" /></a><br /><br />Εδώ θα σας δείξουμε ένα όμορφο κολπάκι για να δώσετε μια άλλη όψη στις αναρτήσεις σας, είτε με χρώμα είτε με μια σχετική εικόνα ως φόντο πίσω από το κείμενο σας.<br /><br />Είναι ένα όμορφο κόλπο το οποίο μπορείτε να το χρησιμοποιήσετε μεμονομένα σε κάθε ανάρτηση σας.<br /><br />Δείτε το....<br /><br />Παράδειγμα με χρώμα ως φόντο.<br /><br /><div style="background:#3366ff; padding:5px 8px 5px 8px;"><br />Στο Ρίο ντε Τζανέιρο οι Ολυμπιακοί Αγώνες του 2016<br /><br />Κοπεγχάγη: Το Ρίο ντε Τζανέιρο υπερίσχυσε της Μαδρίτης στο τελικό στάδιο της ψηφοφορίας και είναι η πόλη που θα διοργανώσει τους Ολυμπιακούς Αγώνες του 2016 (5-21 Αυγούστου)! Ήδη από τη διαδικασία είχαν αποκλειστεί οι υποψηφιότητες των άλλων δύο πόλεων, Σικάγο και Τόκιο. <br /><br />Η πόλη της Βραζιλίας ήταν το μεγάλο αουτσάιντερ, όμως ανέτρεψε τα προγνωστικά στη διαδικασία της ψηφοφορίας μεταξύ των «αθανάτων» για την ανάδειξη της νικήτριας πόλης. <br /><br />Το Ρίο κέρδισε με χαρακτηριστική άνεση αυτή της Μαδρίτης, όπως φανερώνει η διαφορά των 34 ψήφων και είναι η πρώτη πόλη από τη Νότια Αμερική που αναλαμβάνει να «φιλοξενήσει» το κορυφαίο αθλητικό ραντεβού του πλανήτη.<br /><br />Tα μέλη της Διεθνούς Ολυμπιακής Επιτροπής άφησαν εκτός συνέχειας το Σικάγο στην πρώτη ψηφοφορία, καθώς η υποψηφιότητα της αμερικανικής πόλης συγκέντρωσε μόλις 18 ψήφους. <br /><br />Ακολούθησε στη δεύτερη ψηφοφορία το Τόκιο, καθώς «έπεισε» μόλις 20 από τους λεγόμενους «αθανάτους». <br /><br />Τελικά, στην τρίτη και τελευταία ψηφοφορία, στην οποία ψήφισαν 99 μέλη της ΔΟΕ (98 έγκυρες ψήφοι, 1 αποχή), το Ρίο ντε Τζανέιρο πήρε το «χρίσμα» για τη διοργάνωση των 31ων Ολυμπιακών Αγώνων, καθώς συγκέντρωσε 66 ψήφους έναντι 32 της Μαδρίτης, αναλαμβάνοντας ακόμη ένα σημαντικό αθλητικό γεγονός μετά την τελική φάση του Παγκοσμίου Κυπέλλου του 2014 στο ποδόσφαιρο.<br /><br />Αξίζει να σημειωθεί ότι δεν ψήφισαν όλα τα μέλη της ΔΟΕ σε όλες τις ψηφοφορίες, καθώς οι «αθάνατοι» που προέρχονταν από τις τέσσερις διεκδικήτριες πόλεις δεν είχαν δικαίωμα να «τοποθετηθούν» στις ψηφοφορίες, στις οποίες μετείχαν οι πόλεις των χωρών τους. <br /><br />Επίσης, δεν ψήφισε ούτε ο πρόεδρος της ΔΟΕ, Ζακ Ρογκ, ο οποίος θα εξέφραζε την προτίμησή του μόνο σε περίπτωση ισοψηφίας.<br /></div><br /><br />Ο κώδικας:<br /><br /><div class="code"><div class="code_content"><br /><div style="background:#99c9ff; padding:5px 8px 5px 8px;"><br /><strong><em><span style="color:#cc0000;">Το κείμενο σας - Your Post</span></em></strong><br /></div><br /></div></div><br /><br />Παράδειγμα με εικόνα ως φόντο.<br /><br /><div style="background:#fff url(http://i39.tinypic.com/2d1a2oj.jpg) no-repeat;"><br />Στο Ρίο ντε Τζανέιρο οι Ολυμπιακοί Αγώνες του 2016<br /><br />Κοπεγχάγη: Το Ρίο ντε Τζανέιρο υπερίσχυσε της Μαδρίτης στο τελικό στάδιο της ψηφοφορίας και είναι η πόλη που θα διοργανώσει τους Ολυμπιακούς Αγώνες του 2016 (5-21 Αυγούστου)! Ήδη από τη διαδικασία είχαν αποκλειστεί οι υποψηφιότητες των άλλων δύο πόλεων, Σικάγο και Τόκιο. <br /><br />Η πόλη της Βραζιλίας ήταν το μεγάλο αουτσάιντερ, όμως ανέτρεψε τα προγνωστικά στη διαδικασία της ψηφοφορίας μεταξύ των «αθανάτων» για την ανάδειξη της νικήτριας πόλης. <br /><br />Το Ρίο κέρδισε με χαρακτηριστική άνεση αυτή της Μαδρίτης, όπως φανερώνει η διαφορά των 34 ψήφων και είναι η πρώτη πόλη από τη Νότια Αμερική που αναλαμβάνει να «φιλοξενήσει» το κορυφαίο αθλητικό ραντεβού του πλανήτη.<br /><br />Tα μέλη της Διεθνούς Ολυμπιακής Επιτροπής άφησαν εκτός συνέχειας το Σικάγο στην πρώτη ψηφοφορία, καθώς η υποψηφιότητα της αμερικανικής πόλης συγκέντρωσε μόλις 18 ψήφους. <br /><br />Ακολούθησε στη δεύτερη ψηφοφορία το Τόκιο, καθώς «έπεισε» μόλις 20 από τους λεγόμενους «αθανάτους». <br /><br />Τελικά, στην τρίτη και τελευταία ψηφοφορία, στην οποία ψήφισαν 99 μέλη της ΔΟΕ (98 έγκυρες ψήφοι, 1 αποχή), το Ρίο ντε Τζανέιρο πήρε το «χρίσμα» για τη διοργάνωση των 31ων Ολυμπιακών Αγώνων, καθώς συγκέντρωσε 66 ψήφους έναντι 32 της Μαδρίτης, αναλαμβάνοντας ακόμη ένα σημαντικό αθλητικό γεγονός μετά την τελική φάση του Παγκοσμίου Κυπέλλου του 2014 στο ποδόσφαιρο.<br /><br />Αξίζει να σημειωθεί ότι δεν ψήφισαν όλα τα μέλη της ΔΟΕ σε όλες τις ψηφοφορίες, καθώς οι «αθάνατοι» που προέρχονταν από τις τέσσερις διεκδικήτριες πόλεις δεν είχαν δικαίωμα να «τοποθετηθούν» στις ψηφοφορίες, στις οποίες μετείχαν οι πόλεις των χωρών τους. <br /><br />Επίσης, δεν ψήφισε ούτε ο πρόεδρος της ΔΟΕ, Ζακ Ρογκ, ο οποίος θα εξέφραζε την προτίμησή του μόνο σε περίπτωση ισοψηφίας.<br /></div><br /><br /><br />Ο κώδικας:<br /><br /><div class="code"><div class="code_content"><br /><div style="background:url(....image direct link....) no-repeat;"><br /><strong><em><span style="color:#cc0000;">Το κείμενο σας - Your Post</span></em></strong><br /></div><br /></div></div><br /><br />Ανάλογα με την εικόνα θα αλλάζετε την εντολή θέσης: no-repeat; ,repeat; ,center;, center center;.....κτλ<br /><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Πως να προσθέσετε μια εικόνα ή χρώμα ως φόντο στο κείμενο της ανάρτησή σας.

Blogger Help Blogger Tutorials Image Effects Πως να προσθέσετε μια εικόνα ή χρώμα ως φόντο στο κείμενο της ανάρτησή σας.

Εδώ θα σας δείξουμε ένα όμορφο κολπάκι για να δώσετε μια άλλη όψη στις αναρτήσεις σας, είτε με χρώμα είτε με μια σχετική εικόνα ως φόντο πίσ...

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

Εγγραφή σε: Σχόλια (Atom)

Blogger Tutorials

Δημιουργήστε τώρα ένα ιδανικό ιστολόγιο, χωρίς να ξοδέψετε ούτε 1€.Περισσότερα από 500 tutorials είναι στη διάθεσή σας.
Οι διαχειριστές του ιστολογίου «Στάλες στο γαλάζιο» σας συμβουλεύουν...
Αποφεύγετε την οποιαδήποτε προσφερόμενη "βοήθεια" από τυχάρπαστους και κατ' επίφαση "web designers", που από ιδιοτέλεια και μόνο προσπαθούν να εκμεταλλευθούν την άγνοιά σας!!!
Με εκτίμηση
«Στάλες στο γαλάζιο»:-)