Blogger Tips – Tricks – Gadgets – Templates – Hacks

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: /




Youtube Subscribe Widget – Subscribe Button



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ένα πολύ απλό, αλλά και πολύ πρακτικό widget για το blog μας, μέσα από το οποίο μπορούμε να προβάλλουμε το κανάλι μας στο youtube και δίνουμε τη δυνατότητα στους επισκέπτες του blog μας να εγγράφονται σε αυτό.



Θα φαίνεται κάπως έτσι:







Πολύ απλά και εύκολα μπορείτε να το βάλετε κι εσείς, ακολουθώντας τα παρακάτω βήματα:



Σύνδεση> Πανόπτης> Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη Gadget> HTML/JavaScript και εκεί επικολλούμε τον παρακάτω κωδικό:


<iframe src=http://www.youtube.com/subscribe_widget?p=johnpatrablog1 style=”overflow: hidden; height: 105px; width: 300px; border: 0;” scrolling=”no” frameBorder=”0″></iframe>



Αλλάξτε το johnpatrablog1 με το δικό σας youtube username σας.

Το δικό μου κανάλι π.χ. είναι το http://www.youtube.com/johnpatrablog1

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



Μπορείτε επίσης να αλλάξετε το μέγεθος του widget αλλάζοντας αντίστοιχα τις αριθμητικές μεταβολές που έχω μαρκάρει με πράσινο.


Μην ξεχάσετε να αποθηκεύσετε και είστε έτοιμοι!


Copyrights: /




mp3 file to your blog (html gadget code) – mp3 player to blog



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σήμερα θα δούμε πως μπορείτε να βάλετε αρχεία mp3 στο blog σας.

Έχετε κάποιο τραγούδι/ηχητικό απόσπασμα σε mp3 μορφή και θέλετε να το ανεβάσετε στο blog σας?


Δείτε παρακάτω πόσο εύκολο είναι να το κάνετε!



Αρχικά πρέπει να ανεβάσουμε κάπου το εν λόγω αρχείο. Εαν δεν έχετε server, προτείνω να κάνετε free account στο http://www.fileden.com/ και να ανεβάσετε εκεί τα αρχεία σας. Αν για κάποιο λόγο δεν σας ικανοποιεί το fileden ρίξτε μια ματιά εδώ. Επίσης όσοι γνωρίζετε καλά sites για free mp3 hosting, ας αφήσουν ένα σχόλιο.



