Penulis
Muhamad Nurul Huda
Cara Membuat Related Post Blog dibawah Postingan - Related Post, atau artikel terkait, adalah opsi dimana para pengunjung blog bisa menemukan artikel yang terkait dengan artikel atau postingan yang sedang dibacanya. Biasanya artikel terkait tersebut memiliki kesamaan label atau kategori dengan artikel atau postingan yang sedang dibaca pengunjung blog.
Nah, related post atau artikel terkait biasanya berada di akhir postingan. Lebih tepatnya dibawah postingan. Fungsi related post disini adalah agar para pengunjung tak hanya tahu tentang artikel atau postingan yang sedang dibacanya, namun juga tertarik dengan artikel terkait yang disuguhkan.
Dengan adanya related post ini, blogger juga bisa meningkatkan jumlah kunjungan pada blognya. Karena pengunjung akan tertarik membaca artikel yang lain dan pengunjung akan melihat artikel lain itu artinya akan menambah jumlah kunjungan pengunjung blog.
Oke, disini yang akan saya jelaskan ada dua cara :
1. Membuat related post yang hanya tulisan saja
2. Membuat related post lengkap dengan gambar (Thumbnail)
Kita langsung saja ke topik pembicaraan.
Berikut tutorialnya :
CARA PERTAMA
Dicara pertama ini kamu hanya menambahkan artikel terkait hanya tulisan nama artikelnya saja, tidak lengkap dengan gambar.
Caranya :
- Log in ke blogger.com
- Buka menu tema atau template
- Klik edit HTML
- Copas kode berikut dan letakkan diatas kode </head>
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 10px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 15px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 10px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background: url("http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-
vzWTTOgXs/s1600/bullet-list.gif") no-repeat 0 0px;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
7. Letakkan kode berikut tepat dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><h2>Related Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if></b:loop> </h2><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></div></b:if>
8. Simpan atau save template
CARA KEDUA
Dicara kedua ini, kamu bisa menampilkan gambar dari artikel terkait di blogmu.
Bagaimana caranya ?
Caranya adalah sebagai berikut :
1. Log in ke blogger.com
2. Klik menu tema atau template
3. Klik edit HTML
4. Cari kode </head> dengan menekan tombol Ctrl+F
5. Copas kode berikut diatas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #EEEEEE;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;} #related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' /> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
6. Cari kode <data:post.body/> dengan menekan tombol CTRL+F
7. Copaskode berikut diatas kode <data:post.body/>
<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=6; var relatedpoststitle="<b>Related Posts:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> </b:if> <!-- Related Posts with Thumbnails Code End-->
8. Simpan template
Bagaimana ? Mudah bukan ?
0 Response to "Cara Membuat Related Post Blog dibawah Postingan"
Post a Comment