13 Januari 2010

Pin It

Related Post With Scrool Function

Related Post With Scrool Function | Khamardos's Blog

Dari Gambar di atas tentu anda telah mengenal Tentang Widget Related Post. Berbeda dengan related Post yang biasa tampak panjang kebawah, Kali ini kita berupaya untuk membuat widget tersebut menjadi menarik !!

Dari gambar tampak ada scroll yang bisa dinaik-turunkan untuk melihat posting-posting yang terkait (berdasakan kategori). Baiklah, mari kita mulai bagaimana cara Membuat Widget Related Posts Dengan Fungsi Scrolling di bawah Posting Blog anda.
  1. Login ke blogger anda
  2. Dari Dasebor, Klik  Tata Letak
  3. Pada tab menu, pilih Edit HTML
  4. Centang kotak kecil Expand Template Widget 
  5. Cari kode <p><data:post.body/></p>
    Letakkan kode berikut di bawah kode tadi :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</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 = 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>

    6. Jika sudah, sekarang cari kode ]]></b:skin>
    7. Letakkan kode berikut di bawah kode tadi :

.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
Related Post With Scrool Function | Khamardos's Blog

Note :
Ubah kode yang bertanda sesuai dengan warna blog anda, Jika anda belum tahu kode warnanya, Silahkan check pada Kode Warna HTML
#D8D8D8 : Warna Tepi (border)
#E0F8E0  : Warna Background
#EFFBEF : Warna Background juga, namun akan nampak saat box disorot dengan pointer

    8. Lalu Klik Simpan Template

-----------------------------------------------------------------------
Permasalahan bagi Pengguna Readmore :
bagi anda pengguna fasilitas Readmore maka anda terkadang melihat Widget Related Post juga muncul pada Halaman Home anda, Jika anda hanya menginginkan Related Post tersebut hanya muncul pada halaman Postingan ! Maka Inilah solusinya !!!!

    1. Cari kode <data:post.body/>
    2. Kemudian lihat gambar ini.

Related Post With Scrool Function | Khamardos's Blog
    Saat anda memcari kode <data:post.body/> maka anda menemukan terdapat 2 kode pada template anda (biasanya ada pada blog pengguna readmore)

Yang diberi lokasi warna hijau merupakan script Readmore !

Maka anda harus mengcopy - paste kode Html pada kode pencarian <data:post.body/> yang kedua (yang bukan gabungan script readmorenya)

Related Post With Scrool Function | Khamardos's Blog
    3. Lalu Simpan Template

Semoga bermanfaat, Jika Ada yang Ditanyakan Silahkan tanya di Form Komentar !!!

Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

30 comments:

Klik Untuk Lihat Komentar

Mufi_ed on 13 Januari 2010 21.21 mengatakan...

mengamankan pertamax !!!
heheeee !!! :D
jgn spam yach sob !!!

blog Ilpeng dan teknologi on 14 Januari 2010 08.17 mengatakan...

wah brarti pertamax neh yah. bner penting neh tutorial nya sob, kduluan deh..
pdhal kn mau d tulis.. hohoho..
jago neh bikin tutorial..

arsumba on 14 Januari 2010 09.45 mengatakan...

KETIGAXXXX tak amankan dulu ah... hehehe..
mas, kalau di wordpress gimana ya sob? saya bingun mo ngasih related post nya...
salam hangat.. sobat..

sda on 14 Januari 2010 10.36 mengatakan...

makasih tutorialnya...

narti on 14 Januari 2010 10.46 mengatakan...

artikel yg muncul berdasarkan label yg sama atau acak?

secangkir teh dan sekerat roti on 14 Januari 2010 11.10 mengatakan...

wow..rumit tapi hasilnya menarik!

amcied on 14 Januari 2010 11.31 mengatakan...

wah keren ni...
saya kok g tau ya,hehee
thank's sering'y...

W|zNu on 14 Januari 2010 14.14 mengatakan...

Thx info nya ^_^

ROCHIM BLOG on 14 Januari 2010 16.38 mengatakan...

Wah..., nambah ilmu lagi neh...
Thanks Sob...

mGm on 14 Januari 2010 17.53 mengatakan...

