Cara Memasang Artikel Terkait Berdampingan RSS Feed

Kali ini admin Auto Komputer memenuhi permintaan sobat Teaktear Media tentang cara memasang artikel terkait (realated post) berdampingan dengan rss feed seperti yang saya miliki di blog ini. Memang cara ini tidak menyita banyak ruang template agar lebih efesien dan enak dipandang mata cara ini juga banyak jadi pilihan bagi sobat blogger pada umumnya.

Ok Sobat langsung saja pada penerapannya, berikut langkah-langkahnya :

Login ke akun blogger sobat disini, kemudian pilih menu dropdown Opsi lainnya selanjutnya pilih Template dilanjutkan dengan memilih Edit Template, jangan lupa beri tanda centang pada Expand Template Widget.

Sebelum melakukan edit template, ada baiknya sobat melakukan beckup template terlebih dahulu, agar jika terkadi kesalahan dapat dikembalikan kesemula.

Cari kode ]]></b:skin>, kemudian copy kode css berikut dan pastekan tepat diatas kode ]]></b:skin> tadi, berikut kode css-nya :

/*Artikel Terkait*/
#related{background:#eee url(http://vbcomp.googlecode.com/svn/trunk/img/dot_thumb.gif) 45% 0 repeat-y;
border:1px solid #ddd;
color:#000;
margin:0 0 10px;
padding:15px
}
#related .related-posts{
font-weight:400;
width:53%;
float:right
}
#related .related-posts p{
margin:0
}
#related .related-posts h3,#related .related-posts h2,#related .related-posts h1{
font-size:12pt;
letter-spacing:0;
margin:0
}
#related .related-posts ol{
font-weight:400;
margin:2px 0 0
}
#related .subscribe{
width:43%;
float:left;
color:#000
}
#related .subscribe p.intro{
font-weight:400
}
#related .subscribe p.feed{
margin-bottom:10px;
font-weight:700;
padding-left:21px;
background:url(http://vbcomp.googlecode.com/svn/trunk/img/rssfeed-box.png) 0 50% no-repeat;
vertical-align:middle
}
#related .subscribe form{
margin:0;
padding:0
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix{
display:inline-block
}

Setelah langkah pertama selesai, lanjutkan dengan mencari kode <p><data:post.body/></p>, setelah ketemu copy dan pastekan kode berikut tepat dibawah kode tadi, berikut kodenya :

<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://auto-komputer.blogspot.com/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=auto-komputer', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Jika Sobat menyukai artikel Blog ini, masukan alamat email Sobat untuk mendapatkan posting terbaru dari saya langsung ke email sobat.</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='auto-komputer'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Langganan'/><p>Delivered by <a href='http://feedburner.google.com/' target='_blank'>FeedBurner</a></p><p><a href='http://feeds.feedburner.com/auto-komputer'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/auto-komputer?bg=99CCFF&fg=444444&anim=1&label=listeners' style='border:0' width='88'/></a></p></form></p>
</div>
<div class='related-posts'>
<b:if cond='data:blog.pageType == "item"'><div class='rbbox'><b>Baca juga artikel ini :</b><div style='overflow:auto;width:280px;height:260px;padding:10px;border:1px solid #D4D4D4'>
<div style='margin:0; padding-left:10px;'><div id='albri'/>
<script type='text/javascript'>var homeUrl3 = "<data:blog.homepageUrl/>";var maxNumberOfPostsPerLabel = 2;var maxNumberOfLabels = 8;maxNumberOfPostsPerLabel = 12;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement('ul');var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i < maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {alturl = entry.link[k].href;break;}}var li = document.createElement('li');var a = document.createElement('a');a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l < json.feed.link.length; l++) {if (json.feed.link[l].rel == 'alternate') {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k<20; k++) label = label.replace("%20", " ");var txt = document.createTextNode(label);var h = document.createElement('b');h.appendChild(txt);var div1 = document.createElement('div');div1.appendChild(h);div1.appendChild(ul);document.getElementById('albri').appendChild(div1);}}}function search10(query, label) {var script = document.createElement('script');script.setAttribute('src', query + 'feeds/posts/default/-/'+ label +'?alt=json-in-script&callback=listEntries10');script.setAttribute('type', 'text/javascript');document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = "<data:label.name/>";var test = 0;for (var i = 0; i < labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length <= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel < maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script>
</div></div><script type='text/javascript'>RelPost();</script></div></b:if>
</div>
</div>
</b:if><br/>

Kemudian ganti baris kode diatas yang berwarna biru dengan feed default blog sobat misalkan http://alamat_blog_sobat/feeds/posts/default. dan yang berwana merah silahkan sobat sesuaikan dengan feed burner sobat, jika belum punya feed burner silahkan sobat daftar disini

Save template sobat

Sampai disini Cara Memasang Artikel Terkait Berdampingan RSS Feed selesai, perlu diketahui bahwa tidak semua template sama, olehnya untuk lebih mudahnya cari kode yang mirip pada bagian template sobat. Bagi sobat yang ingin menerapkan seperti yang saya miliki dan mengalami kendala bisa memberi komentar disini, akhir kata semoga artikel singkat ini bermanfaat bagi sobat-sobat sekalian.

Auto Komputer

Laman

Sabtu, 22 September 2012

Cara Memasang Artikel Terkait Berdampingan RSS Feed

1 komentar :