Cara Membuat Related Post berScroll - Kelebihan Related post Scroll ini, sobat dapat menampilkan jumlah artikel terkait tiap label sebanyak-banyaknya tanpa mengganggu panjang vertikal dari halaman posting karena disiasati menggunakan scroll yang sudah tersedia. dan para pengunjung tentu dengan leluasa dan bebas menelusuri blog sobat.
Ok berikut adalah tutorialnya, silahkan disimak:
1. Buka Template dan klik Edit HTML,
2. Tekan Ctrl + F, cari kode ]]></b:skin> dan letakkan CSS berikut diatasnya:
/* Artikel Terkait */3. Sobat bisa mengganti kode warna, sesuai kesukaan sobat
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
#E0F8E0 = kode warna kotak background Related Post
#EFFBEF = kode warna kotak background 'hover' related post muncul pada saat disorot mouse
4. Cari kode <data:post.body/> atau <div class='post-body>, letakkan script berikut ini di bawah kode tersebut:
<b:if cond='data:blog.pageType == "item"'>
<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 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 5;
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>
6. Klik Simpan Template, dan silahkan sobat lihat hasilnya.
Semoga Bermanfaat :)
Anda sedang membaca artikel tentang Cara Membuat Related Post berScroll dan anda bisa menemukan artikel Cara Membuat Related Post berScroll ini dengan url http://agraanggakara.blogspot.com/2013/07/cara-membuat-related-post-berscroll.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Related Post berScroll ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Cara Membuat Related Post berScroll sebagai sumbernya.
Related Post:
tips
- Cara Memasang Widget Share Melayang Di Blogger
- Tutorial Cara Membuat Postingan Blog Dengan Gampang
- Cara Mudah dan Murah Membuat Blog di blogger.com
- Cara Buat Email Gmail Dengan Mudah dan Cepat
- Gmail Atau Google Mail
- Cara Menyembunyikan Navbar Pada Blogger Dengan Mudah
- Cara Mengganti Template Blog Download'an
- Cara Gampang Mengganti Template Blog
- Cara Membuat Read More Otomatis Pada Blogger Mudah
- Cara Menghilangkan Navbar Blogger Dengan Mudah
- Cara Buat Related Post Dengan Thumbnail Mudah
- Cara Buat Tombol Share Button di Atas Postingan Blog Kita
- Cara Gampang Pasang Navigasi Breadcrumbs di Blogger
- Cara Insert Gambar Pada Postingan Blog Kita
- Cara Pasang Widget Sharing is Caring Di Bawah Postingan
- Cara Membuat Label di Blog
- Berbagai Emoticon Facebook Chat Box By Xat Keren
- Kode Emoticon Facebook Terlengkap Dan Terbaru
- Cara Cepat Dan Mudah Untuk Parsing HTML
- Cara Mengukur Berat Blog Dengan Aplikasi Online
- Cara Mengukur Kecepatan Load Blog Dengan Aplikasi Online Numinion
- Pasang Widget Gambar HUT RI Ke-68 Keren
- Tips Cara Melihat ID Facebook Dengan Mudah Dan Cepat
- Website Pengukur Kecepatan Upload dan Download Sebuah Modem
- Cara Membuat Dan Berbagi Wifi Dengan CMD
blogspot
- Cara Memasang Widget Share Melayang Di Blogger
- Tutorial Cara Membuat Postingan Blog Dengan Gampang
- Cara Mudah dan Murah Membuat Blog di blogger.com
- Cara Buat Email Gmail Dengan Mudah dan Cepat
- Gmail Atau Google Mail
- Cara Menyembunyikan Navbar Pada Blogger Dengan Mudah
- Cara Mengganti Template Blog Download'an
- Cara Gampang Mengganti Template Blog
- Cara Membuat Read More Otomatis Pada Blogger Mudah
- Cara Menghilangkan Navbar Blogger Dengan Mudah
- Cara Buat Related Post Dengan Thumbnail Mudah
- Cara Buat Tombol Share Button di Atas Postingan Blog Kita
- Cara Gampang Pasang Navigasi Breadcrumbs di Blogger
- Cara Insert Gambar Pada Postingan Blog Kita
- Cara Pasang Widget Sharing is Caring Di Bawah Postingan
- Cara Membuat Label di Blog
- Cara Cepat Dan Mudah Untuk Parsing HTML
- Cara Mengukur Berat Blog Dengan Aplikasi Online
- Cara Mengukur Kecepatan Load Blog Dengan Aplikasi Online Numinion
- Pasang Widget Gambar HUT RI Ke-68 Keren
- Cara Memasang Gambar Animasi Dipojok Layar
- Memasang Berbagai Animasi Terbang Di Blog
- Cara Membuat Kotak Script Postingan
- Membuat Back To Top dengan Efek Jquery
0 comments:
Post a Comment
Sisihkan waktu anda untuk berkomentar, tetapi berkomentarlah dengan bahasa yang baik dan sopan, Spam Sara dan Mencantumkan alamat Url tidak akan ditampilkan, Setiap komentar menunggu moderasi admin Terimakasih :)