2 Cara Membuat 'Thanks for Reading' di Bawah Artikel Blog

Salah satu teknik SEO yang jarang diketahui dan disadari oleh kebanyakan pembuat template blogger dan ahli SEO adalah adanya pengulangan judul artikel secara otomatis di bawah postingan web blog.

Biasanya, para pakar dan ahli SEO menyarankanuntuk mengulang judul artikel di dalam artikel dengan cara menggunakan Heading Tag H2. Di sisi lain, menyarankan untuk diulang di judul widget Related Posts dan "0 Response to judul artikel".

Sebenarnya, kalau semuanya bisa dilakukan dengan cara sekaligus, kenapa hanya satu per satu? Implementasikan saja semuanya di dalam blog!

Cara Pertama: Menampilkan 'Thanks for Reading'

1. Cari kode <data:post.body/> di mana kode lengkapnya kurang lebih seperti ini:

    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description'>
        <data:post.body/>

2. Selanjutnya tambahkan kode di bawah ini, di bawah kode <data:post.body/>

<p style='font-size: 12px'>&#8730; Thanks for reading: <b><data:post.title/></b></p>

3. Silakan atur ukuran teks (fonts) dan simbol HTML yang diinginkan. Simbol HTML yang dimaksud bisa dicek di sini: https://www.w3schools.com/charsets/ref_utf_math.asp

Cara Kedua: Memasang 'Thanks for Reading'

Cara yang kedua merupakan cara yang paling saya sukai karena pada prakteknya bisa mengubah tampilannya sesuai dengan keinginan kita sendiri, ada kategorinya postingannya pula! Tentunya dengan bantuan kode CSS 😁

1. Simpan lebih dulu kode CSS berikut ini, di atas kode </style> atau di atas kode ]]></b:skin>

#anbusagethanks{position:relative;font-size:14px;margin:5px 0;padding:0}

2. Selanjutnya cari kode <data:post.body/>

3. Simpan kode di bawah ini, di atas kode <data:post.body/> yang kalian jumpai tadi di dalam template blogger:

<div id='anbusagethanks'>
  <p><strong>Labels:</strong> <b:loop values='data:post.labels' var='label'>
     <a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  </b:loop></p>
<i class='fa fa-thumbs-o-up'/> Thanks for reading <b><data:post.title/></b>. Please share this article.
</div>

Pada tag class, kalian akan melihat kode 'fa fa-thumbs-o-up'. Kode ini merupakan kode yang menampilkan gambar/ikon yang bersumber dari Font Awesome.

Untuk menerapkan cara kedua ini, kalian mesti menambahkan script Font Awesome di dalam template blogger, tepatnya di atas kode </body>

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Kalau mau digabungkan dengan script Google Fonts, sekaligus untuk mengatasi Render-Blocking CSS Files di dalam template, gunakan kode berikut.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Oswald|Raleway:300,300i,400,400i,700,700i");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Silakan diubah dan dikondisikan kode yang sudah ditandai di atas dengan pengaturan template blogger sebelumnya.

Labels: Blogger, SEO,

Kalian baru saja membaca artikel 2 Cara Membuat 'Thanks for Reading' di Bawah Artikel Blog. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.