Cara buat artikel terkait bawah post entry 


Relate Post atau dikenali artikel terkait fungsinya bila artikel atau posting pada page yang kita buka atau Baca disesebuah blog/website terdapatnya paparan artikel serta postingan bergambar dan bertitle yang ada kaitannya dengan artikel yang sedang kita baca biasanya relate post berada dikedudukan paling bawah di akhir ketika korang membaca sesuatu entry tersebut.

Membuat Related Post Pada Blog



Relate post adalah artikel yang sejenis denganya yang menjadi satu kategori disesebuah entry blog korang. Setiap artikel baru yang korang buat ada kolum label yang perlu korang catatkan yang berkisar dengan kelompok jenis kategori entry tersebut:


Membuat related post


Contoh panduan, percutian dan isu semasa dan lan-lain, so dengan secara automatic relate post dapat merekomentasi untuk dipaparkan dengan mengikut label kategori yang berkaitan.

Buat Relate post
Relate Post Dari label


Cara menambah label di blog


Tutorial yang saya kongsikan ini berhasil dan menjadi untuk blogger berplatform blogspot, untuk wordpress saya tidak pasti kerana setiap template mempunyai code html coding yang berbeza tetapi konsepnya tetap sama, ade juga script html yang tidak sama tapi fungsi tetap sama so korang kena rajin-rajinlah cari yang betul-betul serasi dengan template korang dan dapat running dengan baik terutama pada korang yang pakai tempalate responsif dimana banyak blogger yang mengeluh dari segia perbezaan coding untuk di terapkan.



Banyak juga blog tutorial dari rakan blogger diluar sana yang berkongsi tutorial mengenai Relate Post yang perlu korang cuba, ade berbagai jenis Relate Post seperti list mark, menu dropdown tutorial yang akan saya bahaskan dan terangkan ini relate post bergambar atau dikenali thumbnail seperti gambar contoh dibawah , so macam tu lah hasil yang akan jadi bila korang buat nanti.

Membuat Related Post Pada Blog
Cara Buat Relate Post blog


Buat artikel terkait sesuai template


Langkah-langkah yang perlu korang buat korang tengok beberapa step seperti dibawah:


1. Login ke Blogger korang terlebih dahulu
2. Pergi template Design (Rancangan) 
> Edit HTML >  Centang Expand Widget Template

3. Kemudia korang Cari kod tag </head> (lebih carimudah nak Cari </head> dengan menggunakan Ctrl+F)

4. Ok seterusnya letakkan kod Script  di bawah ini tepat di atas Code tag </head> tadi


<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:6px;
padding-left:6px;
}
#related-posts h2{
font-size: 1.2em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.65em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


Contoh code html related post


<!--Related Posts with thumbnails Scripts and Styles Start-->
-
-
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

5. Seterusnya korang Cari Code (Dengan menggunakan Ctrl+F)

<div class='post-footer'>

6.
 Masukkan Code Script di bawah ini tepat diatas Code <div class='post-footer'>



<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=
8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

CONTOH:

<!-- Related Posts with Thumbnails Code Start-->
-
-
-
<!-- Related Posts with Thumbnails Code End-->
<div class='post-footer'>


7. Korang testing terlebih dahulu dengan menekan pratonton untuk melihat hasilnya sebelum disimpan, mengelakkan terjadinya error ralat pada kod html korang, jika tiada masalah dan dah berhasil korang dah boleh tekan button save/simpan template

pada kode var maxresults=8; diatas, angka 8 anda boleh ganti sesuai dengan bilangan paparan yang korang suka.

Semoga perkongsian blog tutorial ini dapat menyelesaikan masalah korang selama ini yang sering gagal dalam proses pembinaan Relate Post...selamat mencuba dan semoga bermanfaat.

Post a Comment

Ada sebarang soalan berkaitan halaman atau cadangan, sebarang bentuk penulisan serta komen adalah dibawah tanggungjawab dan risiko anda sendiri tertakluk pada Akta 588 SKMM

Terbaru Lebih lama