10 Αυγούστου 2009



18 Feed Subscription Peel εφφέ στο Blog σας

Θα έχετε ίσως μερικοί απο εσάς παρατηρήσει στην επάνω δεξιά γωνία του blog μου, ένα νέο σκριπτάκι που έβαλα. Είναι ένα script, που ξεδιπλώνει την επάνω δεξιά γωνία, αφήνοντας να φανεί ένα banner που ενθαρρύνει τον επισκέπτη σας να εγγραφεί στο RSS Feed του Blog σας.

Βάλτε το ποντίκι σας στην επάνω δεξιά γωνία του blog μου να το δείτε.
Σας άρεσε;
Σε όποιον το θέλει, ας διαβάσει παρακάτω πώς μπορεί να το βάλει κι ο ίδιος στο δικό του blog.

1. Πρέπει να έχετε πρόχειρο το feed του blog σας. Προτείνω να κάνετε έναν λογαριασμό στο Feedburner και να 'κάψετε' εκεί το στάνταρ feed του blog σας.

2. Κάντε login στο Blogger,
Πηγαίνετε Layout > Edit Html > και πατήστε Ctrl + F

Ψάξτε και βρείτε το: </head>

και επικολήστε τον παρακάτω κώδικα, πάνω απο αυτό..

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>

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

Τώρα βρείτε το <body> tag και τοποθετήστε τον επόμενο κώδικα, μετά απο αυτό.

<div id='pageflip'>
<a href='http://feeds.feedburner.com/blogspot/yabCV' target='_blank'><img alt='' src='http://img515.imageshack.us/img515/2742/pageflip1.png'/></a>
<div class='msg_block'/>
</div>

Στον κώδικα βλέπετε ξανά δύο γραμμές, με κόκκινα γράμματα. Αντικαταστήστε την πρώτη με το Feed URL του δικού σας blog, και την δεύτερη με κάποια δική σας εικόνα, ή αφήστε το όπως είναι.

***Επειδή στα σχόλια διάβασα πως αρκετοί είχατε μύνημα σφάλματος, αντέγραψα τον αυθεντικό κώδικα απο το δικό μου πρότυπο, μιας και σε μένα λειτουργεί άψογα, μην τυχόν και υπήρχε κάπου κάτι λάθος (σήμερα, 14 Δεκεμβρίου 2010).

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

"Εάν σε ενδιαφέρουν οι αναρτήσεις μου, έχε υπ' όψη πως μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνεις εγγραφή με email, λαμβάνοντας απ ευθείας κάθε μου ανάρτηση στα Εισερχόμενά σου, κάνοντας εγγραφή στο Newsletter μου
Σε ευχαριστώ που με διαβάζεις,"

Νικόλας




Print this post



Related Posts :



18 σχόλια:

Johnpatra είπε... Best Blogger Tips

oraio auto to hack.
re niko ekei pou les "Τώρα βρείτε το tag και τοποθετήστε τον επόμενο κώδικα, μετά απο αυτό." ennoeis to body?
pantos den mporo na to petyxo ego ayto.mou leei oti den einai sosta kleismena.


ΓΙΑΝΝΗΣΒΕΡ είπε... Best Blogger Tips

Και σε εμένα, Νίκο, λέει το ίδιο: Δεν είναι σωστά κλεισμένο το script. Ευχαριστώ!


AATON είπε... Best Blogger Tips

Έσβησα τον κώδικα και τον ξαναέβαλα, και δούλεψε ξανά. Γιατί σας βγάζει σφάλμα;

Πιθανή λύση:
Έχετε μήπως πάνω απο το /head και ανάμεσα σ' αυτό, κάποιον άλλον κώδικα; Αν ναι, βάλτε αυτόν τον κώδικα πάνω ακριβώς απο το /head.

Ο δεύτερος κώδικας μπαίνει μετά το body. Δεν ξέρω γιατί δεν το έδειχνε στην αρχική ανάρτιση μα το διόρθωσα.
Δοκιμάστε πάλι.


ΓΙΑΝΝΗΣΒΕΡ είπε... Best Blogger Tips

Δυστυχώς μου ξαναγράφει αυτό: Δεν ήταν δυνατή η ανάλυση του προτύπου σας, επειδή δεν είναι σωστά μορφοποιημένο. Βεβαιωθείτε ότι όλα τα στοιχεία XML είναι σωστά κλεισμένα.
Μήνυμα σφάλματος XML: The element type "script" must be terminated by the matching end-tag "".


