Panduan Setting Postingan untuk Versi Baru v1.3

Panduan Setting Postingan untuk Versi Baru v1.3
Source: jagodesain.com

Menampilkan deksripsi singkat artikel di postingan

Ada dua deskripsi singkat yang sangat berguna untuk blog Anda, satu deskripsi singkat (snippet) pada homepage dan yang kedua adalah deskripsi yang akan tampil pada hasil penelusuran

Snippet post

Secara default snippet post disembunyikan pada homepage dengan perintah display: none, untuk menampilkannya silahkan cari dan ubah kode pada dibawah ini:

.Blog .post-snippet{display:none;

// Ubah menjadi display: block; hasilnya seperti dibawah ini:

.Blog .post-snippet{display:block;

Sebagai tambahan snippet post pada template ini ditulis menggunakan perintah <b:eval> dengan batas maksimal 90 karakter yang tampil. Anda bisa mengubahnya menjadi lebih besar atau lebih kecil. Cari kumpulan kode dibawah ini dan ubah bagian yang ditandai sesuai keinginan Anda.

<!-- Snippet postingan -->
<b:if cond='data:view.isMultipleItems'>
  <div class='post-snippet'>
    <b:eval expr='snippet(data:post.snippets.long, {length: 90, links: false, linebreaks: false})'/>
  </div>
</b:if>

Perintah yang sama juga diterapkan untuk widget postingan unggulan, Anda pun juga bisa mengubah snippet postingan unggulan dengan cara yang serupa.

Aktifkan deskripsi penelusuran

Deskripsi penelusuran sangat penting untuk menunjang SEO blog Anda, jadi pastikan Anda mengaktifkan dan menambahkannya ke setiap artikel yang Anda buat:

  1. Pada Dasboard Blogger klik "Setelan"
  2. scroll/gulir kebawah sampai Anda menemukan "Tag meta"
  3. Klik Aktifkan deskripsi penelusuran
Deskripsi blog berbeda dengan deskripsi penelusuran, tambahkan juga deksripsi blog Anda pada kolom deskripsi penelusuran pada menu "Setelan", deskripsi ini akan muncul pada hasil pencarian homepage blog Anda. Jangan lupa tambahkan juga deskripsi penelusuran di setiap artikel yang Anda tulis.

Format stempel waktu yang direkomendasikan

Agar Blog Anda sama seperti blog demo ini, kami merekomendasikan Anda untuk mengubah juga stempel waktunya pada menu "Setelan". Format yang dipakai pada blog demo ini adalah seperti gambar di bawah:

Format stempel waktu yang direkomendasikan

Penulisan label pada postingan yang benar

Label pada postingan sama seperti hastag sebisa mungkin Anda menulis label dengan maksimal 2 kata, atau memisahkannya dengan koma jika label yang ingin ditambahkan lebih dari satu. Contoh penulisan label yang benar adalah seperti dibawah ini:

#Aplikasi, #Android, #Games

Contoh penulisan yang salah:

#Aplikasi__Android__Games atau #Aplikasi Android Games

Tidak ada batasan banyaknya label yang anda tambahkan dalam satu postingan, hanya dari penulis merekomendasikan Anda menambahkan maksimal 3 label disetiap postingan yang dibuat.

Tampilkan atau sembunyikan profil penulis

Pada defaultnya profil penulis akan tampil disetiap akhir artikel. Anda bisa menyembunyikannya melalui menu Tata Letak dengan cara menghapus tanda centang "Tampilkan profil pengarang dibawah post" seperti pada gambar dibawah ini:

Tampilkan/sembunyikan profil pengarang

Mengubah batasan jumlah karakter yang muncul pada deskripsi penulis

Deskripsi penulis pada template ini juga dibatasi sebanyak 60 karakter menggunakan perintan <b:eval>, untuk mengubahnya silahkan cari dan ganti kode yang ditandai dibawah ini:

<div class='author-desc'><b:eval expr='data:post.author.aboutMe snippet {length: 60, links: false, linebreaks: false}'/></div>

Masalah profil penulis tidak tampil

Satu-satunya penyebab profil penulis tidak tampil pada blog Anda adalah karena Anda tidak melengkapi kolom "Perkenalkan Diri Anda" pada profil Blogger.

  1. Pada Dasboard Blogger klik "Setelan"
  2. scroll/gulir ke paling bawah sampai Anda menemukan "Profil Pengguna"
  3. klik "Profil Pengguna" lalu lengkapi kolom "Perkenalkan Diri Anda"
  4. Simpan profil

Menambahkan link social media pada profile penulis

Penting: link sosial media pada profil penulis dihapus pada versi pembaruan

Kode untuk link social media pada profil penulis kurang lebih seperti dibawah ini:

<!-- Link social media -->
<ul class='author-link'>
  <!-- Blogger -->
  <li>
    <a aria-label='Social media' expr:href='data:post.author.profileUrl' rel='nofollow noreferrer noopener' role='button' target='_blank'>
      <svg style='height:22px' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>...</svg>
    </a>
  </li>
  <!-- Facebook -->
  <li>
    <a aria-label='Social Media' href='#' rel='noreferrer noopener' role='button' target='_blank'>
      <svg viewBox='0 0 32 32'>...</svg>
    </a>
  </li>
  ...
</ul>

Silahkan ubah artibut href='...' yang sudah ditandai di atas dengan link social media Anda.

Mengubah beberapa kalimat bawaan pada postingan

Catatan: di versi terbaru teks pada bagian ini disetting agar berubah otomatis ketika bahasa blog yang dipilih bukan bahasa Indonesia

Kebanyakan kalimat bawaan pada template ini ditulis dengan menggunakan CSS Pseudo ::before, untuk mengubahnya menjadi kalimat lain Anda hanya perlu mencari beberapa kode CSS dibawah ini:

Ubah kalimat 'Disunting Pada:'

.Blog.post .post-info .post-timestamp .updated:before{content:'Disunting pada: '}

Ubah kalimat 'Share this article'

.Blog.post .post-share:before{display:block;content:'Share this article';

ubah kalimat 'Change text size'

.Blog .post-font .post-fontContainer ul:before{content:'Change text size'}

Ubah Kalimat 'Anda mungkin menyukai postingan ini' pada related post

Pada bagian ini kami menggunakan teks bawaan dari blogger yang mana kelebihannya teks bisa berubah bergantung dari bahasa apa yang dipilih pada setelan blogger Anda.

<h3 class='title'><data:messages.youMayLikeThesePosts/></h3>
Silahkan kunjungi laman ini untuk melihat lebih banyak kode teks bawaan blogger

Ubah kalimat 'Balas' dan 'Balasan' pada komentar blogger

<label class='thread-toggle thread-expanded' expr:for='"off-" + data:commentLevel1.id'>
  <svg class='thread-arrow line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='6 9 12 15 18 9'/></svg>
  <span class='thread-count'>Balasan</span>
</label>

<div class='comment-reply'>
  <a class='reply-to' expr:data-reply-to='data:commentLevel1.id' href='javascript:;' target='_self'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='15 14 20 9 15 4'/><path d='M4 20v-7a4 4 0 0 1 4-4h12'/></svg>Balas</a>
</div>

<div class='comment-actions secondary-text'>
  <a class='comment-reply reply-to' expr:data-comment-id='data:commentLevel1.id' expr:data-reply-to='data:commentLevel1.id' href='javascript:;' target='_self'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='15 14 20 9 15 4'/><path d='M4 20v-7a4 4 0 0 1 4-4h12'/></svg>Balas</a>
</div>

Masalah iklan tengah artikel yang tidak muncul

Seperti yang dijelaskan pada postingan sebelumnya, template ini mendukung tag <p> sebagai paragrafnya, termasuk perubahan script untuk menampilkan iklan tengah yang pada awalnya berdasarkan tag <br /> menjadi tag <p>. Akibatnya iklan tengah tidak akan muncul pada artikel yang menggunakan tag <br />, Untuk mengembalikan scriptnya seperti semula carilah kode javascript seperti dibawah ini pada template dan ubah bagian yang ditandai :

<div class='ads-content' id='iklan-tengah'>
  <data:content/>
  <script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("post-body"); var midAd3 = document.getElementById("HTML4"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[20]);}; /*]]>*/</script>
</div>
Keterangan :
  • p: yang berarti iklan akan dimunculkan setelah tag <p>, Ubah menjadi br agar kembali seperti semula, dan-
  • 20: adalah angka yang menunjukkan letak iklan yang akan ditampilkan setelah tag <p> yang ke 20 didalam artikel

Menambahkan link profil di komentar Blogger

Kami menghapus link menuju profil pada komentar Blogger dengan alasan untuk mengurangi Outbound link pada halaman post ditemplate ini, tapi bagi Anda yang ingin mengaktifkan kembali link tersebut silahkan ubah tag yang ditandai dibawah ini dengan tag <a>

<b:if cond='data:cb.level.author != &quot;Anonymous&quot;'>
  <span class='user' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
    <span itemprop='name'><data:cb.level.author/></span>
    <b:if cond='data:post.author.name == data:cb.level.author'>
      <svg class='icon blog-author' viewBox='0 0 24 24'>...</svg>
    </b:if>
  </span>
</b:if>

// Ubah menjadi seperti dibawah ini:

<b:if cond='data:cb.level.author != "Anonymous"'>
  <a expr:href='data:cb.level.authorUrl' target='_blank' rel='noreferrer noopener' class='user' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
    <span itemprop='name'><data:cb.level.author/></span>
    <b:if cond='data:post.author.name == data:cb.level.author'>
      <svg class='icon blog-author' viewBox='0 0 24 24'>...</svg>
    </b:if>
  </a>
</b:if>
BLTemplates