Έτσι λοιπόν έχουμε ανεβάσει σε έναν server (δικό μας ή ξένο) το αρχείο μας και από εκεί παίρνουμε το url του αρχείου, δηλαδή τη διεύθυνσή του (http://fileden.com/ ….. .mp3). H διεύθυνση (το url) θα πρέπει να τελειώνει υποχρεωτικά σε .mp3



Ας πούμε ότι το τραγούδι που θέλουμε να βάλουμε είναι το http://www.fileden.com/files/2008/3/19/1823087/kai%20eixa%20tosa%20na%20soy%20pw.mp3



Ο html κωδικός είναι ο εξής:


<object data=”http://natassaki.wordpress.com/wp-content/plugins/audio-player/player.swf” height=”24” id=”audioplayer1″ type=”application/x-shockwave-flash” width=”160“><param value=”http://natassaki.wordpress.com/wp-content/plugins/audio-player/player.swf” name=”movie” />

<param value=”&bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xcccccc&rightbghover=0x999999&righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0x#fd7828&border=0x666666&loader=0x9FFFB8&soundFile= http://www.fileden.com/files/2008/3/19/1823087/kai%20eixa%20tosa%20na%20soy%20pw.mp3” name=”FlashVars” />

<param value=”high” name=”quality” />

<param value=”false” name=”menu” />

<param value=”#fd7828” name=”bgcolor” />

</object>



Τροποποιήσεις στον κώδικα:



1. Αλλάζουμε το http://www.fileden.com/files/2008/3/19/1823087/kai%20eixa%20tosa%20na%20soy%20pw.mp3 με το δικό μας αρχείο.



2. Αλλάζουμε το http://natassaki.wordpress.com/wp-content/plugins/audio-player/player.swf με τον δικό μας player, που δεν έχουμε, οπότε αφήστε το όπως είναι.



3. Αλλάζουμε το 24 στο height=”24” με άλλο ύψος αν θέλουμε να το ψηλώσουμε. Το 24 είναι πάντως το ιδανικό ύψος.



4. Ομοίως και για το width=”160″



5. Αλλάζουμε το χρώμα (#fd7828) στο <param value=”#fd7828” name=”bgcolor” /> αν δεν ταιριάζει το προεπιλεγμένο πορτοκαλί στη σελίδα μας. Τους κωδικούς χρωμάτων τους βρίσκουμε από το /2009/08/html-color-codes-and-names.html



6. Σβήνουμε τα:

<param value=”high” name=”quality” />

<param value=”false” name=”menu” />

<param value=”#fd7828″ name=”bgcolor” />



και έτσι κάνουμε τον player μας σε small size. Δοκιμάστε το να δείτε!



Έτσι λοιπόν διαμορφώνετε τον κωδικό όπως θέλετε εσείς!



Πάμε Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript και εκεί επικολλούμε τον παραπάνω κωδικό για όσους δεν ξέρετε που να το βάλετε.



Τα σχόλιά σας με χαροποιούν ιδιαίτερα!



Ακούστε και ένα από τα αγαπημένα μου τραγούδια αν δεν ξέρετε ποιο τραγούδι να βάλετε:








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


Πηγές: από πηγαίο κώδικα του nikos63.blogspot.com
Copyrights: http://bloggertips.gr/




Screensaver στο site σας!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ναι, καλά διαβάσετε! Βάλτε screensaver στο blog σας! Μάλιστα εξοικονομείται έτσι και ενέργεια. Οπότε κάντε green το website σας! Αν θέλετε να δείτε πως δουλεύει αυτό, μείνετε στο blog μου για 80 δεύτερα περίπου, χωρίς να κουνήσετε καθόλου το ποντίκι σας και θα σας εμφανιστεί.



Για να το βάλετε στο blog σας ακολουθήστε τα παρακάτω βήματα:



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

Σχεδίαση

Επεξεργασία html και με ctrl + F βρίσκετε το </head>



Πριν από το </head> βάζουμε:



Τον παρακάτω κωδικό για την ελληνική έκδοση:


<script language=”javascript” type=”text/javascript” src=”http://www.onlineleaf.com/savetheenvironment.js?lang=gr“></script>





Τον παρακάτω κωδικό για την αγγλική έκδοση:


<script language=”javaScript” type=”text/javascript” src=”http://www.onlineleaf.com/savetheenvironment.js”></script>





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




Πηγές κωδικών: http://www.onlineleaf.com/Advanced/
Copyrights: http://bloggertips.gr/




ΚΟΥΤΙ ΜΕ ΜΗΝΥΜΑ ΠΟΥ ΕΞΑΦΑΝΙΖΕΤΑΙ



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Καινούργιοι bloggers γεια σας. Βρήκα ένα εύκολο κολπάκι σε μια σελίδα με τρυκ για μπλογκ, και σκέφτηκα να σας τη παρουσιάσω. Ειναι πανεύκολη και έχει πλάκα…μπορείτε να τη δείτε στο DEMO blog μου  όπου την έβαλα, στη μέση της σελίδας…

Αντιγράψτε τον κώδικα που σας δίνω στη
ΣΧΕΔΙΑΣΗ=>ΣΤΟΙΧΕΙΑ ΣΕΛΙΔΑΣ=>ΠΡΟΣΘΗΚΗ GADGET=>HTML/JavaScript.



<style>

#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #00529B;

background-color: #BDE5F8;

background-image: url(http://i956.photobucket.com/albums/ae48/pankar61/bomb3.gif);

}

</style><script src=”http://code.jquery.com/jquery-1.2.3.min.js” type=”text/javascript”>

</script>



<script type=”text/javascript”>

$(document).ready(function(){

$(“.close”).click(function(){

$(“#info”).animate({left:”+=10px”}).animate({left:”-5000px”});

});

$(“#info”).fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});



</script>

<div id=”info”>

<a class=”close” href=”#close” style=”float: right;”><img border=”0″ src=”http://i48.tinypic.com/3502jif.jpg” /></a>

ΚΛΕΙΣΕ ΓΡΗΓΟΡΑ ΑΥΤΟ ΤΟ ΚΟΥΤΙ, ΓΙΑΤΙ ΘΑ ΑΝΑΤΙΝΑΧΘΕΙ ==></div>




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

Αυτό είναι όλο…πατήστε ΑΠΟΘΗΚΕΥΣΗ και τελειώσατε…

ΠΡΟΣΟΧΗ όμως…ίσως δεν λειτουργήσει εάν έχετε στη σελίδα σας και άλλο jquery.








ΧΙΟΝΟΠΤΩΣΗ ΜΕΣΑ ΣΤΟ BLOG ΣΑΣ



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Νέοι bloggers γεια σας !Τώρα τις γιορτές κάποιοι από εμάς θέλουν να δώσουν ένα γιορτινό τόνο στη σελίδα τους…Ετσι κι εγώ θα φτιάξω μερικές Χριστουγεννιάτικες αναρτήσεις γιά να είστε έτοιμοι για τις γιορτές….

Ορίστε πως θα βάλετε χιόνι στο blog σας : αντιγρέψτε τον παρακάτω κώδικα που σας δίνω και επικολλήστε τον σαν gadget στο BLOGGER επεξεργασία διάταξης=>Σχεδίαση=>Στοιχεία Σελίδας=>HTML/JavaScript



<script src=’http://snow-effect.googlecode.com/files/snow.js’ type=’text/javascript’>

</script>




…Πατάτε ΑΠΟΘΗΚΕΥΣΗ…και αυτό είναι όλο !Το χιόνι αυτό είναι μικρό και διακριτικό, και δίνει μία χριστουγεννιάτικη ατμόσφαιρα.Μπορείτε να το δείτε και στή σελίδα μου σαν DEMO.Καλό είναι το gadget αυτό να το βάλετε χαμηλά στο σελίδα του blogger.

Σύντομα θα σας δώσω και νέο γιορτινό gadget





Ημερομηνία στην μπάρα του browser τους, όσο βρίσκονται στο site σας!



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Ένα πολύ όμορφο και πρακτικό widget, ιδανικό για ενημερωτικά sites και blogs που, ανεβάζουν συνέχεια αναρτήσεις. Βλέπετε στην παραπάνω εικόνα, πως ακριβώς λειτουργεί.



Είναι πανεύκολο να το βάλετε.



Από τον πανόπτη, πάμε στη Σχεδίαση>Στοιχεία Σελίδας, Προσθήκη gadget, ΗTML/JavaScript και επικολλούμε εκεί τον παρακάτω κωδικό και το αποθηκεύουμε, χωρίς να βάλουμε τίτλο.


<script language=”JavaScript” type=”Text/JavaScript”>

var mytime1=24;

function mytime2() {

mytime3=mytime1+6;

mytime4=mytime1+mytime3;

timexx=mytime1+mytime3+mytime4;

timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;

timexxxx=mytime1+mytime3/timexxx-16*timexx;

timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;

timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;

mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;

mytime6=Math.floor(mytime5);

mytime8=mytime6*mytime3/2+100;

mytime7 = window.setTimeout(“mytime2()”, mytime8);

var mytime9 = new Date();

var mytime10= mytime9.toLocaleString();

document.title = mytime10;}

function op(){mytime2()}

window.onload=op;

</script>


Keep Blogging!

johnpatra




Admin Control Panel για να συνδέεστε από το blog σας στον blogger λογαριασμό σας!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πολλοί αρχάριοι -στην πλειοψηφία τους- bloggers με ρωτάνε συνεχώς, πως θα διαχειρίζονται το blog τους, αφού έχουν βγάλει την μπάρα του blogger (δείτε σχετική ανάρτηση στο http://www.johnpatra.com/2009/07/blogger-blogger-navbar.html). Σε πολλούς από εσας θα φαίνεται γελοία η απορία τους και σε άλλους θα φαίνεται λογική. Εγώ έχω συνηθίσει και συνδέομαι πάντα από το http://draft.blogger.com/home . Αλλά αφού εσείς θέλετε να βρείτε τρόπο να συνδέεστε απευθείας από το blog σας, στον λογαριασμό σας, κάντε τα παρακάτω για να προσθέσετε ένα admin control panel (Πίνακα Ελέγχου) μέσα στο site σας.



Αρχικά πρέπει να βρούμε το μοναδικό BLOG ID μας.

Για να το βρείτε είναι πολύ εύκολο.

Μπείτε π.χ. εκεί που μπαίνετε για να γράψετε μια νέα ανάρτηση.

Στη μπάρα διευθύνσεων έχει το ID σας, όπως φαίνεται στην παρακάτω εικόνα:

Το ID σας, αποθηκεύστε το προσωρινά κάπου, γιατί θα το χρειαστούμε παρακάτω:



Τώρα πάμε Σχεδίαση>Στοιχεία Σελίδας>Προσθήκη gadget>HTML/JAVASCRIPT, και επικόλληση του παρακάτω κωδικού:


<span class=”item-control blog-admin”>

<a href=”http://www.blogger.com/home“>Πανόπτης</a>



<a href=”http://www.blogger.com/post-create.g?blogID=ΧΧΧΧΧ“>Νέα Ανάρτηση</a>



<a href=”http://www.blogger.com/posts.g?blogID=ΧΧΧΧΧ“>Επεξεργασία Αναρτήσεων</a>



<a href=”http://www.blogger.com/rearrange?blogID=ΧΧΧΧΧ“>Στοιχεία Σελίδας</a>



<a href=”http://www.blogger.com/html?blogID=ΧΧΧΧΧ“>Επεξεργασία HTML</a>



<a href=”http://www.blogger.com/logout.g“>Αποσύνδεση</a>

</span>



Όπου βλέπετε blogID=ΧΧΧΧΧ βάζετε στη θέση των Χ το Blog ID σας.



Αποθήκευση κι είστε έτοιμοι.



Τώρα θα μπορείτε να διαχειρίζεστε το site σας, μέσα από αυτό το gadget που έχουμε προσθέσει στο blog μας. Αυτό το gadget ΔΕΝ θα το βλέπουν ΠΟΤΕ οι επισκέπτες σας, οπότε μην ανησυχείτε αν θα φαίνεται ωραίο ή όχι. Θα το βλέπετε ΜΟΝΟ εσείς, ΕΦΟΣΟΝ είστε συνδεδεμένοι στον λογαριασμό σας. Οπότε πάντα θα συνδέεστε από το http://draft.blogger.com/home και μετά θα διαχειρίζεστε το site σας από το admin control panel που μόλις βάλαμε.



Περιμένω τα σχόλιά σας 🙂




Table Border



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα σε όλους σας…Είμαι ο magakos από το Freeware-tools.net και  Freeware-tools.com .

Κάποιες φορές θέλουμε να βάλουμε κάτι καινούργιο στο blog μας και θέλουμε να “χτυπάει” αμέσως στο μάτι του επισκέπτη…

Αυτό θα μπορούσαμε να το πετύχουμε με ένα χρωματισμένο πλαίσιο γύρω του όπως το παρακάτω το οποίο έχει την ιδιότητα να αναβοσβήνει και μπορείτε να το δείτε στην πράξη πατώντας ΕΔΩ (Table Border)

Για να το περάσετε κάνετε τα εξής:

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

2) Διάταξη>Στοιχεία σελίδας>Προσθήκη gadget>HTML/Javascript

3) Επικολλήστε εκεί μέσα τον παρακάτω κώδικα:


<table border=”0″ width=”280″ id=”myexample” style=”border:5px solid green”>

<tr>

<td>Γράψτε εδώ ότι θέλετε….

Γράψτε εδώ ότι θέλετε….

Γράψτε εδώ ότι θέλετε….

</td>

</tr>

</table>

<script language=”JavaScript1.2″>

<!–



//configure interval btw flash (1000=1 second)

var speed=500



function flashit(){

var crosstable=document.getElementById? document.getElementById(“myexample”) : document.all? document.all.myexample : “”

if (crosstable){

if (crosstable.style.borderColor.indexOf(“green”)!=-1)

crosstable.style.borderColor=”red

else

crosstable.style.borderColor=”green

}

}

setInterval(“flashit()”, speed)

//–>

</script>


Αποθηκεύστε και είναι έτοιμο…





Τώρα δώστε βάση στα κομμάτια που έχω χρωματίσει με κόκκινο…

1. (width=”280″) Είναι το μήκος του πλαισίου….Αυξομειώστε τον αριθμό για να διαμορφώσετε το επιθυμητό μέγεθος.



2. (border:5px) Είναι το πάχος της γραμμής του πλαισίου…Αυξομειώστε τον αριθμό για να διαμορφώσετε το επιθυμητό μέγεθος.

3. (Γράψτε εδώ ότι θέλετε….) Είναι το κείμενο που θα υπάρχει μέσα στο πλαίσιο….Βέβαια εκτός από κείμενο μπορείτε να βάλετε link,εικόνα κτλ δίνοντας τον ανάλογο κώδικα, πχ για να βάλετε εικόνα βάλτε τον κώδικα:

<img src=”ΕΔΩ ΤΟ ΛΙΝΚ ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ” />

ή για link βάλτε:

<a href=”ΕΔΩ ΤΟ ΛΙΝΚ ΣΑΣ”>ΕΔΩ ΔΏΣΤΕ ΟΝΟΜΑΣΙΑ ΣΤΟ ΛΙΝΚ</a>



4. (speed=500) Εδώ ρυθμίζετε την ταχύτητα που αναβοσβήνει το πλαίσιο…Αυξομειώστε τον αριθμό για να διαμορφώσετε το επιθυμητό αποτέλεσμα.



5. (red)+(green) Εδώ ρυθμίζετε τον χρωματισμό με τον οποίο θα αναβοσβήνει το πλαίσιο γράψτε το χρώμα που θέλετε ή δώστε τον κωδικό html ενός χρώματος βάζοντας μπροστά πάντα την δίεση (#) (πχ για μαύρο #000000)




Αναζήτηση μέσα στο blog σας – Embed search box



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Στη συνέχεια αυτής της ανάρτησης θα βρείτε τον τρόπο με τον οποίον θα μπορείτε να βάλετε ένα “ψαχτήρι” (κουτί αναζήτησης-search box) στο blog σας από το οποίο οι επισκέπτες σας θα ψάχνουν με λέξεις-κλειδιά το blog σας.
Πολλοί δεν διαγράφουν την μπάρα του blogger (Διαγραφή ή απόκρυψη της μπάρας του blogger (blogger navbar)) επειδή παρέχει search box.Τώρα όμως δεν θα έχετε λόγο να την έχετε αφού θα δείτε εδώ πως θα βάλετε ένα search box.
Λοιπόν όπως πάντα κάνουμε σύνδεση από τον blogger.com ,πάμε Πανόπτης,Διάταξη,Στοιχεία σελίδας,Προσθήκη gadget,HTML/JavaScript.Σαν τίτλο δε χρειάζεται να γράψετε κάτι (θα δείτε αργότερα γιατί δε χρειάζεται) και από κάτω επικολλήστε τον παρακάτω κώδικα:


<p align=”justify”><br/><form id=”searchthis” action=”http://www.johnpatrablog.blogspot.com/search” style=”display:inline;” method=”get”><br/><strong>ΤΙΤΛΟΣ<br/></strong><br/><input id=”b-query” maxlength=”255″ name=”q” size=”20″ type=”text”/><br/><input id=”b-searchbtn” value=”Αναζήτηση” type=”submit”/><br/></form></p>



Σας έχω μαρκάρει με χρώματα τις αλλαγές που πρέπει να κάνετε.
Συγκεκριμένα:
Βάζετε το όνομα του blog σας εκεί που λέει:johnpatrablog
Σαν τίτλο γράφετε ότι θέλετε.π.χ. Αναζητήστε με λέξεις-κλειδιά το blog
Και εκεί που λέει “Αναζήτηση” μπορείτε να το αλλάξετε και να γράψετε “Ψάξε” ή “Search” ή κάτι άλλο.

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

Πείτε κάτι αφήνοντας ένα σχόλιο.




Video DownloadHelper για να κατεβάζετε videos από το youtube



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Γεια σας φίλοι μου, είμαι ο Ηλίας και σήμερα θα σας δείξω πως μπορείτε να κατεβάζετε τα βίντεο που βλέπετε σε οποιοδήποτε Site/Blog  πάντα δωρεάν. Ακούστε με προσεκτικά θα είμαι πολύ σύντομος για να μην σας κουράζω.Πρώτο και βασικότερο που πρέπει να γνωρίζεται είναι ότι αυτό το πρόσθετο δουλεύει μόνο στο Mozilla Firefox.



Ακολουθήστε αυτά τα βήματα προσεκτικά



Βήμα 1ο



Κάντε κλικ στην παρακάτω εικόνα για να κατεβάσετε το πρόσθετο.



Μετά μπορεί να σας δείξει αυτήν την εικόνα




Πατήστε “να επιτρέπεται”.



Βήμα 2ο



Μετά θα σας ρωτήσει για να κάνει την εγκατάσταση του προσθέτου




Εσείς θα πατήσετε “Εγκατάσταση”.



Βήμα 3ο



Μετά περιμένετε να το κατεβάσει




και μόλις το κατεβάσει πατάτε επανεκκίνηση.




Βήμα 4ο



Τώρα θα σας δείξω πως να κατεβάσετε ένα βίντεο με το Video DownloadHelper.

Κοιτάξτε ένα παράδειγμα στο YouTube. Αυτά τα μαύρα σημεία τα έχω βάλω εγώ για να μην γίνει καμία παρεξήγηση με τον κάτοχο του βίντεο.




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



Περισσότερο θα σας χρειαστεί το κάτω δεξιά κουμπάκι που είναι το βασικό σημείο από το οποίο κατεβάζουμε τα βίντεο. Μόλις κάνετε κλικ πάνω θα σας βγάλει μια  λίστα με το όνομα του βίντεο και με τις διαθέσιμες μορφές(MP4, 3gp κλπ) που θα βρίσκονται δίπλα από τον τίτλο του βίντεο. Εσείς κάντε κλικ σε όποιο επιθυμείτε να κατεβάσετε. Ο χρόνος που θα κάνει για να κατεβεί είναι ανάλογα με το μέγεθος του βίντεο.



*Με τον ίδιο τρόπο γίνετε σε όλα τα Site/Blog.




Βήμα 5ο



Μετά αν δεν σας αναγνωρίζει το βίντεο κατεβάστε αυτό το πρόγραμμα για μετατροπή βίντεο.



Από      ΕΔΩ         και από       ΕΔΩ



Αν έχετε κάποιο πρόβλημα μην διστάσετε γράψτε ένα σχόλιο και θα σας απαντήσω όσο ποιο γρήγορα μπορώ.




Free Toolbar for your Blog/Site



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σήμερα όπως καθόμουνα στο υπολογιστή μου από περιέργια μήπως και βρω κανά καινούργιο Gadget γράφω στο Google “gadgets for blogs” και μου εμφανίζει πρώτο πρώτο το Site Conduit.



Σαν ιδέα μου άρεσε και είπα να το ψάξω λίγο, τι λίγο έκατσα και το έψαξα πολύ και βρήκα απίστευτα “Apps” που μπορούσα να βάλω πάνω στον toolbar και μάλιστα δεν χρειαζόταν να τα ψάξεις στα έδειχνε με την σειρά το ίδιο το Site.


toolbar powered by Conduit

Μέχρι στιγμής είναι προσιτό στο Internet Explorer και στο Mozilla Firefox. Τέλος πάντων, για να μην σας τα πολυλογώ θα ξεκινήσω βήμα-βήμα να σας εξηγήσω πως μπορούμε να φτιάξουμε έναν ωραίο Toolbar.

Βήμα 1ο

Κάνετε μια δωρεάν εγγραφή εδώ, και μετά πρέπει να κάνετε επιβεβαίωση μπαίνοντας στα email σας.

Βήμα 2ο


Μετά κάνεις Log In και σε πάει στην αρχική σελίδα αλλά εσείς θα πατήσετε εκεί που λέει Toolbar, μόλις σας πάει εκεί πρώτο πρώτο λέει “Edit Your Toolbar” και δίπλα δείχνει ένα εικονίδιο, που σας πηγαίνει για να δείτε ένα Demo Video  για το πως γίνετε αλλά κατά την γνώμη δεν χρειάζεται για την εύκολο να το φτιάξεις και χωρίς αυτό.

Βήμα 3ο



Ακριβώς από κάτω από το “Edit Your Toolbar” λέει “Add Apps“, αυτό με λίγα λόγια είναι το βασικότερο σημείο της δημιουργίας του Toolbar. Έχει 6 στήλες οι οποίες λέγονται 

Basic
  • Add Your Logo –> Εδώ μπορείτε να βάλετε το δικό σας Logo(εικόνα) ή ένα από αυτά που παρέχει το ίδιο το Site.
  • Add Link Button –> Εδώ μπορείτε να βάλετε ένα Link π.χ. www.iks-team.blogspot.com αλλά θα φαίνεται σαν [iks Team].
  • Add Menu Button –> Είναι ένα ωραίο κάθετο μενού που μπορείτε να βάλετε δικά σας Link π.χ. εγώ έβαλα Home,  About Blog, RSS και Contact βέβαια σε όλα αυτά μπορείτε να βάζετε και εικονίδια.
  • Add News Ticker –> Αυτό είναι ένα κινούμενο κείμενο RSS το οποίο μπορείτε να το ρυθμίσετε σε ότι χρώμα θέλετε και με όση ταχύτητα θέλετε.
  • Add Link in Main Menu –> Είναι κάποια Link που αφορούν τον Toolbar.
  • Add Separator –> Είναι μια διαχωριστική γραμμή ανάμεσα σε κάθε App.(είναι πολύ χρήσιμη βάλτε την) 
  • Add Label –> Μπορείτε να βάλετε μια καρτέλα οτιδήποτε  θέλετε εσείς. 
Search
  • Add Your Search –> Εδώ μπορείτε να βάλετε μια μηχανή αναζήτησης από άλλο Site.
  • Add Community Search –> Εδώ μπορείς να διαλέξεις τα Site που θες να ψάχνει.
  • Add Search Localization –> Εδώ μπορείτε να διαλέξετε την χώρα στην οποία θέλετε να ψάξει.
  • Add Highlighter –>  Εδώ μπορείτε να υπογραμμίζετε κάτι σημαντικό που πιστεύετε εσείς πάνω στην αναζήτηση.
 “Popular
  • Add Radio Player –> Εδώ μπορείτε να βάλετε κάποιους ραδιοφωνικούς σταθμούς που τους έχει το ίδιο το Site.
  • Add Weather –> Εδώ μπορείτε να βάλετε τον καιρό ανάλογα με την περιοχή που βρίσκεστε.
  • Add E-mail Notifier –> Εδώ μπορείτε να βλέπετε αν έχετε νέα email.
  • Add Privacy Button –> Εδώ μπορείτε να διαγράψετε το ιστορικό, τα cookies κλπ. που αφορούν τον Toolbar.
  • Add Your Gadget –> Εδώ μπορείτε να βάλετε το δικό σας Gadget.
  • Add RSS Reader –> Εδώ μπορείτε να βάλετε RRS  του Blog/Site σας.(σας προτείνω να βάλετε το News Ticker είναι ποιο ωραίο και ποιο εύκολο να το φτιάξετε.
Games and Media
  • Add Games –> Εδώ μπορείτε να βάλετε κάποια παιχνίδια που παρέχει το ίδιο το Site.
  • Add TV –> Εδώ μπορείτε να βάλετε κάποια κανάλια που παρέχει το ίδιο το Site.
  • Add Gadgets –> Εδώ μπορείτε να βάλετε κάποια Gadgets που παρέχει το ίδιο το Site.
  • Add Podcast –> Εδώ μπορείτε να βάλετε κάποια Podcasts που παρέχει το ίδιο το Site.
Social and Messages






  • Add Twitter Reader –> Εδώ μπορείτε να βάλετε Live νέα από το Twitter αν βέβαια έχετε λογαριασμό.
  • Add Chat –> Εδώ μπορείτε να προσθέσετε ένα Chat πάνω στον Toolbar.
  • Add Message Box –> Μπορείτε να βλέπετε τα μηνύματά σας από το Chat. 
  • Add Message Ticker –> Εδώ μπορείτε να βάλετε ένα κινούμενο μήνυμα παρόμοιο με το News Ticker. 
  • Add Facebook  –> Εδώ μπορείτε να βάλετε ένα εικονίδιο του Facebook από το οποίο θα μπορεί κάποιος να συνδέεται κατευθείαν.


 και “Advanced
  • Add Your Component (HTML) –> Εδώ μπορείτε να φτιάξετε ότι θέλετε αρκεί να ξέρετε από κώδικα HTML.
  • Add XML Menu –> Εδώ μπορείτε να φτιάξετε ένα δικό σας μενού.
  • Add Your Program Launcher –>Εδώ μπορείτε να προσθέσετε ένα πρόγραμμα για το υπολογιστή. 
Τώρα εσείς μπορείτε να διαλέξετε ποια από αυτά θέλετε. 


Βήμα 4ο



Αν θέλετε μπορείτε να μπείτε και στο MarketPlace για να βρείτε και άλλα πολλά Apps για τον Toolbar σας. Και αν θέλετε κάτι συγκεκριμένο είναι χωρισμένες και σε κατηγορίες.

Βήμα 5ο



Μετά πάτε στα Banners, όπου εκεί θα βρείτε πολλά Banners σε όλες τις διαστάσεις και σε όλες τις κατηγορίες. Και αναρωτιέστε τι να τα κάνετε τα Banners, θα τα βάζετε κάπου μέσα στις αναρτήσεις σας ή στο Blog/Site σας και κάνοντας οι αναγνώστες σας κλικ πάνω στο Banner θα το κατεβάζει κατευθείαν.  Όπως εγώ

Βήμα 6ο



Αν θέλετε μπορείτε να πάτε εκεί που λέει “Analytics” όπου μπορείτε να δείτε πόσοι κατέβασαν τον Toolbar σας και άλλα πολλά. 

Βήμα 7ο 







Αν θέλετε  μπορείτε να κερδίσετε και λεφτά με το “Rewards”, αν σας ενδιαφέρει κοιτάξτε το. Εγώ δεν μπορώ να σας πω περισσότερα πάνω σε αυτό γιατί δεν γνωρίζω. 

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

Αν θέλετε κατεβάστε και τον δικό μου Toolbar.


toolbar powered by Conduit





Βάλτε τους κωδικούς σας -html codes, scripts- σε ειδικά σχεδιασμένα κουτιά



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Γεια σας,



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

Όσοι ακόμα δεν έχετε καταλάβει τι εννοώ, απλά κοιτάξτε παρακάτω. Βλέπετε που έχω βάλει τους html κωδικούς μέσα σε κάτι ειδικά κουτάκια?



Σήμερα θα σας δείξω πως να το κάνετε κι εσείς αυτό.




Προσέξτε (!!!):



Αυτή η ανάρτηση δεν έχει καμία σχέση με αυτην την ανάρτηση: http://www.johnpatra.com/2009/10/html-blog-post-html-code.html (επισκεφτείτε την!)



Το Html code converter κάνει τους html κώδικες ορατούς. Η σημερινή ανάρτηση δεν έχει καμία σχέση με αυτό. Η σημερινή ανάρτηση, απλά δείχνει έναν ωραίο τρόπο για να εμφανίζονται ωραία οι κωδικοί αυτοί μέσα σε πλαίσια.



Απο την στιγμή που θέλετε να κάνετε ορατούς τους html κωδικούς, θα τους μετατρέπετε πάντα.



Επίσης μέσα σε αυτά τα πλαίσα-κουτιά δεν είναι απαραίτητο να βάζετε μόνο scripts. Μπορείτε να βάζετε ότι θέλετε.





Λοιπόν κάντε σύνδεση στον blogger account σας, και από τον πανόπτη μας, πατάμε στην καρτέλα “Σχεδίαση” (γιατί το αλλάξανε αυτό? εγώ ακόμα Διάταξη το λέω 🙂.



Πατήστε “Επεξεργασία html”.



Με την βοήθεια του ctrl+F, βρείτε τον παρακάτω κωδικό:


]]></b:skin>



Αφού τον βρείτε, επικολλήστε αμέσως από πάνω του, τον παρακάτω CSS κωδικό:


.codeview {

font-family: Arial, Helvetica, sans-serif;

color: #CC0000;

margin : 15px 35px 15px 15px;

padding : 10px;

clear : both;

list-style-type : none;

border-top : 2px solid #cccccc;

border-right : 2px solid #cccccc;

border-bottom : 2px solid #cccccc;

border-left : 2px solid #cccccc;

background-color: #FFFFFF;

}

.codeview li {

font-size : 13px;

line-height : 24px;

font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;

color : #333333;

font-weight : normal;

margin : 0;

padding : 0;

}



Αποθήκευσε το πρότυπό σου.



Πατήστε τώρα στην καρτέλα που λέει “Ρυθμίσεις”.



Στις υποκαρτέλες πατήστε στη “Διαμόρφωση”.



Κυλήστε με το ποντίκι σας κάτω-κάτω.



Εκεί που λέει “Πρότυπο Ανάρτησης”, βλέπετε που έχει δίπλα ένα πλαίσιο.



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



Λοιπόν μέσα σε αυτό το πλαίσιο επικολλήστε τον παρακάτω κωδικό:


<div class=”codeview”>

Βάλετε ανάμεσα στους δύο κωδικούς ότι θέλετε να εμφανίζεται μέσα στο κουτάκι.

</div>



Αποθηκεύστε τις ρυθμίσεις σας.



Είστε σχεδόν έτοιμοι.



Από εδώ και πέρα κάθε φορά που θα πηγαίνετε να γράψετε μια ανάρτηση (όταν γράφετε μια νέα ανάρτηση να βρισκόσαστε στην καρτέλα “Επεξεργασία html” και όχι στην καρτέλα “Σύνθεση”), θα βλέπετε τους κωδικούς που σας είπα να αποθηκεύστε πριν στις ρυθμίσεις>διαμόρφωση. Αν δεν θέλετε να βάλετε κάποιο κωδικό απλά τους σβήνετε και συνεχίζετε να γράφετε την ανάρτηση. Αν θέλετε όμως να βάλετε κάτι που να φαίνεται μέσα στο κουτάκι, το βάζετε ανάμεσα στους δύο κωδικούς. Φυσικά σβήνετε τα δικά μου λόγια, τα “Βάλετε ανάμεσα στους δύο κωδικούς ότι θέλετε να εμφανίζεται μέσα στο κουτάκι.”. Αυτά τα έχω γράψει για να σας βοηθήσω. Αυτά τα σβήνετε σε κάθε περίπτωση. Εσείς απλά βάζετε αυτό που θέλετε να φαίνεται στο κουτάκι ανάμεσα στο <div class=”codeview”> και ανάμεσα στο </div>. Σας τα είπα αναλυτικά και πιστεύω να τα καταλάβατε. Αν όχι, αφήστε ένα σχόλιο και πείτε μου, που “κολλάτε”.


Α και κάτι άλλο:



Μπορείτε να ρυθμίσετε μόνοι σας τα χρώματα του κουτιού. Για παράδειγμα κάποιος που έχει μαύρο background (εγώ!) δεν θα βάλει σκούρα χρώματα στο κουτί, αλλά φωτεινά. Και, αντίθετα, κάποιος που έχει άσπρο φόντο στο blog του, θα βάλει σκούρα χρώματα στο κουτί για να δημιουργείται η απαραίτητη αντίθεση χρωμάτων.



Αλλά πως τα αλλάζετε?



Πολύ απλά από τον κωδικό που επικολλήσαμε πάνω από το ]]></b:skin>.



Σε αυτόν τον κωδικό βλέπετε που έχει διάφορους κωδικούς τέτοιας μορφής: #000000 ?



Στη γλώσσα του html, κάθε χρώμα συμβολίζεται με ένα # και έξι νούμερα μετά από το #.



Επομένως το #000000 είναι ένα χρώμα και συγκεκριμένα το μαύρο.



Πειραματιστείτε μόνοι σας λίγη ώρα με τους κωδικούς των χρωμάτων, μέχρι να φτιάξετε έναν ωραίο συνδιασμό που να ταιριάζει και με τα χρώματα του blog σας.



Για να βρείτε εύκολα και γρήγορα τους 6ψήφιους κωδικούς των χρωμάτων της αρεσκείας σας πατήστε εδώ!



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



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




Online κομπιουτεράκι στο blog σας – HTML Calculator for your desktop



Print Friendly and PDFPrintPrint Friendly and PDFPDF



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

Αυτό το widget πρέπει να το έχει κάθε blog που ασχολείται με:
Στοίχημα, Χρηματιστήριο-Οικονομία, Μαθηματικά-Φυσικοχημείες-Τεχνολογία και όποιο άλλο blog που ασχολείται με αριθμούς. Γενικώς είναι ένα πολύ χρήσιμο εργαλείο.

Μάλιστα σας έχω δύο τέτοια widgetάκια για να διαλέξετε ποιο σας αρέσει περισσότερο.

Η προσθήκη του είναι απλή, σαν οποιοδήποτε άλλο widget.

(σχεδίαση>στοιχεία σελίδας>προσθήκη gadget>HTML-JAVASCRIPT)

Widget 1:

Κωδικός:


<style type="text;css">
.calcBtn
{
font-weight : bold/
width: 32px;
height: 32px;
}
</style>

<script language="JavaScript">

function Calculator_OnClick(keyStr)
{
var resultsField = document.calculator.calcResults;

switch (keyStr)
{
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case ".":

if ((this.lastOp==this.opClear) || (this.lastOp==this.opOperator))
{
resultsField.value = keyStr;
}
else
{
// ignore extra decimals
if ((keyStr!=".") || (resultsField.value.indexOf(".")<0))
{
resultsField.value += keyStr;
}

}

this.lastOp = this.opNumber;
break;

case "*":
case "/":
case "+":
case "-":
if (this.lastOp==this.opNumber)
this.Calc();
this.evalStr += resultsField.value + keyStr;

this.lastOp = this.opOperator;
break;

case "=":
this.Calc();
this.lastOp = this.opClear;
break;

case "c":
resultsField.value = "0";
this.lastOp = this.opClear;
break;

default:
alert("’" + keyStr + "’ not recognized.");
}

}

function Calculator_Calc()
{
var resultsField = document.calculator.calcResults;
//alert("eval:"+this.evalStr+resultsField.value);
resultsField.value = eval(this.evalStr+resultsField.value);
this.evalStr = "";
}

function Calculator()
{
this.evalStr = "";

this.opNumber = 0;
this.opOperator = 1;
this.opClear = 2;

this.lastOp = this.opClear;

this.OnClick = Calculator_OnClick;
this.Calc = Calculator_Calc;
}

gCalculator = new Calculator();

</script>


<form name="calculator">

<table border="2" cellpadding="4" cellspacing="0" bordercolor="#000000">
<tr>
<td>
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="4">
<input type="text" name="calcResults" value="0" size="20" style="text-align: right" /></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" C " name="calclear" onclick="gCalculator.OnClick('c')" /></td>
<td></td>
<td> </td>
<td><input class="calcBtn" type="button" value=" = " name="calequal" onclick="gCalculator.OnClick('=')" /></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 7 " name="cal7" onclick="gCalculator.OnClick('7')" ondblclick="gCalculator.OnClick('7')" /></td>
<td><input class="calcBtn" type="button" value=" 8 " name="cal8" onclick="gCalculator.OnClick('8')" ondblclick="gCalculator.OnClick('8')" /> </td>
<td><input class="calcBtn" type="button" value=" 9 " name="cal9" onclick="gCalculator.OnClick('9')" ondblclick="gCalculator.OnClick('9')" /> </td>
<td><input class="calcBtn" type="button" value=" / " name="caldiv" onclick="gCalculator.OnClick('/')" /></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 4 " name="cal4" onclick="gCalculator.OnClick('4')" ondblclick="gCalculator.OnClick('4')" /> </td>
<td><input class="calcBtn" type="button" value=" 5 " name="cal5" onclick="gCalculator.OnClick('5')" ondblclick="gCalculator.OnClick('5')" /> </td>
<td><input class="calcBtn" type="button" value=" 6 " name="cal6" onclick="gCalculator.OnClick('6')" ondblclick="gCalculator.OnClick('6')" /> </td>
<td><input class="calcBtn" type="button" value=" * " name="calmul" onclick="gCalculator.OnClick('*')" /></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 1 " name="cal1" onclick="gCalculator.OnClick('1')" ondblclick="gCalculator.OnClick('1')" /> </td>
<td><input class="calcBtn" type="button" value=" 2 " name="cal2" onclick="gCalculator.OnClick('2')" ondblclick="gCalculator.OnClick('2')" /> </td>
<td><input class="calcBtn" type="button" value=" 3 " name="cal3" onclick="gCalculator.OnClick('3')" ondblclick="gCalculator.OnClick('3')" /> </td>
<td><input class="calcBtn" type="button" value=" + " name="calplus" onclick="gCalculator.OnClick('+')" /></td>
</tr>
<tr>
<td> </td>
<td><input class="calcBtn" type="button" value=" 0 " name="cal0" onclick="gCalculator.OnClick('0')" ondblclick="gCalculator.OnClick('0')" /> </td>
<td><input class="calcBtn" type="button" value=" . " name="caldec" onclick="gCalculator.OnClick('.')" /></td>
<td><input class="calcBtn" type="button" value=" – " name="calminus" onclick="gCalculator.OnClick('-')" /></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<font face="Tahoma"><a target="_blank" href="http://johnpatrablog.blogspot.com/2010/07/online-blog-html-calculator-for-your.html"><span style="font-size: 6pt; text-decoration: none">Johnpatrablog</span></a></font>




Widget 2:

Κωδικός:


<!– This Script is from www.htmlfreecodes.com, Coded by: Krishna Eydat–>
<center>

<form name="Keypad" action="">
<table>
<b>
<table border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<tr>
<td colspan=3 align=middle>
<input name="ReadOut" type="Text" size="24" value="0" width="100%" />
</td>

<td>
<input name="btnClear" type="Button" value=" C " onclick="Clear()" />
</td>
<td><input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()" />
</td>
</tr>
<tr>
<td>
<input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)" />
</td>
<td>
<input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)" />
</td>
<td>
<input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)" />
</td>
<td>
</td>
<td>
<input name="btnNeg" type="Button" value=" +/- " onclick="Neg()" />
</td>
<td>
<input name="btnPercent" type="Button" value=" % " onclick="Percent()" />
</td>
</tr>
<tr>
<td>
<input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)" />
</td>
<td>
<input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)" />
</td>
<td>
<input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)" />
</td>
<td>
</td>
<td align=middle><input name="btnPlus" type="Button" value=" + " onclick="Operation('+')" />
</td>
<td align=middle><input name="btnMinus" type="Button" value=" – " onclick="Operation('-')" />
</td>
</tr>
<tr>
<td>
<input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)" />
</td>
<td>
<input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)" />
</td>
<td>
<input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)" />
</td>
<td>
</td>
<td align=middle><input name="btnMultiply" type="Button" value=" * " onclick="Operation('*')" />
</td>
<td align=middle><input name="btnDivide" type="Button" value=" / " onclick="Operation('/')" />
</td>
</tr>
<tr>
<td>
<input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)" />
</td>
<td>
<input name="btnDecimal" type="Button" value=" . " onclick="Decimal()" />
</td>
<td colspan=3>
</td>
<td>
<input name="btnEquals" type="Button" value=" = " onclick="Operation('=')" />
</td>
</tr>
</table>
</b></table>

