Membuat Daftar isi Otomatis

   Membuat Daftar Isi Otomatis di Blog - Salah satu keuntungan memasang daftar isi di blog adalah untuk mempermudah pengunjung untuk mencari artikel yang mereka inginkan selain melalui kotak search.  Daftar isi ini sudah di bagi otomatis menurut label yang kita beri di setiap artikel yang kita buat.  Selain itu, setiap artikel kita yang baru kita buat akan terdapat kata 'new' !

      Belum pernah lihat daftar isi nya seperti apa ? coba cek di link berikuthttp://lefransnote.blogspot.com/2011/11/blog-post.html atau klik pilihan menu di atas yang berjudul 'daftar isi'.  Gimana ? tertarik menggunakan nya ? Ayo ikuti langkah-langkah berikut untuk membuat daftar isi ^_^

    Login ke blogger
    Klik 'Rancangan' atau 'Design'
    Lalu klik 'Tambah Gadget' atau 'Add a Gadget' lalu cari dan klik 'HTML/ Javascript'
    Copy Paste kode berikut pada halaman yang terbuka tadi

    <div style="overflow:auto;width:430px;height:120px;padding:10px;border:1px solid #eee"><script style="text/javascript" src=http://lefrans.googlecode.com/files/daftarisi.js"></script><script src="http://dopind.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
    </div>

    #Ganti kode berwarna merah dengan ukuran lebar yang kalian inginkan
    #Ganti kode berwarna biru dengan ukuran tinggi yang kalian inginkan
    #Ganti kode warna hijau dengan alamat blog kalian

    Lalu buat 'new post' atau 'new page' dan kopy paste kode berikut ke dalam kotak entri..

<script src="http://lefrans.googlecode.com/files/daftarisi.js">
</script><script src="http://lefransnote.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

    #Ganti kode warna hijau dengan alamat blog kalian

    Sudah itu saja kawan langkah-langkahnya buat daftar isi blog sendiri ,  coba lihat lagi contoh daftar isinya disini http://lefransnote.blogspot.com/2011/11/blog-post.html .. semoga bermanfaat ^_^

membuat show/hide artikel terkait

Cara Membuat Related Post Buka/Tutup. Apa itu Related Post ? Related Post adalah sekumpulan link untuk memudahkan para pembaca mencari atau menemukan konten yang

Pasti sobat semua sudah mengetahui, seperti apa itu Related Post. Namun, kali ini saya akan memberikan hal yang berbeda, yaitu menggunakan Spoiler. Spoilernya pun berbeda dari yang lain, karena menggunakan Spoiler versi shoh/hide. Tapi, sebelum kita ke Tutorialnya, alahkah baiknya jika kita mengetahui fungsi dari Related Post berikut :

Label sedikit gaya

Lefrans

Masukan Kode Di bawah Ini Melalui Penambahan Widget

<div class="widget-content">
<div align="center" style="border: 0px solid #555; padding: 0px;">
<div class="www.lefrans.com" style="background: #999; background: transparent url(http://i1214.photobucket.com/albums/cc489/Gray_December/bgswf.png) center no-repeat; border: 5px solid #020b00; padding: 0 0px; width: 200px;">
<div class="www.lefrans.blogspot.com" style="background: none; background: transparent url(http://i1214.photobucket.com/albums/cc489/Gray_December/joget.gif) center no-repeat; border: 0px solid #020b00; padding: 0 0px; width: 200px;">

<script src="http://franspost.googlecode.com/files/Frlabelflash.js" type="text/javascript">
</script>
<div id="lefransswfconter">
Lefrans</div>
<script type="text/javascript">
var so = new
SWFObject("http://www.swfcabin.com/swf-files/1314874205.swf ",'tagcloud',
'150', '150', '7', '#9b7d5f');
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x000000");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "220");
so.addVariable("tagcloud", "<tags><a href='http://www.lefrans.com/search/label/Aplikasi%20HP' style='16' color='0xFFff00' hicolor='0xfb3f20'>Aplikasi HP</a><a href='http://www.lefrans.com/search/label/coretanku' style='22' color='0x00ff00' hicolor='0xfbacac'>CoretanKu</a><a href='http://www.lefrans.com/search/label/facebook ' style='16' color='0x00ffff' hicolor='0xf978fb'>Facebook</a><a href='http://www.lefrans.com/search/label/hacking' style='20' color='0x0000ff' hicolor='0xfd8ff1'>Hacking</a><a href='http://www.lefrans.com/search/label/tips%20blogspot' style='9' color='0xFF00ff' hicolor='0xb4acfb'>Tips Blogspot</a><a href='http://www.lefrans.com/search/label/software' style='16' color='0xFF0000' hicolor='0x78fbf9'>Software</a><a href='www.lefrans.com/search/label/jQuery' style='16' color='0xFFff00' hicolor='0xfbc878'>jQuery</a><a href='http://www.lefrans.com/search/label/tips%20n%20trik' style='13' color='0x00ff00' hicolor='0x14eefc'>Tips n Trick</a><a href='www.lefrans.com/search/label/tips%20blogspot' style='11' color='0x00ff00' hicolor='0x16de01'>Tips Blogspot</a><a href='http://www.lefrans.com/search/label/TutoriaL%20blog%20demo' style='11' color='0x00ffff' hicolor='0xfa9cfb'>TutoriaL Blog ini</a></tags>");
so.addParam("allowScriptAccess", "always");
so.write("lefransswfconter");
</script></div>
</div>
</div>
</div>
<div class="clear">
</div>

Ganti Tulisan Berwarna Kuning Dengan Alamat anda 

Header Menu Jquery

Header Menu sederhana tapi Bagus untuk menambah kecantikan blog

Sebelum

Sesudah

Masukan Kode Css Di bawah Ini Di atas ]]></b:skin>

ul#topnav {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font-size: 1.1em;
}
ul#topnav li{
    margin: 0;
    padding: 0;
    overflow: hidden; 
    float: left;
    height:40px;
}
ul#topnav a, ul#topnav span {
    padding: 10px 20px;
    float: left;
    text-decoration: none;
    color: #ff0000;
    background: transparent(http://www.sohtanaka.com/web-design/examples/fancy-navigation/a_bg.gif) repeat-x;
    text-transform: uppercase;
    clear: both;
    width: 100%;
    height: 20px;
    line-height: 20px;
}
ul#topnav a{
    color: #555;
    background:#ff0000;
border-left: 3px solid #ffffff;

}
ul#topnav span{
    background-position: left top;
border-left: 3px solid #ff0000;
}

masukan kode Jquery diatas </body>

<script type='text/javascript'>
$(document).ready(function() {

    $(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;);

    $(&quot;#topnav li&quot;).each(function() {
        var linkText = $(this).find(&quot;a&quot;).html();
        $(this).find(&quot;span&quot;).show().html(linkText);
    });

    $(&quot;#topnav li&quot;).hover(function() {    //On hover...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;-40&quot;
        }, 250);
    } , function() { //On hover out...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;0&quot; 
        }, 250);
    });

});
</script>

Taruh Jquery Diatas Kode <head> kalo sudah ada Tidak Perlu Lg :

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Css Show hidden Content

Ini bukan seperti kata pepatah "malang tak dapat ditolak, mujur tak dapat diraih", tetapi lebih kepada pengertian "apa boleh buat". Yah ...., memang apa boleh buat. Akhirnya CSS3 memang harus menjadi pilihan utama untuk posting-posting di masa ke depan. Tak dapat lagi ditolak bahwa nantinya desain blog atau web yang tak banyak memerlukan fungsi-fungsi khusus akan lebih baik berkonsentrasi menggunakan CSS3. Disamping semakin banyak fungsi menarik dan atraktif berhasil diciptakan melalui kehebatannya, tentu saja yang jauh lebih penting adalah lebih mudahnya membuat berbagai desain tanpa script. Dan satu lagi tentunya adalah beban yang ditanggung blog semakin ringan.

Berbeda dengan biasanya, dimana show hidden content lebih banya menggunakan "KLIK" untuk membuka dan menutup, kali ini kita akan memanfaatkan mouseover sebagai trigger untuk mengorek apa yang tersembunyi di dalam box. Amat praktis karena hanya perlu sentuhan cursor dan semua bagian serta merta terlihat. Untuk menutup lepas saja cursor dan biarkan box menutup kembali seperti sedia kala. Lho ... jaman sekarang khan pinginnya semua serba otomatis, toh?! Ho ... ho ... bahkan mungkin akan laris jika ada orang yang bisa buat alat pemberi jodoh otomatis. He ... he ... nggak perlu lirik sana lirik-sini atau musti PDKT dan ngapel atau mungkin mak combang maka si jodoh langsung datang begitu saja. He ... he ... mau nggak?

Untuk membuat CSS3 Full Animated Show Hidden Content Onmouseover cukup mudah karena semua kode tinggal simpan di template, kemudian xHTML-nya gunakan saat posting atau di widget blog, maka segalanya akan selesai dengan teramat cepat. He ... heh ... Mo coba? Ini dia kode yang harus kita simpan.

Kode CSS Show Hidden Content

.fr_onmos {
      height: 32px;
      width: 260px;
      border: 2px solid #666666;
      background: #CCCCCC;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;
      padding: 5px 5px;
      margin: 15px auto;
      font: 11px Arial;
      color: #003366;
      overflow: hidden;
      box-shadow: 0 1px 8px #000;
      -moz-box-shadow: 0 1px 8px #000;
      -webkit-box-shadow: 0 1px 8px #000;
      }
.fr_onmos:hover {
      min-height: 250px;
      border: 2px solid #333333;
      background: #111;
      box-shadow: 0 1px 15px #000;
      -moz-box-shadow: 0 1px 15px #000;
      -webkit-box-shadow: 0 1px 15px #000;
      color: #000; text-shadow: 0 1px 1px #888;
      }
.fr_onmos h3, .jerohan h3 {
      font-size: 14px;
      font-family: Droid Serif;
      font-weight: bold;
      color: #000;
      text-align: center;
      text-shadow: 0px 1px 1px #fff; margin: 3px 5px;
      padding: 3px 10px;
      background: #bbb;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border: 1px solid #999;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;
      }
.fr_onmos h3:hover {
      box-shadow: 0 1px 8px #000;
      -moz-box-shadow: 0 1px 8px #000;
      -webkit-box-shadow: 0 1px 8px #000;
      }
.fr_onmos img.mini, .bgsGR_onmos img.minianima {
      width: 70px;
      border: 4px solid #666;
      padding: 3px;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      float: left; margin: 0 10px 5px 0;
      background: #222;
      -o-transition: all 1.5s;
      -moz-transition: all 1.5s;
      -webkit-transition: all 1.5s;
      }
.fr_onmos img.mini:hover, .bgsGR_onmos img.minianima:hover {
      box-shadow: 1px 1px 15px #000;
      -moz-box-shadow: 1px 1px 15px #000;
      -webkit-box-shadow: 1px 1px 15px #000;
      border: 4px solid #CCCCCC;
      background :#666;
      -o-transform: scale(1.4);
      -moz-transform: scale(1.4);
      -webkit-transform: scale(1.4); 
      margin-top: 20px;
      margin-left: 15px;
      }
.fr_onmos img.minianima:hover {
      -o-transform: scale(1.4) rotate(360deg) translate(0px);
      -moz-transform: scale(1.4) rotate(360deg) translate(0px);
      -webkit-transform: scale(1.4) rotate(360deg) translate(0px);
      }
.bawah {
      margin-top: 15px;
      height: 200px;
      overflow: auto;
      padding: 0 5px;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out; background: #CFE7E9;
      }
.bawah:hover {
      background: #333;
      color: #eee;
      text-shadow: 0 0px 1px #fe0303;
      }
.bawah h3 {
      margin: 20px 0;
      max-width: 204px;
      background: #66CCFF;
      box-shadow: 0 1px 12px #eee;
      -moz-box-shadow: 0 1px 12px #eee;
      -webkit-box-shadow: 0 1px 12px #eee; 
      }
.bawah h3:hover {
      background: #888;
      border: 1px solid #666;
      box-shadow: 0 1px 12px #fff;
      -moz-box-shadow: 0 1px 12px #fff;
      -webkit-box-shadow: 0 1px 12px #fff; 
      }
.bawah ul {
      padding: 0;
      margin: 0;
      list-style: none;
      }
.bawah li {
      padding: 0;
      margin: 0;
      list-style: none;
      border-bottom:1px dotted #777;
      }
.bawah li a{
      color: #03d8fe;
      padding: 0;
      margin: 0;
      text-decoration:none;
      font-size: 12px;
      -o-transition: all 1.5s;
      -moz-transition: all 1.5s;
      -webkit-transition: all 1.5s;
      }
.bawah li a:hover {
      -o-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      color: red;
      text-shadow: 0 1px 1px #000;
      margin-left: 20px;
      }
]]></b:skin>

xHTML Animated Show Hidden Content

<div class="fr_onmos">
<h3>CSS3 Show Hidden Content</h3>
<div class="bawah">
<h3>CSS3 Show Hidden Content</h3>
<img class="mini" src="http://img.theomegaproject.org/thumbs/2009/11/121.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
<h3>New Post</h3>
<ul>
<li><a href="Link-1">Tuliskan disini : Link Title-1</a></li>
<li><a href="Link-2">Tuliskan disini : Link Title-2</a></li>
<li><a href="Link-3">Tuliskan disini : Link Title-3</a></li>
<li><a href="Link-4">Tuliskan disini : Link Title-4</a></li>
<li><a href="Link-5">Tuliskan disini : Link Title-5</a></li>
<li><a href="Link-6">Tuliskan disini : Link Title-6</a></li>
<li><a href="Link-7">Tuliskan disini : Link Title-7</a></li>
<li><a href="Link-8">Tuliskan disini : Link Title-8</a></li>
<li><a href="Link-9">Tuliskan disini : Link Title-9</a></li>
<li><a href="Link-10">Tuliskan disini : Link Title-10</a></li>
</ul>
<h3>No Image and Script</h3>
<img class="minianima" src="http://img.theomegaproject.org/thumbs/2010/06/517.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
</div>
</div>
</div>

• Login to BloGGeR (Login ke BloGGeR) dengan cara Menuliskan User Name (Nama Pengguna) atau Email Address. Lanjutkan dengan menuliskan Password (Sandi) kemudian KLIK "Login"

•  Beberapa saat kemudian halaman "Dasboard" akan terlihat. KLIK link "Design (Rancangan)".

•  Setelah memasuki Page Element, KLIK link "Edit HTML".

•     Back-up Template dengan cara KLIK "Download Full Template (Download Lengkap Template) dan SAVE/Simpan "File Template" di Folder PC. dan SAVE/Simpan "File Template" di Folder PC.

•     Cari kode ]]></b:skin>, kemudian simpan kode CSS dengan posisi seperti yang terlihat di kode CSS yang tertulis di atas.

•     KLIK "SAVE/Simpan Template".

    xHTML bisa digunakan untuk posting ataupun digunakan di widget blog. Jika untuk posting, susunlah kode secara rapat, sedang apabila di widget blog, lakukan penyimpanan dengan membuka terlebih dahulu "Page Elemen (Elemen Laman)", kemudian KLIK "Add Gadget", KLIK "HTML/Javascript". Setelah box penyimpanan widget terlihat, masukkan kode dengan copy-paste. KLIK SAVE/Simpan.
    Baik gambar atau link dan teks sesuaikan dengan apa yang dibutuhkan.

Pasang Widget Buku Tamu "Slide Out Effect" ( jQuery )

Membuat cbox Show/Hide pada bagian atas ini merupakan pengembangan kode dari kode-kode untuk membuat cbox Show/Hide sebelumnya, sebenarnya berawal dari Show/hide cbox pada sisi kiri atau kanan blog. Nekat adalah modal utama saya dalam hal otak-atik kode ini, karna saya bukanlah seorang yang ahli dibidang HTML ini...hehehe...

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });


});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel {
height: auto;
background:#000;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz2GXP1Q5oKmqOyPkHq7ANK4tyS5JR24EM3mWBC-glErKzDB0NiJxh-WklL7R5xmIgloEZYrhQDBQoD_DmpxR8M01S9cbgMiM-4SMnlj1KFISXtlrSIocVa7B5rvdO5cgvzhddlAIf6Ag/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8AK7OVD6z5zQd_NDhkpB7lL9JyGashg8CBvD_ulwvgdlZehqBxoN0O63T9xkuEWyVBlmgcA5CfEtYg2JBapM-YOBPmb2Q6LEtgmbjV_FwWYnya7vhVL1FXO6iU6DQ1NP-DMzZ8yLJs9I/s1600/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}
</style>

<div id="panel">

<!-- BEGIN CBOX -->
---------------
<!-- END CBOX -->

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

5. Save...


Cukup sekian tutorialnya,, maaf atas segala kesalahan dan kekurangan. Saya harapkan sarannya untuk memperbaikin kesalahan dan kekurangan penulisan ini.  

Buku Tamu Ala Facebook

cara pasang Widget/Buku Tamu Alal Facebook

Okelah klw bgtu langsung saja, sobat bisa langsung memcobanya diblog sobat.

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya

<style type="text/css">
.gb_fixed{position:fixed; Bottom:90px; right:0px; z-index:+10}
* html .gb_fixed {position:relative;}
#hidden_gb2{display:none;border: 3px solid #fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5r1zY270oggEGY06-j3sqxLuGf0OY1sbOnDK5QNSJmcG2YWlblNNyiHmj08GVK-tL_HWX4qZ5X-b3yicr9OPVXgVZQ8N4r2RdWo_JKpKRSoM4uzYUEzKlNngKZdVOmSAEHgpaPEDn6BBD/)#000 repeat-x bottom center scroll; padding:10px; padding-top:10px; -moz-border-radius-topleft:20px; -moz-border-radius-bottomright:20px; transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg)}
#hidden_gb2:hover{border: 3px solid #000; background:url(http://i52.tinypic.com/dc7l0n.gif) no-repeat left bottom #fff; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)}
</style>
<div class="gb_fixed">
<table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody>
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="http://i53.tinypic.com/727lw8.png" /></a>
<span style="font-size: 85%;color:Orange;">
Mau Widget
<a href="http://www.uttafreak-987.co.cc/2011/05/cara-pasang-widget-buku-tamu-facebook.html" target="_blank">
Seperti Ini
</a>
and
<a href="http://lefransnote.blogspot.com/2011/10/buku-tamu-ala-facebook.html" target="_blank">
Buat Buku Tamu Facebook!
</a></span></div>
--> Kode Facebook Anda Disini <--

</td></tr>
</tbody></table>
</div>
<script src="http://lefrans.googlecode.com/files/frhack-fbukutamu.js">
</script>
<div class="gb_fixed" style="z-index: +5;">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikxiswYKhdqsunMqvMQKJnxx1jkshn4kSeLmQdFDHAepc6Wi8GuDnkZHkv8i72c1ZmPwzJDVex3GCfOF2zPY0-EfCv36Coq8FQjzlxLecNoA4iry_oalp_hKcbRgntWBqTWAklWh3Ahtk/" style="filter: alpha(opacity=60); opacity: 0.8;" />
</a></div>

5. Save.

Note ::
- Tang berwarna merah ganti dengan kode Facebook Komentar Anda. bisa lihat Disini..

Cara Membuat Buku Tamu Otomatis Terbuka

Mungkin sobat sudah paham dengan Judul postingan saya kali ini Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka beda hal nya dengan cara membuat buku tamu yang telah saya posting pada postingan saya yang lalu yang berjudul Cara Pasang Buku Tamu Di Blogspot.
maka Di postingan saya kali ini hanya menambahkan saja,.sebagai contoh Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka sobat bisa lihat buku tamu saya.
Gambar di atas yg di tunjuk oleh panah adalah Buku tamu yang saya miliki,sobat tidak perlu meng klik nya,tinggal sorot saja dengan Mouse,maka akan kuluar sendiri.
jika sobat berminat untuk memasang di blog sobat,mari kita mulai saja Cara pembuatan nya.

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwK4KqQIjI46OPh_W689JFvHCuBBzHi_8Bl-HecEtW1Yrhh-JIatG_DNTrWm8YFBZlXv2Qhmg7_31-jdhanFrhLmk8efsr6gr71q9L2Dro9-GQ2TN94ruoHGFH_Ybde2wZEBJvcixPDAFd/s1600/api.gif) no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>
Letakan Script Buku tamu sobat Disini
<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>

</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>

5. Ubah Kata Letakan Script Buku tamu sobat Disini Dengan Script Buku Tamu Sobat
6.Simpan Dan Lihat Hasilnya.

Buku Tamu Blog(Show Hide)

Membuat cbox Show/Hide pada bagian atas ini merupakan pengembangan kode dari kode-kode untuk membuat cbox Show/Hide sebelumnya, sebenarnya berawal dari Show/hide cbox pada sisi kiri atau kanan blog. Nekat adalah modal utama saya dalam hal otak-atik kode ini, karna saya bukanlah seorang yang ahli dibidang HTML ini...hehehe...

