Menampilkan Penulis, Tanggal, Label Dan Komentar Post Dengan Ikon Di Bawah Judul Post

Tutorial ini akan mengajarkanmu cara untuk menambahkan isu lebih lanjut di post Blogger menyerupai nama penulis, tanggal posting, label posting dan link komentar. Bagaimana cara kerjanya? Link komentar akan menampilkan teks 'be the first to comment!' untuk posting tanpa komentar atau anda juga sanggup mengubah teksnya nanti menyerupai 'Add Comment' bahkan teks lain yang anda pikirkan dan sehabis anda mendapat komentar, dia akan menampilkan '1 Comment so far'. Di sisi kiri, dia akan menampilkan nama penulis, ikon jam serta tanggal posting dipublish atau diupdate, seta label posting.

Demo

Cara Menampilkan Penulis, Tanggal, Label dan Komentar Bubbles di Blogger?

1. Login ke Anda Blogger Dashboard > masuk ke tab 'Template' dan tekan tombol 'Edit HTML':

Masuk ke arahan template

2. Klik di mana saja sempurna di dalam area arahan dan tekan tombol CTRL + F untuk membuka kotak pencarian code html blogger.

Membuka kotak pencarian

3. Ketik atau tempel di bawah arahan di kotak pencarian dan tekan Enter dua kali untuk menemukan terjadinya kedua hal itu:

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

Catatan: Jika anda tidak sanggup menemukan baris code di atas, cari code yang satu ini:

<div class = 'post-header'>

4. Setelah baris itu, tambahkan berikut:

<div style="margin: 10px 0;"><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Y6cfE-SH_vXzD6J2G3PA6ZDXagUw0rv-yALXCewQLE2ctXj23NOdH5n1yMzSwmxjePtyoCj6PULlK72D_6rQCVw0SuKeXgyByWiVY4am9DzYkpYgkX8qOrWEy-34v2v3A-GfLUKFmdxT/s1600/author.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.author/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6M0msRn3YeDKPMR57Nwc6Ma69ab4okGWxjyQS8GbPDVL6EfOfJLPQasZ4bfYmLvqcbYvDskm2UalHME6PUKXMVVTkgMLev6i1L8APMnOochykHK4tJZ98nfqNQOYoQEXmeer4XWTmLmJk/s1600/clock.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.timestamp/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDaDbJx-ZgpYudVVRkyO1DWtrnxVoEFJIwZYLFkuKQvWi7Kox2HyxyNIfbPC0L5v2j4jMvOT2edl6TPuOtI53cIpx9aenQQJdbQKzcncXyHI-xf5hyS-oL7w9-IwaZf_pOXPnDM_CdEtr/s1600/tag.png) no-repeat scroll top left;background-position:0px -1px;padding-left:23px;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=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop></b:if></span><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/AVvXsEiAD0R3KRr9ezmBctaRFXgQXPmgGgfLPQrCuM0yU6rN1e-csX_iuYGFzck_WFvQQCuXN11cCwGh4Q3dPvfCi5o2iQJQ41Jb0ND_GN8cTFOMFvT5mvbRYuJEbg-QKrSlh9flCIpWMXgE5FLQ/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><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></div>

Bagaimana Cara menyesuaikan info post

Untuk mengubah ikon penulis ganti url warna biru dengan url gambar pilihan anda: 

- url pertama yaitu untuk ikon penulis 

- url kedua yaitu ikon jam 

- url ketiga yaitu ikon untuk label 

- url terakhir yaitu untuk komentar bubble.

Untuk mengubah teks yang akan tampil sehabis ikom komentar bubble, ganti teks berwarna merah dengan teks yang anda inginkan:

- Teks Pertama tampil jikalau tidak ada komentar

- Teks kedua tampil jikalau sudah memiliki komentar >= 1

5. Klik tombol 'Simpan template' dan selesai!

Hanya itu!!!, kami harap artikel ini menjadi ilham kepada kalian untuk mendapat ide-ide untuk mendesain blog kalian menjadi lebih indah,,, Selamat Berkreasi!!!

Jika anda menyukai artikel ini, maka silakan subscribe ke Saluran YouTube kami untuk video tutorial. Anda juga sanggup menemukan kami di Twitter dan Facebook.

Sumber http://duniatutorials.blogspot.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: