Barangkali kebanyakan master-master blogger tidak asing lagi dengan article ini. dan pasti udah banyak yang memakai dan mempostingnya juga. walaupun begitu saya tetap memposting cara membuat related post fungi scrolling. Dengan mengaktifkan fungsi scrolling pada widget related posts maka pembaca tidak lagi merasa terganggu dengan artikel-artikel terkait yang terlalu kepanjangan ke bawah. nah ada yang tertarik dengan related post yang satu ini? ikuti langkah-langkah di bawah ini. Untuk lebih jelas nya lihat contoh di bawah ini :
- Log ini dulu ke blogger
- Tata letak kemudian Edit HTML
- Centang kotak kecil "Expand Template Widget"
- Cari kode ]]></b:skin>
- Kemudian letakkan kode di bawah ini persis di atas ]]></b:skin>
/* Related post J_Putra
----------------------------------- */
.rbbox{border: 1px solid #D8D8D8;
padding: 5px;
background-color: #E0F8E0;
-moz-border-radius:5px;
margin:5px;}
.rbbox:hover{background-color: #EFFBEF;} - Setelah itu cari kode<p><data:post.body/></p>
- Copy paste kode di bawah ini setelah kode <p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<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 = "<data:blog.homepageUrl/>";var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 50;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement('ul');var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i < maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {alturl = entry.link[k].href;break;}}var li = document.createElement('li');var a = document.createElement('a');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 < json.feed.link.length; l++) {if (json.feed.link[l].rel == 'alternate') {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k<20; k++) label = label.replace("%20", " ");var txt = document.createTextNode(label);var h = document.createElement('b');h.appendChild(txt);var div1 = document.createElement('div');div1.appendChild(h);div1.appendChild(ul);document.getElementById('albri').appendChild(div1);}}}function search10(query, label) {var script = document.createElement('script');script.setAttribute('src', query + 'feeds/posts/default/-/'+ label +'?alt=json-in-script&callback=listEntries10');script.setAttribute('type', 'text/javascript');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 = "<data:label.name/>";var test = 0;for (var i = 0; i < labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length <= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel < maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script>
</div>
</b:if>
<span style="gt;Powered by <a href="http://jayaputrasbloq.blogspot.com/2009/08/membuat-related-post-fungsi-scrolling.html">J_Putra Widgets </a></span> - Rubah tulisan berwarnah merah dengan kata yang anda inginkan
- Setelah itu simpan template anda dan lihat hasilnya
Selamat mencoba.......
cara membuat Related post fungsi scrolling, Related post fungsi scrolling, memasang Related post fungsi scrolling, langkah menambah Related post fungsi scrolling di blog, tutorial membuat Related post fungsi scrolling di blogspot.
Hubungi Kami: J_Putra
Email: jptr273@gmail.com
bagus mas jaya tutorialnya tapi aku dah pake tuch jadi gak praktek
walah.. walah..
tutorial lagi nich..
mantap sob..
ok kang seep tutorialnya, saya baca-baca dulu biar paham !!!
wah jadi muat banyak ntar deh :D
sip sob knp" tak cba
udah aku coba di blog aku,,
berhasil,,
coba liat dech mas http://bos-sulap.blogspot.com
54k1j0@ imoel@ ocim@ masdoyok@ ipenk@ thanks ya udah mampir dan comment....
Siip.. kayak punyaku..hihi
Good...good
mantap abis infonya, keep the good job bro
Wah, panjang sekali kode html-nya. terima kasih sharingnya
di bahas lagi dech.....
kok gak dikasih sumbernya sob???
ntr anaa coba, klu udah pasang yg tdk pakai scroll bgm? apa hapus dulu yg lama?
anaa >> iya hapus dulu yang lama nya entr nggak nyampung anna hehehe
saya coba ya mas di blog saya
multyone >> silahkan sobat......
gak berhasil pak! saya maunya related posnya di taruh di bawah post kaya punya bapak! hehehehe...
klo di taruh di tempat lain saya sudah bisa! (gaya mode on) hheeehehe...
tolong tutorial untuk yang di bawah post body langsung! makasi.
saya tunggu pak!
o iya mas, satu lagi! aku coba copy kok selalu gagal ya!?! emang yang sebelah mana? saya ada 2 .
bisa di contohkan script sebelum dan sesudahnya mas! makasi sebelumnya!
Pesan error XML: The value of attribute "style" associated with an element type "null" must not contain the '<' character.
iya ini sama yang saya pakek... coba kamu praktekan lagi
ok boss!thanks ya...
boss yang data post body gak ketemu....
gimana nih...?
~_~
http://zona-ketawa-kita.blogspot.com/
syam Oby >> cari yang hampir sama.... smoga membantu
Boss,,
Di template ku ga usah pake kode yang di taruh di atas ]].. malah udah jadi...
not work for my template help meeee.....:(
berhasillllll
data:potnya ga ada?
Boss,di template saya koq gak ada kode data pot nya ??
mohon bantuannya dan beri penjelasan ! :(
Shareforfun >> Coba kamu cari pake Ctrl + F. Jika tidak ketemu cari berdasarkan data:post.body atau cari yang mirip dengan kode di atas. semoga membantu
sama nih kgak ktemu juga data:post.body
helpme
AsyifaPulsaShop > Pasti ada, setiap blogspot pasti terdari . mungkin anda belum centang kotak kecil yang bacaan "Expand Template Widget".
terlalu bnyak script bro.. coba cara ini
http://andita1984.wordpress.com/2011/01/26/panduan-membuat-fungsi-scroll-pada-postingan/