Jumat, 29 Juli 2011

Membuat Arsip blog / Daftar isi dengan fungsi scrol

Jika posting terdahulu saya menguraikan cara menambahkan fungsi scroll pada kategori / lebel, namun pada postingan kali ini saya menguraikan cara membuat Arsip blog / Daftar isi dengan fungsi scroll. Caranya sama persis dan script kode nya pun sama, hanya penempatannya saja yang berbada.
Dibawah ini adalah screenshot pada saat posting ini saya tulis:


Bagi sobat yang ingin menampilkan widgat Arsip / Daftar isi dengan fungsi scroll silahkan ikuti tips ngeblogberikut ini:

  1. Login terlebih dahulu mengunakan akun bloger
  2. Buatlah Arsip blog dengan menambah Gadget pada sidebar, beri nama dengan "Arsip"  ( bisa diganti sesuai keingian )  pilih gaya hierarki
  3. Simpan/save. sampai disini anda telah membuat Arsip ( tanpa fungsi scroll ).
  4. Utuk menambahkan fungsi scroll pada Arsip Sekarang tuju Tata letak -- -->>Edit HTML.
  5. Beri tanda centang pada Expand Template Widgets.
  6. Cari Arsip yang sudah di buat tadi, dengan CTRL+F dan ketikkan kata “Arsip”, ( biasanya di pojok kanan bawah ). akan muncul kode hatml seperti di bawah ini:

    <b:widget id='BlogArchive2' locked='false' title='Arsip' type='BlogArchive'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho;height:200px;'>

    </div>

    <div id='ArchiveList'>
    <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div></div>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
  7. Perhatikan tulisan yang berkedip dan berwarna merah di atas, kode itulah yang harus disisipkan kedalam arsip yang telah dibuat, sedangkan tulisan yang berwarna biru pada height:200px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 200 sesuai dengan keinginan )
  8. Simpan template dan lihatlah hasilnya

Selamat mencoba.....
Posted on 21.20 / 0 komentar / Read More

Cara Membuat Scroll Pada Blog Archive (Arsip Blog) Blogspot

Jika sobat membaca tiga tulisan sebelumnya, yakni: Membuat Scroll Pada Bloglist, Membuat Scroll Pada Linklist, dan Membuat Scroll Pada Label, pasti dapat menyimpulkan bahwa cara untuk membuat scroll pada gadgetblogger/blogspot adalah sama, yaitu dengan cara menambahkan perintahoverflow pada kode <div class='widget-content'>. Demikian juga jika kita membuat scroll pada blog archieve ini.

Blog archieve atau arsip blog yang mengunakan pilihan hierarki biasanya akan memanjang tak beraturan, sesuai dengan jumlah artikel yang kitapublish tiap bulannya (bisa juga mingguan, tergantung pilihan kita). Tentu saja ini akan sedikit mengganggu penampilan blog kamu karena panjangsidebar menjadi tidak menentu. Untuk itulah perlu dibuatkan scroll agar panjangnya tetap sesuai aturan yang kita buat.

Untuk membuat scroll pada blog archieve ini tidak jauh beda dengan membuat scroll pada gadget blogger/blogspot yang lain, yaitu sebagai berikut:

  • Dari halaman dasbor, klik Tata Letak - Edit HTML.
  • Beri tanda centrang pada Expand Template Widget.
  • Kemudian cari kode type='BlogArchive' (gunakan Control F atau F3).
  • Perhatikan kode yang ada di bawahnya, seperti ini: 
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div id='ArchiveList'>
  • Tambahkan perintah style='overflow:auto; height:200px' pada kode yangberwarna biru, sehingga menjadi seperti ini:
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content' style='overflow:auto; height:200px'>
    <div id='ArchiveList'>
  • Atur ukuran tinggi (height)-nya sesuai kebutuhan.
  • Simpan hasil editing ini dan ucapkan Alhamdulillah.
Posted on 20.55 / 0 komentar / Read More

Selasa, 12 Juli 2011

Cara Membuat Tombol Spoiler / Hide Show Pada Blog

Cara Pembuatan :
  • Login ke akun blogger Anda
  • Klik menu Design lalu add gadget
  • Pilih gadget HTML/JavaScript
  • Masukkan kode di bawah ini di gadget HTML/JavaScript
<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">


<img height="60" src="http://i790.photobucket.com/albums/yy183/mahasena/Tukeran-Link.gif" target="blank" width="290" />



</div></div></div></div>

Keterangan : 
  • Biru: Anda bisa menggantinya dengan kata yang anda inginkan. misanyal : Munculkan, atau show! 
  • Hijau: Anda bisa menggantinya dengan kata yang anda inginkan. misanyal : hilangkan, atau Hide! 
  • Merah: Ganti dengan tulisan atau kode atau objek lain yang ingin anda sisipkan didalam tombol spoiler
  •  
    atau
 <br /><div><div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> isi spoiler... </div></div></div></div>
    Posted on 01.10 / 0 komentar / Read More

    Senin, 11 Juli 2011

    Membuat Artikel Terkait / Related Artikel Pada Blogspot


    Minggu, 21 Februari 2010
    Sudah lama sekali saya ingin menulis artikel tutorial blog mengenai cara memasang "Artikel Terkait" pada posting blog.

    Salah satu cara untuk meningkatkan trafic dan pagerank adalah memasang Artikel Terkait tersebut agar pengunjung juga dapat membaca artikel yang lain sehingga pengunung blog tersebut lebih lama diblog tersebut.

    Berikut cara memasang artikel terkait tersebut:
    1. Buka " Edit HTML " pada blog kemudian centangkan " Expand Widget Templates "
    2. Cari Kata <data:post.body/> dengan cara menggunakan CRTL-F
    3. Kemudian lihat kode ini: <div style='clear: both;'/> <!-- clear for photos floats -->  
    4. Masukan kode dibawah ini diatasnya
    5. <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='similiar'>


      <div class='widget-content'>
      <br/>
      <h3>Related Articles</h3>
      <div id='data2007'/><br/><br/>
      <script type='text/javascript'>

      var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
      var maxNumberOfPostsPerLabel = 4;
      var maxNumberOfLabels = 10;

      maxNumberOfPostsPerLabel = 100;
      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;data2007&#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>

      </div>
      </b:if> 
    Sehingga hasilnya akan seperti ini :

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


    <div class='widget-content'>
    <br/>
    <h3>Related Articles</h3>
    <div id='data2007'/><br/><br/>
    <script type='text/javascript'>

    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 100;
    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;data2007&#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>

    </div>
    </b:if>


    <div style='clear: both;'/> <!-- clear for photos floats -->

    NB: Kode yang berwarna Biru bisa diubah angkanya seusai dengan kebutuhan dan hasilnya akan seperti dibawah ini. Selamat Mencoba
    Posted on 02.43 / 0 komentar / Read More
     
    Copyright © 2011. tanpamu . All Rights Reserved
    Home | Company Info | Contact Us | Privacy policy | Term of use | Widget | Site map
    Design by Herdiansyah . Published by Borneo Templates