Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

Feed Subscription Page Peel Effect Add For Blogger (στη πανω δεξια γωνια)


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Από τα καλύτερα και αγαπημένα μου blogger hacks κι αυτό, που θέλω σήμερα να το μοιραστώ μαζί σας. Είναι ένα απίστευτα όμορφο blogger εφέ για το blog σας, που μπαίνει στην πάνω δεξιά γωνία του blog σας, ενώ αναδιπλώνει ανάλογα με τις κινήσεις του ποντικιού. Αυτό το add προοτρέπει τους επισκέπτες σας να εγγραφούν στο newletter σας στο feedburner.

ΣΗΜΑΝΤΙΚΟ: πρέπει να έχετε οπωσδήποτε λογαριασμό και newsletter στο feedburner μόνο! μην πανικοβάλεστε! δείτε το http://www.bloggertips.gr/2010/11/newsletter-how-to-add-feedburner-email.html κια φτιάξτε τώρα τον λογαριασμό σας!

Ακολουθήστε πιστά τα παρακάτω βήματα για να το εγκαταστήσετε στο blog σας:

1. Σύνδεση στον λογαριασμό μας από το blogger.com
2. Σχεδίαση> Επεξεργασία html
3. Με τη βοήθεια του ctrl+F βρείτε το </head> και επικολλήστε τον παρακάτω κωδικό αμέσως πάνω από το </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>

To http://www.wallheaven.com/subscribe.png προτείνω να το αφήσετε όπως είναι αν δεν έχετε να βάλετε κάτι καλύτερο.

Εγω για μένα θα το άλλαζα με το http://i723.photobucket.com/albums/ww239/johnpatra/social%20networks/avoda0.png, τώρα εσείς δεν ξέρω αν έχετε κάτι τέτοιο :).

4. Τώρα βρείτε το <body> και επικολλήστε τον παρακάτω κωδικό αμέσως μετά από το <body>

<div id='pageflip'>
<a href='http://feeds.feedburner.com/Johnpatrablog'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

Το Johnpatrablog στο http://feeds.feedburner.com/Johnpatrablog το αλλάζετε με τη διεύθυνση του δικού σας λογαριασμού στο feedburner. Πρέπει να βάλετε διεύθυνση μόνο από το feedburner αλλιώς δεν λειτουργεί! Και πρέπει να είναι της παραπάνω μορφής ΜΟΝΟ! Ουσιαστικά το μόνο που αλλάζετε είναι το Johnpatrablog.

Tο http://www.wallheaven.com/page_flip.png προτείνω να το αφήσετε όπως είναι αν δεν έχετε να βάλετε κάτι καλύτερο.

5. Αποθήκευση!


Αν σας άρεσε αφήστε ένα σχόλιο :)

Πηγές κωδικών: http://www.sohtanaka.com/,http://www.anshuldudeja.com/,http://www.cssreflex.com/
Copyrights: http://bloggertips.gr/

Stumble
Delicious
Technorati
Twitter
Facebook

19 comments:

Ύπνος είπε...

Λοιπόν εγώ το εφάρμοσα στο ιστιολόγιο μου αλλά μου βγήκε κάτω.Δεν είπατε πάνω δεξιά;;;
Ρίξτε μια ματιά: http://www.ypnos-blog.blgospot.com/

Θα ήθελα να μου πείτε τι μπορεί να έκανα λάθος.

Ανώνυμος είπε...

οντως βγαινει κατω δεξια και ειναι δωρο-αδωρο γιατι πολλοι δεν το βλεπουν.
εαν ξερεις πες πιο σημειο του κωδικα να αλλαξουμε.

bloggertips.gr είπε...

παιδια θα το δω και θα σας πω..
λογικα καποιο αναθεματισμενο down θα ειναι που θα θελει αλλαγη με up...

pandelees karagiann είπε...

λοιπον,...επειδη τα πολλα script "καινε" και μπλοκαρουν, και "κρασαρουν", και συγκρουονται μεταξυ τους, Γιαννη μου να σου παρουσιασω τη δικη μου εκδοχη (μαιμου) ...xaxaxa...χωρις script και τελειως ακινδυνο, γρηγορο, και εγκυημενο οτι θα μπει εκει που θελεις
http://www.egioparalia.blogspot.com/ ...(επανω δεξια),(και στελνεις σε οποιο λινκ θελεις)

bloggertips.gr είπε...

χαχα στειλε το λινκ ρε συ να το δουμε....

ρε παιδια αν προσεξετε στον κωδικα καπου λεει "no-repeat right top;" οπότε μια χαρά ειναι ο κώδικας. θα τον δοκιμάσω και εγω σε κάτι δικά μου να δω τι λάθος γίνεται...

Unknown είπε...

ΕΓΩ ΤΟ ΕΒΑΛΑ ΣΤΟ BLOG ΜΟΥ ΚΑΙ ΔΟΥΛΕΥΕΙ ΤΕΛΕΙΑ....ΠΟΛΥ ΚΑΛΗ ΔΟΥΛΕΙΑ ΓΙΑΝΝΗ..!!!

tech&tech είπε...

οταν λες τελεια εννοεις οτι εχει εγκατασταθει πανω δεξια;

Ύπνος είπε...

Ρε φίλε όμως δές και στο δικό μου μπλόγκ...
Τα έκανα όλα όπως είπες...
Αυτό στην κοσμάρα του...
Κατω-Δεξια

Τουλάχιστον θα προσπαθείσω να το βγάλω και να το ξαναβάλω...

Ανώνυμος είπε...

τοκανα εγω,το εβγαλα και το ξαναβαλα,μια απο τα ιδια.

Ανώνυμος είπε...

ΑΔΕΡΦΕ ΤΟ ΕΚΑΝΑ ΚΑΙ ΕΓΩΩ
ΚΑΙ ΔΕΝ ΕΜΦΑΝΙΖΕΤΕ ΠΑΝΩ ΔΕΞΙΑ ...

πρεπει να υπαρχει καποιο λαθος στον κωδικα η κατι αλλο..

Αν μπορεις δοσε μια λυση ..

Ευχαριστωω

Unknown είπε...

ΠΑΙΔΙΑ ΕΓΩ ΑΚΟΛΟΥΘΗΣΑ ΚΑΤΑ ΓΡΑΜΜΑ ΤΙΣ ΟΔΗΓΙΕΣ ΚΑΙ ΕΜΦΑΝΙΣΤΗΚΕ ΠΑΝΩ ΔΕΞΙΑ ΚΑΙ ΔΟΥΛΕΥΕΙ...ΜΠΟΡΕΙΤΕ ΝΑ ΤΟ ΔΕΙΤΕ ΕΔΩ http://www.magicfmagrinio.com

Ανώνυμος είπε...

καμια αντιρρηση,το ειδα.
δεν μπορω να καταλαβω τι παιζει με το blogspot και εμφανιζεται κατω.
το δοκιμασα και σε ενα αλλο πειραματικο blog που εχω για δοκιμες,παλι κατω το βγαζει.
και κατι ασχετο,φιλε johnpatra ειναι ευκολο να να φτιαξεις ενα tutorial για την αριθμηση των σελιδων με τον κωδικα που εχεις βαλει.
εχω βαλει και εγω numbered page navigation ,μια χαρα δουλευει αλλα σταματαει στις 500 αναρτησεις.
κατι αλλα που δοκιμασα χωρις περιορισμο σελιδων ,δεν δουλεψανε.
ευχαριστω.

bloggertips.gr είπε...

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

Λοιπόν παιδιά τι να σας πω? Δεν ξέρω τι φταίει.

Ο φίλος magicfm το έχει βάλει μια χαρά.
Εγώ, ο ίδιος, όπως βλέπετε το έβαλα μια χαρά και εδώ στο bloggertips.gr και στο johnpatra.gr.

Επομένως οι οδηγίες είναι μια χαρά και δεν έχουν λάθος.

Απορώ πραγματικά γιατί έχετε πρόβλημα εσείς.

Μήπως βάζετε τον πρώτο κώδικα κάτω αντί για πάνω που πρέπει από το head?

Μήπως μετά βάζετε τον κώδικα πάνω αντί για κάτω από το body?

Ανώνυμος είπε...

οχι,μια χαρα βαζω εγω προσωπικα τους κωδικους.
καταληγω στο συμπερασμα οτι επειδη εχω και αλλους css κωδικες καπου μπλοκαρει ,αλλη εξηγηση δεν μπορω να βρω.
πιθανον εαν εκανα ενα ξεκαθαρισμα στον editor και ξαναπερναγα τους κωδικους σε καθαρο πλεον template να λυνοταν το θεμα,αλλα ειναι φασαρια και το αφηνω να το κανω στο μελλον.

Ανώνυμος είπε...

#pageflip {
position: relative;
right: 0; top: 0;
float: right;

αλλαξτε το relative με 0 . δουλευει?

http://expekt.blogspot.com/

Ανώνυμος είπε...

διόρθωσε το γιαννη αν μπορεις το σχολιο μου. Με μηδέν (0) οχι με ο .

Δα(ί)μων Μαινόμενος είπε...

Αγαπητε johnpatra η εικονα εχει παθει κατι και βγαζει worldpress .Μηπως θα μπορουσες να μας πεις τι να κανουμε η να φτιαξουμε μια σαν την δικια σου http://i723.photobucket.com/albums/ww239/johnpatra/social%20networks/avoda0.png ?Ευχαριστω

Enimerosi είπε...

Οι φωτογραφίες που λείπουν

1) http://4.bp.blogspot.com/-hvqX7iFzYOQ/TxfcNMED1tI/AAAAAAAAAN0/cB4kgxcOGBE/s1600/subscribe.png

2) http://2.bp.blogspot.com/-ESCJ829O904/TxfcLduXcZI/AAAAAAAAANs/R1S9JRt6a8w/s1600/page_flip.png

Enimerosi είπε...

δείτε εδώ (http://enimerosi-news.blogspot.com/)

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

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *