Membuat Artikel Terkait Dengan Fungsi Scroll - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Rabu, 19 Januari 2011

Membuat Artikel Terkait Dengan Fungsi Scroll

Artikel terkait betujuan agar pengunjung blog sobat lebih mudah dalam mencari artikel yang berhubungan dengan label tertentu. Pada postingan kali ini saya akan membahas cara membuat artikel terkait dengan fungsi scroll.

Kelebihan artikel terkait dengan fungsi scroll ini agar saat postingan sobat sudah banyak, sehingga tidak memakan terlalu banyak tempat.

Langsung saja ikuti langkah-langkah berikut.

1. Masuk ke akun blog sobat pilih tata letak
2. Pilih edit HTML jangan lupa Expand Template Widget. Download full template untuk menghindari kesalahan.
3. Cari kode <data:post.body/> dan letakkan kode di bawah ini sesudah kode <data:post.body/>

<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>

Kalau sobat sudah menggunakan fungsi read more, nanti akan ada 2 kode <data:post.body/>, pasang di bawah kode yang pertama.

4. Selanjutnya cari kode ]]></b:skin>
5. Pasang kode di bawah ini diatas kode ]]></b:skin> tadi.

.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);}


6. Simpan template dan lihat pekerjaan sobat.

Untuk backgroundnya silahkan sesuaikan dengan template sobat.
Semoga bermanfaat.
Alhamdulillah...

25 komentar:

  1. Mas, boleh nanya dulu ?

    Saya coba pasang, tapi setelah dipreview,
    yang keluar malah memunculkan semua tulisan,
    dan mematikan fungsi auto readmore ...
    (tulisannya ada)

    tolong pencerahannya,
    hanarufun.blogspot.com

    BalasHapus
  2. Coba pasang di bawah <data:post.body/> yang terakhir

    BalasHapus
  3. kalo yg ini berhasil, pake yg ini saja lah
    makasih boss

    BalasHapus
  4. thankz gan ats infonya,,
    wehh untung ad tmen jdi brhsil gan

    msh blajar jdi blogger ^_^

    BalasHapus
  5. wah makasih banget nih mas tutorial membuat related postnya. saya udah nyari nyarinih

    BalasHapus
  6. terima kasih kode artikel terkaitnya,,
    walaupun sudah berhasil dengan kode dari blog tetanggga,,

    BalasHapus
  7. artikel yag bermanfaat sobat..!! thank's yach sobat...!!! ane dah pasang tambah keren ajch blog ane sob...!!! sekali lagi makasih yach sobat!!!

    BalasHapus
  8. makasihgan anne dah pasng n berhasil

    BalasHapus
  9. Terima kasih buat tutorialnya...
    Berhasil...!!!
    Be Success

    BalasHapus
  10. masukan gan...jika template anda mempunyai 1, 2 atau bahkan 3 kode yang sama, coba masukkan di bawah kode yang ke dua, karna saya pernah coba masukin di bawah kode pertama, tapi hasilnya nihil. cobalah taruk di bawah kode yang ke dua. semoga bisa membantu.

    tanks gan infonya, nitip link ya gan
    download game and software

    www.4rieshare.blogspot.com

    ^_^

    BalasHapus
  11. makasih infonya sangat membantu sekali untuk yang belum pasang, nice share and happy blogging

    BalasHapus
  12. Mas ko di blog saya ga jadi kalo dilihat di Hp baik versi seluler maupun versi web ttep ga kliatan tp waktu di warnet ada isi artikel terkaitnya.tolong di pecahin masalahnya. di tmplate aku hanya satu supaya kebaca di hp. Soalnya warna abu-abu doang yang kliatan

    BalasHapus
  13. Berguna sekali infonya, terima kasih kawan.

    BalasHapus
  14. Mantep banget sukses terus ngeblog nya
    tribung.blogspot.com

    BalasHapus
  15. Mantap mas, jadi di blog saya, terimakasih

    BalasHapus
  16. Data post body di template saya ada empat jadi gimana tuh?

    BalasHapus
  17. . setelah saya menyimak dari awal hingga akhir, banyak sekali ilmu yang saya terima dari artikel yang anda tulia, semoga tambah bermanfaat ya lam kenal dan sukses selalu

    BalasHapus
  18. informasi yang sangat menambah wawasan saya makasih ga,.

    BalasHapus
  19. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    BalasHapus

Post Top Ad

Space Iklan