ΨΑΧΤΗΡΙ 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 κλπ).