Johnpatra είπε... Best Blogger Tips

ναι ουτε εμενα και ειναι κριμα γιατι ειναι πολυ ωραιο.επισης το ιδιο σφαλμα μου αναφερει οταν προσπαθω να βαλω 3 ή παραπάνω στήλες στο footer(κατω - κατω).


ΓΙΑΝΝΗΣΒΕΡ είπε... Best Blogger Tips

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


Johnpatra είπε... Best Blogger Tips

οχι εγω δεν τα καταφερα.
Δάσκαλε ποια ιδέα λες μήπως τα καταφέρω κι εγώ?


Johnpatra είπε... Best Blogger Tips

τώρα μου βγήκε!
με τη βοηθεια και του ΓΙΑΝΝΗΣΒΕΡ φυσικα!
παλια δεν μου εβγαινε μαλλον επειδη εβαζα αλλη διευθυνση απο αυτην του feedburner.
σας ευχαριστω και τους 2!


αναρχόβλαχος είπε... Best Blogger Tips

πως ρε παιδια τι κανατε,γιατι και μενα το ιδο προβλημα μου βγαζει..ωραιο παντως..καλημερα


Johnpatra είπε... Best Blogger Tips

akolouthise opos leei o nikos tis odigies pano kai tha sou vgei.ekei pou leei na valeis tin url tou feed soy (http://feeds2.feedburner.com/yourFeed_code) prepei na einai ayti i ipiresia kai oxi alli.


TeO` είπε... Best Blogger Tips

Εγώ δεν τα κατάφερα παιδιά.. Μου γράφει ότι κάποιο script δεν κλείνει σωστά και το κοίταξα και κλείνει μια χαρά. Κάπου υπάρχει κάποιο λαθάκι ή φταίει ότι πάνω από το < /head > έχω άλλο widget. Τι να κάνω σε αυτή την περίπτωση; ποιο πάνω αναφέρεις κάτι αλλά δεν καταλαβαίνω.


AATON είπε... Best Blogger Tips

Θέλεις να το προσπαθήσω εγώ ΤεΟ?


TeO` είπε... Best Blogger Tips

Ναι. Να σε κάνω διαχειριστή του blog;


AATON είπε... Best Blogger Tips

Αν θέλεις ναι. Ξέρεις πως υποθέτω


ΦΟΥΡΝΙΩΤΗΣ είπε... Best Blogger Tips

ΓΙΑ ΣΟΥ ΦΙΛΕ ΜΟΥ ΜΕ ΕΧΕΙΣ ΒΟΗΘΗΣΕΙ ΠΑΡΑ ΠΟΛΛΗ ΑΛΛΑ ΕΧΩ ΠΡΟΒΛΗΜΜΑ ΜΕ ΤΟ ( Feed Subscription Peel εφφέ στο Blog σας )
ΔΕΝ ΜΟΥ ΤΟ ΑΝΕΒΑΖΕΙ
ΜΠΟΡΕΙΣ ΝΑ ΜΟΥ ΔΩΣΕΙΣ ΛΥΣΗ

ΕΥΧΑΡΙΣΤΩ
ΦΟΥΡΝΙΩΤΗΣ
fourna@hotmail.gr


AATON είπε... Best Blogger Tips

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


vaggelis είπε... Best Blogger Tips

Φίλε Νίκο πρώτα απ'όλα να σου ευχηθώ καλά Χριστούγεννα και Χρόνια πολλά!! Να είσαι γερός για να βοηθάς εμάς τους νέους Bloggers. Δοκίμασα και εγώ αυτό το hack και δουλεύει μια χαρά με τις δικές σου εικόνες. Αν όμως βάλω μια δική μου εικόνα (που έκανα με τη σχεδίαση) μετά το body , τότε επικαλύπτει την προηγούμενη και δεν φαίνετε το σήμα του Feed. Θα ήθελα, αν γίνεται να μου πεις πως κάνω μια εικόνα τρίγωνη(τη μαύρη εννοώ) ώστε να γράψω το δικό μου όνομα του blog. Ευχαριστώ πολύ!!


BUGATSINHO είπε... Best Blogger Tips
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

Δημοσίευση σχολίου

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next