Header Ads

Cara Memberi Scroll Box pada Artikel Terkait di Blogger

Cara Memberi Scroll Box pada Artikel Terkait di Blogger

Sebelumnya di blog ini telah dibahas mengenai cara memasang artikel terkait di blog. Bila kita sudah mempunyai artikel dengan label yang sama sebanyak lebih dari 25 buah misalnya, maka artikel-artikel yang ditampilkan akan terlihat panjang ke bawah sehingga terkesan memakan tempat.

Nah, untuk menghemat ruangan pada area di bawah posting tersebut, kita dapat memberi atau membuatkan scroll box atau kotak berpenggulung pada widget artikel terkait tersebut.

Untuk membuat scroll box yang dimaksud, kita perlu menyisipkan kode tertentu dalam kode script widget artikel terkait tersebut. Kode yang dimaksud adalah <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> dan </div>.
  • height:200px merupakan tinggi scroll box sebesar 200 piksel, Anda dapat menggantinya sesuai selera Anda.
  • overflow:auto jika banyaknya artikel terkait telah melebihi tinggi scroll box, maka akan terbentuk scroll atau penggulung secara otomatis.
  • border:1px solid #ccc merupakan atribut untuk kotak atau box yang terbentuk dengan tebal 1 piksel bergaya solid dan berwarna #ccc, silakan disesuaikan bila Anda menginginkannya.
Bila kode tersebut disisipkan pada script artikel terkait maka hasilnya akan seperti di bawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<div class='widget-content related-by-cat'>
<h3>Related Posts / Artikel Terkait :</h3>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='data2007'/><br/><br/>
<div id='hoctro' style='display:none;'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 40;

maxNumberOfPostsPerLabel = 40;
maxNumberOfLabels = 40;


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;data2007&#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>

</div>
</b:if>

4 comments:

  1. mass maass,,aku ampe pusiing,belajarnya,banyak yang ga bisa caranya,,coba mas cara cara nya di sebutkan ,dari mulai ligin terus masuk kemana,terus kemana,,gituu,biar tau caranya,,he,,he
    top banget deh buat aa munadi

    ikutan nampang juga nihh

    http://www.bisniscaribisnis.blogspot.com

    ReplyDelete
  2. thanks gan atas informasinya yang sangat-sangat bermanfaat, salam kenal ya

    ReplyDelete
  3. Pada Template btemplate nggak bisa mas....cara yang lain juga nggak bisa nggak keluar artikel terkaitnya.....aku coba paling bisa pakai linkwithin aja...kawan...

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.