Sebenarnya saya buru-buru buat posting tilisan ini, tapi demi sobat-sobat blogger yang telah me-request nya, dan mungkin tak sempat buat otak-atik kode-kode sebelumnya, maka akan saya persembahkan postingan ini untuk memberikan kemudahan pada sobat dalam membuat Show/hide cbox pada posisi atas :).

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(URL);
}
.atcontent{
float:left;
border:2px solid #7FFF00;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5r1zY270oggEGY06-j3sqxLuGf0OY1sbOnDK5QNSJmcG2YWlblNNyiHmj08GVK-tL_HWX4qZ5X-b3yicr9OPVXgVZQ8N4r2RdWo_JKpKRSoM4uzYUEzKlNngKZdVOmSAEHgpaPEDn6BBD/)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5r1zY270oggEGY06-j3sqxLuGf0OY1sbOnDK5QNSJmcG2YWlblNNyiHmj08GVK-tL_HWX4qZ5X-b3yicr9OPVXgVZQ8N4r2RdWo_JKpKRSoM4uzYUEzKlNngKZdVOmSAEHgpaPEDn6BBD/)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

--> Kode Cbox Disini <--

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close Cbox" /></a></div>
<div align="left"><font size="2"><a href="http://lefransnote.blogspot.com/2011/10/buku-tamu-blogshow-hide.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By Utta</span></div></a></font></div>
</div></div>

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i54.tinypic.com/ztj9zl.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

Penempatan Kode CSS, JavaScript Dan HTML

Ini adalah Contoh penempatan kode CSS, JavaScript, dan HTML di Blogspot.

Penempatan Kode CSS :

<b:skin><![CDATA[

Kode CSS Disini

</b:skin>

atau dimasukan dibawah </b:skin> dan diatas <head>

<style type='text/css'>

Kode CSS Disini

</style>

Penempatan Kode JavaScript Dan JQuery :

</b:skin>

Kode JavaScript dan JQuery

<head>

Kalau ada kode css didalamnya, letakan dibawah kode CSS. Ingat, kode JQuery Library harus selalu berada diatas JavaScript dan JQuery yang lain.

Penempatan Kode HTML :

<body>

Kode HTML

</body>

Kode HTML adalah kode yang menentukan berada diposisi mana suatu objek tersebut akan tampil.

Memasang Mp3 Di Blog Dengan Mudah

Cara memasang MP3 di Blog Dengan menggunakan Jasa Penyedia Layanan MP3
Praktis Mudah..dan dapat diisi dengan Lagu yang kita suka dan sebanyak yang kita mau ...dengan skinn yang bagus...
lansung aja....
Login ke http://www.hypster.com





Register Terlebih Dahulu Jika sudah selesai register

• Login 

• Klik Player Skin Untuk Memilih SKin/Tampilan yang akan ada pada blog

Ticker 2 Kolom

Ticker yang dibuat dalam bentuk 2 kolom ini mampu memuat teks sebanyak sampeyan suka. Masing-masing teks akan secara bergiliran ditampilkan dalam periode waktu yang telah ditentukan. Kolom pertama sebagai tempat menuliskan judul dan kolom ke dua digunakan sebagai tempat menuliskan teks yang akan disampaikan ke pengunjung blog. Karena melalui javascript sudah didesain sedemikian rupa sehingga teks ini mampu membentuk sebuah link, maka sampeyan bisa masukkan link sebanyak sampeyan suka pula.

Posisi ticker dapat dirubah sesuai keinginan dengan merubah nilai margin-top dan margin-left. Apabila tanpa dilakukan perubahan di margin-left dan margin-topnya, maka ticker ini akan nangkring di bagian pojok kiri atas, menutup Navbar bagian tersebut atau jika navbar tidak ditampilkan maka dia akan terletak di bagian header blog. Untuk menambah gaya tampilannya, tentu saja ada sebuah efek yang difungsikan di dalamnya.
Cara membuat Ticker 2 kolom sangat mudah karena sampeyan tinggal copy javascriptnya, kemudian ganti judul serta teks dan linknya, simpan di template dan selesailah sudah.

Membuat Teks Animasi

 

Panduan Blogger dan Tutorial BloGGeR tentang animasi teks ini aku yakin akan membuat sampeyan tertarik. Tidak banyak kok, kode yang digunakan. Hanya sejumput javascript yang dibungkus dalam sebuah tag DIV guna membangun bingkainya. Tepat digunakan untuk menyampaikan sesuatu kepada pembaca blog sekaligus penghias blog yang pasti menarik untuk ditampilkan. Atau mungkin akan sampeyan gunakan untuk memberi kata sambutan buat pengunjung? Atau mungkin buat iklan atau kata-kata mutiara yang nantinya akan terlihat mengalir seperti sungai Batanghari dan Kapuas? Hanya teks mengalir saja? Oho .... Tentu saja tidak. Dalam teks yang mengalir ini masih ada animasi lain yang membuat teks dalam bentuk 3 (tiga) warna dan seperti saling berkejaran. Warnanyapun bisa sampeyan rubah sesuai selera. Mau seperti warna daun, boleh. Mau seperti warna laut, boleh. Mau seperti warna pelangi, boleh. Atau bahkan mungkin pingin warna seperti bokong sampeyan? He .... he .... Aha .... Boleh boleh saja. Pokoknya terserah sampeyan, dah! Yang penting pada senang saja!

Image dengan animasi dan dekripsi

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Modifikasi Read More

Membuat readmore Memang Mudah......Selain mudah kita
Juga Bisa Mengutak - Atik nya.....Nah...Membuat Readmore

Kali ini.....Sama Saja dengan Membuat Readmore yang Biasanya
Namun. .. . .Membuat readmore kali ini Sedikit Berbeda.........

Karena saya Sudah Mengutak - atik Kode nya........Biar Kelihatan Lebih
Indah saja. . . . .Dan kita Juga Pasti senang Bila.......Apa yang kita inginkan

Itu bisa kita Laksanakan.........Nah begitu juga dengan saya.....,,...
saya suka utak -atik Kode html Walau Kadang Selalu salah.......

Tapi saya gak pernah menyerah, saya terus mencoba Hingga Berhasil
Jadi Anda, Jangan Menyerah sebelum Apa yang Anda Inginkan...itu tercapai....

Itu hanya sedikit cerita dari saya....
Untuk Tutorial nya silahkan Ikuti Langkah-Langkah nya di bawah ini

show/hide menu

show/hide Menu cocok Digunakan untuk menghemat tempat dalam blog anda
karena widget ini hanya keluar ketika di clik...contoh seperti yang ada di blog ini

cara membuat nya

Copy pastekan kode dibawah ini dan tambahkan ke blog anda dengan melalui penambahan widget

<style type="text/css">
#floatMenu {
    position:absolute;
    overflow:auto;
width:200px;
    height:300px;
    top:-100px;
    right:-200px;
    margin-left:240px;
    border:4px solid #00ffff;border-right:none;
    background:url(http://i1214.photobucket.com/albums/cc489/Gray_December/album%20gmbr%20blog/729475pwo0tj9hiw.gif) repeat;
    border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    padding:10px 4px;
    opacity:0.1;
    -moz-opacity:0.1;
    filter:alpha(opacity=15);
    }
#floatMenu:hover {
    opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
    }
#floatMenu ul {
    margin-bottom:20px;
    }
#floatMenu ul li {
    line-height:14px;
    list-style:none;
    display:block;
    text-decoration:none;
    color:#ccc;
    }
#floatMenu ul li a{
    font-family:Arial Narrow;
    margin-left:-10px;
    padding-left:20px;
    font-size:12px;
    color:#00ffff;
    background:url(http://i44.tinypic.com/95q8fq/gubhugreyot/images/arrow.jpg) left no-repeat;
    background-position:0 3px;
    text-decoration:none;
    }
#floatMenu ul li a:hover{
    color:#ff0000;
    background:url(http://i44.tinypic.com/chrv9/gubhugreyot/images/arrow/anima.gif) left no-repeat;
    background-position:0 3px;
    }
#floatMenu ul li a:visited{
    color:#F80000;
    }
</style>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:800,queue:false});
});});
</script>
<div id="floatMenu">
<ul class="menu1">
     <li><a href="Link-1" title="Javascript Menu">Javascript Floating Menu Javascript Floating</a></li>
     <li><a href="Link-2" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-3" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-4" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-5" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-6" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-7" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-8" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-9" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-10" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-11" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-12" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-13" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-14" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-15" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-16" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-17" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-18" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-19" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-20" title="JQuery">JQuery Image Gallery</a></li>
</ul>
</div>

Float Vertikal Menu

Cara membuat nya: copy pastekan kode dibawah ini :
Tambahkan melalui Penambahan widget

<<style type="text/css">
#floatMenu {
    position:absolute;
    overflow:auto;
width:200px;
    height:300px;
    top:-100px;
    right:-200px;
    margin-left:240px;
    border:4px solid #00ffff;border-right:none;
    background:url(http://i1214.photobucket.com/albums/cc489/Gray_December/album%20gmbr%20blog/729475pwo0tj9hiw.gif) repeat;
    border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    padding:10px 4px;
    opacity:0.1;
    -moz-opacity:0.1;
    filter:alpha(opacity=15);
    }
#floatMenu:hover {
    opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
    }
#floatMenu ul {
    margin-bottom:20px;
    }
#floatMenu ul li {
    line-height:14px;
    list-style:none;
    display:block;
    text-decoration:none;
    color:#ccc;
    }
#floatMenu ul li a{
    font-family:Arial Narrow;
    margin-left:-10px;
    padding-left:20px;
    font-size:12px;
    color:#00ffff;
    background:url(http://i44.tinypic.com/95q8fq/gubhugreyot/images/arrow.jpg) left no-repeat;
    background-position:0 3px;
    text-decoration:none;
    }
#floatMenu ul li a:hover{
    color:#ff0000;
    background:url(http://i44.tinypic.com/chrv9/gubhugreyot/images/arrow/anima.gif) left no-repeat;
    background-position:0 3px;
    }
