Cara Membuat Artikel Terkait Melayang Show/Hide dan Di Bawah Posting

Berikut ini saya memposting cara membuat artikel Terkait pada blog sobat, untuk membuat artikel tekait seperti punya saya itu cukup mudah sobat, Apasih gunanya artikel terkait..? artikel terkait sangat penting bagi artikel yang berkaitan dengan artikel yang ada di entri tersebut sehingga dalam satu label jika salah satu artikel di baca maka artikel terkait akan memberitahu pembaca untuk membaca artikel terkait lainnya.
Disini saya mem[posting artikel terkait yang bisa melayang juga lo sobat, jadi pastinya berbeda dengan yang lainnya sobat setia blog geografi.

Nanti jadinya sepeerti ini sobat:

Langsung saja ke caranya ya...

1. Login ke Blogger
2. Buka Menu 'Template'
3. Lalu klik 'Edit Html' (Anda bisa menekan tombol CTRL+Z untuk kembali, meskipun template telah disave. Dan Sebelum mulai, harap backup template yang digunakan agar dapat di restore kembali jika ada masalah dalam pemasangan).
4. Cari kode berikut : </head> (Pakai Ctrl+F untuk mempermudah)
5. Copy Paste kode di bawah ini tepat di atas </head>

    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;}}}}
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];}}
    relatedTitles = tmp2;
    relatedUrls = tmp;}
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;}
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' +
    relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;}
    i++;}
    document.write('</ul>');}
    //]]>
    </script>

6. Cari kode berikut : <data:post.body/> (Pakai Ctrl+F untuk mempermudah)
7. Copy Paste kode dibawah ini kemudian letakkan di bawah <data:post.body/>
Catatan : Biasanya terdapat 2 buah <data:post.body/> Pakai kode yang kedua lalu paste di bawahnya ya.

    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <h4>Artikel Terkait</h4>
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if>

8. Klik Save.

Kemudian jika anda ingin membuat gadget SHOW/HIDE seperti gambar no 2 caranya dudah saja sobat silahkan di copy di bawah ini
bawahnya ya.
Dengan cara
1. Buka tata letak
2. kemudian anda klik new gadget/tambahkan gadget
3. Pilih Java Scrict
4. Masukan kode di bawah ini

   <!--Slidbox -->
     <script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed; width:400px; overflow:hidden; bottom:10px;
right:10px; display:none;
background: #ffffff repeat; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">

<div style="width:380px; padding:5px; margin:0 auto; overflow:hidden;">

        <a href="#" style="float:left; color:#999; padding:0 3px; 
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>

        <strong style="color:#66ad3d;">BACA JUGA>> </strong>

<div style="overflow: auto; height: 150px; padding: 1px; border: 1px solid rgb(238, 238, 238); color: rgb(255, 255, 255);">

<script type='text/javascript'>
                              removeRelatedDuplicates();
                                printRelatedLabels();
                              </script>
  </div></div>
<!--Slidbox end -->

5. Silahkan di Save dan lihat hasilnya.

Semoga artikel ini membantu sobat. untuk berterima kasih silahkan klik iklan saja sudah cukup sobat, jadilah pengunjung blog yang saling memberi dan sportif.. salam blog ya..

Share: