Author, Time and Comment Below Post Title

Cuba tengok post title Beeha, bawah tu ada nama Beeha , tarikh dan masa post kan? Beeha tak suka tengok bilangan komen , nama penulis kat bawah.. Beeha rasa kemas lagi kalau ada di bawah post title. So, korang nak buat macam Beeha jugak? Boleh, Tapi make sure follow Beeha dulu. Heheeehee. Kejam kan,... Takde lahh sekejam tu, kite melawak jea.
Jadi, jum kita start tutorial kita. 
1. Sign In ---> Dashboard ---> Layout
2. Ada kotak Main a.k.a Blog Posts ---> Edit
Kotak macam di bawah akan keluar lepas korang tekan Edit. Jadi, tickkan yang macam Biha tick ni. Tick yang kedua tu korang boleh pilih sama ada nak tunjuk masa atau tarikh atau kedua-duanya sekali. Dan SAVE.
klik gambar untuk zoom


3. Kemudian, pergi ke Template ---> Edit Html ---> Ctrl+F and search 
<div class='post-header-line-1'/>
or
<div class='post-header'>

4. Then , copy this below code and paste it after the above code.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDSsqECMerAp15gutqwd_vH317CNgmgQH-ivwcZY2a8YPT8SEj3Y_-PIflAR15XcDtCp_BSuP1iTBZEyTLpRUduAMPcKycnzkEGcF1cvscsjhraGGJY0tIHb5_Rf5jNSDP9oyGVPpehoil/s1600/author.gif) no-repeat scroll top left;margin-left:80px;padding-left:25px;font-size:12px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRWr4mxa3GM0JT_wVwsjlgD1geR8VHgQiUQMJrLNpaNzYBcJQWMzFa_6e7rahiMFjxcgEp_e-WywEc5cQomIIQvyEWOWPf1qN8RJVoAIgSvsfTiz4VMFsSMTrhCJWFvltfX6kUZWAmzBxp/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;;font-size:12px;'><data:post.timestamp/></font>  |  <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEissJtGUKAJfTvGfc0fKbpd8YBVVNjih_MU6328OCxKHfrMqE7BI_Xj6a6iA7PgEyz6EF3dadavXysdt8X1UTJt6w2W3lZoGFYB9ZfXPl8IXZAS4ZTqB2zazoN0DkdMfMlwcT7jKNZoEpEd/s1600/tag.png) no-repeat scroll top left;padding-left:25px;font-size:12px;'><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' >       <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/AVvXsEiuCwgvVqpdi1lfPXhObCxJCzTbRjY78oHY2TpTrRhbOuVI4MdRvkDC5TIb4EpWmhc09wPS7_Rl5xt6rBdWOltTkX6N8aztQ8tOuZuesFCgsvg67u-XreAGuG7pU2IRtN8KUiUt0G-Y3Ra2/s1600/comment-icon.png) no-repeat scroll top left;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>0 Comment<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment <b:else/><data:post.numComments/> Comments </b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>
            </b:if>



Red : Author icon
Green : Time icon
Purple: Label Icon
Blue : Comment icon



NOTE : If you have TWO <div class='post-header-line-1'/> , please put the above code for both <div class='post-header-line-1'/>.


5. Lastly, PREVIEW blog and SAVE if no error. Thanks. :)





Beeha Azman

You Might Also Like

3 Comments

Feel free to leave your comment here. Thank you. ;)

instagram