Showing related post - an alternative to Link Within

Link Within? rasanya 90% blogger tahu tentangnya. Kebanyakan blogger menggunakan widget Link Within dalam blog mereka. Kebaikkan menggunakan Link Within ini sememangnya diakui kerana ia meningkatkan jumlah bacaan entri yang ada dalam blog kita kerana ia akan memaparkan link ke entri-entri yang berkaitan seterusnya menarik minat pembaca untuk terus berlayar dalam blog kita. Namun begitu, mungkin bagi sesetengah orang (saya terutamanya)paparan Link Within yang terlalu banyak pada frontpage blog menyesakkan pandangan mata terutama bagi blog yang menggunakan fungsi Read More seperti paparan blog saya di bawah. Jom kita lihat..




Saya telah menemui satu website www.bloggerplugins.org yang memaparkan tutorial bagaimana memaparkan entri berkaitan seakan Link Within tetapi hanya pada full page sesuatu posting sahaja dan bukannya pada frontpage blog.

Hasilnya setelah saya buat pada blog saya seperti dalam gambar.


(Lihat tiada paparan entri berkaitan pada frontpage)


(Paparan entri berkaitan ada pada full page sesuatu post)

Di sini saya kongsikan tutorial tersebut. Kredit kepada www.bloggerplugins.org

Langkah 1
Login ke blogger dashboard kemudian klik Layout > Edit HTML dan tick pada "Expand Widget Templates" check box.

Langkah 2
Cari kod:

</head>

Gantikan dengan kod berikut :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Langkah 3
Cari pula kod berikut
<div class='post-footer-line post-footer-line-1'>

(jika tiada, cari kod berikut)
<p class='post-footer-line post-footer-line-1'>

Letakkan kod berikut di bawah kod yang anda telah jumpa tadi
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Langkah 4
Anda boleh tentukan bilangan entri berkaitan yang anda ingin paparkan dengan edit kod berikut
var maxresults=5;


Selamat Mencuba!

4 ulasan :

  1. yup.. tip yg baik. Ada yang suka paparkan entri yg berkaitan, ada yg tak suka.. bergantung atas selera masing2.

    BalasPadam
  2. info yg bagus.. boleh menaikkan pageview.. boleh mengurangkan bounce rate..

    BalasPadam
  3. Cikgu....

    template saya tiada

    Langkah 3
    Cari pula kod berikut

    div class='post-footer-line post-footer-line-1

    (jika tiada, cari kod berikut)

    p class='post-footer-line post-footer-line-1

    Jadi bagaimana?

    saya cuba paste selepas juga tidak berjaya...

    perlu diganti URL dalam code?

    BalasPadam
  4. Putera Bongsu :

    Pastekan di bawah kod <data:post.body/>

    BalasPadam

Pengikut