Cara memberi background artikel terkait

Pengen widget artikel terkait yang biasanya terletak di bawah postingan blog lebih menarik,
Kita bisa memberi efek background animasi dengan scrool.
Yuk kita cari tahu caranya...
1.login ke blogger.com
2.klik tata letak
3.edit HTML
backup dulu template yang akan dirubah dengan download templatelengkap
4. Centang kotak kecil Expand Template Widget
5. Cari kode <data:post.body/> (ctrl+f untuk mempercepat pencarian)
lalu letakkan kode berikut dibawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div style='padding: 5px; background-image: url(http://i29.tinypic.com/1zg5jyr.jpg); background-repeat: no-repeat; background-position: center;'><span style=';font-size:130%;color:white;'>Artikel terkait:</span>
  </div>

    <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>

kemudian save!

Keterangan:
Tanda merah untuk background teks "artikel terkait"
ganti dengan url background dan warna teks "artikel terkait"
sesuai dengan keinginan.

selanjutnya untuk memberi background kolom artikel terkaitnya:

1. Edit html
2. pastekan kode dibawah ini, diatas kode ]]></b:skin>

/* Artikel terkait

    ----------------------------------------------- */

    .rbbox{border:1px solid silver;background:#000 url(http://dl5.glitter-graphics.net/pub/729/729475pwo0tj9hiw.gif)repeat right bottom;-moz-border-radius:5px;margin:5px;padding:5px}

    .rbbox:hover{background-color:#000)

Ganti url background dan warna sesuai keinginan,
kemudian save template
Gampang kah?selamat mencoba aja dah...

Penulis : ALSYA ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Cara memberi background artikel terkait ini dipublish oleh ALSYA pada hari . Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Cara memberi background artikel terkait