Cara Memasang Artikel Terkait Berdampingan RSS Feed

Dikirim oleh Andi Syam Jumat, 25 Mei 2012 28 Komentar Post views:

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 :



<!--panggil artikel terkait-->
<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://www.andisyam.web.id/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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=andisyam&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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='andisyam'/><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/andisyam'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/andisyam?bg=99CCFF&amp;fg=444444&amp;anim=1&amp;label=listeners' style='border:0' width='88'/></a></p></form></p>
</div>
<div class='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><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 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 2;var maxNumberOfLabels = 8;maxNumberOfPostsPerLabel = 12;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);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 &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);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 = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; 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