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://feeds2.feedburner.com/yourFeed_code'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

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

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

Νικόλας

Εάν σου άρεσε, κάνε σε παρακαλώ ένα Link Back γι' αυτή την ανάρτηση,