Membuat Widget Artikel Yang Bersangkutan Dengan Scroll
Al kisah tengah malam saya berkeliling di dunia maya.Eh saya sempat berhenti di Blog Scrapur.Saya menemukan artikel yang cukup menarik nih...judulnya...How to Put Related blog to your Post in Blogger.com atau artinya Bagaimana Cara Menaruh Artikel Yang Berhubungan Di Blogmu....Sebelumnya saya edit widget Widget Artikel Yang Bersangkutan yang punya Mas Scrapur menjadi Widget Artikel Yang Bersangkutan Dengan Scroll...
Langsung ajah langkah-langkahnya:
- Login ke Blogger
- Klik Tata Letak-->Edit HTML-->Jangan lupa di centang Expand Template Widget
- Anda cari Script ini:
atau<data:post.body/></p>
<div style='clear: both;'/>
- Kalau untuk widget dari Mas Scrapur yang tidak memakai scroll scriptnya disini
- Kalau untuk widget editan tukang arsip yang memakai scroll scriptnya ini :
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- *****************http://blogger.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<!--
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div style='overflow:auto;width:600px;height:100px;padding:10px;border:3px;background:url(http://i497.photobucket.com/albums/rr334/ridwanox/animasi1.gif)top center #FFFFFF;'>
<div id='data2007'/><br/><br/>
<div id='Scrapur'>
Widget edited by <u><a href='http://weblog-indonesia.blogspot.com/'>Weblog Indonesia</a></u>
</div>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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('data2007').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>
</div>
</div>
</b:if> - Taruh script di atas itu diantara:
dan<data:post.body/></p>
Hasilnya begini:<div style='clear: both;'/>
<data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- *****************http://blogger.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<!--
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div style='overflow:auto;width:600px;height:100px;padding:10px;border:3px;background:url(http://i497.photobucket.com/albums/rr334/ridwanox/animasi1.gif)top center #FFFFFF;'>
<div id='data2007'/><br/><br/>
<div id='Scrapur'>
Widget edited by <u><a href='http://weblog-indonesia.blogspot.com/'>Weblog Indonesia</a></u>
</div>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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('data2007').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>
</div>
</div>
</b:if>
<div style='clear: both;'/> - Simpan Template dan Lihat hasilnya.
Widget Artikel Yang Bersangkutan Dengan Scroll editan Weblog Indonesia
Kalau anda memilih Widget Artikel Yang Bersangkutan Dengan Scroll editan tukang arsip,maka yang harus anda edit yaitu:
- Pada langkah ke empat anda lihat ada tulisan berwarna merah width,height,dan border anda rubah terserah ukuran anda.
- Pada Langkah keempat juga anda lihat ada script begini:
yang warna merah http://i497.photobucket.com/albums/rr334/ridwanox/animasi1.gif anda ganti dengan gambar apa yang ingin dijadikan background widget itu.Kalau anda tidak mau ada background anda hapus maka anda bisa lihat hasilnya jadi begini:<div style='overflow:auto;width:600px;height:100px;padding:10px;border:3px;background:url(http://i497.photobucket.com/albums/rr334/ridwanox/animasi1.gif)top center #FFFFFF;'>
Setelah itu anda ganti #FFFFFF dengan warna apa aja..Lihat Warnanya disini<div style='overflow:auto;width:600px;height:100px;padding:10px;border:3px;background:#FFFFFF;top center;'>
- Kalau ada yang ditanya silahkan kasih komentar ya...
Inspirasi : Mas Scrapur
21 komentar:
Wes...keren banget cuy....tapi aku dah make yang gak scroll, met taun baru yah....
lhadalah...panjang amat widgetnya. anyway, tks ya.
keren choy.....
Bagus sekali tipnya, makasih mas
Hebat tutorlanya... Keren..... :D
coba dulu mas ...
wah keren nih, pingin nyoba tapi masih lelet nih koneksinya :p
oke nih tutorialnya
kalo sempat saya coba nanti :big:
oke nih tutorialnya
kalo sempat saya coba nanti :big:
wah mantafff nih kang tipsnya kayaknya aku mau mencobanya kang.....
wah keren nech:clp:
wah keren tu ................truz berkarya memang tukang arsip sangat cocok dengan sebutannya ......truz ngeblog blogger indonesia
ok neh, thanks tipsnya..
wedew makin hari makin mantab aja nih bro..
Freeeeenddddsss ada pr nih, kerjain yach :big:
Wuih mantap, hasilnya keren bangets... :clp:
:chn: good .. bagus banget blognya .. salam kenal
Hebat dan panjang.... Met kenal bro! Huehueheuhue........ moga panjang umur dan bahagia. (halah, emang ulang tahun...)
cukup panjang bos, tutornya jadi bingung
hehe
Maklum Pemula
Di save dulu ya komandan buat dipelajari
Thanks sharingnya
Posting Komentar
Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.
Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).
Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.
Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.
Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)