ΚΑΝΤΕ HACKING ΣΕ WEBSITES

Σήμερα θα δούμε πως μπορούμε να πειράξουμε όποια ιστοσελίδα θέλουμε. Να ξεκαθαρίσω ότι αυτό είναι ένα είδος hacking αλλά όχι τέτοιο που να καταστρέφει websites και blogs άλλων. Αυτό δεν πρόκειται να το δείξω γιατί υπάρχουν πολύ κακοπροαίρετοι εκεί έξω. Αυτό το trick είναι για διασκέδαση. Να ξεκαθαρίσουμε κάτι: ένας hacker ποτέ δεν προκαλεί ζημιά. Αυτές τις δουλειές τις κάνουν οι crackers.
Ανοίξτε το browser (προτείνω τον firefox) και στη μπάρα διευθύνσεων βάλτε τη διεύθυνση που θέλετε και πατήστε enter. Εφόσον φορτώσει η σελίδα διαγράψτε τη διεύθυνση από τη μπάρα διευθύνσεων και κάντε αντιγραφή - επικόλληση (copy - paste) σ' αυτήν το παρακάτω JavaScript και πατήστε εnter:

javascript:document.body.contentEditable='true'; document.designMode= 'on' ; void 0

Με την πρώτη ματιά δεν άλλαξε τίποτα αλλά αν κάνετε κλικ πάνω σε μια φωτογραφία θα δείτε ότι μπορείτε να τη μεγαλώσετε, να τη μικρύνετε, να τη σύρετε ή να τη σβήσετε. Αν κάνετε κλικ σε ένα κείμενο θα δείτε ότι μπορείτε να σβήσετε το κείμενο ή να το αλλάξετε (και θα έχει την ίδια γραμματοσειρά). Όταν τελειώσετε πάτε στη μπάρα διεθύνσεων σβήστε το σκριπτάκι και βάλτε τη διεύθυνση του website αλλά μην πατήσετε enter. Τώρα με ένα πρόγραμμα που μπορείτε να πάρετε screenshots από την οθόνη σας αποθανατίστε το δημιούργημα σας. Τέτοια προγράμματα υπάρχουν άφθονα στο internet. Ένα καλό πρόγραμμα είναι το ScreenHunter. Αν θέλετε μπορείτε να το αποθηκεύσετε. Πάτε αρχείο, αποθήκευση ως, δώστε όνομα και κάντε το save σαν πλήρη ιστοσελίδα. Φυσικά το παρακάτω γίνεται και με Photoshop το οποίο όμως θέλει χρόνο υπομονή και γνώσεις. Κάτω σας έχω ένα παράδειγμα. Κάντε διπλό κλικ για να δείτε την εικόνα και διβάστε την προσεκτικά. Καλή διασκέδαση!

Νιώσατε λίγο hackers? ;-D

ΔΕΚΑ ΠΡΟΤΑΣΕΙΣ

Σήμερα δε θα ασχοληθούμε με κώδικες και πειράγματα στο template. Έχω να σας προτείνω ορισμένα πολύ καλά web sites με τα οποία μπορείτε να κάνετε πολλά και θαυμαστά πράγματα. Το κυριότερο; Όλα είναι free of charge, δηλαδή τζάμπα.
Το πρώτο είναι το FOTOTRIX. Πολλοί θέλουν να κάνουν επεξεργασία φωτογραφίας, να προσθέσουν στις φωτογραφίες τους διάφορα εφέ και να κάνουν πολλά άλλα πράγματα. Το κορυφαίο πρόγραμα είναι to Photoshop αλλά δε μαθαίνεται γρήγορα και εύκολα. Το FOTOTRIX θα σας ενθουσιάσει. Το μόνο που πρέπει να κάνετε είναι να κάνεται upload τη φωτογραφία που θέλετε να επεξεργαστείτε από το pc σας ή να δώσετε τη διεύθυνση αν είναι στο δύκτιο. Μετά πειραματιστείτε. Όταν φτάσετε στο επιθυμητό αποτέλεσμα κάντε download ή πάρτε τον κώδικα (ναι έχει και code generator). Απλά εξοικονομήστε άφθονο χρόνο για να εξερευνήσετε το FOTOTRIX.
Ένα από τα κορυφαία (κατά την προσωπική μου άποψη) ελληνικά web sites είναι το Foracamp. Απλά περιέχει τα πάντα για την τεχνολογία. Tutorials, συμβουλές, νέα, overclocking, design και ότι άλλο χρειάζεστε.
Άλλη λύση για επεξεργασία των φωτογραφιών σας μέσω video tutorials δίνει το metacafe. Tips και tricks για να κάνετε θαύματα με τις φωτογραφίες σας.
Θέλετε γρήγορο, free και νόμιμο dowloading μουσικής; Σας προτείνω το Clickster. Δε μιλάμε για torrents ούτε για peer to peer. Κατεβάζετε απευθείας από την database του Clickster η οποία περιέχει πάνω από 150.000.000 τραγούδια (και ο αριθμός αυξάνεται συνεχώς). Από ελληνική μουσική δεν παρέχει πολλά πράγματα αλλά ή ταχύτητα που κατεβάζει ένα τραγούδι θα σας ευχαριστήσει. Προσωπικά βρήκα τραγούδια που τα έψαχνα και δεν τα έβρισκα ούτε στα μεγαλύτερα τορεντάδικα. Και είναι απολύτως νόμιμο. Απλά κατεβάστε το προγραμματάκι.
Θέλετε να βάλετε μουσική στο blog σας ή στο web site σας; Βάλτε ένα κορυφαίο podcast. Δημιουργείστε το γρήγορα και εύκολα στο Playlist. Μπορείτε να προσθέσετε μέχρι 200 τραγούδια από την πλούσια database του. Το καλό είναι ότι δεν ξεκινάει αυτόματα με το άνοιγμα ενός blog ή web site όπου υπάρχει (είναι αρκετά ενοχλητικό). Όποιος θέλει να ακούσει μουσική πατάει το κουμπί play.
Το TheComputerTricks θα σας μάθει να κάνετε διάφορα κολπάκια στα windows, στα παιχνίδια, στο Office, στο internet. Αποκλείεται να σας μπερδέψει ή να σας δυσκολέψει.
Αν θέλετε να περάσετε ευχάριστα την ώρα σας και όχι μόνο επισκευτείτε το Berro. Funny tricks, funny videos, funny photos κ.α.
Δύο web sites με συμβουλές, κόλπα, οδηγίες και άλλα για τους υπολογιστές είναι το Helpwithpcs και το Free Computer Tips and Tricks. Επισκευτείτε τα και δε θα χάσετε.
Τελευταίο άφησα το Widgetbox. Βρείτε δωρεάν widgets για το blog σας ή φτιάξτε το δικό σας widget (πάλι δωρεάν). Το συγκεκριμένο web site είναι πηγή widgets για πολλούς bloggers απ' όλο τον κόσμο. Χρησιμοποιήστε το και εσείς.
Καλή διασκέδαση.

