Cara mengedit tampilan posting penulis, tanggal, label dan komentar dengan ikon di bawah judul postingan

Tweet

Dalam posting ini, saya akan menunjukkan cara untuk add default Nama Penulis, Tanggal Post, Label dan Komentar dengan beberapa ikon kecil di sebelah kiri satu sama lain. Anda dapat melihat di bawah setiap judul posting saya, beberapa rincian seperti nama penulis, saat tulisan telah dipublikasikan, label dan link komentar menghitung. Saat ini tidak ada komentar diposting link mengatakan 'Jadilah yang pertama untuk berkomentar!' dan ketika hanya ada satu komentar mengatakan '1 komentar sejauh ini, dan ini adalah hack yang bagus yang akan membuat blog Anda terlihat indah dan profesional.

Langkah :

1. Buka Akun blogger Anda
2. Pergi ke Template > Edit HTML > Proceed > centang Expand Template Widget (untuk keamanan, backup template Anda)
3. Cari koden dibawa ini :

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

   4.  Jika Anda tidak menemukan kode diatas cari kode dibawah ini :

 <div class='post-header'> 

   5.  Masukkan kode dibawah ini tepat pada kode diatas :

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPaG49KWdE0jvUyQTXI-6IwIZXmJNR_ECW6U5uAfUfA-XmU2aMkTGgcu-XAUJ2aGCSb6Pomk1czGF-NgicRpwlvpCFqMPWn83LnK2To5GxrDfUCUrvUaBQLhksiVFp0X2mUDpiGR3rWFl8/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoCW8ApMzbhGjWIBzhX9dxYyFUNFhyphenhyphentJxMjQjCQBRk7YmOEpT7eu-Zhn-yVNsJAHGzRirKHDROijUSsKMdIcXFQpandJHjP511bWuP1Idg7gndBb5qJlVjToTMDavmG_Zz8NvINZr1LgH/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC8gXpqBnLWRFUUzV-mPrNWFwiw8wvSLp4yCh_7fmJcFZvi2dm8MIzjPJkmHuzSTB_bb1G2UH1EjlGWAKia3in_KqNqR1kcViD_vDN50tp_LRp3-IdnIE_8CHuJRM0n3HBAR65wPinjynP/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop></b:if></font><span class='post-comment-link' style='Float:right;'>        <b:if cond='data:blog.pageType != &quot;item&quot;'>          <b:if cond='data:post.allowComments'>            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTNXqp9rSNm6pEBs_t5TUC2TBMvE7cG0eo9I0GYOpZKkKHjRd6AxApTWAzcMp4-kmUihnP47vTLeqHRezLlf-aJ_OiHWSrN5Ut6uwjqof1RqAD70SYqVUsFh7OLGyBw9RBvnHuwtOYYE6c/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>          </b:if>        </b:if>      </span> 

Keterangan :

1. Ganti URL gambar sesuai keinginan Anda pada :

Red (Penulis)
Green (Waktu/tanggal)
Blue (Labels)
Violet (Comment bubble)