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

  • Trik memasang random banner di blogger
    Memasang banner di blog memang bukan sesuatu hal/topik pembahasan yang baru melainkan hal yang sudah lama di bahas, banyak para blogger memasang banner dengan tujuan tertentu, seperti periklanan, perujuk link tertentu ataupun sebagai penghasilan sampingan. umumnya banner ini memiliki dimensi yang bervariatif tergantung dari kebutuhan/tujuan te…
  • Recover Tulisan? Cara mengembalikan Posting
    Memulihkan posting Anda yang dihapus atau halaman dari Blogger mungkin tampak menjadi tugas yang menantang. Karena, semua data berada di bawah kepemilikan Google. Oleh karena itu, sulit untuk memulihkan database Anda melalui Hosting atau layanan lainnya. Selanjutnya, Blogger tidak memiliki fungsi pulih hanya memungkinkan untuk cadangan Posting…
  • Menambahkan multi kolom widget di footer
    Membuat kolom dibawah footer dengan menambahkan css agar terlihat lebih menarik dan membuat ruang untuk widget yang di butuhkan. Dengan lebih banyak kolom di footer Blogger Anda, Anda akan memiliki ruang ekstra untuk mengakomodasi widget lainnya seperti Flickr foto dan update Twitter. Juga Anda dapat menempatkan widget yang lebih sering …
  • Memasang link hover multi color di blogger/blogspot
    Tidak jauh berbeda dengan random hover link trik ini sama - sama berfungsi untuk memberikan efek warna hover link berubah secara otomatis ketika mouse menyoroti. hanya bedanya, jumlah warna dalam hover link ini dapat di sesuaikan/diatur berapa banyak efek warna pada hover yang ingin anda munculkan. Untuk menambahkan ini Berkedip efek Link ke …
  • Meningkatkan kecepatan load dengan optimasi css
    Sekarang ini kecepatan website/blog menjadi faktor peringkat mesin pencarian, dan CSS optimasi mampu memainkan peran utama dalam meningkatkan kecepatan situs/blog tertentu. Di sini saya membagi beberapa langkah bagaimana mengoptimalkan CSS untuk kecepatan muat situs. 01Menghindari CSS eksternal/impor style sheet Mengimpor CSS lain ke CSS ak…
  • Mengatasi blog pagger/navigasi link yang tidak muncul
    Umumnya, setiap blog blogger memiliki sebuah link navigasi untuk mengarahkan setiap laman, posting dan arsip saat di buka kecuali si admin/author menghilangkannya untuk tujuan tertentu. namun apa yang terjadi jika link navigasi ini tidak muncul, tentunya akan membuat pengunjung kesulitan menelusuri laman, posting dan juga arsip seperti yang di…

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...