Powered by Blogger.
RSS

Navigation Blog : Use Related Post in your Website

7:39 PM | Labels: , , , ,



Thumbnail dibawah Artikel web blog atau website support SEO friendly dan eye-chatching  

“Everyone likes image”

Gambar mengungkap lebih banyak pesan dibanding rangkaian teks pada website atau web blog. Salah satu cara terbaik meningkatkan tampilan blog, sekaligus memudahkan navigasi web blog adalah penggunaan plugin related posts. Pasang saja Related Post dalam kerja website design. Ini membantu meningkatkan tampilan website atau blog blogger 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.

Related Post widget versi OUTBRAIN

Saya pernah bikin posting berjudul Related Post under posting by using OutBrain : Easy navigable. Namun pada tulis ulang kali ini saya  tambahkan hal yang baru. Bagaimana memasang Related Post ke website atau blog? Caranya mudah! 
  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 blog (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 your Blogger dashboard. Sign into Blogger account, check the blogs you want to add the widget to. Click "Add widget"


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 blog atau website.

Install Related Posts with thumbnail

STEP SATU
  • Login Blogger >> Layout >> Edit HTML. Pilih "The tick-box Expand Widget Templates"
  • Temukan </head>
  • </head> DIHAPUS dan GANTI dengan script berikut

Snippet STEP SATU-Aneesh Related Post

I am Sorry!  Script saya tampilkan berupa image untuk mengurangi load time blog ini. Jika Anda tidak ingin mengetikkan 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 pada gambar, 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 atau 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 disini


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


Catatan Related post di blog Blogger

Related Posts versi Aneesh di semua page (Homepage & post pages)

Anda hanya perlu menghapus baris berwarna merah baris kedua

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

dan hapus ini  <!-- remove --></b:if>

Happy blogging!

Kedua script diatas juga bisa diperoleh dari [Source]

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Posted by AbdyaCyber

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)