Jumat, 11 Januari 2013

Posted by Unknown
No comments | 11.16


  • Pertama Login ke akun blog Anda.
  • Pilih Layout / Tata Letak / Rancangan.
  • Klik tab Edit HTML.
  • Kemudian klik Expand Template Widgets.
  • Cari kode yang seperti ini :


  • <data:post.body/>

    Gunakan Ctrl + F untuk mempermudah pencarian.



  • Jika Sobat sudah menggunakan fungsi Read More, maka terdapat 2 kode <data:post.body/>. Dan jika Sobat sudah menggunakan Artikel Terkait, hapus saja kode artikel terkait yang lama.
  • Copy Paste kode di bawah ini setelah kode <data:post.body/> yang pertama (jika sudah menggunakan Read More).
  • <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <br/>

    <br/>

    <H2>Artikel Terkait:</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 = &quot;<data:blog.homepageUrl/>&quot;;

    var maxNumberOfPostsPerLabel = 4;

    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 9999;

    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>

  • Untuk kata Artikel Terkait, Sobat bisa menggantinya dengan kata yang lain.
  • Selanjutnya, masukkan kode ini di atas kode ]]></b:skin> .

    . rbbox {border: 1px solid #D8D8D8; padding: 5px;
    background-color: #E0F8E0;-moz-border-radius: 5px; margin: 5px;}
    . rbbox: hover {background-color: #EFFBEF;}

  • Catatan:
    Ganti kode-kode yang berwarna dengan kode warna yang sobat mau. Jika tidak tahu kode warnanya, silakan ke artikel tabel dan kode warna html.
    #D8D8D8: warna border
    #E0F8E0: warna background
    #EFFBEF: warna background juga, namun akan terlihat jika disorot dengan pointer

  • Terakhir klik Simpan Template.



  • 2.  Gambar / Thumbnail


    Berikut cara memasang artikel terkait dengan thumbnail.
    1. Masuk ke akun Blogger Anda.
    2. Klik Rancangan.
    3. Klik tab Edit HTML.
    4. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.
    5. Beri tanda centang pada Expand Template Widget kamu.
    6. Cari kode </head> Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl + F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.
    7. Copy kode berikut dan paste di atas kode </head>
      <!--Related Posts with thumbnails Scripts and Styles Start-->
      <!-- remove --><b:if cond='data:blog.pageType == "item"'>
      <style type="text/css">
      #related-posts {
      float:center;
      text-transform:none;
      height:100%;
      min-height:100%;
      padding-top:5px;
      padding-left:5px;
      }

      #related-posts h2{
      font-size: 1.6em;
      font-weight: bold;
      color: black;
      font-family: Georgia, Times New Roman , Times, serif;
      margin-bottom: 0.75em;
      margin-top: 0em;
      padding-top: 0em;
      }
      #related-posts a{
      color:black;
      }
      #related-posts a:hover{
      color:black;
      }

      #related-posts a:hover {
      background-color:#d4eaf2;
      }
      </style>
      <script type='text/javascript'>
      var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8n3atT_k1cWfxxXGUyN_X5gRimlLHvzcTCBr3Jgi8FzY-CWoviM9ZXUQF_2S38_7hhHqN8Q4XbUoQQPwoItJICqgiBFppEQUXOcGQjogoQOjN7RcNT3Q0YXU0TzKNPX6LYN1EVqDhdFk/s400/noimage.png";
      var maxresults=5;
      var splittercolor="#d4eaf2";
      var relatedpoststitle="Related Posts";
      </script>
      <script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
      <!-- remove --></b:if>
      <!--Related Posts with thumbnails Scripts and Styles End-->
    8. Cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
    9. Copy kode berikut dan paste diatas kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
      <!-- Related Posts with Thumbnails Code Start-->
      <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div id='related-posts'>
      <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast != &quot;true&quot;'>
      </b:if>
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
      <script type='text/javascript'>
      removeRelatedDuplicates_thumbs();
      printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
      </script>
      </div><div style='clear:both'/>
      <!-- remove --></b:if>
      <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
      <a href='http://infonetmu.blogspot.com/2011/12/cara-membuat-artikel-terkait-dengan.html'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
      </b:if></b:if>
      <!-- Related Posts with Thumbnails Code End-->
    10. Klik tombol SIMPAN TEMPLATE.

    Keterangan:
    • Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;
    • Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle="Related Posts";
    • Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8n3atT_k1cWfxxXGUyN_X5gRimlLHvzcTCBr3Jgi8FzY-CWoviM9ZXUQF_2S38_7hhHqN8Q4XbUoQQPwoItJICqgiBFppEQUXOcGQjogoQOjN7RcNT3Q0YXU0TzKNPX6LYN1EVqDhdFk/s400/noimage.png";
    • Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2";


    0 komentar:

    Posting Komentar

    Text Widget

    Unordered List