Cara Membuat Link Efek Pelangi di Blog

Artikel Terkait,related article,Artikel Terkait blogger, blogger related article,blogger.related,article,blog

Memasang fitur artikel terkait atau related article di blog akan memudahkan pengunjung blog kita dalam mencari informasi yang memiliki keterkaitan dengan postingan yang sedang mereka baca. Fitur artikel terkait yang sedang saya share kali ini, memiliki sedikit perbedaan dengan artikel terkait yang sebelumnya saya berikan. Berikut ini perbedaan di antara Artikel Terkait Berdasarkan Label dengan Artikel Terkait Dengan Scrolling Bar :

Artikel Terkait Berdasarkan Label

Artikel Terkait Dengan Scrolling Bar
1.       Menggunakan Bullet list
2.       Menampilkan satu Label saja
3.       Tidak menggunakan Scrolling Bar
4.       Menggunakan satu kode JavaScript

1.       Tidak menggunakan Bullet List
2.       Menampilkan label lebih dari Satu
3.       Menggunakan Scrolling Bar
4.       Menggunakan kode JavaScript + CSS

Cara buat artikel terkait berdasarkan label :

    Login di blogger.com
    Dari menu drop down, klik Template (Backup terlebih dahulu template sobat)
    Klik Edit Template
    Klik Proceed dan kasih tanda centang pada Expand Widget Template
    Mamfaatkan CNTRL + F untuk mencari kode <data:post.body/>
    Kalau sudah ketemu kode <data:post.body/> letakkan kode berikut tepat di bawahnya :

    
    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>
    <div class='widget-content'>
    <h3>Related Posts :</h3>
    <div id='data2007'/><br/><br/>
    <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>
    </b:if>
    

    Terakhir, save template

Tambahan :
Kalau sobat blogger sudah memasang fitur Auto Readmore, kode tersebut harus diletakkan setelah kode Readmore.
Read more at http://lenterablogger.blogspot.com/2012/06/artikel-terkait-berdasarkan-label.html#qCoihqp3ZZpjSZms.99

Artikel Terkait,related article,Artikel Terkait blogger, blogger related article,blogger.related,article,blog

Memasang fitur artikel terkait atau related article di blog akan memudahkan pengunjung blog kita dalam mencari informasi yang memiliki keterkaitan dengan postingan yang sedang mereka baca. Fitur artikel terkait yang sedang saya share kali ini, memiliki sedikit perbedaan dengan artikel terkait yang sebelumnya saya berikan. Berikut ini perbedaan di antara Artikel Terkait Berdasarkan Label dengan Artikel Terkait Dengan Scrolling Bar :

Artikel Terkait Berdasarkan Label

Artikel Terkait Dengan Scrolling Bar
1.       Menggunakan Bullet list
2.       Menampilkan satu Label saja
3.       Tidak menggunakan Scrolling Bar
4.       Menggunakan satu kode JavaScript

1.       Tidak menggunakan Bullet List
2.       Menampilkan label lebih dari Satu
3.       Menggunakan Scrolling Bar
4.       Menggunakan kode JavaScript + CSS

Cara buat artikel terkait berdasarkan label :

    Login di blogger.com
    Dari menu drop down, klik Template (Backup terlebih dahulu template sobat)
    Klik Edit Template
    Klik Proceed dan kasih tanda centang pada Expand Widget Template
    Mamfaatkan CNTRL + F untuk mencari kode <data:post.body/>
    Kalau sudah ketemu kode <data:post.body/> letakkan kode berikut tepat di bawahnya :

    
    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>
    <div class='widget-content'>
    <h3>Related Posts :</h3>
    <div id='data2007'/><br/><br/>
    <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>
    </b:if>
    

    Terakhir, save template

Tambahan :
Kalau sobat blogger sudah memasang fitur Auto Readmore, kode tersebut harus diletakkan setelah kode Readmore.

Atau
Pakai ini juga bisa mas:

<style type='text/css'>
@-keyframes pelangi{
0% { color:red }
20% { color:yellow}
40% { color:green}
60% { color:blue}
80% { color:purple}
100%{ color:orange}
}
@-webkit-keyframes pelangi{
0% { color:red }
20% { color:yellow}
40% { color:green}
60% { color:blue}
80% { color:purple}
100%{ color:orange}
}
@-moz-keyframes pelangi{
0% { color:red }
20% { color:yellow}
40% { color:green}
60% { color:blue}
80% { color:purple}
100%{ color:orange}
}
@-o-keyframes pelangi{
0% { color:red }
20% { color:yellow}
40% { color:green}
60% { color:blue}
80% { color:purple}
100%{ color:orange}
}
@-ms-keyframes pelangi{
0% { color:red }
20% { color:yellow}
40% { color:green}
60% { color:blue}
80% { color:purple}
100%{ color:orange}
}

a{text-decoration:none;}
a:hover{animation:pelangi 3s infinite alternate;-webkit-animation:pelangi 3s infinite alternate;-moz-animation:pelangi 3s infinite alternate;-o-animation:pelangi 3s infinite alternate;-ms-animation:pelangi 3s infinite alternate;
}
</style>
Read more at http://lenterablogger.blogspot.com/2012/06/membuat-link-efek-pelangi-di-blog.html#X738FOoRKiZPqFKf.99

Cara Membuat Link Efek Pelangi di Blog

Artikel Terkait Cara Membuat Link Efek Pelangi di Blog :

Soal SMB Polban

Entri Populer

Topik