Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

ΤΑ 20 ΚΑΛΥΤΕΡΑ SITES ΓΙΑ ΔΩΡΕΑΝ ΑΝΕΒΑΣΜΑ ΑΡΧΕΙΩΝ FLASH KAI SWF - FREE FLASH & SWF UPLOADING & HOSTING


Print Friendly and PDFPrintPrint Friendly and PDFPDF


~
Καταρχάς δείτε στο http://www.bloggertips.gr/2009/11/create-upload-and-embed-in-html-code.html μια παλαιότερή μου ανάρτηση σχετικά με αυτό το θέμα.
~

Παρακάτω είναι μια λίστα με τα 20 καλύτερα websites όπου μπορείτε να ανεβάζετε δωρεάν swf (ShockWave) και adobe flash αρχεία.

1. http://megaswf.com/
2. http://swfcabin.com/
3. http://www.swfupload.com/
4. http://swfupload.org/
5. http://www.imageuploads.net/
6. http://www.imagecabin.com/
7. http://www.imageshack.us/
8. http://www.theimagehosting.com/
9. http://www.hostpic.biz/
10. http://www.imagehosting.gr/
11. http://www.instantimagehosting.com/
12. http://upload.plunder.com/
13. http://www.imageaddicts.net/
14. http://www.fhqhosting.com/
15. http://www.imageage.com/
16. http://www.photoshosting.com/
17. http://www.parkyourpic.com/
18. http://blogimagehost.com/
19. http://www.filefrog.net/
20. http://www.picpanda.com/

Ελπίζω να σας καλύπτουν!

Πηγές: http://www.k-director.com/blog/20-best-websites-to-host-your-flash-files-swf-for-free/
Copyrights: http://www.bloggertips.gr/


Gallery Εικόνων - Image Effect με jQuery Hover / Zoom για Blogger


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Ακόμα δεν έχει περάσει μια μέρα από το πρώτο slider-gallery εικόνων που είπαμε, και να και το δεύτερο. Έτσι για να έχετε επιλογές!
Βέβαια έχουν πολλές διαφορές, αν και τα δύο βασίζονται στη βιβλιοθήκη JQuery.
Δες ένα Demo (αν και η εικόνα είναι αρκετά επεξηγηματική) στο http://j-quary.blogspot.com/

ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΥ GALLERY ΣΕ BLOGGER

1. Σύνδεση στον blogger λογαριασμό
2. Σχεδίαση> Επεξεργασία html
3. Πατώντας ctrl+F στο πληκτρολόγιό μας ψάχνουμε να βρούμε το ]]></b:skin> και από πάνω του βάζουμε τον ακόλουθο κώδικα:

/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

4. Τώρα βρίσκουμε το </head> και πριν από αυτό επικολλούμε το παρακάτω:

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
</script>

5. Αποθήκευση προτύπου!

6. Τώρα πάμε σε Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript και εκεί επικολλούμε το:

<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>

ΕΠΕΞΗΓΗΣΗ ΚΩΔΙΚΑ:

picture 1 Link: εδώ βάζετε το url, τη διεύθυνση της φωτογραφίας σας
# : εδώ βάζετε το link-σύνδεσμο όπου θέλετε να οδηγείται κάποιος, όταν πατάει την φωτογραφία σας. αν δεν θέλετε να βάλετε κάποιο link αφήστε το #

Για προσθαφαίρεση φωτογραφιών, προσθαφαιρούμε την παρακάτω γραμμή:

<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>

Μην ξεχάσετε να αποθηκεύσετε το widget σας.

Enjoy λοιπόν! Και αφήστε κανένα σχόλιο να βλέπω πως πάτε!!

Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:




Πηγές: http://www.allblogtools.com/tricks-and-hacks/how-to-add-images-gallery-widget-with-jquery-hover-zoom-to-your-blogger/
Copyrights: http://www.bloggertips.gr/


Slider Εικόνων - The Best Image Effect! - Slimbox 2.02 για jquery 1.4.2


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Σήμερα θα ασχοληθούμε με ένα πολύ ενδιαφέρον θέμα, που έλειπε εως τώρα από το αρχείο του bloggertips.gr Είναι ένα πασίγνωστο εφέ εικόνων. Ίσως το καλύτερο στο είδος του. Είναι ένα slider εικόνων, που διευκολύνει τον χρήστη να βλέπει τις εικόνες και είναι και πολύ όμορφο εκτός από πρακτικό.

Δείτε ένα Demo αυτού του Image Effect στο http://www.posel.co.uk/slimbox/ (πάτα πάνω στις εικόνες για να καταλάβεις).
Καλό, ε? Σίγουρα θα το έχεις ξαναδει, γιατί χρησιμοποιείται πολύ σε πολύ μεγάλα και γνωστά sites (π.χ. newsit.gr).

Για να το εγκαταστήσουμε στο Blogger ακολουθούμε την παρακάτω διαδικασία:

1. Σύνδεση στον λογαριασμό μας στο Βlogger, πάντα από το Blogger Draft
2. Πανόπτης> Σχεδίαση> Επεξεργασία html> "Επέκταση προτύπων γραφικών στοιχείων"
3. Αναζητούμε (πάντα με τη βοήθεια του ctrl+F του browser μας) το ]]></b:skin> και επικολλούμε το παρακάτω κομμάτι κώδικα από πάνω του:

/* SLIMBOX */

#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(http://sites.google.com/site/bl12tr34/archeiotheke/loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}

4. Τώρα ψάχνουμε για το </head> και από πάνω του, επικολλούμε το παρακάτω:

<!-- Start jQuery -->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&quot;jquery&quot;, &quot;1.4.2&quot;);</script>
<!-- End jQuery -->
<script src='http://sites.google.com/site/bl12tr34/archeiotheke/slimbox2.js' type='text/javascript'/>
<!-- End slimbox2 -->

5. Αποθήκευση προτύπου


Τελειώσαμε με την εγκατάστασή του, τώρα πρέπει να μάθουμε πως θα το ενεργοποιούμε όταν το χρειαζόμαστε.

Πολύ απλά όποτε θέλουμε να το χρησιμοποιήσουμε προσθέτουμε την ετικέτα rel="lightbox" στον κώδικα της εικόνας μας. Πολύ απλό. Καταλάβατε? Είμαι σίγουρος πως όχι, για αυτό πρέπει να διαβάσετε μια παλαιότερη ανάρτησή μου, την http://www.bloggertips.gr/2009/09/picture-html-code.html Πρέπει να μάθετε πως φτιάχνεται με κωδικό μια εικόνα.

Επίσης αν θέλετε να αναγράφεται και τίτλος από κάτω, τότε βάζουμε το rel="lightbox" title="Εδώ ο τίτλος που θέλετε"

Βοηθηθείτε από την παρακάτω επεξηγηματική εικόνα:


Για παράδειγμα μια απλή φωτογραφία έχει τον παρακάτω κώδικα:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-
NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s1600/15.jpg"
imageanchor="1" style="margin-left: 1em; margin-right: 1em;" >
<img border="0"height="158"
src="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s200/15.jpg"width="200"/></a></div>

Και εμείς προσθέτουμε τους κόκκινους κωδικούς:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-
NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s1600/15.jpg "
imageanchor="1"style="margin-left: 1em; margin-right: 1em;"rel="lightbox" title="Εδώ ο τίτλος που θέλετε"><img border="0" height="158"
src="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s200/15.jpg " width="200" /></a></div>

Για πολλές εικόνες μαζί βάζουμε την παρακάτω ετικέτα:

rel="lightbox-ο τίτλος ομάδας εικόνων εδώ" title="εδώ ο τίτλος για την φωτογραφία"

Παράδειγμα:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://χχχχχχχχχχχχχχ.jpg " imageanchor="1"
style="margin-left: 1em; margin-right: 1em;" rel=" lightbox- τα ταξίδια μου " title="Το ταξίδι μου στην Γαλλία " >
<img border="0" height="158" src="http://χχχχχχχχχχχχχχχχχ.jpg " width="200" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://χχχχχχχχχχχχχχ.jpg " imageanchor="1"
style="margin-left: 1em; margin-right: 1em;" rel=" lightbox- τα ταξίδια μου " title="Το ταξίδι μου στην Αμερική " >
<img border="0" height="158" src="http://χχχχχχχχχχχχχχχχχ.jpg " width="200" /></a></div>

Αυτό το κάνουμε μόνο για σχετικές μεταξύ τους εικόνες, που θέλουμε να τις ενώσουμε' να τις ομαδοποιήσουμε.

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

Να ευχαριστήσω δημόσια την παλιά φίλη Σοφία Καραγιάλη που μέσα από το ξεχωριστό blog της, http://bloggertrics.blogspot.com/, που όμοιό του δύσκολα θα ξαναυπάρξει, μας έχει εμπλουτίσει τις γνώσεις μας γύρω από το blog design. Σε ευχαριστούμε πολύ Σοφία και ελπίζουμε να ξανασυνεχίσεις τη θαυμάσια δουλειά σου. Και αυτή η ανάρτηση δεν θα υπήρχε δίχως εκείνη.

Πηγές: αρχικές πηγές από http://www.digitalia.be/software/slimbox2 και εικόνα και προσαρμογή κωδικών από http://bloggertrics.blogspot.com/2009/10/slimbox-202-jquery-132-bloggspot.html


Η ΝΕΑ ΜΟΔΑ ΤΩΝ DEAL SITES - ΨΩΝΙΣΤΕ ΕΞΥΠΝΑ ΜΕ ΕΩΣ 90% ΕΚΠΤΩΣΗ


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Σίγουρα θα έχετε προσέξει ότι τους τελευταίους μήνες έχουν ξεφυτρώσει από παντού νέα sites που προσφέρουν αγαθά και υπηρεσίες με εκπτώσεις εως 90%. Είναι τα λεγόμενα deal sites, που έχουν γίνει μόδα σε όλη την Ευρώπη. Η ουσία είναι ότι αυτές οι μεγάλες εκπτώσεις ισχύουν μόνο για μια ημέρα.
Οι προσφερόμενες υπηρεσίες ή τα αγαθά με τις μεγάλες εκπτώσεις ανήκουν σε κάθε κατηγορία' εστιατόρια, κινηματογράφοι, ρούχα, κομμωτήρια, ηλεκτρονικά, πακέτα διακοπών, εισητήρια και ότι άλλο μπορείτε να φανταστείτε, σας περιμένει τώρα να το απολαύσετε πληρώνοντας εως και 90% λιγότερο από ότι θα δίνατε άλλη μέρα. Τώρα πια στην Ελλάδα υπάρχουν πολλά τέτοια sites, στα οποία θα κάνω μια αναφορά παρακάτω. Η διαδικασία είναι πολύ απλή: Επισκέπτεσαι το site, κάνεις μια γρήγορη εγγραφή (register), έπειτα εγγράφεσαι στο newsletter με το e-mail σου και θα λαμβάνεις κάθε μέρα στο e-mail σου τα καλύτερα deals!

Σας έχω ξεχωρίσει τα 5 καλύτερα sites στο είδος τους:


Εμπρός τι περιμένετε?


Ώρα να απολαύσετε τα καλύτερα σε ξεφτιλιστικές τιμές!


Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:



Copyrights: http://www.bloggertips.gr/


 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *