Cara Membuat Post Info dan Tags di Blogger

Tor Template, Cara Membuat Post Info dan Tags di Blogger - Sesuai namanya, post info berfungsi untuk memberikan informasi tentang artikel yang bersangkutan. Misalnya, nama penulis artikel, jumlah komentar, waktu kapan artikel tersebut diterbitkan, dan lain sebagainya. Masalah ada hubungannya dengan SEO atau tidak saya juga kurang tau, tapi setidaknya membuat tampilan artikel blog jadi lebih keren :'v. Sedangkan tags sendiri berfungsi untuk menampilkan termasuk ke dalam label atau kategori apa artikel tersebut.

Baca juga vroh : Cara Membuat Auto Readmore Dengan atau Tanpa Javascript di Blogspot

Membuat Post Info dan Tags di Homepage Blog

Oke, kita buat dulu post info pada bagian homepage, disini saya asumsikan sobat menggunakan auto readmore tanpa javascript pada postingan sebelumnya.

1. Seperti biasa, login dulu ke akun blogger sobat.
2. Masuk Dashbord => Template => Edit HTML.
3. Copy kode css berikut diatas ]]></b:skin> atau </style> :

   .posthpmeta{background:#fff;padding-bottom:7px;margin:0;color:#666;font-size:12px}
   .kategori{color:#666;font-size:12px;padding:7px}

4. Pastekan kode berikut di atas <div class='post-snippet'> :

   <div class='posthpmeta'>
     <span class='author'>Posted by <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
       <span class='post-author vcard'>
         <span class='fn'><data:post.author/></span>
       </span></a>
     </span>
     <span class='clock'> at <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a></span>
   </div>

5. Lalu cari kode berikut :

   <div class='rm-button-wrap'>
     <a class='button' expr:href='data:post.url'>Read More &#187;</a>
   </div>

   Ganti dengan :

   <div class='kategori'>
     <span class='post-labels'>
       <b:if cond='data:post.labels'>
         Tags :
         <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>
   </div>

6. Setelah diedit, kode-kode tersebut akan tampak seperti berikut
   

   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
       <b:if cond='data:post.thumbnailUrl'>
         <a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
       <b:else/>
         <a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKUsGeMoRB-C7mYWk9U9IN6USl93JuYYQ5upLmVWwWKsnz7FoWVvjbKQy4mN_sJAMJRA4S6ouj3S71Lij0O98DkXr_tEs8Uwwz0kQynIShA6tXt6lVvmsoiXTbtiAUBrHWoEsYbXkMgY/s72-c/default.png'/></a>
       </b:if>
       <div class='posthpmeta'>
    <span class='author'>Posted by <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
           <span class='post-author vcard'>
             <span class='fn'><data:post.author/></span>
           </span></a>
         </span>
         <span class='clock'> at <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a></span>
       </div>
   <div class='post-snippet'>
         <data:post.snippet/>
       </div>
    <div class='kategori'>
         <span class='post-labels'>
           <b:if cond='data:post.labels'>
             Tags :
             <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>
    </div>
     </b:if>
   </b:if>

7. Klik Pratinjau template untuk melihat hasil sementara. Jika sudah sesuai klik Simpan template.

Membuat Post Info di Bawah Judul Postingan Blog

Setelah selesai membuat post info pada bagian homepage, selanjutnya kita akan membuat post info di bagian artikel tepatnya di bawah judul artikel.

1. Pertama, login dulu ke akun blogger sobat.
2. Masuk Dashbord => Template => Edit HTML.
3. Copy kode css berikut diatas ]]></b:skin> atau </style> :

   .postmeta{background:#fff;padding-bottom:0;color:#666;font-size:12px;margin:0 0 10px 0;border-bottom:1px dotted #ccc}

4. Cari kode <data:post.body/>. Biasanya kode ini ada lebih dari satu, coba pilih yang kedua, lalu pastekan kode berikut tepat di atasnya :

   <div class='postmeta'>
     <span class='author'>Posted by <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
       <span class='post-author vcard'>
         <span class='fn'><data:post.author/></span>
       </span></a>
     </span>
     <span class='clock'> at <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a></span>
   </div>

Dan hasilnya akan tampak :

^^Semoga Berhasil^^