Μηνύματα στο κάτω μέρος των αναρτήσεων με HTML table και εικόνα.

  Καλησπέρα σε όλους !

   Σήμερα θα δούμε πως μπορούμε να προβάλλουμε κάποια μηνύματα κάτω από τις αναρτήσεις μας  χρησιμοποιώντας απλά HTML table και μια απλή εικόνα.

  Μπορούμε να δείξουμε μηνύματα όπως μια πρόσκληση στους αναγνώστες μας , να εγγράφουν στο RSS / Feed μας η μια πρόσκληση να μας ακολουθήσουν στο Twitter η και κάποια ανακοίνωση

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

  Παρακάτω  εγώ χρησιμοποιώ 2 μοντέλα με τις εικόνες  - ένα για RSS / Feed  , ένα για  Twitter και 1 μοντέλο με απλό  κείμενο.

Ας τα δούμε τώρα στην πράξη :

Πρόσκληση για εγγραφή στο RSS / Feed

Εγγραφείτε στο feed αυτού του blog,ή λάβετε όλες τις ενημερώσεις με email.

Πρώτα απ ‘ όλα βρείτε μια εικόνα των 32 x 32 px. και φιλοξενήστε την στο Picasa ή κάποια άλλη υπηρεσία φιλοξενίας που προτιμάτε.  Αντιγράψτε το URL της εικόνας και επικολλήστε το  στο Σημειωματάριο.



Τώρα πηγαίνετε στην σελίδα που κάνετε την μετάδοση της ροής δεδομένων σας ( στην σελίδα των feeds σας ) και αντιγράψτε την διεύθυνση του Rss feed σας και του email feed σας και επικολλήστε και αυτά στο Σημειωματάριο.

Σε αυτό το βήμα : Πηγαίνετε Διάταξη – > Επεξεργασία HTML – >  κάντε κλικ Επέκταση προτύπων γραφικών στοιχείων και την ψάξτε  για την παρακάτω γραμμή :

<div class='post-footer-line post-footer-line-3'>

Επικολλήστε τον παρακάτω κώδικα ακριβώς  κάτω από αυτή τη γραμμή:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined"><img alt=" " src=' http://χχχ.com/Το url ΤΗΣ ΕΙΚΟΝΑΣ .png ' style='width: 32px; height: 32px;'/></td>
          <td style='text-align: left;'><span style='font-weight: bold;'/><b>Εγγραφείτε στο <a href=' URL από το FEED του BLOG '>feed </a> αυτού του blog,ή λάβετε όλες τις ενημερώσεις
    με <a href=' URL απο το FEED του EMAIL '>email</a></b>.<br/>
          </td>
        </tr>
      </tbody>
    </table>
    </b:if>

Τώρα αντικαταστήστε τα URL  του εικόνα και των feeds σας ( με τα κόκκινα ) με τα δικά σας .
Μπορείτε να προσαρμόσετε το κείμενο , με το μπλε όπως εσείς επιθυμείτε , και τα χρώματα των συνόρων ( borders ) και του φόντου (background) με τα πράσινα , εδώ χρησιμοποίησα RGB χρώματα
Για να αλλάξετε το χρώμα των συνόρων, απλά  αλλάζετε τους αριθμούς (με πράσινο) :

               border: 2px solid rgb(230,230,250 ) ;


Και για να αλλάξετε το χρώμα του φόντου, αλλάζετε :


               background-color: rgb(239, 239, 239);

Μπορείτε να δείτε  εδώ έναν πίνακα των RGB χρωμάτων

Πρόσκληση για μας ακολουθήσουν στο Twitter

Ακολουθήστε μας στο Twitter για άμεση και πλούσια ενημέρωση!

Πηγαίνετε Διάταξη – > Επεξεργασία HTML – >  κάντε κλικ Επέκταση προτύπων γραφικών στοιχείων και την ψάξτε  για την παρακάτω γραμμή :

<div class='post-footer-line post-footer-line-3'>

Επικολλήστε τον παρακάτω κώδικα ακριβώς  κάτω από αυτή τη γραμμή:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined"><img
alt=""
src=" http://ΧΧΧ/URL ΕΙΚΟΝΑΣ ΜΑΣ /twitter-32x32.png "
style="width: 32px; height: 32px;" align="middle" /></td>
      <td style="text-align: left;"><span
style="font-weight: bold;"></span><b> Ακολουθήστε μας  στο<a
href="twitter.com/URL του Twitter ΛΟΓΑΡΙΑΣΜΟΥ ">Twitter </a> για άμεση και πλούσια ενημέρωση!</b><br />
      </td>
    </tr>
  </tbody>
</table>
</b:if>  

Αντικαταστήστε τα URL  του εικόνα και των feeds σας ( με τα κόκκινα ) με τα δικά σας .

Ένα απλό μήνυμα κειμένου

Εγγραφείτε στο feed ή λάβετε ενημερώσεις με email. Ακολουθήστε το blog στο Twitter!

   
   
Πηγαίνετε Διάταξη – > Επεξεργασία HTML – >  κάντε κλικ Επέκταση προτύπων γραφικών στοιχείων και την ψάξτε  για την παρακάτω γραμμή :

<div class='post-footer-line post-footer-line-3'>

Επικολλήστε τον παρακάτω κώδικα ακριβώς  κάτω από αυτή τη γραμμή:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 2px solid rgb(255 ,182, 193 ); background-color: rgb(250 ,240 ,230); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td style="text-align: left;"><span
style="font-weight: bold;">Εγγραφείτε στο</span><a
style="font-weight: bold;"
href="URL από το FEED">feed </a><span
style="font-weight: bold;"> ή  λάβετε ενημερώσεις με </span><a
style="font-weight: bold;"
href="URL από το FEED του EMAIL">email</a><span
style="font-weight: bold;">. Ακολουθήστε το blog στο </span><a
style="font-weight: bold;"
href="URL σας από το  TWITTER">Twitter</a><span
style="font-weight: bold;">!</span><br />
      </td>
    </tr>
  </tbody>
</table>
</b:if>  

Αλλάζετε τα  URL  του εικόνα και των feeds σας ( με τα κόκκινα ) με τα δικά σας .
Αν έχετε κάποιο πρόβλημα η κάποια απορία , μπορείτε να αφήστε τα σχόλια σας