Latest Posts

Senin, 01 Juli 2013

CARA MEMBUAT ARTIKEL TERKAIT DENGAN SCROLL DI BLOG

Kembali lagi Blogger Mania...
Kali ini saya akan memberikan tutorial dan sedikit trik tentang Cara Memasang Artikel Terkait Dengan Scroll Pada Blog Anda. Sebelumnya saya sudah jelaskan tentang cara membuat artikel terkait di blog, nah namun ada kekurangannya tuh dari tutorial sebelumnya. Jika artikel terkait yang ditampilkan terlalu banyak, maka akan terlalu memakan space laman blog Anda. Nah ane kasih satu solusi buat ngatasinnya. Yah pake scroll aja...
Kelebihan scroll ini akan mampu memuat jumlah artikel terkait sebanyak-banyaknya tanpa menggangu panjang dari laman posting Blogger Mania. Nah terus gimana cara bikinnya? Oke langsung aja kita nyebur aje.... 

Related Post yang akan dibuat adalah type  scroll yang sangat menarik untuk diterapkan Blogger Mania, kaya gini niihhh mas boooooy....

 
 
Langkah-Langkah:



1. Login ke Blog yang Blogger Mania punya.  
2. Saat masuk ke menu Dashboard, pilih Template.
3. Kemudian pilih Edit HTML, maka akan muncul kotak untuk mengedit HTML Blogger Mania.
4. Cari kode  ]]></b:skin> pada kotak tersebut. Agar lebih mudah, tekan Ctrl+F atau F3 pada keyboard, kemudian ketik kode  ]]></b:skin> pada kotak yang muncul kemudian tekan enter, maka akan muncul kode  ]]></b:skin> yang dicari.  
5. Copy kemudian paste-kan kode HTML berikut sebelum kode  ]]></b:skin> tadi.
 
/* Artikel Terkait */
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
 
  Keterangan:

**#E0F8E0 = kode warna kotak background Related Post (ubah sesuai keinginan)
**#EFFBEF = kode warna kotak background 'hover' related post muncul pada saat disorot mouse (ubah sesuai keinginan)

**Kode Warna Pilihan:
**Untuk warna Transparan, hapus kode {background-color: #******;}
  
6. Setelah itu cari kode <data:post.body/> dan letakkan script berikut di bawahnya***


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H4>Related Post:</H4>
<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 = 5;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
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>

7. Ganti teks berwarna merah dengan jumlah artikel maksimal yang akan dimuat pada artikel terkait.  
8. Simpan template dan lihat postingan pada Blogger Mania.

***Keterangan: Apabila ada banyak <data:post.body/>, cari kode yang kedua, atau cari kode <data:post.body/> setelah post entri content, kalau masih ga muncul cobain aja semuanya hehehe...

Note: Artikel yang di posting harus berlabel agar bisa muncul pada related post.


 

Related Post:

1 komentar:

  1. terima kasih gan,dari blog agan udah memeberikan informasi yang sangat bermanfaat untuk saya,
    saya banyak belajar dan mendapat ilmu terbaru setelah melihat postingan yang ada di blog agan.
    saya tunggu postingan selanjutnya gan..

    BalasHapus

Copyright © 1995 - 2015 Radyusaniar™. All Fights Reserved | Powered by Transmission Group®