Blogger Tips – Tricks – Gadgets – Templates – Hacks

ΚΑΤΕΒΑΣΤΕ ΔΩΡΕΑΝ ΞΕΝΕΣ ΤΑΙΝΙΕΣ ΜΕ ΕΛΛΗΝΙΚΟΥΣ ΥΠΟΤΙΤΛΟΥΣ – DOWNLOAD FREE MOVIES WITH GREEK SUBTITLES



Print Friendly and PDFPrintPrint Friendly and PDFPDF


ΠΡΟΣΟΧΗ: (updated on 7/9/12)



σελίδες όπως αυτές που αναφέρονται παρακάτω ανοίγουν – κλείνουν – μεταφέρονται συνέχεια με αποτέλεσμα να

μην προλαβαίνουμε να διορθώνουμε τα παρακάτω links. 

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

για αυτό ότι σελίδες ξέρεις για download γράψε τις με ένα σχόλιο από κάτω…







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



$("ul.thumb li").hover(function() {

$(this).css({'z-index' : '10'});

$(this).find('img').addClass("hover").stop()

.animate({

marginTop: '-110px',

marginLeft: '-110px',

top: '50%',

left: '50%',

width: '174px',

height: '174px',

padding: '20px'

}, 200);



} , function() {

$(this).css({'z-index' : '0'});

$(this).find('img').removeClass("hover").stop()

.animate({

marginTop: '0',

marginLeft: '0',

top: '0',

left: '0',

width: '100px',

height: '100px',

padding: '5px'

}, 400);

});



//Swap Image on Click

$("ul.thumb li a").click(function() {



var mainImage = $(this).attr("href"); //Find Image Name

$("#main_view img").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: /




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("jquery", "1.4.2");</script>

<!– End jQuery –>

<script src=’http://sites.google.com/site/bl12tr34/archeiotheke/slimbox2.js’ type=’text/javascript’/>

<!– End slimbox2 –>



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





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



Πολύ απλά όποτε θέλουμε να το χρησιμοποιήσουμε προσθέτουμε την ετικέτα rel=”lightbox” στον κώδικα της εικόνας μας. Πολύ απλό. Καταλάβατε? Είμαι σίγουρος πως όχι, για αυτό πρέπει να διαβάσετε μια παλαιότερη ανάρτησή μου, την /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
Copyrights: /




ΕΝΑΛΛΑΣΣΟΜΕΝΕΣ ΕΙΚΟΝΕΣ (Νο2)



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Νέοι bloggers γειά σας !Σήμερα σας παρουσιάζω το κώδικα που κάνει τις εικόνες σας onmouseover (δηλαδή, όταν περνάει από πάνω τους το ποντίκι να αλλάζουν όψη)…βασική προυπόθεση όμως είναι να ταιριάζουν λίγο στα μεγέθη αυτές οι φωτογραφίες (δηλ. και οι 2 πλαγιαστές, η και οι 2 όρθιες)

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

Ο τρόπος που βάζουμε το κώδικα είναι γνωστός, και σας τον ξαναθυμίζω:

BLOGGER επεξεργασία διάταξης=>Σχεδίαση=>Στοιχεία Σελίδας=>GADGET=>HTML/JavaScript :




Καταπλητικές κινούμενες εικόνες…



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Το σημερινό μου ποστ είναι άσχετο με τη θεματολογία του blog -πράγμα που δε συνηθίζω- αλλά με εντυπωσίασαν πολύ κάποιες κινούμενες εικόνες και θέλησα να τις μοιραστώ μαζί σας. Οι παρακάτω εικόνες δεν έχουν σχέση μεταξύ τους, αλλά είμαι σίγουρος ότι θα τις κοιτάτε πολλή ώρα (ειδικά την τελευταία)!


Θαυμάστε τις!














































Copyrights:

@ Princess Pussy, Animation Artist, New York

@ http://www.delicious.com/duhovny


Keep Blogging

johnpatra




Βάλτε στις φωτογραφίες σας watermark για να μην σας τις “κλέβουν”



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πολλοί θέλουν να προστατεύουν με κάθε τρόπο το περιεχόμενο των ιστοσελιδών τους.

Και πολύ καλά κάνουν, εκτός από αυτούς που προστατεύουν το περιεχόμενό τους, το οποίο έχουν αντιγράψει από αλλού. Αλλά δεν ασχολούμαι με αυτούς.

Όπως είδα η προηγούμενή μου ανάρτηση (http://www.johnpatra.com/2010/06/blog.html) που αναφερόταν στην προστασία του γραπτού περιεχόμενού σας, σας έλυσε τα χέρια!

Πραγματικά αυτο το ποστ μου έχει κάνει μεγάλη επιτυχία, αφού το βλέπω παντού.

Σήμερα θα ασχοληθώ με την προστασία του εικονικού σας περιχομένου, δηλαδή των εικόνων σας.

Ο μόνος τρόπος για να προστατέψετε τις εικόνες σας από τους επιτήδειους, είναι να βάλετε ένα υδατογράφημα (watermark).

Να μια εικόνα με watermark (το Genius DV):




Η σελίδα από την οποία θα βάλετε watermark είναι η PicMarkr




Δεν χρειάζεται να κάνετε ούτε λογαριασμό.

Ακολουθήστε βήμα-βήμα τα βήματα της σελίδας και θα τα βρείτε όλα, είμαι σίγουρος.



Μια φιλική παράκληση μόνο:



Μην βάζετε watermark σε κάθε φωτογραφία, ακόμα και να μην είναι δικιά σας!

Γιατί φαντάζεστε τι θα γινόταν, αν το έκαναν όλοι αυτό?

Βάζετε watermark μόνο στις δικιές σας φωτογραφίες, που για να τις τραβήξετε, κοπιάσατε πραγματικά.



posted by johnpatra




Βγάλτε φωτογραφία την …οθόνη σας!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Όταν βλέπετε στο internet κάτι και θέλετε να το στείλετε κάπου τι κάνετε?

Φαντάζομαι ότι δεν τραβάτε φωτογραφία με την κάμερά σας, γιατί αν το κάνετε αυτό…

Σήμερα σας έχω τη λύση.

Δείτε πως αποθηκεύετε σε φωτογραφία την οθόνη του υπολογιστή σας ή ένα μέρος από την οθόνη.

Για παράδειγμα έτσι έχω βγάλει αυτή την φώτο: http://i26.tinypic.com/34s058z.jpg



Λοιπόν ας πούμε ότι βρίσκεστε στο site μου (όπως είστε τώρα δηλαδή) και θέλετε να βγάλετε φωτογραφία την εικόνα.



Απλά πατήστε ταυτόχρονα στο πληκτρολόγιό σας το PRTSC_SYSRQ μαζί με το CTRL.



Το CTRL ξέρετε που είναι.

Το PRTSC_SYSRQ είναι κάπου πάνω δεξιά κοντά στο PAUSE BREAK ή στο DELETE.



Να ένα πληκτρολόγιο που βρήκα:




Δίπλα στα κουμπιά που λέω σας έχω βάλει κόκκινο και κίτρινο θαυμαστικό.

(μην γελάτε’ απλά δεν σκέφτηκα άλλον τρόπο για να σας δείξω ποια κουμπιά εννοώ)



Αφού τα πατήσετε, ανοίγετε το πρόγραμμα Ζωγραφικής.



Το πρόγραμμα Ζωγραφικής υπάρχει σε όλους τους υπολογιστές.



Αν δεν ξέρετε που είναι πατήστε Έναρξη>Προγράμματα και Βοηθήματα για να το βρείτε.



Πάνω στις καρτέλες του προγράμματος της Ζωγραφικής πατήστε Επεξεργασία και Επικόλληση.



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



Έπειτα μπορείτε να την επεξεργαστείτε με τις δυνατότητες που σας παρέχει το πρόγραμμα.



Τέλος μην ξεχάσετε να την αποθηκεύσετε σαν νέο αρχείο.



Τώρα μπορείτε να την ανεβάσετε στο tinypic και να την κάνετε ότι τη θέλετε.



Καλή σας μέρα!




Προσθήκη εικόνας για background (φόντο) – Add background image



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πραγματικά είναι απίστευτα έυκολο να βάλετε μια εικόνα της επιλογής σας για φόντο (background) στο blog σας. Το μόνο δύσκολο είναι να βρείτε την εικόνα που θέλετε.

Λοιπόν βρείτε πια εικόνα θέλετε να έχετε για background. Αν θέλετε να τις αλλάξετε τις διαστάσεις, κάντε το από το Resizepic. Αφού έχετε επιλέξει ποια εικόνα θέλετε για φόντο στο blog σας, ακολουθήστε τα παρακάτω βήματα:



1. Σύνδεση στον λογαριασμό σας

2. Σχεδίαση

3. Στοιχεία σελίδας

4. Προσθήκη gadget

5. HTML/JavaScript

6. Επικόλληση του παρακάτω κωδικού:




<style type=”text/css”>body {background-image:url(ΕΔΩ_ΤΟ_URL_ΤΗΣ_ΕΙΚΟΝΑΣ_ΣΑΣ);background-attachment:fixed;}.bkgspc {margin-top:10px;font-size:11px;font-family:Arial;}.bkgspc </style><div class=”bkgspc” align=”center”>Visit <a href=”http://www.johnpatra.com/” target=”_blank”>Johnpatra.com</a></div>



Απλά εκεί που γράφω “ΕΔΩ_ΤΟ_URL_ΤΗΣ_ΕΙΚΟΝΑΣ_ΣΑΣ“, βάζετε το url της εικόνας που επιθυμήτε και μετά αποθηκεύετε.




Pop up παράθυρο, για να βλέπετε τις εικόνες



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Γεια σας.  Όλοι θα έχετε δει, κάνοντας κλικ σε μία φωτογραφία σε κάποιο site ή blog, ότι ανοίγει στο ίδιο παράθυρο, με συνέπεια να πατάτε το βελάκι πίσω για να επιστρέψετε στο blog που διαβάζατε. Αποτέλεσμα αυτού είναι να περιμένετε να ξαναφορτώσει η σελίδα ή ακόμα χειρότερα να κλείσετε κατά λάθος με Χ την εικόνα, με αποτέλεσμα να απομακρύνεστε και από το site που ήσασταν.  Αυτό δεν θα ήταν ότι καλύτερο για το blog σας, και θα κούραζε τους αναγνώστες σας.

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

Σήμερα όμως έχω να προτείνω και έναν άλλο τρόπο. Να ανοίγει η εικόνα μας σε ένα καινούριο pop up παράθυρο.

Φαίνετε πολύ πιο όμορφο και κυρίως πολύ πρακτικό για τον επισκέπτη, ο οποίος μπορεί, (αφού την δει σε πλήρη ανάπτυξη), να την κλείσει με ένα κλικ.

Κάντε κλικ στην παρακάτω εικόνα, να δείτε πως λειτουργεί και πως φαίνετε.












Η εφαρμογή του είναι πολύ απλή και εύκολη.

Αφού ετοιμάσουμε την ανάρτησή μας, και φορτώσουμε την φωτογραφία μας, πάμε σε μορφή HTML, και βρίσκουμε τον κωδικό της φωτογραφίας.


Παίρνουμε για παράδειγμα την παραπάνω φωτογραφία.

Ο Html κωδικός της είναι έτσι



<a onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}” href=”http://4.bp.blogspot.com/_f2yaFv_baV0/S_V7Nf8vR8I/AAAAAAAABog/TikH7cfnPCo/s1600/__PA270229.jpg”><img style=”display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 175px;” src=”http://4.bp.blogspot.com/_f2yaFv_baV0/S_V7Nf8vR8I/AAAAAAAABog/TikH7cfnPCo/s320/__PA270229.jpg” border=”0″ alt=”” id=”BLOGGER_PHOTO_ID_5473416393983477698″ /></a>



Παίρνουμε τώρα τον παρακάτω κωδικό



target=”_blank” onclick=”window.openundefinedthis.href, ‘popupwindow’, ‘width=800, height=440, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no’); return false;”



και τον προσθέτουμε αμέσως πριν το κλείσιμο (>) του κωδικού της φωτό.

Θα φαίνεται δηλαδή έτσι



<a onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}” href=”http://4.bp.blogspot.com/_f2yaFv_baV0/S_V7Nf8vR8I/AAAAAAAABog/TikH7cfnPCo/s1600/__PA270229.jpg” target=”_blank” onclick=”window.open(this.href, ‘popupwindow’, ‘width=800, height=440, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no’); return false;” ><img style=”display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 175px;” src=”http://4.bp.blogspot.com/_f2yaFv_baV0/S_V7Nf8vR8I/AAAAAAAABog/TikH7cfnPCo/s320/__PA270229.jpg” border=”0″ alt=”” id=”BLOGGER_PHOTO_ID_5473416393983477698″ /></a>



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