ΨΑΧΤΗΡΙ 4 ΣΕ 1

Τα ψαχτήρια ή μηχανές αναζήτησης (search engines) είναι πολύ διαδεδομένα στα blogs και στα web sites. Πολλές φορές θέλουμε να κάνουμε αναζητήσεις μόνο στο blog μας, άλλες φορές στη google, άλλες φορές στο technorati και άλλες φορές στο blogspot. Αυτό σημαίνει ότι πρέπει να μπαινοβγαίνουμε σε σελίδες και να χάνουμε πολύ χρόνο. Υπάρχει τρόπος να τα έχουμε όλα σε ένα. Και μάλιστα στο blog μας.
Μπαίνουμε στο λογαριασμό μας και πάμε πανόπτης, διάταξη, προσθήκη gadget και στο παράθυρο που ανοίγει διαλέγουμε HTML/JavaScript. Εκεί μέσα βάζουμε τον παρακάτω κώδικα με αντιγραφή - επικόλληση (copy - paste):

<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogspot</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://yourblog.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="15" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="yourblog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="yourblog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="yourblog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>

Όποιο κομμάτι (yourblog) του κώδικα έχω τονισμένο (bold) το αντικαθιστάτε με τη διεύθυνση του blog σας. Το πρώτο που είναι τονισμένο (το here) αν θέλετε το αφήνετε έτσι αν όχι μπορείτε να βάλετε το όνομα του blog σας. Πατήστε αποθήκευση (save). Μετά πάμε πάλι στον πανόπτη και από εκεί διάταξη και επεξεργασία HTML. Πατώντας το Ctrl+F βρίσκουμε το παρακάτω κομμάτι του κώδικα:
body {
και βλέπουμε ακριβώς από πάνω του να λέει:

/* Use this with templates/template-twocol.html */

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

/** css for the search box */
div#pm-search ul { /* unordered list */
margin-top: 0;
margin-right: 0;
margin-left: 0px;
margin-bottom: 5px;
padding: 0;
}
div#pm-search li { /* each list element */
list-style-type: none; /* don't edit this */
display: inline; /* don't edit this */
cursor: pointer; /* don't edit this */
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
margin-left: 0px;
text-indent: 0px;
padding: 0;
}
div#pm-search form { /* the search form */
margin: 0;
padding: 0;
}
div#pm-search-h {
display: block; /* don't edit this */
}
div#pm-search-g,
div#pm-search-b,
div#pm-search-t {
display: none; /* don't edit this */
}
div#pm-search input { /* the textbox and submit button */
background-color: transparent;
border: 1px dotted #999;
color: #999;
}
.pm-search-selected { /* which search service is currently selected */
color: #999;
border-bottom: 1px dotted #999;
}
.pm-search-unselected { /* which search services are not selected */
color: #777;
border-bottom: 1px dotted #777;
}

Το τελευταίο στάδιο είναι να προσθέσουμε και ένα κομμάτι JavaScript. Βρίσκουμε με το ψαχτήρι μας στο κάτω μέρος της σελίδας το κομμάτι του κώδικα:

</b:skin>

Κάντε κλικ δίπλα σ' αυτό το κομμάτι και πατήστε μια φορά enter για να δημιουργηθεί μια κενή σειρά από κάτω του. Εκεί θα κάνουμε αντιγραφή επικόλληση τον παρακάτω κώδικα:

<script type='text/javascript'>
//<![CDATA[

/***********************************************
* Javascript functions for the search box
* made by PurpleMoggy :)
* http://purplemoggy.blogspot.com/
***********************************************/
var search_which_one = "pm-f-h";
function selectH() {
document.getElementById('li-h').className = 'pm-search-selected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('li-b').className = 'pm-search-unselected';
document.getElementById('li-t').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'block';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-search-b').style.display = 'none';
document.getElementById('pm-search-t').style.display = 'none';
document.getElementById('pm-f-h').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-h";
}
function selectG() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-selected';
document.getElementById('li-b').className = 'pm-search-unselected';
document.getElementById('li-t').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'block';
document.getElementById('pm-search-b').style.display = 'none';
document.getElementById('pm-search-t').style.display = 'none';
document.getElementById('pm-f-g').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-g";
}
function selectB() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('li-b').className = 'pm-search-selected';
document.getElementById('li-t').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-search-b').style.display = 'block';
document.getElementById('pm-search-t').style.display = 'none';
document.getElementById('pm-f-b').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-b";
}
function selectT() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('li-b').className = 'pm-search-unselected';
document.getElementById('li-t').className = 'pm-search-selected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-search-b').style.display = 'none';
document.getElementById('pm-search-t').style.display = 'block';
document.getElementById('pm-f-t').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-t";
}

//]]>
</script>

Πατήστε προεπισκόπηση για να δείτε τα αποτελέσματα. Αν σας ικανοποιούν πατήστε αποθήκευση (save) και τέλος.Το ψαχτήρι σας θα πρέπει να δείχνει όπως το παρακάτω screenshot. Διαλέγετε εσείς που θέλετε να ψάξετε κάνοντας κλικ, γράφετε στο πλαίσιο της αναζήτησης αυτό που ψάχνετε πατάτε search και τέλος. Καλή επιτυχία.