#floatMenu ul li a:visited{
    color:#F80000;
    }
</style>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:800,queue:false});
});});
</script>
<div id="floatMenu">
<ul class="menu1">
     <li><a href="Link-1" title="Javascript Menu">Javascript Floating Menu Javascript Floating</a></li>
     <li><a href="Link-2" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-3" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-4" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-5" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-6" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-7" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-8" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-9" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-10" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-11" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-12" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-13" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-14" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-15" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-16" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-17" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-18" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-19" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-20" title="JQuery">JQuery Image Gallery</a></li>
</ul>
</div>

membuat accordion menu

Sekali lagi..., meskipun belum lama berselang kita telah bahas pembuatan Vertical Accordion Menu dengan judul "Animated jQuery Accordion Menu Serba Guna", karena salah seorang sobat blogger menanyakan tentang bagaimana membuat vertical accordion seperti yang digunakan di blog ini, maka kita akan bongkar seluruh javascript dan kode css yang membentuk fungsi vertical accordion ini agar para sobat blogger bisa membandingkan keduanya. Meskipun kalau ditilik dari fungsi sebenarnya hampir tidak banyak perbedaan, namun sebenarnya jika ditinjau dari javascriptnya, maka akan kita lihat beberapa perbedaan, baik dari bentuk script maupun besar script yang digunakan.

Javascript maupun kode CSS yang nantinya kita perlihatkan, hampir tidak ada pengurangan atau penambahan dari kode aslinya, hanya beberapa kode CSS saja yang dirubah dengan pertimbangan supaya hasil akhir bentuk accordion akan sama disemua blog. Hal yang terpaksa dilakukan karena tanpa perubahan maka hasil yang didapat pastilah akan berbeda dengan bentuk accordion seperti yang terlihat di samping (beberpa kode css secara terpadu dipekerjakan juga untuk fungsi lain di keseluruhan blog!).

JQuery-1.3.2.min.js masih menjadi pilar utama bekerjanya accordion, yang dipadukan dengan sejumlah script lain hingga dapat membentuk sebuah fungsi dinamis dengan bentuk tampilan yang terbangun sepenuhnya melalui beberapa kode css dan background image.

Super animated Menu

Membuat navigasi menu horizontal ini amatlah mudah dan cepat. Yah ... ini semua karena hanya kode CSS yang digunakan. Kode tak seberapa banyak tapi coba sampeyan lihat bentuk hasil akhirnya. Wuh ... nggak ngira, dah, klo navigasi menu ini tanpa jQuery, motool atau javascript yang lain. Animasinya, mbul ... Sangar, kata orang. Gimana? Mo lihat tampilannya? Ho ... ho ... Jangan lewatkan pokoknya. Nih, caranya

Cara Membuat Super Animated CSS3 Navigation Menu

1. Login to BloGGeR dengan cara menuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password baru lanjutkan KLIK "Login".
2. Setelah login maka di hadapan sampeyan akan terlihat halaman Dasboard. KLIK link "Design (Rancangan).
3. Ketika terlihat Page Element (Elemen Laman), KLIK "Edit HTML".
4. Di sinilah kode CSS akan di simpan. Cari kode ]]></b:skin>. Supaya mudah mencarinya, gunakan Ctrl+F. KLIK secara bersamaan, baru lakukan pencarian kode.Letakkan seluruh kode CSS tepat di atas kode ]]></b:skin> seperti yang terlihat pada kode CSS Dibawah
5. KLIK SAVE Template (Simpan Template).

Membuat Tombol show/hide

Contoh nya :

[MASUKAN KODE HTML ANDA DISINI]
[MASUKAN KODE HTML ANDA DISINI]
[MASUKAN KODE HTML ANDA DISINI]
[MASUKAN KODE HTML ANDA DISINI]
[MASUKAN KODE HTML ANDA DISINI]
[MASUKAN KODE HTML ANDA DISINI]

Cara membuat nya: copi paste scrip di bawah ini
dan pasangkan pada posting/widget agan2

<div>
<div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="background: none repeat scroll 0% 0% rgb(66, 66, 66); color: #ffffcc; font-size: 11px; margin: 0px; padding: 5px; width: 100%;" type="button" value="Tutup" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: bisque; padding: 10px; text-align: justify;">

<div style="-moz-background-inline-policy: -moz-initial; -moz-border-radius: 0px 0px 0px 0px; background: url(&quot;#&quot;) no-repeat scroll 0pt 0pt rgb(0, 0, 0); border: 1px solid rgb(204, 204, 204); height: 250px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: left; width: auto;">


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