Αυτό ήταν όλο. Πατάμε δημοσίευση, και αν πάτε τώρα στην ανάρτηση και κάνετε κλικ στην εικόνα, θα εμφανιστεί σε pop up παράθυρο.

Post by Ekabitis







Φωτό μόνιμα στο προσκήνιο



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Είμαι ο ekabitis και σήμερα θα σας δείξω πως να βάλετε μια φωτογραφία, η οποία θα είναι μόνιμα στο προσκήνιο. Αν έχετε ένα template με μεγάλα περιθώρια δεξιά και αριστερά από την κεντρική στήλη των αναρτήσεων, και θέλετε να το ομορφύνετε λιγάκι, μπορείτε να τοποθετήσετε μια εικόνα η οποία θα είναι μόνιμα στο προσκήνιο, ανεξάρτητα αν εσεις θα ανεβοκατεβαίνετε με το scrol του ποντικιού πάνω – κάτω.
Πως γίνεται αυτό; Με την προσθήκη ενός πολύ απλού widget.
Δείτε την εικόνα.


Πάμε λοιπόν να σας δείξω πως γίνεται.
Κατ’ αρχήν θα πρέπει να αποφασίσετε ποια φωτογραφία θα βάλετε, και στη συνέχεια να την ανεβάσετε σε κάποιο image hοsting site, για να βρείτε το Url της.
Θα πρέπει επίσης να προσέξετε τις διαστάσεις της εικόνας. Να μην είναι δηλαδή πολύ μεγάλη, και σας κρύβει τις αναρτήσεις. Συνήθως διαστάσεις που “παίζουν” γύρω στο 160 x 160, είναι ότι χρειαζόμαστε.
Αν η φωτογραφία που επιθυμείτε να βάλετε είναι μεγαλύτερη, πριν την ανεβάσετε θα πρέπει πρώτα να την μικρύνετε.
Όταν γίνουν λοιπόν όλα τα παραπάνω, πάμε στον Πίνακα Ελέγχου (πρώην Πανόπτη) –> Διάταξη –> Προσθήκη gadget –> HTML/JavaScript, και προσθέτουμε τον παρακάτω κωδικό

