Υπάρχουν συντομεύσεις σε κάθε browser, με τις οποίες και με το πάτημα ενός συνδυασμού κουμπιών μπορείς να προσθέσεις μια σελίδα στα αγαπημένα σου (Bookmarks/Favorites). Πολλοί χρήστες, όμως, δε γνωρίζουν τις συγκεκριμένες συντομεύσεις. Κι από την άλλη, μερικοί χρήστες μπορεί να είναι σαν εμένα: οπτικοί τύποι που προτιμούν να δουν ένα κουμπάκι και πατώντας το να γίνεται η δουλειά. Για να ικανοποιήσετε αυτούς τους χρήστες, μπορείτε να διαβάσετε παρακάτω. Είναι απλούστατο και πανεύκολο! To βλέπετε ήδη στο blog μου πάνω δεξιά!

Η εγκατάσταση τελειώνει με ένα μόνο βήμα. Αντιγράφουμε κι επικολλούμε (Copy-Paste) τον παρακάτω κώδικα σε ένα HTML gadget [ΣΧΕΔΙΑΣΗ–ΠΡΟΣΘΗΚΗ GADGET–HTML/JavaScript–Δε βάζουμε τίτλο] και αποθηκεύουμε [Save]:

<!-- Script by Blogger-Bookmark.blogspot.com -->
<script type="text/javascript">
//set the bookmark image position(topright,topleft,bottomright,bottomleft) 
var corner = "topright";
var url = window.location;
var title = document.title;
document.write('<div id=ddd style="position: absolute; visibility: visible; top: 5px; left:5px;">');
document.write('<a style="font-size:10px; text-decoration: none;" href="javascript:bookmark(title, url)" title="click here to bookmark this page"><img src="http://lh3.ggpht.com/_XQLypnL2B10/TEuyLv55EDI/AAAAAAAAAOQ/9bt-2zg5Rck/bookmark.PNG" alt="BOOKMARK " border=0><span style="background-color: seashell; font-size:10px;"><sup>H</sup></span></a></div>');
var os;
if(document.layers)
 os = "n4";
else if(document.getElementById&&!document.all)
 os = "n6";
else if(document.all)
 os = "ie";
function run()
{
 if(os == "ie"){
   pwidth = window.document.body.offsetWidth;
   pheight = window.document.body.offsetHeight;
   stop = document.body.scrollTop;
   sleft = document.body.scrollLeft;
 }else{
   pwidth = window.innerWidth;
   pheight = window.innerHeight;
   stop = window.pageYOffset;
   sleft = window.pageXOffset;
 }

  var dda = document.getElementById('ddd');
  if(corner == "topleft"){
    dda.style.top = (stop)+"px";
    dda.style.left = (sleft+15)+"px"; 
  }else if(corner == "topright"){
    dda.style.top = (stop)+"px";
    dda.style.left = (sleft+pwidth-110)+"px"; 
  }else if(corner == "bottomleft"){
    dda.style.top = (stop+pheight-45)+"px";
    dda.style.left = (sleft+15)+"px"; 
  }else if(corner == "bottomright"){
    dda.style.top = (stop+pheight-40)+"px";
    dda.style.left = (sleft+pwidth-110)+"px"; 
  }
  setTimeout('run()',5);
}

function bookmark(title,url){
    if(window.sidebar)
          window.sidebar.addPanel(title,url,"");
    else if(window.opera && window.print){
          var elem = document.createElement('a');
          elem.setAttribute('href',url);
          elem.setAttribute('title',title);
          elem.setAttribute('rel','sidebar');
          elem.click();
    }
    else if(os == "ie")
          window.external.AddFavorite(url,title);
}
document.onload = run();
</script>
<!-- Script by Blogger-Bookmark.blogspot.com -->

Τι μπορούμε να επεξεργαστούμε στον κώδικα;

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

2. Αν, τώρα, θέλετε να αλλάξετε την εικόνα και να βάλετε μια δική σας στη θέση της (όπως έκανα εγώ), μπορείτε να αντικαταστήσετε το κόκκινο κομμάτι του κώδικα (http://lh3.ggpht.com/_XQLypnL2B10/TEuyLv55EDI/AAAAAAAAAOQ/9bt-2zg5Rck/bookmark.PNG) με το link της δικής σας εικόνας.

3. Αν θέλετε να αλλάξετε τη γωνιά στην οποία θα εμφανίζεται το κουμπάκι, αλλάζετε το πράσινο κομμάτι του κώδικα (topright = πάνω δεξιά) με ένα από: topleft (=πάνω αριστερά), bottomright (=κάτω δεξιά) ή bottomleft (=κάτω αριστερά).

4. Αν η εικόνα σας εμφανίζεται κομμένη ή απλά θέλετε να τη μετακινήσετε, θα πρέπει να το κάνετε πολύ προσεκτικά, “παίζοντας” με τους αριθμούς που βρίσκονται στο κίτρινο κομμάτι του κώδικα. Το τι θα αλλάξετε, εξαρτάται πάντα από το σημείο που τοποθετήσατε την εικόνα σας. Αν, για παράδειγμα, την έχετε τοποθετήσει κάτω αριστερά (bottomleft), θα “παίξετε” με τους αριθμούς στο ανάλογο κομμάτι: 

if(corner == "bottomleft"){
    dda.style.top = (stop+pheight-45)+"px";
    dda.style.left = (sleft+15)+"px";

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

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

Ελπίζω να ήμουν αρκετά κατανοητός και να βοήθησα αρκετούς από εσάς, καθώς και τους επισκεπτες σας!

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

Καλές επιτυχίες!