Σάββατο, 23 Ιουλίου 2011

Διαγραφη του "Εγγραφή σε: Αναρτήσεις (Atom)" και προσθηκη Feedburner.

Print and PDF

Καλησπερα παιδια, σημερα θα δουμε πως μπορουμε να σφησουμε το "Εγγραφή σε: Αναρτήσεις (Atom)" που υπαρχει στο τελος της σιλιδας μας. Ακομα θα δουμε και πως να σφησουμε μαζι με το παραπανω και το "Εγγραφή σε: Σχόλια ανάρτησης (Atom)" που υπαρχει στο τελος τις καθε αναρτησεις μας. Περα απο αυτο βεβαια δεν ειναι αρκετο απλα να σφησουμε κατι αλλα και να ξαναφτιαξουμε επειδη ειναι καλο να υπαρχει αλλα να ειναι σε πιο ωραια μορφη. Για παμε να δουμε.




1) Πρώτα από όλα, συνδεθείτε στο λογαριασμό σας Blogger.
2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:
3) Πριν ξεκινήσουμε:
- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.
- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας)


4) Πατηστε Επέκταση προτύπων γραφικών στοιχείων.

5) Παμε τωρα να σφησουμε το "Εγγραφή σε: Αναρτήσεις (Atom)" ψαξτε λοιπον τον παρακατω κωδικα(Ctl+F):

<b:includable id='feedLinks'>

6) Λιγο πιο κατω θα βρειτε τον παρακατω κωδικα:

<b:include data='feedLinks' name='feedLinksBody'/>

- μολις τον βρειτε απλα σφηστε τον.

7) Στην συνεχεια παμε να σφησουμε και το "Εγγραφή σε: Σχόλια ανάρτησης (Atom)" ψαξτε για τον παρακατω κωδικα ή απλα πηγαιντελιγοπιο κατω απο κει που εισασταν πριν (Ctl+F):

<b:else/> <!--Post feed links -->

8) Και παλι λιγο πιο κατω θα βρειτε τον παρακατω κωδικα οπου και θα τον σφησετε:

<b:include data='post.feedLinks' name='feedLinksBody'/>

- Και απλα πατηστε αποθηκευση προτυπου.

9) Παμε τωρα στο να δημιουργησουμε ενα σημειο οπου θα μπει αυτοπου μολις σφησαμε δηλαδη το "Εγραφη σε Feedburner".

- Αφου εχουμε κανει εγραφη στο Newsletter του Feedburner παμε δουμε πως να το φτιαξουμε.

10) Παμε λοιπον αφου ειστε ηδη στο Επεξεργασια Html ψαξτε για τον παρακατω κωδικα (Ctl+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://img688.imageshack.us/img688/4919/10722345.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 της εικονας οπου μπορειτε φυσικα να αλλαξετε.

11) Παμε τωρα να ψαξουμε να βρουμε το (Ctl+F) :

<body>

- Οπου απο κατω του επικολουμε τον παρακατω κωδικα:

<div id='pageflip'>
<a href='
http://feeds.feedburner.com/BlogyTricks'><img alt='' src='http://img688.imageshack.us/img688/4919/10722345.png'/></a>
<div class='msg_block'></div>
</div>

 - Αλλαζετε φυσικα τα κοκινα γραμματα με τα δικα σας στοιχεια και την δικια σας εικονα.

12) Και αυτο ειναι ετοιμο και πολλη ωραιο!


- Demo ειναι το ιδιο μας το Blog, και το παρακατω Βιντεο:



- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του
κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.
  
- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή πατηστε παρακολουθηση.
  Ευχαριστω.

Copyrights: BlogyTricks©

2 σχόλια :