Tutorial - Widget topik berkaitan ada thumbenail untuk blogspot

Tutorial - Widget topik berkaitan ada thumbenail untuk blogspot

Baca Juga

Sebelum ini, aku hanya menggunakan "related post" tanpa thumbnails dan didapati ia kurang menarik berbanding "Related Posts Widget with Thumbnails" untuk menarik pelawat membaca entry seterusnya. Aku juga pernah guna "LinkWithin - Related Posts with Thumbnails" dan ia adalah menarik cuma bezanya sekira menggunakan "LinkWithin", ia agal lambat sedikit kerana sebelum pergi ke entry berkaitan. "LinkWithin" juga menyebabkam laman blog agak lambat kerana jumlah pengguna widget tersebut yang amat tinggi.

Berbeza dengan widget yang aku guna sekarang, ia terus kepada entry yang dipaparkan dan lebih ringan. Malah, kita boleh meletakkan "javascript' tersebut ke perkhidmatan hosting yang lain untuk mengelakkan kesesakan "traffic widget".

Sekiranya anda berminat untuk memasangnya, sila ikuti cara-cara berikut:

1. Log masuk akaun blogger.com, pergi ke Layout > Edit HTML dan tanda pada kotak "Expand Widget Templates"

2. Cari </head> dan gantikan dengan kod di bawah:

<!--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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXoYdH3azPxcEZSBCv3E_xBRjgItVMZ58L2pRtH2DTnaJBnqVQ0XLrqoThBfVH4wrLNv0Tp4VvphzhpjGh-wxSh4A4ZvURVZtOjjXjR_VSm7flLn0Rg9SbWgEkD7wDfOlIXZNZxe5LRYs/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>

 3. Kemudian, cari pula <data:post.body/> dan masukkan kod di bawah selepas <data:post.body/> :

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

 4. Anda boleh ubah jumlah topik berkaitan dengan ubah nilai berikut:

var maxresults=5;

5. Sila ubah var relatedpoststitle="Related Posts"; untuk mengubah tajuk widget.
6. Untuk mengubah gambar "thumbnail" tiada gambar, sila gantikan link ini:

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXoYdH3azPxcEZSBCv3E_xBRjgItVMZ58L2pRtH2DTnaJBnqVQ0XLrqoThBfVH4wrLNv0Tp4VvphzhpjGh-wxSh4A4ZvURVZtOjjXjR_VSm7flLn0Rg9SbWgEkD7wDfOlIXZNZxe5LRYs/s400/noimage.png";

7. Untuk mengubah warna pembahagi topik berkaitan, sila ubah berikut:

var splittercolor="#d4eaf2";

8. Untuk memastikan setiap entry terdapat "Widget topik berkaitan" sila ikut arahan berikut:
  - Sila buang 2 line kod berikut seperti langkah 2 dan 3:

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

 dan

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

 9. Simpan dan lihat blog anda. Kepada yang menggunakan "read more hack", laman utama blog tidak akan dipaparkan "Widget topik berkaitan".