</form>
</center>
<font face="Verdana, Arial, Helvetica" size=2>
<script language="JavaScript">
<!– Begin
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( ‘+’ == PendingOp )
Accumulate += parseFloat(Readout);
else if ( ‘-‘ == PendingOp )
Accumulate -= parseFloat(Readout);
else if ( ‘/’ == PendingOp )
Accumulate /= parseFloat(Readout);
else if ( ‘*’ == PendingOp )
Accumulate *= parseFloat(Readout);
else
Accumulate = parseFloat(Readout);
FKeyPad.ReadOut.value = Accumulate;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accumulate = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accumulate);
}
// End –>
</script>

<font face="Tahoma"><a target="_blank" href="http://johnpatrablog.blogspot.com/2010/07/online-blog-html-calculator-for-your.html"><span style="font-size: 6pt; text-decoration: none">Johnpatrablog</span></a></font></font>



Κάτω από κάθε widget έχω βάλει έναν σύνδεσμο που οδηγεί εδώ. Σας παρακαλώ μην τον σβήσετε, αλλά αν σας ενοχλεί τόσο δεν μπορώ να σας απαγορέψω να το διαγράψετε. Αλλά πόσο να σας ενοχλήσει? Τον έχω κάνει τόσο μικρό, που σχεδόν δε φαίνεται!

Αποθηκεύστε το widget κι απολαύστε το!

Ελπίζω να σας φανεί χρήσιμο 🙂

Διαδώστε αυτό το post στο facebook με ένα απλό πάτημα του παρακάτω κουμπιού:




“Αναγκάστε” τους, όταν αντιγράφουν από το blog σας να βάζουν πάντα την πηγή!



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Πολλοί bloggers ενοχλούνται όταν κάποιος αντιγράφει αναρτήσεις από το blog τους και δεν το γράφει και αφήνει να εννοηθεί ότι είναι δικιά του. Άλλοι το κάνουν επίτηδες και άλλοι το ξεχνούν ή το θεωρούν περιττό. Για αυτούς που το κάνουν συνειδητά, δεν έχω τη λύση. Αλλά λίγοι είναι αυτοί. Οι πιο πολλοί βαριούνται να γράψουν την πηγή ή το ξεχνούν και λένε “δε βαριέσαι μορε…”. Για αυτούς έχω τη λύση. Η λύση ακούει στο όνομα http://www.tynt.com/. Από αυτό το site θα σας εξηγήσω πως θα βάλετε ένα widget, το οποίο ακούστε τι κάνει: Κάθε φορά που οποιοσδήποτε μαρκάρει οτιδήποτε μέσα στο blog σας και πατάει copy, μαζί με αυτό που αντέγραψε προστίθεται αυτόματα και αόρατα η πηγή αυτού που αντιγράφηκε. Και μετά εκεί που αυτός θα το επικολλήσει (paste), αυτόματα θα προστεθεί από κάτω και η πηγή από εκεί που το πήρε. Καλό?? Ελπίζω να μην σας μπέρδεψα. Όσοι δεν το έχετε καταλάβει καλά, κάντε τον κόπο να το βάλετε και να δείτε πως λειτουργεί. Είναι πολύ πρωτοποριακή λειτουργία και θα αφήσει άναυδους όλους αυτούς που σας αντιγράφουν. Αν το βάλετε αυτό και μετά δείτε κάπου άρθρο σας χωρίς να αναγράφεται η πηγή, τότε αυτός θέλει ένα γερό χέρι ξύλο και δεν έχει καμιά δικαιολογία. Γιατί ουσιαστικά είναι σαν να βάζετε από μόνοι σας την πηγή. Μάλιστα το είχα βάλει και εγώ αυτό κάποτε, αλλά δεν ήξερα ακριβώς τι έκανε. Όταν συνειδητοποίησα τι ακριβώς κάνει, το έβγαλα αμέσως γιατί όπως ξέρετε δεν έχω κόμπλεξ με το αν με αντιγράφουν με ή χωρίς πηγή. Λοιπόν πολλά είπα’ καιρός να σας εξηγήσω πως θα το βάλετε 🙂

1. Μπαίνετε στο http://www.tynt.com/
2. Πατώντας το “FREE! Get Started >” φτιάχντε στα γρήγορα έναν λογαριασμό. (εκεί που λέει “domain” βάζετε τη διεύθυνση του blog σας)
3. Τώρα κάνετε Log Ιn από πάνω δεξιά με τα στοιχεία που μόλις βάλατε.
4. Από τις καρτέλες πάνω, βρείτε και πατήστε στο “Link Setup”
5. Τώρα κάτω από το “Link Setup” θα βρείτε τέσσερις υποκαρτέλες. Αν έχετε χρόνο και όρεξη μπορείτε να τις ψάξετε και θα βρείτε διάφορα ωραία. Εγώ θα σας οδηγήσω στον προορισμό από τον απλό και ομαλό δρόμο χωρίς να ασχοληθώ με πιο σύνθετα πράγματα. Με πιάνετε? Πατήστε λοιπόν την πρώτη υποκαρτέλα με το όνομα “Attribution Link”.
6. Το πρώτο κουτάκι να είναι τσεκαρισμένο. Εκεί που λέει “Link Prefix:” σας έχει ήδη το “Διαβάστε περισσότερα: “. Μπορείτε να βάλετε κάτι άλλο, πχ: “Aυτό το άρθρο προέρχεται από το:”. Στο “Link Suffix:” γράφετε, αν θέλετε, κάποια δική σας σημείσωση. Στο “Link:” καλύτερα βάλτε το “Page Title and URL”. Το δεύτερο κουτάκι να είναι κι αυτό τσεκαρισμένο και καλύτερα να έχετε την πρώτη επιλογή επιλεγμένη, το “Attribution”.
*** Από κάτω μπορείτε να πατάτε το “Update Preview” και να βλέπετε πάνω-δεξιά στο “Preview” όλες τις αλλαγές που κάνετε. ***
7. Όταν τα φτιάξετε όπως θέλετε, θα δείτε δεξιά και κάτω έναν html κώδικα. Μην τον πειράξετε αυτόν τον κώδικα και ανοίξτε μια νέα καρτέλα (ctrl+T) στον browser σας.
8. Τώρα πάμε στον Πανόπτη μας, από εκεί στη Διάταξη ή στη Σχεδίαση με τις νέες αλλαγές και μετά στην επεξεργασία html.
9. Με την βοήθεια του ctrl+F βρίσκουμε το </body> . Λογικά είναι στο τέλος του κώδικα.
10. Από πάνω ή πριν το </body> επικολλούμε τον κώδικα που δημιουργήσαμε πριν, πατάμε αποθήκευση κι είμαστε έτοιμοι!