<a style=”display:scroll;position:fixed;top:5px;right:5px;” href=”Link_To_An_Image title=”Image Name“><img src=”http://Image_Url“/></a>


Τώρα κάνουμε τις αλλαγές μας.
Εκεί που γράφει href=”Link_To_An_Image” με το πράσινο χρώμα, βάζουμε το link που οδηγεί η εικόνα, αν κάνει κάποιος πάνω της κλικ.
Στο title=”Image Name”, με το μπλέ χρώμα, βάζουμε έναν τίτλο της εικόνας.
Στο src=”http://Image_Url”, με το κόκκινο χρώμα, βάζουμε το direct link της εικόνας που πήραμε από το site στο οποίο την ανεβάσαμε.
Τέλος αυτό με το μοβ χρώμα, top:5px;right:5px;, μπορούμε να του ορίσουμε που ακριβώς, και σε ποιο ύψος θα μπει η εικόνα μας. Αν την θέλετε αριστερά, αλλάζουμε το right και γράφουμε left. Αν το θέλουμε ποιο κάτω, μεγαλώνουμε την τιμή του top, ενώ αν θέλουμε να έρθει ποιο κεντρικά μεγαλώνουμε την τιμή του right ή του left, ανάλογα την επιλογή που έχουμε κάνει.
Τέλος να σας πω ότι το συγκεκριμένο widget μπορούμε να το βάλουμε όσες φορές θέλουμε, αλλάζοντας βέβαια την θέση που θα μπαίνει κάθε φορά, έτσι ώστε να έχουμε ένα πολύ ωραίο και ομοιόμορφο αποτέλεσμα.
Αυτό ήταν. Μην σας τρομάζουν τα πολλά λόγια που σας έγραψα. Στην πραγματικότητα είναι πολύ εύκολο.
Αν χρειαστήτε κάποια διευκρίνηση, μην διστάσετε να επικοινωνήσετε μαζί μου πατώντας εδώ.
Γράψτε μου αν θέλετε και κάποιο σχόλιο, θα χαρώ πολύ.




Τίτλος στις φωτογραφίες του blog μας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Γεια σας. Eίμαι ο ekabitis, και σήμερα έχω να σας δείξω έναν απλούστατο τρόπο για να βάζεται τίτλο στις φωτογραφίες σας. Τι σημαίνει αυτό; Όταν περνάμε το ποντίκι από την φωτογραφία, θα εμφανίζεται αυτόματα για κάποια δευτερόλεπτα ένας τίτλος μέσα σε πλαίσιο με το θέμα που θα έχουμε γράψει εμείς πριν. Αυτό βοηθάει τους αναγνώστες σχετικά σε τι αναφέρεται η φωτογραφία.
Δείτε παρακάτω τι εννοώ. Στην φωτο του blog μου, μόλις βάζεις το ποντίκι πάνω στην φωτογραφία, αμέσως εμφανίζεται ο τίτλος “Πλατεία συντάγματος”, και δίνει στον αναγνώστη την πληροφορία που θέλουμε.

Πάμε λοιπόν:
Όπως ήδη θα γνωρίζεται, η κάθε φωτογραφία, με μορφή html, που βάζουμε στο blog μας έχει περίπου την μορφή αυτή. (Αν δεν γνωρίζεται πως βρίσκουμε την html μορφή κάθε φωτογραφίας, πατήστε εδώ. Θα το βρήτε προς το τέλος της ανάρτησης).


<a href=”http://freefotos.gr/”><img src=”http://freefotos.gr/images/e9863jf2dc749dhaeuo.jpg” border=”0″ alt=”freefotos.gr” /></a>


Μέσα εκεί προσθέτουμε τον κωδικό

title=”—–“


Τις παύλες τις αντικαθιστούμε, γράφοντας αυτό που θέλουμε να φαίνεται.Έτσι θα πάρει την ακόλουθη μορφή.


<a href=”http://freefotos.gr/”><img src=”http://freefotos.gr/images/e9863jf2dc749dhaeuo.jpg” border=”0″ title=”—–” alt=”freefotos.gr” /></a>


Πατάμε αποθήκευση και είμαστε έτοιμοι.




Αλλαγή διαστάσεων εικόνας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πηγή:techn-all-ogy

Επειδή βλέπω ότι και αρκετοί φίλοι μου αντιμετωπίζουν πρόβλημα με την αλλαγή μεγέθους μιας φωτογραφίας, θα σας δείξω έναν πολύ απλό τρόπο για να γίνει αυτό, χωρίς κάποιο πρόγραμμα.
Το μόνο που θα χρειαστούμε είναι σύνδεση στο ίντερνετ. Όπως αναφέρω και στον τίτλο της ανάρτησης, η μετατροπή της εικόνας θα γίνει με τη βοήθεια ενός site (πατήστε για να μπείτε).

Μόλις μπείτε θα δείτε το πλαίσιο της εικόνας που υπάρχει παραπάνω. Πατάτε αναζήτηση, βρίσκεται την εικόνα που θέλετε, βάζετε τις διαστάσεις που θέλετε και αυτόματα το site μετατρέπει την εικόνα στις νέες διαστάσεις που θέσατε. Μετά είτε πατάτε δεξί κλικ στη νέα εικόνα και αποθήκευση, είτε υπάρχει η επιλογή download για να την κατεβασετε.

Η διαδικασία είναι δωρεάν, αρκετά εύκολη και διαρκεί μόλις ένα με δύο λεπτά.




Διάσημα banners για τα blogs που πρέπει να βάλετε στο blog σας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σε αυτό το ποστ σας σύλλεξα μερικά πολύ γνωστά banners για τα blogs και την ελευθερία τους.
Τα παρακάτω banners τα ψάρεψα από διάφορα blogs.
Δεν ξέρω ποιος τα έφτιαξε πάντως είναι πολύ ωραία και έχουν και νόημα.
Πολλά blogs έχουν ένα από αυτά.
Παρακάτω σας τα έχω με τον κωδικό τους για να τα βάλετε στο blog σας αν σας αρέσουν αλλά κυρίως αν συμφωνείτε με αυτά που γράφουν.

Έχω ανεβάσει όλα τα banners στον server του freefotos που από ότι ξέρω είναι αρκετά αξιόπιστος.Έχω ρυθμίσει το κάθε μπαννερ να είναι σύνδεσμος σε αυτήν εδώ την ανάρτηση και έτσι όποιος επισκέπτης σας θέλει να βάλει ένα να οδηγηθεί αμέσως εδώ (δεν θα φύγει από το blog σας ‘θα ανοίξει σε νέα καρτέλα) και να βάλει κι αυτός ένα.Σας παρακαλώ πολύ λοιπόν να μην αλλάξετε τον σύνδεσμο ώστε να διαδωθούν αυτά τα banners σε όλους.

Για να βάλεις ένα από τα παρακάτω banners στο blog σου πας στον Πανόπτη σου,από εκεί στην Διάταξη, πατάς Προσθήκη gadget ,επιλέγεις το HTML/JavaScript και εκεί αντιγράφεις τον κώδικα του banner που θέλεις να βάλεις.Μην ξεχάσεις να το αποθηκεύσεις κι είσαι έτοιμος!

Τα μπάννερς:




HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/wm7i7xg6xwax1t2zv309_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”ojg3ri3yxjfrhnwutg.jpg” src=”http://freefotos.gr/images/ojg3ri3yxjfrhnwutg_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”l8ykj9y6is7wwx9r87el.jpg” src=”http://freefotos.gr/images/l8ykj9y6is7wwx9r87el_thumb.jpg”/></a>
</center>





HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”t95vpdlomwfe3rlz1ogp.jpg” src=”http://freefotos.gr/images/t95vpdlomwfe3rlz1ogp_thumb.jpg”/></a>
</center>





HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”9li5lv7baoo7e53998wx.jpg” src=”http://freefotos.gr/images/9li5lv7baoo7e53998wx_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”f5n426zmxd2l4zkn20s6.jpg” src=”http://freefotos.gr/images/f5n426zmxd2l4zkn20s6_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”3qbrn9kx607m7cts000.jpg” src=”http://freefotos.gr/images/3qbrn9kx607m7cts000_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”po71ef73rh9vi2tie0m1.jpg” src=”http://freefotos.gr/images/po71ef73rh9vi2tie0m1_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”ut22y3t2mqd2evad67o.jpg” src=”http://freefotos.gr/images/ut22y3t2mqd2evad67o_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”lrg4ki984u6bmx39ozr1.jpg” src=”http://freefotos.gr/images/lrg4ki984u6bmx39ozr1_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”vzqp40j35ugrv7fwyt4p.png” src=”http://freefotos.gr/images/vzqp40j35ugrv7fwyt4p_thumb.png”/></a>
</center>




zbyl7ycbkqjuyrrzmoyd.gif

HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”zbyl7ycbkqjuyrrzmoyd.gif” src=”http://i723.photobucket.com/albums/ww239/johnpatra/th_ubab10.gif”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”zbyl7ycbkqjuyrrzmoyd.gif” src=”http://i723.photobucket.com/albums/ww239/johnpatra/UBAB.gif?t=1259363764″/></a>
</center>




4627t1uv3442avywee5.gif

HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”4627t1uv3442avywee5.gif” src=”http://i723.photobucket.com/albums/ww239/johnpatra/th_killing_thumb.gif”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/kt5rtbggpi98ojd43cwm.gif”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/zyi64xga5km1a8xtft.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/kk4wme1gkd7bj0mnj357.gif”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/buab541rb24zr5sgv3fl.png”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/oipudrwp05r0h2w45xls.png”/></a>
</center>



Η παραπάνω λίστα με τα μπαννερς θα ανανεώνεται κάθε φορά που θα βρίσκω ένα παρόμοιο banner.
Αν έχετε να μου προτείνετε κάποιο σας παρακαλώ πείτε το μου αφήνοντας μου ένα σχόλιο.




Κωδικός html μέσα σε κουτάκι (ειδικό για να αντιγράφουν τον κωδικό του banner σας)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα σε όλους.

Σήμερα θα σας δείξω πως να βάλετε έναν κωδικό html μέσα σε κουτάκι.Με αυτόν τον τρόπο περιορίζετε το μεγάλο μήκος ενός κώδικα χωρίς όμως να τον σβήνετε.Αυτό το κουτάκι είναι ειδικό για να βάζετε τους κωδικούς των banner σας ώστε να μπορούν εύκολα να τους αντιγράψουν οι επισκέπτες σας.Μάλιστα όποιος πατάει μέσα στο κουτάκι αυτό επιλέγεται αυτόματα όλο το περιεχόμενο του.Για να δείτε τι ακριβώς εννοώ δείτε τα κουτάκια με τους κωδικούς των banner μου στο http://johnpatrablog.blogspot.com/2009/07/banners.html

Π.χ.



Αν δεν σας αρέσει ο τρόπος με το κουτάκι, θα σας φανεί χρήσιμη αυτή η ανάρτηση:
http://johnpatrablog.blogspot.com/2009/10/html-blog-post-html-code.html

Επίσης για να καταλάβετε τα παρακάτω βεβαιωθείτε ότι έχετε διαβάσει αυτην την ανάρτηση:http://johnpatrablog.blogspot.com/2009/09/picture-html-code.html

Ο κωδικός λοιπόν για το παραπάνω κουτάκι είναι ο:


<textarea class=”example-code” cols=”80″ rows=”3″ onclick=”this.focus();this.select()”>Εδώ_βάζετε_τον_κώδικα_που_θέλετε</textarea>



Αλλάζετε τα πράσινα γράμματα και βάζετε ότι θέλετε (δεν είναι υποχρεωτικό να μπαίνει μόνο κώδικας από banner ,αλλά κυρίως για αυτό χρησιμοποιείται)

Τον παραπάνω κωδικό μπορείτε να τον βάλετε σαν gadget στο blog σας είτε μέσα σε μια ανάρτηση.

Τα σχόλια σας είναι πάντα ευπρόσδεκτα ότι κι αν λένε.