ΚΑΝΤΕ ΕΜΦΑΝΕΣ ΕΝΑ ΜΕΡΟΣ ΤΟΥ POST

Η αναγνώστρια του Locus Blogus LoLa ζήτησε να μάθει πως μπορεί, όταν ανεβάζει ένα post, να φαίνεται ένα μέρος της ανάρτησης και ο αναγνώστης για να το δει όλο πρέπει να κάνει κλικ. Τo wordpress δίνει αυτή τη δυνατότητα αλλά το blogspot; Η απάντηση είναι ότι γίνεται αν πειράξουμε λίγο τον κώδικα. Δεν είναι ιδιαίτερα δύσκολο.
Μπαίνουμε στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και επεξεργασία HTML. πριν προχωρήσουμε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του template. Μετά κάνουμε κλικ στο κουτάκι που βρίσκεται δίπλα στην επέκταση γραφικών στοιχείων προτύπου. Πατάμε Ctrl+F και βρίσκουμε το </head> Ακριβώς πριν απ' αυτό κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα.

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/> <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('.excerpt').expander({ slicePoint: 280, // default is 100 expandText: '[...]', // default is 'read more...' }); }); </script>


Μετά πάμε να βρούμε το παρακάτω κομμάτι του κώδικα:

<div class='post-body entry-content'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Αν δυσκολεύεστε με το Ctrl+F βρείτε το <data:post.body/> Η παράγραφος θα βρεθεί κατευθείαν. Μετά έχοντας πατημένο το αριστερό κουμπί από το ποντίκι μας σέρνουμε τον κέρσορα για να τονίσουμε (highlight) την παράγραφο. Δείτε το παρακάτω screenshot.


Το παραπάνω κομμάτι του κώδικα το αντκαθιστούμε, κάνοντας αντιγραφή - επικόλληση (copy - paste), με το παρακάτω κώδικα:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Τώρα πατήστε προεπισκόπηση και αν είστε ευχαριστημένοι πατήστε αποθήκευση (save). Δείτε τα δύο παρακάτω screenshots για να πάρετε μια ιδέα πως θα είναι. Το πρώτο δείχνει ένα μέρος του κειμένου και δεύτερο ολόκληρο αν κάνουμε κλικ στο [...] Κάντε κλικ πάνω στις φωτογραφίες για να τις δείτε σε μεγέθυνση.

ΠΡΟΣΘΗΚΗ CHAT BOX

Καλημέρα και καλή εβδομάδα. Σήμερα θα σας προτείνω ένα site για να κάνετε προσθήκη ένα chat box έτσι ώστε να έχετε επικοινωνία με τους αναγνώστες σας μέσα στο blog σας σε real time. Η διαδικασία είναι πολύ απλή.
Πηγαίνουμε στο CBOX, κάνουμε εγγραφή (registration) και από εκεί στο publish για να πάρουμε τον κώδικα. Αν θέλουμε να φέρουμε το chat box στα μέτρα μας (μέγεθος, χρώμα κ.λ.π.) πάμε στο look & feel. Για περισσότερες επιλογές, για smilies, φίλτρα και άλλα κάνουμε κλικ στο options.
Εφόσον διαμορφώσουμε το Chat Box όπως θέλουμε, παίρνουμε τον κώδικα και τον κάνουμε αντιγραφή - επικόλληση (copy - paste) στην προσθήκη gadget (πανόπτης, διάταξη, πρσθήκη gadget, HTML/JavaScript). Πατήστε αποθήκευση (save) και τέλος.
Άλλη μια επιλογή για να προσθέσετε chat room στο blog σας είναι και το meebo. Η διαδικασία είναι η ίδια όπως στο CBOX. Διαλέγετε το chat room που θέλετε και όπως το θέλετε και κάνετε αντιγραφή - επικόλληση (copy - paste) τον κώδικα στην προσθήκη gadget (HTML/JavaScript).
UPDATE: Ο φίλος gsfak έχει προτείνει σε σχόλιο το Ploogo. Όντως πρόκειται για ένα πάρα πολύ καλό εργαλείο μέσω του οποίου μπορεί κάποιος να μιλά με τους επισκέπτες από τον client για chat που έχει (MSN,GTalk κλπ).

ΠΡΟΣΘΗΚΗ ANIMATED TAG CLOUD

Μια αναγνώστρια του blog μου ζήτησε να κάνω ανάρτηση για το πως μπορούμε να βάλουμε ένα animated tag cloud όπως αυτό που έχω στο blog. Η αλήθεια είναι ότι δε μπαίνει σαν widget αλλά πρέπει να πειράξουμε τον κώδικα. Η διαδικασία είναι πολύ απλή.
Μπαίνουμε στο λογαριασμό μας, πάμε πανόπτης, διάταξη και επεξεργασία HTML. Παίρνουμε πρώτα ένα back up του κώδικα μας για λόγους ασφαλείας και συνεχίζουμε. Πατάμε Ctrl+F και κάτω ανοίγει ένα ψαχτήρι. Μέσα στο πλαίσιο βάζουμε το παρακάτω κομμάτι του κώδικα:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Μόλις το βρούμε αμέσως κάτω απ' αυτή τη γραμμή κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα:

<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://locusblogus.blogspot.com'>hackaday</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Πατήστε προεπισκόπηση για να δείτε το tag cloud που προσθέσατε και μετά αποθήκευση (save).
Το tag cloud είναι προρυθμισμένο ως:
Πλάτος: 240px (pixels)
Ύψος: 300px
Χρώμα φόντου: άσπρο
Χρώμα γραμματοσειράς: γκρι
Μέγεθος γραμματοσειράς: 12

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

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Όπου 240 το πλάτος, 300 το ύψος και #ffffff το χρώμα. Για να αλλάξουμε το ύψος και το πλάτος και να μεγαλώσουμε το tag cloud βάζουμε μεγαλύτερες τιμές. Για να το μικρύνουμε κάνουμε το αντίθετο.
Για να αλλάξουμε χρώμα στο φόντο του tag cloud πρέπει να αλλάξουμε την παράμετρο #ffffff. Πώς όμως; Πρέπει να ανοίξουμε άλλο ένα παράθυρο εργασίας στον browser και να μπούμε πάλι στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και γραμματοσειρές και χρώματα. Εκεί μπορούμε να δούμε τον κωδικό των χρωμάτων φόντου και γαμματοσειρών. Δείτε την παρακάτω φωτογραφία (κλικ για μεγέθυνση): Στα δεξιά βλέπετε τον κωδικό χρώματος που στην προκειμένη περίπτωση είναι το άσπρο. Εσείς στον κώδικα πρέπει να βάλετε τον κωδικό του χρώματος του template σας.


Με τον ίδιο τρόπο μπορείτε να αλλάξετε και το χρώμα της γραμματοσειράς του tag cloud. Αρκεί να βρείτε το κομμάτι του κώδικα (στον κώδικα του tag cloud):
so.addVariable("tcolor", "0x333333");

Διαλέξτε τον κωδικό του χρώματος που θέλετε και αντικαταστήστε με αυτόν που προϋπήρχε (default - αυτό που έχω κοκκινίσει στον κώδικα είναι το γκρι χρώμα, δηλαδή το 333333).
Άλλη μια τροποποίηση που μπορούμε να κάνουμε είναι το μέγεθος της γραμματοσειράς του tag cloud. Αρκεί να βρούμε στον κώδικα του tag cloud το παρακάτω κομμάτι:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Το 12 που είναι με κόκκινο χρώμα είναι το μέγεθος της γραμματοσειράς. Αν θέλουμε να τη μεγαλώσουμε βάζουμε έναν αριθμό μεγαλύτερο από το 12. Αν θέλουμε να τη μικρύνουμε κάνουμε το αντίθετο (δηλαδή βάζουμε μια τιμή μικρότερη του 12).
Πριν κάνετε αποθήκευση (save) σε οτιδήποτε αλλαγές του κώδικα καλό θα ήταν να κάνετε προεπισκόπηση για να δείτε αν τα αποτελέσματα των ενεργειών σας θα σας αφήσουν ευχαριστημένους. Αν όχι πειραματιστείτε μέχρι να φτάσετε στο επιθυμητό αποτέλεσμα. Αν ναι, πατήστε αποθήκευση και τέλος. Καλή επιτυχία.

ΓΡΗΓΟΡΟΤΕΡΗ ΕΚΚΙΝΗΣΗ ΚΑΙ ΓΡΗΓΟΡΟΤΕΡΟ ΜΕΝΟΥ ΣΤΟ PC

Πολλές φορές βάζουμε διάφορα προγράμματα στους υπολογιστές μας που μπορεί να μη τα χρησιμοποιούμε αλλά δε θέλουμε και να τα σβήσουμε. Με τον καιρό μαζεύονται πολλά. Αυτό βέβαια μας βαραίνει το σύστημα και πολλές φορές όταν πάμε κάνουμε κλικ στην έναρξη (κάτω αριστερά) και από 'κει πάμε στα προγράμματα περιμένουμε να ανοίξουνε οι υποκατάλογοι για να κλικάρουμε και να ανοίξουμε κάποιο πρόγραμμα. Σε κανένα δεν αρέσει η αναμονή και ειδικά όταν αυτή είναι σχετικά μεγάλη. Τα νεύρα μας σπάνε και αρχίζουμε να ρίχνουμε καντήλια μέχρι να ανοίξει ο υποκατάλογος για να ανοίξει το πρόγραμμα. Θα σας δείξω ένα τρόπο που θα κάνετε το μενού σας να ανοίγει στο πι και φι. Δεν παριστάνω το ξερόλα και πολλοί μπορεί ήδη να γνωρίζεται τον παρακάτω τρόπο για να γίνει το μενού πιο γρήγορο. Αφορμή στάθηκε ο εκνευρισμός ενός συναδέλφου στη δουλειά που ο υπολογιστής του καθυστερούσε.
Κάνουμε κλικ στην έναρξη και από εκεί πάμε στην εκτέλεση. Θα ανοίξει ένα πλαίσιο και μέσα θα γράψουμε regedit και πατάμε OK. Δείτε το παρακάτω screenshot:


Θα ανοίξει ένα παράθυρο που πάνω αριστερά θα λέει επεξεργαστής μητρώου (με λίγα λόγια μπαίνουμε στη registry). Πάμε επεξεργασία και πατάμε στην εύρεση. Θα ανοίξει ένα πλαίσιο και μέσα θα γράψουμε menushow και θα πατήσουμε OK. Δείτε το παρακάτω screenshot:


Μετά από λίγα δευτερόλεπτα αναζήτησης στο παράθυρο του επεξεργαστή μητρώου (registry) θα εμφανιστούν διάφορα δεδομένα και ένα θα είναι τονισμένο με μπλε χρώμα (όπως όταν κάνουμε κλικ πάνω σε κάτι μια φορά). Αυτό που θα είναι τονισμένο με μπλε χρώμα λέγεται MenuShowDelay και παραδίπλα έχει μια τιμή (στο 400 είναι προρυθμισμένο). Κάνουμε διπλό κλικ πάνω σ' αυτό και ανοίγει ένα παραθυράκι που στο πλαίσιο δεδομένα τιμής σβήνουμε τον αριθμό που έχει και βάζουμε 10 και πατάμε OK. Δείτε το παρακάτω screenshot:


Μετά πατάμε F3 και ανοίγει ένα παραθυράκι αναζήτησης. Περιμένουμε μερικά δευτερόλεπτα και αν παρατηρήσουμε στο παράθυρο του επεξεργαστή μητρώου πάλι είναι τονισμένο το MenuShowDelay το οποίο παραδίπλα έχει μια τιμή (μάλλον 400). Αν όχι ξαναπατήστε F3. Αν ναι κάντε διπλό κλικ πάνω σ' αυτό και ανοίγει ένα παραθυράκι που στο πλαίσιο δεδομένα τιμής σβήνουμε τον αριθμό που έχει και βάζουμε 10 και πατάμε OK. Μετά πατάμε πάλι F3 για αναζήτηση και όταν τελειώσει αυτή πάλι θα δούμε στο παράθυρο του επεξεργαστή μητρώου πάλι είναι τονισμένο το MenuShowDelay το οποίο παραδίπλα έχει μια τιμή (μάλλον 400). Κάντε διπλό κλικ πάνω σ' αυτό και ανοίγει ένα παραθυράκι που στο πλαίσιο δεδομένα τιμής σβήνουμε τον αριθμό που έχει και βάζουμε 10 και πατάμε OK. Μετά πατάμε πάλι F3 για αναζήτηση και επαναλαμβάνουμε την παραπάνω διαδικασία (αλλαγή αριθμού στα δεδομένα τιμής σε 10). Μετά από τέσσερις ή πέντε αναζητήσεις στο μητρώο με το F3 και αλλαγή των τιμών των δεδομένων θα βγει το μύνημα: Τελείωσε η αναζήτηση στο μητρώο. Αυτό ήταν. Κλείστε το παράθυρο του επεξεργαστή μητρώου και κάντε μια επανακίνηση (reboot) τον υπολογιστή σας και τελειώσατε.
Αν κάνετε κλικ στην έναρξη και μετά πάτε στα προγράμματα και μετακινήσετε το βελάκι του ποντικιού θα δείτε πόσο γρήγορα θα ανοίγουν οι υποκατάλογοι.
Ίσως σας φανεί πολύπλοκο αλλά σας εγγυώμαι ότι είναι πανεύκολο. Στην πραγματικότητα επαναλαμβάνετε την ίδια διαδικασία για τέσσερις ή πέντε φορές.
Και κάτι για γρηγορότερη εκκίνηση του υπολογιστή σας. Πατάτε κάτω δεξιά έναρξη, πάτε όλα τα προγράμματα και επό εκεί εκκίνηση. Ότι εμφανίζει ο υποκατάλογος σβήστε το με δεξί κλικ και διαγραφή. μην ανησυχείτε δε σβήνετε το πρόγραμμα απλά δε θα ξεκινάει την ώρα που ανοίγετε το pc σας. Αλλά δεν τελειώσαμε. Πατήστε Ctrl+Shift+Esc και θα ανοίξει ένα παράθυρο (δείτε το παρακάτω screenshot):

Εδώ εμφανίζονται όλα τα προγράμματα που λειτουργούνε "κρυφά" την ώρα που δουλεύετε καθώς επίσης ότι φαίνεται στο παράθυρο ξεκινάει με την εκκίνηση του υπολογιστή. Διαγράψτε ότι δε σας χρειάζεται. Καλό είναι να αφήσετε τα προγράμματα προστασίας, (antivirus, firewall κλπ) να τρέχουν. Με τη διαγραφή δε διαγράφονται τα προγράμματα, απλά δεν ξεκινούνε με την εκκίνηση του pc.
ΠΡΟΣΟΧΗ: Υπάρχουν και αρχεία που αν διαγραφούν θα προκαλέσουν αστάθεια και προβλήματα στο σύστημα σας. Αν δεν είστε σίγουροι για ένα αρχείο καλύτερα να το αφήσετε ως έχει.
Καλή επιτυχία σε όλους!
Πηγή: ΘΕΜΑ

ΠΩΣ ΝΑ ΦΤΙΑΞΕΤΕ FAVICONS

Σήμερα θα δούμε πως μπορούμε να δημιουργήσουμε favicons. Τι είναι τα favicons; Είναι τα εικονίδια που εμφανίζονται δίπλα στη μπάρα διευθύνσεων. Επίσης όταν σ' ένα φυλλομετρητή (browser) έχουμε δύο και παραπάνω καρτέλες ανοιγμένες τα favicons εμφανίζονται και εκεί Δείτε τις εικόνες ακριβώς από κάτω (κλικ για να τις μεγενθύνετε):


Ένα site στο internet όπου μπορούμε να κατεβάσουμε έτοιμα favicons στατικά και animated είναι το ICONJ. Αλλά κακά τα ψέματα όλοι θέλουμε να έχουμε κάτι μοναδικό που δε χρησιμοποιείται από άλλον. Για να επιτευχθεί αυτό πρέπει να το δημιουργήσουμε οι ίδιοι. Το site που προανέφερα μας δίνει και αυτή τη δυνατότητα όπως και hosting (φιλοξενία) για τα εικονίδια μας.
Για να δημιουργήσουμε ένα favicon πρέπει να έχουμε κάποιο πρόγραμμα επεξεργασίας φωτογραφίας. Όσοι έχουν το Photoshop, το PhotoImpact ή οποιοδήποτε άλλο πρόγραμμα μπορούνε να ξεκινήσουν αμέσως. Όσοι δεν έχουν και δε θέλουν να πληρώσουν για να αγοράσουν κάποιο, υπάρχει και το Picasa της Google το οποίο είναι δωρεάν μπορείτε να το κατεβάσετε από εδώ. Υπάρχουν πολλές δωρεάν εφαρμογές που μπορείτε να βρείτε μέσω της μπάρας αναζήτησης της Google ή αν αγοράζετε περιοδικά για computers θα βρείτε άφθονα στα DVDs που δίνουν.
Για να δημιουργήσουμε το favicon πρέπει να δημιουργήσουμε λογαριασμό στο ICONJ. Μετά πρέπει να δημιουργήσουμε ένα εικονίδιο διαστάσεων 16x16px (pixels) με το πρόγραμμα επεξεργασίας εικόνας που έχουμε στον υπολογιστή μας. Μετά τη δημιουργία του το σώζουμε (save) κάπου που είναι εύκολο να το βρούμε. Εφόσον είμαστε στο ICONJ και έχουμε κάνει login κάνουμε upload το εικονίδιο που δημιουργήσαμε προηγουμένως. Μετά από μερικά δευτερόλεπτα αναμονής το εικονίδιο μας έχει σηκωθεί στο site. Στα δεξιά πατάμε το κουμπί Get Code και εκεί βλέπουμε τον κώδικα που πρέπει να κάνουμε αντιγραφή - επικόληση (copy-paste) στον κώδικα του template μας.
Μπαίνουμε μέσα στο λογαριασμό του blogspot και από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πρώτα παίρνουμε ένα αντίγραφο ασφαλείας του κώδικα μας (Back Up). Βρίσκουμε (CTRL+F) το </head> και ακριβώς πριν απ' αυτό κάνουμε επικόλληση των κώδικα που πήραμε από το ICONJ. Πατάμε προεπισκόπηση και βλέπουμε τ' αποτελέσματα. Αν μας ικανοποιούν πατάμε αποθήκευση (save) και τέλος.
Άλλο ένα site για favicons είναι το myfavatar το οποίο δουλεύει με παρόμοιο τρόπο.

ANIMATED LOGOS ΚΑΙ ΑΛΛΑ

Όλοι όσοι έχουμε blogs θέλουμε κάτι διαφορετικό για να ξεχωρίζει το ιστολόγιο μας. Θέλουμε παραπάνω στήλες, banners, logos, κουμπιά, clip arts. Όλα αυτά είναι εύκολα για αυτούς που ξέρουν να σχεδιάζουν τέτοια πράγματα. Εμείς που δεν ξέρουμε; Υπάρχει λύση (στο internet φυσικά) και είναι δωρεάν.
Απλά πρέπει να επισκεφτείτε το FlamingText . Εκεί πέρα θα βρείτε τα πάντα και σας δίνεται η δυνατότητα να σχεδιάσετε τα πάντα με εύκολο τρόπο έτσι ώστε οι δημιουργίες σας να είναι μοναδικές. Ναι, υπάρχουν και animated logos. Έχει πλούσια γκάμα και μπορείτε να διαλέγετε με τις ώρες. Ακόμα και γραμματοσειρές μπορείτε να βρείτε.
Να επικεντρωθούμε όμως στο πως κάνουμε ένα animated logo, μια και όταν μπαίνει κάποιος στη σελίδα μας το πρώτο πράγμα που βλέπει είναι το logo. Από το site που προανέφερα για να κάνετε logo πρέπει να πάτε στο headings. Κάνοντας κλικ στο link που σας παρέθεσα μεταφέρεστε σ' έναν οδηγό πέντε βημάτων (δυστυχώς το site δεν προσφέρεται στην ελληνική γλώσσα). Στα δεξιά θα δείτε τις επιλογές που έχετε. Διαλέξτε ότι σας αρέσει και μετά γράψτε το κείμενο, διαλέξτε το στυλ, το χρώμα, το μέγεθος του logo και τη γραμματοσειρά που θέλετε να έχει το logo σας. Αν θέλετε animated κάντε κλικ στο animated. Μετά πατήστε το create logo. Παίρνει περίπου δεκαπέντε δευτερόλεπτα για να δημιουργηθεί το logo σας. Μόλις δημιουργηθεί κάνετε δεξί κλικ και αποθήκευση ως (save as).
Τώρα θα χρειαστεί να πειράξουμε λίγο τον κώδικα γιατί αν βάλουμε με τη γνωστή διαδικασία το logo στο blog η εικόνα δε θα είναι animated αλλά στατική. Πρέπει να σηκώσουμε στο internet το logo που δημιουργήσαμε. Το ImageShack και το PhotoBucket παρέχoυν τέτοιου είδους δυνατότητα (δωρεάν φυσικά). Το μόνο που χρειάζεται είναι να κάνετε εγγραφή (registration). Μόλις σηκώσετε το logo σας βεβαιωθείτε για τη διεύθυνση που βρίσκεται.
Τώρα πρέπει να πάμε: Πανόπτης, διάταξη και επεξεργασία HTML. Πρώτα κάνουμε ένα back up τον κώδικα μας για να είμαστε ασφαλείς. Μετά κάνουμε κλικ στο κουτάκι που υπάρχει δίπλα στην επέκταση προτύπων γραφικών στοιχείων (expand widget templates) έτσι ώστε να εμφανιστεί ένα tick. Ψάχνουμε το κομμάτι του κώδικα που φαίνεται στο παρακάτω screenshot:
Ακριβώς από κάτω του βλέπουμε το κομμάτι του κώδικα που απεικονίζεται στο παρακάτω screenshot:
Στο κομμάτι του παραπάνω κώδικα εκεί που λέει maxwidgets='1' αλλάξτε την τιμή (1) σε οποιοδήποτε μεγαλύτερο αριθμό (από το 1) και εκεί που λέει showaddelement='no' αντικαταστείστε το no με το yes. Μόλις κάνετε τις παραπάνω διεργασίες πατήστε αποθήκευση (save).
Αν πάτε τώρα Πανόπτης, διάταξη και στοιχεία σελίδας θα δείτε ότι πάνω από την κεφαλίδα προστέθηκε στοιχείο σελίδας (προσθήκη gadget). Πηγαίνουμε στο site όπου ανεβάσαμε το logo μας και βλέπουμε ότι η σελίδα μας δίνει διάφορες επιλογές: IM, Forum, Alt Forum και HTML στο ImageShack και Share URL, Direct Link, HTML Code και IMG Code στο PhotoBucket. Σε όποιο site και αν ανεβάσαμε το logo μας εμείς επιλέγουμε τον κώδικα δηλαδή το HTML τον οποίο τον κάνουμε αντιγραφή - επικόλληση (copy - paste) στο gadget που δημιουργήσαμε προηγουμένως πάνω από την κεφαλίδα. Δηλαδή πάμε πανόπτης, διάταξη, και προσθήκη gadget. Ανοίγει ένα παράθυρο και επιλέγουμε προσθήκη HTML/JavaScript, κάνουμε επικόλληση των κώδικα και αποθήκευση. Πατάμε προεπισκόπηση και αν μας αρέσει το αποτέλεσμα το κρατάμε. Αν η κεφαλίδα έχει κείμενο η φωτογραφία και θέλουμε να τα εξαφανίσουμε τότε πάμε στην κεφαλίδα (header) πατάμε επεξεργασία (edit) και σβήνουμε ότι θέλουμε. Στο τέλος πατάμε αποθήκευση (save) και τέλος. Καλή διασκέδαση.

Με το πείραγμα του κώδικα του template δημιουργήσαμε στοιχεία σελίδας (προσθήκη gadgets) πάνω από την κεφαλίδα (header). Εννοείται ότι μπορείτε να προσθέσετε ότι είδος widget θέλετε.

ΠΩΣ ΕΜΦΑΝΙΖΟΥΜΕ ΚΩΔΙΚΑ ΣΤΙΣ ΑΝΑΡΤΗΣΕΙΣ

Πολλές φορές θέλουμε να κάνουμε μια ανάρτηση η οποία θα περιέχει κάποιον κώδικα και θέλουμε να είναι ορατός στους αναγνώστες. Βάζοντας τον κώδικα ως έχει θα παρατηρήσουμε ότι με τη δημοσίευση του post μας ο κώδικας δεν υπάρχει και εμφανίζεται το προϊόν του κώδικα (αν μπορούμε να το πούμε έτσι για να γίνει κατανοητό), είτε αυτό είναι φωτογραφία, είτε banner είτε link.
Η αλήθεια είναι ότι όλη τη ζημιά την κάνουν τα σύμβολα < και >. Για να εμφανιστεί ο κώδικας έτσι ώστε οι αναγνώστες να μπορούνε να τον κάνουνε αντιγραφή - επικόληση (copy - paste) πρέπει να αντικαταστήσουμε τα παραπάνω σύμβολα. Πως θα γίνει αυτό και με τι θα αντικατασταθούνε; Η διαδικασία είναι πολύ απλή και ο χρόνος που χρειάζεται είναι δυο λεπτά το πολύ.
Πάμε στην επιφάνεια εργασίας, κάνουμε δεξί κλικ, πάμε στη δημιουργία και από εκεί έγγραφο κειμένου (notepad). Κάνουμε αντιγραφή - επικόληση (copy - paste) τον κώδικα που θέλουμε να δημοσιεύσουμε και μετά πάμε πάνω στη μπάρα στην επεξεργασία και επιλέγουμε αντικατάσταση. Θα ανοίξει ένα παράθυρο που θα ονομάζεται Αντικατάσταση και θα έχει δύο πεδία. το πρώτο λέει Εύρεση του και το δεύτερο Αντικατάσταση με. Στο πρώτο πεδίο βάζουμε το σύμβολο < και στο δεύτερο
(με αυτό αντικαθιστάται). Πατάμε αντικατάσταση όλων και βλέπουμε ότι στον κώδικα όπου είχε το σύμβολο < υπάρχει ο συνδυασμός
Δεν τελειώσαμε ακόμα. Κάνουμε την ίδια εργασία και για το σύμβολο > μόνο που το αντικαθιστούμε με
Πατάμε αντικατάσταση όλων και βλέπουμε ότι στον κώδικα όπου υπήρχε το σύμβολο > αντικαταστάθηκε από
Το κάνουμε αποθήκευση (save) και τελειώσαμε. Τώρα έτσι όπως μετατρέψαμε τον κώδικα αν τον αναρτήσουμε με αντιγραφή - επικόληση (copy - paste) θα εμφανιστεί κανονικά στο blog. Μια ματιά στην προεπισκόπηση θα σας πείσει. Καλή επιτυχία και προσέξτε τι αντικαθιστάτε με τι. Τα δύο screenshots παρακάτω θα σας βοηθήσουν να θυμάστε:

ΚΑΛΩΣ ΣΑΣ ΒΡΗΚΑ

Καλώς σας βρήκα στο νέο μου blog. Δεν ξέρω τις εντυπώσεις σας αλλά το έκανα με μεράκι για συγκεκριμένο σκοπό. Ο λόγος ύπαρξης του παρόντος blog είναι να μοιραστούμε τις γνώσεις μας όποιες και αν είναι αυτές πάνω στο blogging, στο internet, σε διάφορα προγράμματα και να προτείνουμε sites που μπορούνε να μας εξυπηρετήσουν. Φυσικά είναι δεκτές όλες οι προτάσεις, και τα σχόλια.
Σκοπός αυτού του blog είναι να μοιραστούμε τις γνώσεις μας και να γίνουμε "σοφότεροι". Οι προτάσεις που θα γίνονται απ' αυτό το blog δε θα απαιτούνε χρήματα (π.χ. αγορά ενός προγράμματος). Στόχος είναι οι δωρεάν λύσεις γιατί "οι καιροί είναι δύσκολοι για πρίγκηπες". Το internet είναι εργαλείο και παγκόσμια τράπεζα πληροφοριών. Υπάρχουν θαυμάσια πράγματα που μας περιμένουν να τ' ανακαλύψουμε και να τα εκμεταλευτούμε.
Μπορείτε να καταθέτετε τις προτάσεις σας στα σχόλια ή να στέλνετε e-mail (το οποίο είναι στα δεξιά πάνω).
Αυτά προς το παρόν.

ΑΠΟΚΡΥΨΗ ΤΗΣ NAVBAR

Σήμερα θα σας δείξω έναν πανεύκολο τρόπο για να εξαφανίσετε τη navbar(για blogs που ανήκουν στην πλατφόρμα του blogspot).
Μπαίνετε στο λογαριασμό σας, από τον πανόπτη, πάτε στη διάταξη και από εκεί επεξεργασία HTML. Το κουτάκι δίπλα στην επέκταση γραφικών στοιχείωντο αφήνετε ανέπαφο. Πριν κάνετε οτιδήποτε καλό είναι να πάρετε ένα back up του κώδικα σας. Λίγο μετά την αρχή του κώδικα στην κορυφή έχει ένα κομμάτι
που λέει κάποια στοιχεία για το template που χρησιμοποιείτε (Blogger Template Style) και από κάτω ακριβώς έχει μια σειρά κενή και πιο κάτω γράφει:

/* Variable definitions

Πάτε στην κενή σειρά με τον κέρσορα, πατήστε δυο - τρεις φορές το enter για
να δημιουργηθεί παραπάνω κενό ανάμεσα στα στοιχεία του template και στο
/* Variable definitions και κάπου εκεί ανάμεσα βάλτε τον παρακάτω
κώδικα με αντιγραφή - επικόλληση (copy - paste):

#navbar-iframe {display:none !important;}

Πατήστε αποθήκευση (save) και κάντε refresh με το F5 στο blog σας και θα δείτε ότι η navbar έχει εξαφανιστεί. Τη navbar πολλοί θέλουν να την εξαφανίσουν για λόγους καλαισθησίας αλλά χάρη σ' αυτό το τρικ κερδίζουμε περισσότερα, όπως:1) Κρατάμε τον επισκέπτη περισσότερο εφόσον δεν έχει τη δυνατότητα να πληκτρολογήσει κάτι στην αναζήτηση ιστολογίου και να φύγει από τη σελίδα μας καθώς επίσης δεν έχει τη δυνατότητα να κάνει κλικ στο κουμπί "επόμενο ιστολόγιο".
2)Προστατευόμαστε από τους κακοπροαίρετους να κάνουν κλικ στην
επισήμανση ιστολογίου (κάτι που είναι αρνητικό για το blog μας από
κάποιον αριθμό κλικ και μετά).

Πηγή: ΘΕΜΑ

ΤΡΙΣΤΗΛΑ TEMPLATES... ΑΒΑΔΙΣΤΑ ΚΑΙ ΑΒΑΣΑΝΙΣΤΑ

Σήμερα θα σας δείξω πως μπορείτε να μετατρέψετε το template του blog σας σε τρίστηλο (αρκεί να ανήκετε στην πλατφόρμα του blogspot). Καλό είναι να κάνεται ένα back up τον κώδικα σας για λόγους ασφαλείας πριν ξεκινήσετε οτιδήποτε.
Πάμε στον πανόπτη, από εκεί διάταξη και από εκεί επεξεργασία HTML. Το κουτάκι που λέει επέκταση γραφικών στοιχείων το αφήνουμε έτσι όπως είναι και δεν το πειράζουμε (ατσεκάριστο).
Βρίσκουμε το κομμάτι του κώδικα που λέει:

#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Το αντιγράφουμε έτσι όπως είναι (copy - paste) ακριβώς από κάτω και έτσι το έχουμε δυο φορές. Στο πρώτο εκεί που λέει float βάζουμε right και σβήνουμε αυτό που έχει, συνήθως λέει $startSide (φαίνεται πάνω η αλλαγή). Τώρα αλλάζουμε σ' αυτό που μόλις αντιγράψαμε (στο δεύτερο) αυτά που φαίνονται παρακάτω με κόκκινο χρώμα:

#left-sidebar-wrapper (αυτό δημιουργεί τη νέα στήλη) float: left; (αυτό θα κάνει την καινούρια στήλη να εμφανίζεται στα αριστερά της κεντρικής όπου εμφανίζονται τα post).

Με τις παραπάνω κινήσεις μόλις προσθέσαμε άλλη μια sidebar.
Στη συνέχεια κοιτάζουμε να βρούμε το μέρος του κώδικα που λέει:

<div id='main-wrapper'>

Ακριβώς πριν από αυτόν αντιγράφουμε και κάνουμε επικόλληση (copy - paste) τον παρακάτω κώδικα:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

Αυτό γίνεται (<div id='main-wrapper'>) για να μπορέσει ο browser να καταλάβει ότι υπάρχει και άλλη μπάρα. Το άλλο κομμάτι του κώδικα (<b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>) είναι για να καταλάβει ο browser τι είδους στοιχεία (widgets) υπάρχουν στην καινούρια μας στήλη. Το ID πρέπει να είναι left-sidebar για να μην έχουμε διενέξεις και προβλήματα και για να καθορίσουμε ότι η καινούρια μας στήλη θα βρίσκεται στην αριστερή πλευρά τoυ template μας. Τα παραπάνω, όμως είναι για εγκυκλοπαιδικούς λόγους. Ας συνεχίσουμε με πράξη.
Λογικά θα πρέπει να μεγαλώσουμε το template μας για να χωρέσουν όλα. Βρίσκουμε το κομμάτι του κώδικα που λέει:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Και αντικαθιστούμε την τιμή 660 με 880. Για να είναι όμως πιο καλαίσθητο πρέπει να μεγαλώσουμε και και το μέρος που φιλοξενεί το logo μας. Πάμε και βρίσκουμε το κομμάτι του κώδικα που λέει:

#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }

Και εδώ την τιμή την αλλάζουμε από 660 σε 880 (στο ακριβώς παραπάνω παράδειγμα η τιμή έχει ήδη αλλαχτεί).
Πατάμε αποθήκευση αν και δεν τελειώσαμε για να ελέγξουμε ότι όλα πάνε καλά. Εφόσον κάνουμε αποθήκευση (save) πάμε πανόπης, διάταξη και στοιχεία σελίδας και η εικόνα που πρέπει να αντικρίσετε είναι όπως η παρακάτω:


Όπως προανέφερα δεν τελειώσαμε. Η στήλη υπάρχει αλλά θα είναι ορατή στο blog μόνο όταν βάλετε κάποιο widget. Πρέπει να κάνουμε τα στοιχεία που θα βάζουμε στην καινούρια μπάρα μας να μην ξεπερνάνε τα όρια και μπαίνουν μέσα στα post μας (κάτι το οποίο είναι ενοχλητικό). Πάμε πάλι στη διάταξη, από εκεί επεξεργασία HTML και ψάχνουμε να βρούμε το κομμάτι του κώδικα:

#main-wrapper { width: 410px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Και προσθέτουμε margin-left: 20px; εκεί που λέει float:left; Ο κώδικας πρέπει να δείχνει ακριβώς όπως παρακάτω:

#main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Πατήστε αποθήκευση (save) και τελειώσατε. Για να βάλετε στήλη στα δεξιά ακολουθήστε την ίδια διαδικασία μόνο εκεί που λέει left; βάλτε right;

UPDATE: Η παραπάνω διαδικασία αφορά τo Minima
template (σαν το δικό μου δηλαδή) και τις παραλαγές
του. Για άλλα templates πρέπει να διαθέσετε λίγο χρόνο
για να πειραματιστείτε με τις τιμές των: Outer-Wrapper,
Header-Wrapper και margin. Αυτό γιατί άλλα templates
είναι πιο σύνθετα (περιέχουν σχέδια, footers, χρώματα κλπ.)

Πηγή: ΘΕΜΑ