Skip to main content

Cara Membuat Baca Juga Artikel Terkait Di Blog Amp


Pernahkah kalian berfikir bagaimana membuat artikel terkait atau " baca juga " di tengah artikel postingan blog valid AMP ? Itu merupakan sebuah argument yang jujur saya sendiri rasakan dan cari dari kemarin-kemarin dan pada akhirnya saya berhasil membuatnya dari bebebagai sumber artikel tentang blog amp.

Keuntungan membuat artikel terkait di blog ini juga akan meningkatkan pageview dan bounce rate untuk blog amp anda selain itu dengan membuat artikel terkait di blog akan menambah tampilan blog anda menjadi lebih menarik lagi dengan tampilan widget baca juga di tengah artikel dan tentunya ini juga akan mempermudah pengunjung untuk lebih mudah mengakses artikel terkait tentang artikel yang anda bahas

Kali ini saya akan memberikan cara mudah bagaimana membuat artikel terkait atau baca juga di tengah postingan blog AMP HTML, baik itu secara manual dan secara otomatis agar blog anda tampil lebih menarik lagi

Membuat Baca Juga Secara Manual



Untuk membuat artikel terkait di tengah postingan valid amp bisa di bilang sedikit lebih sulit karana membutuhkan javacript tambahan yang bukan dari amp sehingga akan membuat blog anda tidak valid amp lagi. akan tetapi saya ada solusinya untuk membuat widget artikel terkait tanpa perlu memerlukan javacript tambahan yang tentunya akan membuat blog anda tetap valid amp, namun untuk pemasanganya harus secara manual karna saya hanya menambahkan markup Css di dalam template amp tersebut

Pertama- tama silahkan simpan CSS di bawah ini template anda di bawah <style amp-custom='amp-custom'>

/* baca juga by www.encepnurdin.id */
.bacajuga {width:90%;border:1px solid #7f5cf7;margin:25px 0 10px;padding:5px 15px 0px;position:relative;border-radius:3px;}
.bacajuga:before {display: block;content:"Baca Juga :";text-align:center;border-radius:3px;width:100px;background:#fff;position:absolute;border:1px solid #7f5cf7;left:15px;top:-15px;color: #7f5cf7;}
.bacajuga ul {padding-left:20px;}
.bacajuga ul li {border-bottom:1px dashed #7f5cf7;line-height:1.75em;}


Anda bisa edit css warna sesuai keinginan

Kemudian untuk menampilkan widget baca juga di postingan silahkan simpan HTML berikut ini


<div class="bacajuga">
<ul>
<li><a href="https://www.encepnurdin.id/">Disini tempat menaruh link</a></li>
<li><a href="https://www.encepnurdin.id/">Harus dipasang secara manual</a></li>
<li><a href="https://www.encepnurdin.id/">Semoga kalian suka dengan widget ini</a></li>
</ul>
</div>


Penting simpan kode html di tengah artikel postingan anda dalam Mode HTML
Pastikan juga anda menyimpannya dengan stategis supaya tidak bentrok dengan iklan adsense


Intinya anda cukup membuat list yang sudah dikasih link, lalu bungkus list tersebut dengan <div class="bacajuga">

Membuat Baca Juga Secara Otomatis



Sementara untuk membuat baca juga atau artikel terkait di blog valid amp kita harus menyisipkan javacript , supaya blog anda tetap valid amp maka solusinya kita bisa menggunakan amp-iframe dan menghosting file javacript di Github
Disini saya akan menunjukan pada anda untuk membuat baca juga berdasarkan Label blog, Jadi dengan begitu anda tidak perlu manbahkan url blog satu-satu di setiap link baca juga.
Ada dua pilihan jika anda ingin menggunakan widget ini bisa dengan gambar dan tanpa gambar atau cuma menyisipkan link saja.

Baca juga tanpa gambar


Gunakan kode html amp-iframe ini ditengah artikel blog

<amp-iframe frameborder='0' height='345' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.statically.io/gh/encepnurdin/relatedpost/504d46a4/encepnurdin.html?fontSize=16px&fontWeight=700&jumlah=3&color=04549d&url=https://www.encepnurdin.id/&label=Blogger'><amp-img height='484' layout='fixed-height' noloading='' placeholder='' src='https://1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/s1600/back-iframe.png' width='auto'></amp-img></amp-iframe>


Keterangan :
fontSize = menentukan besar dan kecil Huruf yang mau di gunakan
fontWeight = properti menetapkan bagaimana karakter tebal atau tipis dalam teks harus ditampilkan
jumlah = jumlah artikel terkait yang mau di tampilkan
color = warna yang di gunakan untuk tulisan artikel terkait
url = https://www.encepnurdin.id/& ganti dengan url blog anda
label = label blog yang mau di tampilkan


Hasilnya seperti di bawah ini


Baca juga dengan gambar



Untuk membuat artikel terkait atau baca juga dengan gambar saya menggunakan widget yang biasanya di gunakan untuk membuat related post dengan menampilkan random post di tengah artikel, kode script ini yang di gunakan untuk membuat related post di blog amp kang ismet, akan tetapi bisa juga terapkan untuk menampilkan baca juga di tengah artikel blog amp

Gunakan amp-iframe di bawah ini di postingan blog amp anda

<amp-iframe frameborder='0' height='400' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/kangismet/ki-html/master/random-posts2.html?url=https://www.encepnurdin.id/' width='600'>

<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Artikel Terkait:</div>

</amp-iframe>


Keterangan :

Silahkan anda ganti url=https://www.encepnurdin.id/ dengan url blog amp anda


Sekian artikel singat dari saya tentang cara membuat baca juga atau artikel terkait di blog amp
Semoga bermanfaat dan selamat moncoba.

Follow us on Instagram
@encepnurdin.id

More from Instagram...

Follow us on Facebook
@encepnurdin.id

Find us on Google Maps
@encepnurdin

Reaksi:

Berbagi Itu Peduli :

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Jika merasa artikel ini bermanfaat ulas saya di google maps
https://g.page/encepnurdin/review
Buka Komentar
Aplikasi: Tambahkan aplikasi encepnurdin. id di smartphone tanpa install, buka encepnurdin. id dengan browser Chrome di smartphone lalu klik ikon 3 titikdi browser kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi encepnurdin. id dari layar utama smartphone Anda.

Yuk langganan artikel gratis