tutorial yang menarih hati blogger neh...oke sob teruskan [postingan-postingan hebat lainnya. dan memang aku punya related post kayak itu

!Rchymera! on 15 Januari 2010 07.16 mengatakan...

Wow very...very...good information sobat,ntar langsung dipraktekan dan slm sukses selalu...:D

Mufi_ed on 15 Januari 2010 13.13 mengatakan...

@ blog Ilpeng dan teknologi
heheheee.... siapa cepat dia dapat sob !!!
heheheheh !!!!

@ arsumba
hmmmm......
Ok sob !!! nnti saya cari tutornya !!!

@ sda
Ok sob !!
smoga bermanfaat !!

Mufi_ed on 15 Januari 2010 13.15 mengatakan...

@ narti
munculnya berdasarkan kategori yang diberikan untuk artikel tersebut sob !!!

@ secangkir teh dan sekerat roti
Smoga bermanfaat sob !!!

@ amcied
Ok sob !!!
Smoga bermanfaat !!!

Mufi_ed on 15 Januari 2010 13.23 mengatakan...

@ W|zNu
Sama2 sob !!! smoga bermanfaat !!!

@ ROCHIM BLOG
Heheheheheee.... Thnks udah mmpir sob !!!

@ mGm
Ok sob !!!! Thnks sudah mmpir yach !!

@ !Rchymera!
Sip, Selamat mencoba !!!

masterGOmaster on 15 Januari 2010 18.29 mengatakan...

info baru lagi nih buat aku aku coba di blog percobaan dulu ya !!!!

ipin's cool on 15 Januari 2010 20.47 mengatakan...

manatp sobb ilmunya nih..thanks dah share yahh

ichaelmago on 16 Januari 2010 09.39 mengatakan...

tipsnya bagus..tapi udah gak pake blogspot lagi nih..

newbiedika fly on 16 Januari 2010 13.08 mengatakan...

mufid keren abiz bloog nya ... hehehe tukeran link yuk?

Mufi_ed on 17 Januari 2010 21.04 mengatakan...

@ ipin's cool
Sip sob !!!
slmat mencoba !!!

@ ichaelmago
heheheh.... iya yach !!!!
Ok dech, kpan2 aq share tutor scra umum dech !!

@ newbiedika fly
heheheh !!! Thanks dika !!!
Ok, Udah aq psang !!!! (maaf telat )

Rizky2009 on 17 Januari 2010 21.05 mengatakan...

lha dalah ini yg aq cari ketemu d sini rupanya, akan aq ganti dengan yg scrol

Mufi_ed on 17 Januari 2010 21.51 mengatakan...

@ Rizky2009
Sip sob !!!
slmat mncoba !!!

angger on 17 Januari 2010 22.56 mengatakan...

makasih atas infonya sob,bermanfaat baut saya dan tentunya buat sahabat yang lain.......

glife2010 on 17 Januari 2010 23.02 mengatakan...

nice post...

RADJA BONTANG on 18 Januari 2010 06.41 mengatakan...

wah mantap thank sob tips nya

rumah blogger on 19 Januari 2010 12.36 mengatakan...

mamtap juga nich, thanx sob.

sabirinnet on 19 Januari 2010 12.37 mengatakan...

langsung dicoba nich, semoga berhasil. terima kasih mas atas ilmunya

Computer Tips Tricks on 19 Januari 2010 17.53 mengatakan...

Mantap tipsnya. Jadi ga usah cari hosting buat js tuh. Makasi.

Mufi_ed on 19 Januari 2010 18.28 mengatakan...

@ angger
sama2 sob !!!

@ glife2010
Thanks sob , smoga bermanfaat !!!

@ RADJA BONTANG
Smoga bermanfaat sob !

Mufi_ed on 19 Januari 2010 18.30 mengatakan...

@ rumah blogger
Ok sob, smoga bermanfaat !!

@ sabirinnet
Ok sob !!!
Slmat mencoba !!!

@ Computer Tips Tricks
Praktis n ekonomis sob !!! (hehehehehe.... :D )
slmat mencoba yach !!! ;;)

rougerdeluffy on 27 Agustus 2011 18.00 mengatakan...

Sudah saya praktekkan dan berhasil gan ,makasih ya triknya

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied