Post–footer : mengenal tag html “post–footer” pada template minima

Sambil nunggu datang-nya kantuk, dan sambil nunggu tulisan apa yang akan di publis berikutnya. Saya mencoba mengulang tulisan tengtang “ Post –Footer “ . dan tentunya saya tambahkan beberapa penjelasan seiring pengembangan informasi yang  saya dapatkan.

Jika saudara belum mengetahui apa itu “ Post – footer “ ? saya telah buat ilustrasi gambar sebagai petunjuk-nya biar jelas.

Sudah jelaskan maksud tentang post-footer ini. Sekarang bagaimana untuk mengenali kode htmlnya satu persatu dalam templatenya ? bagaimana cara menganti tulisan “ Di posting oleh Pemilik Blog “  Menjadi “ Penulis : Nama Penulis” ? Dan bagaimana cara menganti tulisan “ Label: Nama Label “ menjadi “ Categorie :NamaLabel”?

baiklah mari kita mulai.

Ini merupakan penjelasan awal ( div class ) tentang post-footer

<div class='post-footer'>

A : Line Pertama :

Ini merupakan penjelasan baris pertama ( atau tag yang mewadahi apa yang ada pada baris pertama pada post-footer).

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

ilustrasi gambarnya :

 

c. ini merupakan tag yang menjelaskan “ Author/nama pemilik blog. ( di awali dengan tag <span class='nama class'> dan tag penutup-nya </span>

<span class='post-author vcard'>
       <b:if cond='data:top.showAuthor'>
         <data:top.authorLabel/>
         <span class='fn'><data:post.author/></span>
       </b:if>
     </span>

ilustrasi gambarnya :

* Keterangan * :

kita bisa saja menganti pada tag html name author di atas yakni :

<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>

menjadi seperti ini :

<b>Penulis</b> :
<a href=" http://www.blogger.com/profile/06322035097256660173"
class="fn n url"><b>Juragan Beras</b></a>

hasilnya :

“ alamat link yg berwarna merah, sesuaikan dengan alamat profile masing-masing, atau bisa saja alamat link profile yang lebih spesifik “.

d. ini penjelasan tentang waktu di publish-nya postingan.

<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
      
….. dst …. dst 

      </span>

ilustrasi gambar :

 

e. ini penjelasan tentang tag html komentar.

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            … dst …. dst…dst

     </span>

ilustrasi gambar :

 

e. ini penjelasan tentang post-icon email dan  penjelasan tentang quickedit pencil ( dalam edit mode.. red )

<span class='post-icons'>
       <!-- email post links -->
       <b:if cond='data:post.emailPostUrl'>
        … dst … dst .. dst
             <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
         </a>
         </span>
       </b:if>

<!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>

ilustrasi gambarnya :

* keterangan * :

tulisan yang berwarna merah merupakan url icon/gambar, jika kita ingin menganti icon/gambar emailnya.

 

f. dan di bawah ini merupakan tag html  penutup untuk post-footer baris pertama yang harus ada. ( agar terhindar dari kesalahan well-formed.red)

</div>

 

B. Line Kedua :

Pada baris kedua ( post-footer-line-2 ). dalam template minima hanya mempunyai satu keterangan saja yakni ; post-labels.

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

dan ini penjelasan tentang tag post labelnya :

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
         <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

ilustrasi gambarnya :

* keterangan *

tulisan berwarna di atas bisa kita ganti, jika kita ingin mengantinya dengan tulisan lain misalkan : Categorie.

hasilnya :

sedangkan tag di bawa ini sebagai penutup untuk post-footer-line-2.

</div>

 

C. Baris Ketiga.

Sedangkan baris ketiga pada template minima tidak ada tag html apapun, akan tetapi jika kita mau kita bisa menambahkan tag html yang sekiranya kita anggap perlu. seperti menambah sosial bookmark , related post dll.

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

Seperti biasa  setiap sebuah class atau id  harus ada tag penutupnya, demikian juga untuk <div class=”post-footer”> ini . harus ada tag penutupnya, yang di simpan di ujung akhir baris ketiga . yakni :

</div>

jadi jika kita ringkas penjelasan tentang tag html post-footer ini, rangkumannya seperti ini :

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
tentang : * NameAthour * TimeStamp * post-comment-link *post-backlinks  *Icon Mail  *Quick Edit.
</div>

<div class='post-footer-line post-footer-line-2'>
* post-label.
</div>

<div class='post-footer-line post-footer-line-3'/>
* bisa di isi dengan tag html.
    </div>
  </div>

 

Update :

Dengan mengetahui struktur dan antara tag yang mengapitnya, yakni <span class=” “> isi </span>. kita dapat memindah-mindahan posisi, authorname,komentar, label dst.

ilustrasi gamb .

* NOTE

Bagimana cara menambahkan background image atau warna ke dalam post-footer ? Bagimana cara menambahkan sosial bookmark ke dalam post-footer ?.

keterangan bisa di lihat pada postingan berikut ini ;

Related Posts

from tag editblog

• Menambah Icon dan Bakcground-Image pada elemen post-footer
• Post-Footer : Menambah Sosial Bookmarking

(more..)

del.icio.us tags: Post-Footer, Tutorial Blogger Blogspot

Page views this post: reader