Τώρα δοκιμάστε να αντιγράψετε κάτι από το blog σας και επικολλήστε το κάπου και θα δείτε που αυτόματα θα σας βγάλει από κάτω την πηγή του άρθρου.

Αν σας άρεσε, δημοσιεύστε το στον facebook wall σας, πατώντας το κουμπάκι από κάτω:




Facebook Like / Recommend Button For Blogger – Είναι το καλύτερο με διαφορά!



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Καλησπέρα σας,

το ξέρω, τελευταία έχω ελάχιστο ελεύθερο χρόνο και δεν προλαβαίνω να ασχοληθώ με τα του blog. Πολλοί από εσας ίσως το έχετε διαπιστώσει με την καθυστέρηση απάντησης στα μαιλς ή στα σχόλια. Να ευχαριστήσω για ακόμη μια φορά τον magako και ειδικά τον φίλο ekabiti που κραταν αυτο το blog σε μια σταθερή πορεία και χωρίς εμένα.

Αλλά με τη σημερινή μου ανάρτηση θα καλύψω όλο αυτό το κενό που έχω αφήσει. Παρακάτω θα σας πω το μακραν καλύτερο Facebook Like / Recommend Button For Blogger. Το έβαλα εγώ αμέσως. Με εντυπωσιάζει γιατί είναι πολύ γρήγορο. Θα το διαπιστώσετε και μόνοι σας (είναι στο τέλος της ανάρτησης – δοκιμάστε το) .

Πάμε γρήγορα να σας πω πως θα το βάλετε (εγώ το έβαλα σε περίπου 40 δευτερόλεπτα):

1.Σύνδεση στο account
2.Διάταξη
3.επεξεργασία html
4.Επέκταση προτυπών γραφικών στοιχείων
5.με το ctrl+F ψάξε να βρεις το <data:post.body/>
6.αμέσως από κάτω του βάλε τον παρακάτω κωδικό:
(αν βρεις δύο ή παραπάνω <data:post.body/> λογικά είναι το τελευταίο)


<b:if cond=’data:blog.pageType == "item"’>
<iframe allowTransparency=’true’ expr:src=’"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:450px; height:40px;’/>
</b:if>


Έτσι αυτό το γαμάτο widget θα εμφανίζεται μόνο στη σελίδα των αναρτήσεων και ΟΧΙ στην αρχική σελίδα. Αν θέλετε να εμφανίζεται παντού (αρχική σελίδα+σελίδα αναρτήσεων) απλά διέγραψε τους κόκκινους κωδικούς.
7. και τώρα κάνε αποθήκευση κι είσαι έτοιμος! Καλό?

Δοκίμασε το widget(πάτα το αν σου άρεσε η ανάρτηση):