Tutorial ini akan menunjukkan cara untuk menambahkan informasi lebih lanjut di posting Blogger seperti nama penulis, menampilkan tanggal posting, label posting dan link komentar menghitung. Bagaimana cara kerjanya? Link komentar akan menampilkannya 'Jadilah yang pertama mengomentari!' teks untuk posting tanpa komentar dan setelah kami mendapatkan komentar, ia akan menampilkan. Di sisi kiri, ia akan menampilkan nama penulis, ikon jam dengan tanggal posting yang diterbitkan dan akhirnya, label posting.
Cara Menampilkan Penulis, Tanggal, Label dan Komentar Bubbles di Blogger?
1. Login ke Dashboard Blogger Anda pergi ke 'Template' dan tekan tombol 'Edit HTML': |
| Dashboard blogger |
2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger
 |
| Dashboard Blogger |
3. Ketik atau tempel di bawah kode di kotak pencarian dan tekan Enter dua kali untuk menemukan terjadinya kedua hal itu:
& Lt; div class = 'post-header-line-1' & gt; </ blockquote> Catatan: Jika Anda tidak dapat menemukan baris di atas, gunakan ini:
& Lt; div class = 'post-header' & gt; </ blockquote>
4. Setelah kode itu, tambahkan ini berikutnya:
<div style="margin: 10px 0;"><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYO-U7SWPxkM4haLRznCxYR9LIbRMBllHbqtSdEnr0fYNvH_YRrdNd2utgoSWXRf4DkyJlouFS1MAoPIF-U8HQwTVJ6AMsL-4SGIz-6ke_SceZG04gXu7nY6paHApzgPIQ8CpAVz_T8kFU/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/AVvXsEj0zCr_xk3ZGrmmF_pCr6tItIqc4Vn7qvSLcEW7IYUESFC45OTPaCZo0CXDCgKmpIpo9KeXL-VbzTqzXHAQJGhmpTDi_AjEkP3xnDMu-VcxFxJfg7sXM7ibEPg7g4AgdRCm74nzafOD_A-p/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/AVvXsEgsFlOSTA4dDdlnuLpY_ojRdwyBVL0jMg9PCbzJAXsEEG6h1ZqcRVcIkh0iQ7d-VWkMG-Od-72KLxAO_l8_8VUpQKUKIZS7ih-sCnd42Y5wUF7eT2V-ykUhTS3wFz53sgjXYxNW-d1qH_OQ/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 + "?max-results=7"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>|</b:if></b:loop></b:if></span><span class='post-comment-link' style='float:right;'><b:if cond='data:blog.pageType != "item"'><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/AVvXsEiRwu0k5w7trudHhOP_muVPaskWhzF9juSU-Q8H70SKW0Ku9M0KJJNq-gO9yGzT0mR3YBGjCZojsS86H4HBLDeWWI3ptUo6M_g56-26C1D31fpD_v5rnxC7lVQORPLwOmwotavGXbCAVwsH/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 Menyesuaikannya:
Untuk mengubah ikon, mengganti url warna biru dengan gambar Anda (lihat tutorial ini: Bagaimana Mendapatkan URL An Gambar (LINKNYA DI ARTIKEL 7 CSS):
- Url pertama adalah untuk ikon penulis
- Yang kedua adalah ikon jam
- Yang ketiga adalah ikon untuk label
- Yang terakhir adalah untuk komentar
Terkait: Cara Menambahkan Komentar Bubbles ke posting judul Blogger (LINKNYA DI ARTIKLE 4)
5. Klik tombol 'Simpan template' dan Anda selesai!
EmoticonEmoticon