Daft Punk

Search

Kamis, 08 September 2011

Cara Membuat Artikel Terkait di Blog Dengan Scroll


Bismillah, salam ukhuwah untuk sobat bloger semua, sedikit kulasantentang Tutorial Blog yang akan saya sharingkan ke temen semua tentunya dimana saya berhasil mencobanya disitulah saya akan membagikan ke sobat semua, tentu yang akan saya bagikan sudah pernah disharingkan lagi oleh sobat bloger semua, namaun disini akan saya sharingkan lagi untuk melengkapi tutorial blog dalam blog ini, jika sobat yang belum memakai Artikel Terkait dalam blog bisa dicoba cara2 yang saya dapatkan ini, ngomong2 masalah Artikel Terkait ini saya dapatkan dari salah satu sobat bloger yaitu Mas Oktri, nah untuk itu langsung aja menuju TKP di mana script itu berada :


SEPERTI INI GAMBARNYA ARTIKEL TERKAIT


Silahkan sobat klik Tata Letak kemudian Edit HTML dan jangan lupa centang Expand Template Widged, kemudian silahkan cari kode ini<data:post.body/> urutan yang kedua bukan yang pertama, Jika sudah ketemu silahkan letakkan kode di bawah di bawah kode diatas untuk urutan yang ke DUA, ingat urutan yang kedua karena di dalam template ada dua kode yang sama seperti kode diatas :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>


Selanjutnya silahkan sobat cari kode ]]></b:skin> 
Jika sudah ketemu silahkan Copas kode dibawah ini dan letakkan di atas kode ]]></b:skin> 
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}


Jika sudah silahkan sobat ganti warna background yang sobat suka 
Dan silahkan sobat simpan, lihat hasilnya...


Selamat Mencoba Semoga Sobat Berhasil

0 comment :

Posting Komentar

Find Us On

Ryan Agung on
E992 on Facebook