Post info di bawah judul artikel

Trik

Ketika tidak ada komentar yang dibuat untuk posting Anda, ada link yang mengatakan 'Jadilah yang pertama untuk berkomentar!' dan ketika hanya ada satu komentar maka akan muncul '1 komentar sejauh ini'. Jika Anda ingin membuat blog Anda lebih bergaya dengan mengganti teks-teks dengan beberapa ikon lucu kecil bersama dengan default Nama Penulis, Post Date, Label dan Komentar, maka cukup ikuti langkah-langkah berikut:


Langkah 1. Dari Dashboard Blogger Anda, klik pada pilihan Template, kemudian tekan tombol Edit HTML
Langkah 2. Cari kode di bawah ini, klik dalam template editor tekan CTRL + F dan paste kode dalam kotak pencarian lalu enter

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

Jika Anda tidak dapat menemukan kode di atas, cari kode berikut ini:

<div class='post-header'>

Langkah 3. Paste kode berikut di bawah/setelah kode di atas:
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrc5UDosNYVM3sui19azolEaMzDx7ggYl1MZ7Hbbaeuc1oCxNFhWW63PMueR5u3WtpI9pwco-6F_LSOL4uE1xkKRhL-2eENPU67XJA4yx9IcfEmo2xMc5kLmbWq5D4rMIicXdEesnGjUMA/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/AVvXsEhqJi96LQlKZAKIdxHkrBLzgOfPn0td3blyg9AA9G9xscm0kflAsPeS66UMlbl2mcNDG7ymt-oez9HuT5LmhLT-MTatERCuB0mVqvWFhzSlD6wflQv1ZMW33NYw3W4pOXk1cDIqCKcY8qxz/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/AVvXsEibygLMcRzLqTQtBgTZJtu9nkEBqgWn7A-RONtA6zo_0xwa-Pq_oRZ4XxdhcAjNiUY-xY_HtIGdOwXgHPnGcdTwZFJIJqYZZCbMI8RQfcnPNspGFifPRwtnlCX1XJFdILpeBmzA8q9HI6Ki/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/AVvXsEjh4TtsD6YaWoHaEkZ8N5OXcNMgDp1u2as0c5z51c2cSjCeu57mbtgzSuDVnNK6-m4l_0AiA63DK9iRD4YtEmXc4xOhZ8PUzls1Tf6rIRHUTb7-1z98G6k9y-IGs9DdltwHc3qGPb512ziu/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Jadilah yang pertama mengomentari!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Komentar sejauh ini<b:else/><data:post.numComments/> Komentar sejauh ini</b:if> </b:if></a>
          </b:if>
     </b:if>
</span> 
Bagaimana cara untuk menyesuaikan:

Jika Anda ingin mengubah ikon, silahkan mengganti alamat URL di atas diwarnai dengan:

  • Merah - Penulis
  • Hijau - Tanggal
  • Biru - Label
  • Orange - Komentar gelembung

Ganti dengan alamat URL gambar Anda.

Langkah 4. Simpan template dan selesai

Semoga berhasil dan sukses...

Artikel Terkait

  • Membuat halaman error 404 di blogger
    Sudah membuat halaman error 404 di blogger anda? tes dulu halaman tersebut muncul atau tidak atau hanya pekerjaan sia - sia yang anda lakukan. jika anda tidak mengetahui cara untuk menguji silahkan paste link berikut ini http://nama-blog-anda.blogspot.com/tes-halaman-error-404-blog.html Ganti nama-blog-anda dengan sub domain blogger anda dan…
  • Membuat javascript random teks
    Random teks adalah sebuah tulisan atau kutipan tertentu yang di tampilkan secara acara acak ketika halaman telah sepenuhnya di muat, trik random teks ini cocok untuk membuat sebuah kutikan atau tulisan tertentu yang ingin anda tampilkan secara berbeda dan saya menerapkan trik ini pada tips di blog ini. untuk lebih jelasnya silahkan anda klik l…
  • Membuat Responsive pada ADSENSE
    Mengatasi masalah iklan dari google yang tidak responsive adalah satu trik menyesuaikan tampilan blog agar tampil bagus di resolusi berbeda dan hal ini perlu kita lakukan apa lagi bagi sobat yang memasang di blognya. pada awal Agustus 2013, Google Adsense resmi support untuk dukungan iklan dengan Style Responsive. Untuk saat ini memang masih d…
  • Menandai komentar admin dengan css
    Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya. blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang ber…
  • Menghapus link judul posting dan halaman
    Setiap postingan dan halaman berisi judul link yang menunju ke posting atau ke sebuah halaman yang sama yang tidak diperlukan. Baca tutorial ini untuk menghapus link dari judul postingan dan judul halaman. Jika Anda menggunakan template Blogger yang telah disesuaikan, dalam template Anda memiliki link judul posting pada tiap posting atau hala…
  • CSS widget label cloud blogger
    Memperbagus tampilan widget label blogger dengan css, dengan css ini tampilan widget label akan memiliki warna background berbeda di setiap link label tergantung dari color yang kita terapkan di dalam css. untuk menerapakannya ikuti langkah di bawah ini: 1. Masuk Dasboard Blogger 2. Pilih Template 3. Kemudain Pilih Edit HTML 4. Salin CSS be…

3 komentar


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...