Author by Yosef Doublehorn
Author by : Doublehorn
DAFTAR ISI
Protected by Copyscape Online Infringement Detector

11 Juli 2013

Navigation : Use Related Post in website blog


Thumbnail gambar dibawah Artikel blog (website) support SEO friendly dan eye-chatching

“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?
  1. » Kunjungi official site Outbrain
  2. » Sign-Up (Sign-In, jika Anda pernah registrasi)
  3. » Go to bottom of Outbrain Dashboard.
  4. » Klik “THE OUTBRAIN WIDGET” menuju halaman "Get Blog Widgets
  5. » Pilih Recommendation Type (TEXT atau THUMBNAIL)
  6. » Pilih paltform (Blogger, WordPress, TypePad, Squarespace, Javascript - “any Platform”)
  7. » Isikan URL blog (diawali http://…..), pilih bahasa & centang “I agree.” 
  8. » 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.

Reated post widget for website designsource image http://bdlab.blogspot[dot]com

Install 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>
Snippet STEP-1-Aneesh Related Post

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

Snippet STEP DUA-Aneesh Related Post

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

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

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)

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

http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png

Jika tidak ada gambar yang ditampilkan, maka lakukan edit baris berikut

var defaultnoimage=http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png;

Catatan Related post di website blog Blogger


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 == &quot;item&quot;'>

Dan hapus juga ini :

<!-- remove --></b:if>


Kedua script diatas juga bisa diperoleh dari [Source]


That's all we know - Happy blog blogger



Comments

1 komentar:

http://website-download.blogspot.com/2012/03/widget-related-post-dengan-thumbnail.html?showComment=1387251392841#c3565945701951866143'> 17/12/13 10.36 Reply

terimakasih ya,, sekarang ada related postnya deh,, ^_^

Poskan Komentar di Website Design

-

Penelusuran topik khusus di blog ini
Loading