Thumbnail gambar dibawah Artikel blog (website) support SEO friendly dan eye-chatching
“Everyone likes image”
“Everyone likes image”
Gambar mengungkap lebih banyak pesan dibanding dengan rangkaian teks. Salah satu cara terbaik meningkatkan tampilan blog, sekaligus memudahkan navigasi adalah penggunaan plugin related posts. Memasang Related Post dalam kerja website design membantu meningkatkan tampilan website atau blog sekaligus meningkatkan traffic.
Related Posts untuk blog Blogger WordPress
Prinsip Related Post akan menambahkan link yang mengarah ke content web blog dengan gambar. Widget ini mudah di-instal dan otomatis mewarisi tampilan & nuansa blog. Kurang 60 detik, reader bisa melihat gambar thumbnail link mengarah ke halaman website.
Kami presentasikan 2 macam Related Posts, versi Outbrain dan versi Aneesh.
A. Related Post widget versi OUTBRAIN
Saya pernah buat posting berjudul Related Post under posting by using OutBrain : Easy navigable. Kali ini saya tambahkan hal baru. Bagaimana memasang Related Post ke website?
- » Kunjungi official site Outbrain
- » Sign-Up (Sign-In, jika Anda pernah registrasi)
- » Go to bottom of Outbrain Dashboard.
- » Klik “THE OUTBRAIN WIDGET” menuju halaman "Get Blog Widgets"
- » Pilih Recommendation Type (TEXT atau THUMBNAIL)
- » Pilih paltform (Blogger, WordPress, TypePad, Squarespace, Javascript - “any Platform”)
- » Isikan URL blog (diawali http://…..), pilih bahasa & centang “I agree.”
- » Klik “INSTALL” atau "Install widget?" jawab YES.
- After clicking Install, a new tab will open with Blogger dashboard. Sign into Blogger account, check the blogs you want to add the widget to. Click Add widget
B. Related Post Widget dengan Thumbnail versi Aneesh
FREE for platform Blogger / Wordpress dan alternatif bagus selain Outbrain related post widget plugin. Aneesh mengembangkan widget yang sama, tapi kode custom Aneesh lebih handal dan customizable. Dengan mudah bisa ditampilkan Related Posts with thumbnail dibawah setiap artikel situs.
source image http://bdlab.blogspot[dot]comInstall Related Posts with thumbnail -website files
STEP SATU- Login Blogger >> Layout >> Edit HTML. Pilih "The tick-box Expand Widget Templates"
- Temukan </head>
- Letakkan script di bawah ini tepat diatas </head>
Sorry! Script saya tampilkan berupa image untuk mengurangi load time blog ini. Jika Anda tidak ingin mengetik sendiri script seperti terlihat pada gambar, silahkan download dengan klik link :
STEP DUA
Temukan kode berikut dalam :
<div class='post-footer-line post-footer-line-1'/>
Atau temukan di bawah ini.
<p class='post-footer-line post-footer-line-1'/>
Sekarang letakkan potongan kode dibawah ini tepat dibawah baris kode yang disebutkan diatas (yang mana saja yang Anda temukan).
Jika tidak mau mengetik sendiri script seperti terlihat diatas, silahkan download dengan klik link :
SAVE TEMPLATE
SELESAI
NOTE :
Saya kebingungan ketika pertama memasang Related Posts versi Aneesh di blog Website Design yang sedang Anda baca. Karena saya temukan potongan kode
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-1'>
ada baris ke 651 editor HTML template blog dan baris ke 762 seperti berikut :
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'>
Opsi pertama GAGAL. Opsi ke-2 sukses, yaitu setelah meletakkan snippet tepat dibawah <div class='post-footer-line post-footer-line-1'/> atau tepat diatas <div class='post-footer-line post-footer-line-2'/>
Modifikasi Related Posts versi Aneesh di website blog
Anda boleh memodifikasi kode. Misalnya
Mengubah jumlah "5" Related Posts yang ingin ditampilkan, edit baris berikut (ada pada snippet STEP 1)
Mengubah jumlah "5" Related Posts yang ingin ditampilkan, edit baris berikut (ada pada snippet STEP 1)
var maxresults=5;
Edit judul "Related Posts" dengan teks sendiri, misalnya frase "Artikel Terkait," ubah saja baris berikut
var relatedpoststitle="Related Posts";
Edit warna "#d4eaf2" pada Splitter Line, lakukan edit baris berikut
var splittercolor="#d4eaf2";
Edit default thumbnail atau URL gambar DI SINI
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf6U1L9uAn3CFT-l1Vstoo6IrSLDfStzznMXNCZ1y4utF3taHDzRvXWL1-4ODcZa2MHP-PafX3lfsEVWUWgtHSCYY6WvwsfJ2ixbLBhpfRJ4VNWibwdayNbdgeUy5D_B8y4GBjy8d7AcuU/s1600/no+Image+1.png
Jika tidak ada gambar yang ditampilkan, maka lakukan edit baris berikut
var defaultnoimage=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf6U1L9uAn3CFT-l1Vstoo6IrSLDfStzznMXNCZ1y4utF3taHDzRvXWL1-4ODcZa2MHP-PafX3lfsEVWUWgtHSCYY6WvwsfJ2ixbLBhpfRJ4VNWibwdayNbdgeUy5D_B8y4GBjy8d7AcuU/s1600/no+Image+1.png;
Catatan Related post di website blog Blogger
- Pilih salah satu, versi Outbrain atau versi Aneesh. Jangan keduanya diterapkan karena bikin boros sumberdaya website atau web blog.
- VERSI OUTBRAIN lebih simple. Versi Aneesh lebih rumit (menempatkan 2 snippet di dua tempat berbeda) tetapi Customable.
- Post Terkait langsung Related Post under post web blog Blogger by OutBrain
Related Posts Aneesh di semua page (Homepage & post-pages)
Anda hanya perlu hapus baris berwarna merah pada gambar diatas atau baris seperti berikut :
<!-- remove --><b:if cond='data:blog.pageType == "item"'> Dan hapus juga ini :
<!-- remove --></b:if>Kedua script diatas juga bisa diperoleh dari [Source]
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
