Featured

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

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

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/AVvXsEjPGkOWX9i_YosN6mGmpgoBIjBuUzIaDiHC3sBSDD5jDcJkKq-1J_AhYH9hL__yaLp0_AxeRTxgrqiOY4d8N_eII_2oPQc0gmX6v_D_vh6W0pi57RBjeiH-HijthyphenhyphenMaZlY2mUvPGl87D3bw/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/AVvXsEgptsdREIFtdNKlZLAEM_pq7hjg66aWkhvozm2WjgJLeBS5YRGRWlx1J0l6ULp30LT_OydKb0imWYJK-lcXeRK-cwlge7rqA8bklwT8s5BwQ9Km7HTIiwS6IPDSMeo0Db9T54Aehm6EqHCJ/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/AVvXsEh4q0fJaBl07lt0SyLiMnaGdYdTc5TbB4wZ0_MKoyPbkQiXMgC8KWDBB1xcBvhGdJIgvdhpjWqVwbHF64pykaQCYmbs1ePu65Kev7LzD2qT5ODvlGOOXY99KblpiTOYgneTwclOfgYyPl8e/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/AVvXsEi11Qha130XbMwSrSXmfUiJXn7aM0aAlN8addl6SUtJJvnWw0sKOghgyyucpPT6ey78nxtY8H7gBBNKmFcfRS_NdZJQchZcJEGyD2OPwyS_xKtu8l7ZZM4fQ1BgepIyVypoHcN4YvBgQbpB/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)
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Anggi Rocker

2 komentar:

Terima kasih telah berkunjung ^_^ ! Silahkan tinggalkan komentar untuk respon/pertanyaan.
[-] jangan berkomentar SPAM (promosi, dll,)
[-] jangan komentar yang berisi link hidup,
[-] jangan berkomentar yang tidak relevan dan berkualitas rendah ,karena akan saya abaikan dan tidak akan saya Approve. Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.
SERING-SERING BERKUNJUNG SOBAT

 
Support : Google Impact | Google.com
Copyright © 2013. 1# | Knowledge and inspiration - All Rights Reserved
Template Modify by Anggirocker
Proudly powered by Blogger