Floating Facebook Like Box for Blogger !

Σήμερα θα ασχοληθούμε με ένα αρκετά δημοφιλές social bookmarking widget του facebook. Πρόκειται για ένα απλό facebook like box της σελίδας μας, με τη μόνη διαφορά ότι αυτό "κολλάει" πάνω δεξιά στην οθόνη μας και "ξετυλίγεται" με το άγγιγμα του ποντικιού μας. Λίγο λογοτεχνική η περιγραφή μου, για αυτό δοκιμάστε το, για να καταλάβετε καλύτερα!

ΔΙΑΔΙΚΑΣΙΑ ΠΡΟΣΘΗΚΗΣ

1. σύνδεση στον λογαριασμό σας από blogger.com
2. σχεδίαση> προσθήκη gadget> HTML/JavaScript
3. επικολλήτε τον παρακάτω κώδικα

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkqcGR1z1FOltwdFVcrXHm2pTOr3J-9rnIfowJLMQ3jKnVmbSudZkmbkpOl2BjhobeR4WNqEWXQfuitQA4LKB26b-iCBKP7qENbTq88VyrCND1NFw530ggIxIPK-r8dw3LC84WlwV2KiE/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FOlympiakos%2F110703838950130&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true">
</iframe><span><a href="http://www.bloggertips.gr/2012/09/floating-facebook-like-box-for-blogger.html" target="_blank">Add this!</a></span>
</div></div>

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

*** απλό facebook like box μπορείτε να βάλετε από το http://developers.facebook.com/docs/reference/plugins/like-box/ ***

λοιπόν ανοίγετε τη σελίδα σας στο facebook.
κοιτάτε στην μπάρα του browser, η url (Uniform Resource Locator ή -ελλ.- Ενιαίος Εντοπιστής Πόρων) να είναι της μορφής http://facebook/pages/όνομα/id

π.χ. http://www.facebook.com/pages/Olympiakos/110703838950130
(θρυλε ολε θρυλε ολε σε βλεπω και τρελαινομαι.....)

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

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

αφήστε το σχόλιό σας αν θέλετε και κάντε αυτό το post "like" στο facebook..
πάντα αν θέλετε...

για να σας φτιάξει τη διάθεση...

Πηγές: http://www.bloggertips.gr/
Copyrights: http://www.bloggertips.gr/

Widget εμφανισης banner με τυχαία σειρά! - Random Banner Widget

Καλησπέρα σας από τον admin,

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

Πρόκειται για ένα gadget στο οποίο προσθέτετε διάφορα banners και αυτό εμφανίζει μόνο ένα κάθε φορά. Η εναλλαγή ανάμεσα στα διάφορα banners γίνεται με τυχαία σειρά!

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

Η προσθήκη του είναι πολύ απλή:

1. Σύνδεση στον λογαριασμό από το blogger.com
2. Πανόπτης > Σχεδίαση > (Στοιχεία Σελίδας) > Προσθήκη gadget > HTML/JavaScript
3. Επικολλείτε εκεί τον παρακάτω κώδικα και κάνετε μετά μερικές τροποποιήσεις σε αυτόν:

<script language="JavaScript">
images = new Array(3);
images[0] = "<a href = 'διευθυνση 1' rel='nofollow' ><img src='διευθυνση-της-φωτο 1' border='0'height='60px' width='468px' ></a>";
images[1] = "<a href = 'διευθυνση 2' rel='nofollow' ><img src='διευθυνση-της-φωτο 2' border='0'height='60px' width='468px' ></a>";
images[2] = "<a href = 'διευθυνση 3' rel='nofollow' ><img src='διευθυνση-της-φωτο 3' border='0'height='60px' width='468px' ></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

Τροποποιήσεις:

αλλάζετε το διεύθυνση 1 με τον σύνδεσμο στον οποίο θέλετε να οδηγεί το πρώτο banner που θα βάλετε
αλλάζετε το διευθυνση-της-φωτο 1 με τον σύνδεσμο του banner σας, π.χ. http://www.cs.utsa.edu/~wagner/berlin/brand.jpg
μεταβάλλετε το μέγεθος του banner σας, αλλάζοντας τις μεταβλητές στα width και height


προσθέστε κ αλλες φωτογραφίες προσθέτοντας το παρακάτω:

images[0] = "<a href = 'διεύθυνση 1' rel='nofollow' ><img src='διευθυνση-της-φωτο 1' border='0' height='60px' width='468px' ></a>";

εκεί που λέει images[0] αλλάξτε το 0 κάθε φορά βάζοντας 1, 2, 3, κλπ. ανάλογα με το πόσα banner θα βάλετε
και στο τέλος στο new Array(3) , αντί για 3 βάλτε τον αριθμό των banner που βάλατε

οτι πρόβλημα προκύψει ==> σχόλιο!

Πηγές: http://widcraft.blogspot.com/2012/06/random-banner-widget-for-blogger.html
Copyrights: http://www.bloggertips.gr/