Tutorial Komputer, Website, Blogger dan Surat

13 April 2013

Membuat Artikel Terkait di bawah postingan blogger

Hampir setiap blog yang beredar di dunia maya, saat menggunakan fasilitas Link yang mengarahkan pembaca ke Artikel lain.   Hal ini tentunya bertujuan agar pembaca tetap menelusuri postingan lain yang ada di blog.  Artikel terkait biasanya diletakkan di bawah postingan dengan maksud saat selesai membaca postingan tersebut, mata pembaca langsung tertuju pada link artikel yang baru.  Nah, bagi para master bo9g tentunya hal ini sudah tidak asing lagi, tetapi bagi mewbi seperti saya ini, tentunya sangat bermanfaat sekali.

Nah, untuk tutorial kali ini, kita akan mencoba cara membuat artikel terkait di bawah postingan blog yang mungkin bisa berguna untuk di pasang di blog anda.  Langsung aja, caranya sebagai berikut :
  1. Masuk / Login ke blogger anda
  2. Pilih Template

  3. Untuk kemanan blog anda, sebaiknya di download dulu template anda saat ini. Hal ini untuk menjaga jika penambahan fasilitas ini tidak berhasil dan templatenya berantakan, maka anda punya template cadangan. Caranya klik disebelah kanan Cadangkan/Pulihkan lalu Unduh Template Lengkap.
  4. Jika sudah di download template cadangan anda, maka tutup kotak dialog Template> Cadangkan/pulihkan sehingga kembali ke tampilan Template.
  5. Kemudian klik Edit HTML
  6. Tekan Ctrl F dan cari kode

    <data:post.body/></b:if>

  7. Letakkan kode dibawah ini tepat di bawah kode di atas. Jika ada beberapa kode diatas yang sama, pilih yang ke-empat.

  8. <b:if cond='data:blog.pageType == &quot;item&quot;'> <br/> <br/> <H2>Artikel menarik lainnya</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>


  9. Setelah itu cari kode berikut.

    ]]></b:skin>

    Tambahkan kode di bawah ini sebelum kode di atas.

    .rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px; background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;} .rbbox:hover{background-color: rgb(255, 255, 255);}
Share:

0 comments:

Post a Comment

Pages

Featured Post

Konsistensi

Konsistensi atau konsisten adalah sesuatu yang dilakukan terus menerus sampai batas waktu yang ditentukan atau tidak ada batas sama sekali....

Total Pageviews

Popular Posts

Blog Archive

Support