Tampilkan postingan dengan label HTML Javascript. Tampilkan semua postingan
Tampilkan postingan dengan label HTML Javascript. Tampilkan semua postingan

Membuat Hari dan Tanggal di Header Blog

Sebenarnya hari dan tanggal pada header blog atau website tidak terlalu penting, karena sudah ada di komputer user, sebagaimana jam, musik, dan lain sebagainya. Fungsi tanggal pada header blog atau website hanya sekedar pemanis saja, seperti yang ada pada blog ini. Jika sobat blogger tertarik untuk memasangnya, berikut Cara Membuat Hari dan Tanggal di Header Blog atau Website. Hanya butuh 4 langkah dan jreng.. jreng... Hari dan Tanggalnya udah ada di bagian yang kita inginkan.

Yuk ikuti langkah - langkahnya :

  • Login ke Blog
  • Pilih Template >> Edit HTML
  • Copy kode berikut ini dan paste di bagian header atau bagian mana saja yang Anda inginkan.

    <!-- Widget Tanggal Start ->
    <script type='text/javascript'>
    now = new Date();
    if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
    else (a=now.getTime());
    now.setTime(a);
    var tahun=now.getFullYear()
    var hari=now.getDay()
    var bulan=now.getMonth()
    var tanggal=now.getDate()
    var hariarray=new Array(&quot;Minggu&quot;,&quot;Senin&quot;,&quot;Selasa&quot;,&quot;Rabu&quot;,&quot;Kamis&quot;,&quot;Jum&#39;at&quot;,&quot;Sabtu&quot;)
    var bulanarray=new Array(&quot;Januari&quot;,&quot;Februari&quot;,&quot;Maret&quot;,&quot;April&quot;,&quot;Mei&quot;,&quot;Juni&quot;,&quot;Juli&quot;,&quot;Agustus&quot;,&quot;September&quot;,&quot;Oktober&quot;,&quot;November&quot;,&quot;Desember&quot;)
    document.write(hariarray[hari]+&quot; &quot;+tanggal+&quot; &quot;+bulanarray[bulan]+&quot; &quot;+tahun)
    </script>
    <!-- Widget Tanggal End -->
  • Save template, Selesai



Selamat berkreasi, Salam Blogger

Tips Membuat Iklan Banner Berganti Secara Otomatis

Banner merupakan akseoris WAJIB bagi sebagian blogger, terutama yang menjadikan blognya sebagai pendulang dollar. Selain menjadikan pendapatan tambahan dari iklan - iklan yang di promosikan lewat blog, banner bisa membuat blog Anda semakin cantik dan menawan. Untung - untungan jika template blognya menyediakan banyak slot untuk tempat banner. Jika slot bannernya terbatas, ini nih yang masalah...

Terkadang blogger sering memaksakan struktur template blognya untuk tempat banner yang tidak seharusnya dilakukan. Akibatnya, blog semakin berat dan lambat untuk di akses pengunjung. Solusinya? Buatkan Iklan Banner Berganti Secara Otomatis, Maksudnya gimana nih? Penempatan iklan banner di satu tempat dan banner tersebut akan saling berganti secara otomatis. Tujuannya tak lain untuk menghemat tempat di ruang halaman blog Anda.

Cara membuatnya juga tidak terlalu sulit. Yang terpenting anda sudah membuat banner iklannya dan telah menentukan lokasi banner yang disesuaikan dengan struktur template.. Yuk kita mulai saja bagaimana cara membuat banner berganti otomatis di satu tempat.
  • Login ke Blogger
  • Pilih Tata Letak => Tambah Gadget
  • Pilih HTML/JavaScript
  • Masukkan kode dibawah ini kedalamnya

    <script type="text/javascript">
    var imgs1 = new Array("URL Banner-A","URL Banner-B","URL Banner-C","URL Banner-D");
    var lnks1 = new Array("URL Tujuan-A","URL Tujuan-B","URL Tujuan-C","URL Tujuan-D");
    var alt1 = new Array("Teks Iklan-A","Teks Iklan-B","Teks Iklan-C","Teks Iklan-D");
    var currentAd1 = 0;
    var imgCt1 = 4;
    function cycle1() {
    if (currentAd1 == imgCt1) {
    currentAd1 = 0;
    }
    var banner1 = document.getElementById('adBanner1');
    var link1 = document.getElementById('adLink1');
    banner1.src=imgs1[currentAd1]
    banner1.alt=alt1[currentAd1]
    document.getElementById('adLink1').href=lnks1[currentAd1]
    currentAd1++;
    }
    window.setInterval("cycle1()",5000);
    </script>
    <a href=""link iklan-1"" id="adLink1" target="_blank">
    <img src="link gambar iklan-1" id="adBanner1" border="0" width="350" height="250" /></a>

    Keterangan :
    1. URL Banner (warna Merah) merupakan alamat atau link gambar banner;
    2. URL Tujuan (warna Biru) merupakan URL tujuan, apabila diklik akan menuju link yang menjadi tujuan;
    3. Teks Iklan (warna Hijau) merupakan teks uraian singkat mengenai banner iklan Anda;
    4. Angka 5000 merupakan kecepatan gerakan banner yang bergantian, semakin rendah nilainya maka akan semakin cepat pergerakannya, begitu juga sebaliknya;
    5. Width 350 dan Height 250 merupakan lebar dan tinggi banner. Silahkan Anda ganti dan disesuaikan dengan struktur template Anda.
  • Setelah semua setingan dilakukan dan sudah sesuai dengan selera Anda, klik Save
  • Selesai

Mudah bukan? Info tambahan, tips ini juga boleh diterapkan pada blog wordpress. Nah.., silahkan dicoba dan dipasang di blog anda, semoga tips singkat tentang Membuat Iklan Banner Berganti Secara Otomatis ini dapat bermanfaat untuk sahabat blogger semuanya. Salam Blogger Indonesia....!!!

Membuat Daftar Isi Blog Otomatis

Pentingkah daftar isi pada sebuah blog? Jawabannya mungkin Anda sudah tau. Disamping untuk menaikkan Page View suatu halaman artikel atau postingan yang diakses oleh pengunjung, sebuah daftar isi menjadikan sebuah referensi bagi pengunjung dalam mencari keseluruhan informasi dalam blog kita. Ibarat sebuah rumah makan, ketika ada tamu yang berkunjung dan ingin menikmati jenis-jenis menu, tentu melihat daftar menu terlebih dahulu. Kita sebagai pelayan restoran apakah harus terpaku untuk menyodorkan pada satu jenis menu makanan saja? Jawabannya Tentu tidak! Padahal masih banyak menu-menu menarik lainnya yang bisa kita sodorkan.

Nah, agar menu - menu tersebut terlihat komplit maka kita harus menyodorkan menu lainnya agar si tamu tadi tidak jadi pindah ke restoran lain, lalu apa yang kita lakukan? Kita sodorkan saja Daftar Menu tersebut pada tamu tadi agar mereka bisa memilih sesuka hati menu apa yang ingin mereka cari.

Untuk sebuah blog, Fungsi Daftar Isi ini akan memberi kebebasan untuk para pengunjung atau pembaca untuk menikmati semua artikel yang ada di dalam blog layaknya memilih makanan di daftar menu restoran. Manfaat lainnya dengan membuat daftar isi untuk blog, yakni :

  1. Artikel pada suatu blog akan lebih populer;
  2. Artikel yang lama akan lebih mudah ditemukan lagi
  3. Para pengunjung akan lebih bebas menemukan artikel tanpa harus mengetikkan keyword
  4. Blog akan terlihat lebih profesional dan lebih atraktif

Menarik bukan? dengan menambakan kode javascript pada halaman posting. Daftar isi atau sitemap akan berfungsi untuk membantu pengunjung agar mereka tidak kesulitan dalam mencari artikel yang mereka butuhkan. Langsung saja ke cara membuat daftar isi blog otomatis ya?

  1. Membuat Daftar isi Berdasarkan Label atau Kategori

    • Cara membuat daftar isi pertama ini dilengkapi dengan scroll, jadi mudah ditempatkan di widget sidebar atau dalam postingan Laman. Daftar isi akan berurut berdasarkan Kategori Artikel. Terdapat tambahan notice, New!! apabila postingan masih baru.
    • Buatlah sebuah posting kosong, beri judul "Daftar Isi" atau "Sitemap"
    • Copy kode dibawah ini kemudian paste pada postingan tersebut (paste kodenya pada edit html, bukan compose)

      <div style="background: transparent url(#) no-repeat; border: 1px solid white; height: 400px; overflow: auto; padding-left: 5px; width: 95%;">
      <script language="javascript">
      numposts=9999;
      home_page="URL_BLOG_ANDA";
      explanpost="new";
      </script>
      <ul><script src="http://yourjavascript.com/29102305526/sitemapblog-anakbangsa.js">
      </script></ul>
      </div>

    • Pada post option jangan ijinkan komentar, agar halaman daftar isi tidak dipenuhi komentar yang akan memberatkan blog anda.
    • Jangan lupa mengganti Tulisan tebal berwarna merah (URL_BLOG_ANDA) dengan alamat blog anda
    • Publish Post, Selesai
    •  
      Demo dari Daftar isi berdasarkan Label dapat Anda lihat disini

  2. Membuat Daftar Isi Berdasarkan Tanggal Postingan Menu Dropdown

    • Cara membuat daftar isi yang kedua ini makin komplit fiturnya, Selain berdasarkan tanggal postingan, ada menu pilihan dropdown untuk Kategori Artikel dan Pilihan Urutan. Selain itu tersedia rangkuman artikel jika di klik icon panah di depan judul. Menarik bukan? Gunakan kode dibawah ini. Copy dan paste kodenya pada edit html, bukan compose.

      <div id="cl_option">Loading... </div>
      <div id="cl_content_list"></div>
      <script type="text/javascript">var jumlah_kata_dalam_ringkasan = 500;</script><br />
      <script src="http://yourjavascript.com/71312621930/sitemapdropdown-bloganakbangsa.js"></script><br />
      <script src="http://URL_BLOG_ANDA/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999"></script>

    • Pada post option jangan ijinkan komentar, agar halaman daftar isi tidak dipenuhi komentar yang akan memberatkan blog anda.
    • Jangan lupa mengganti Tulisan tebal berwarna merah (URL_BLOG_ANDA) dengan alamat blog anda
    • Publish Post, Selesai

    Demo dari Daftar isi berdasarkan Tanggal Postingan, ringkasan artikel dan fasilitas menu dropdown dapat dilihat di Sidebar blog ini, pada menu Arsip Blog

Beda antara cara pertama dan cara kedua yaitu pada hasil sitemap yang dihasilkan, tapi berfungsi sama. Dua-duanya menginformasikan isi dari Blog Anda. Mudah bukan?


Semoga Bermanfaat....

Cara Membuat Tabs di Blogspot


Cara membuat tabs di blogspot atau di blogger adalah hal yang sangat perlu di terapkan. karena hal ini akan memberikan daya tarik sendiri untuk penampilan blog kita, yang kelihatannya lebih simpel dan menarik untuk di lihat. nah tentunya akan menjadi daya pikat bagi pengunjung, agar pengunjung betah berlama-lamaan di blog kita. Seperti kebanyakan blog lain, dimana kita lihat di sidebar mau pun di fotter atau di header blog mereka banyak terdapat widget - widget, yang memungkin kan akan lama nya proses loading suatu blog tersebut. Nah untuk mengatasi terjadi nya kelamaan loading adalah dengan cara menambah Tabs. kita hanya cukup memerlukan satu widget untuk menempat kan isi content yang terdapat di widget-widget yang banyak tadi.

Nah untuk anda yang ingin blog nya kelihatan simple dan menarik untuk di lihat anda bisa menambahkan Aplikasi ini untuk blog anda. Berikut langkah-langkah cara menambah tabs ke dalam blog anda :

Langkah Pertama :

  • Login ke blogger
  • Klik Template >> Edit HTML
  • Cari kode ]]></b:skin>
  • Kemudian letakkan kode di bawah ini tepat di bawah ]]></b:skin>

    <!-- Tab Halaman Start -->
    <script type='text/javascript'>
    //<![CDATA[
    function tabtampil_oom(TPID, id)
    {
    var Tabtampil = document.getElementById(TPID);
    var TTs = Tabtampil.firstChild;
    while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
    var TT = TTs.firstChild;
    var i = 0;
    do
    {
    if (TT.tagName == "A")
    {
    i++;
    TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
    TT.className = (i == id) ? "Active" : "";
    TT.blur();
    }
    }
    while (TT = TT.nextSibling);
    var Halamans = Tabtampil.firstChild;
    while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
    var Halaman = Halamans.firstChild;
    var i = 0;
    do
    {
    if (Halaman.className == 'Halaman')
    {
    i++;
    if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
    Halaman.style.overflow = "auto";
    Halaman.style.display = (i == id) ? 'block' : 'none';
    }
    }
    while (Halaman = Halaman.nextSibling);
    }
    function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
    }
    function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1);
    document.write('');}
    //]]>
    </script>

    <!-- Tab Halaman End -->

  • Kemudian klik Simpan Tamplate
Langkah Kedua :
  • Klik Tata Letak >> Tambahkan Gadget
  • Pilih HTML/JavaScript

  • Copy paste kode dibawah ini ke dalamnya

    <style type="text/css">
    div.TabTampil div.TTs
    {height: 24px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    { background-color: #eee; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #dcc9ba; overflow: hidden; background-color: #dcc9ba;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden;}
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
    display: block; width: 120px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 11px; font-weight: 900; color: #000000}
    </style>
    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 480px;" class="TTs"> <a>Judul Tab 1</a> <a>Judul Tab 2</a> <a>Judul Tab 3</a></div>
    <div style="width: 480px; height: 300px;" class="Halamans">
    <div class="Halaman">
    <div class="Alas">
    <br/>

    Taruh content Tab 1 disini

    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>

    Taruh content Tab 2 disini

    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>

    Taruh content Tab 3 disini

    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>


  • Untuk Tulisan berwarna merah letakkan kode konten yang ingin Anda tampilkan
  • Kemudian simpan dan lihat hasilnya

Silahkan Anda berkreasi mengganti besar kecilnya tampilan tab serta warna yang pasti menyesuaikan dengan warna default blog Anda. Pengaturannya ada di style CSS kode script diatas.

Semoga Bermanfaat

Membuat Program Kalkulator Sederhana

Artikel kali ini akan membahas tentang belajar pemograman sederhana, yakni bagaimana cara membuat kalkulator sederhana dengan JavaScript. Cara membuatnya cukup mudah dan anda tidak usah repot-repot memutar otak untuk merangkai kode demi kode. Selain sederhana program kalkulator ini dapat Anda edit sesuai dengan keinginan Anda. Untuk membuatnya anda hanya perlu membuka program notepad di komputer Anda dan mengcopy paste kode di bawah ini pada notepad. Kemudian Simpan file dalam format html, caranya dibagian save as type diganti ke allfiles kemudian tambahkan .html pada nama file contohnya namafile.html, lalu buka file tersebut melalui browser. Penasaran? Berikut Kodenya

Calculator I

<html>
<head>

<title>Kalkulator | BLOG ANAK BANGSA</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
function penjumlahan() {
var a1=prompt("Masukkan angka pertama :",0);
var a2=prompt("angka "+a1+ " mau ditambahkan dengan angka berapa?",0);

c=eval(a1)+eval(a2);
document.write("Hasil dari "+a1+"+"+a2+"="+c);
}
function pengurangan() {
var a1=prompt("Masukkan angka pertama :",0);
var a2=prompt("angka "+a1+ " mau dikurangi dengan angka berapa?",0);
c=eval(a1)-eval(a2)
document.write("Hasil dari "+a1+"-"+a2+"="+c);
}

function perkalian() {
var a1=prompt("Masukkan angka pertama :",0);
var a2=prompt("angka "+a1+ " mau dikalikan dengan angka berapa?",0);
c=eval(a1)*eval(a2)
document.write("Hasil dari "+a1+"x"+a2+"="+c);
}
function pembagian() {
var a1=prompt("Masukkan angka pertama :",0);
var a2=prompt("angka "+a1+ " mau dibagi dengan angka berapa?",0);

c=eval(a1)/eval(a2)
document.write("Hasil dari"+a1+"/"+a2+"="+c);
}
</SCRIPT>
<body onload="alert('Silahkan klik tombol untuk memulai perhitungan')">
<a href="" onMouseOver="alert('Copyright @ BLOG ANAK BANGSA | www.ifoell.blogspot.com')">
<font color='blue' size=6><u> Kalkulator by www.ifoell.blogspot.com</u></font></a><br><br>

<input type="button" value="Penjumlahan" onClick="penjumlahan()">
<input type="button" value="Pengurangan" onClick="pengurangan()">
<input type="button" value="Perkalian" onClick="perkalian()">
<input type="button" value="Pembagian" onClick="pembagian()">
</body>
</html>

Copy kode di atas (warna merah), paste pada program Notepad. Simpan file dalam format html, Contoh : Calculator.html, dibagian save as type diganti ke all files. Selain kode pertama di atas, berikut kode lain cara membuat program kalkulator sederhana dengan menggunakan notepad.

Calculator II


<html>
<title>Program Kalkulator Sederhana | BLOG ANAK BANGSA</title>
<SCRIPT LANGUAGE="JavaScript">
window.defaultStatus="Support by www.hadi.web.id"
function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value = c
}

function kurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}

function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}

function bagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}

function pangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.hasil.value = c
}

function kosong()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""

}

</SCRIPT>

<body onload=kosong()>
<CENTER>
<font size="5">Program Kalkulator</font>
<hr size="5" color="red">
<FORM name="form">
<pre>
Angka 1 <input type="text" name="a">
Angka 2 <input type="text" name="b">

Hasil <input type "text" name="hasil" disabled="true">
</pre>
<hr size="2" color="blue">
<input type="button" value=" + " onClick="tambah()">
<input type="button" value=" - " onClick="kurang()">
<input type="button" value=" x " onClick="kali()">
<input type="button" value=" / " onClick="bagi()">
<input type="button" value=" ^ " onClick="pangkat()"><br>
<input type="button" value=" Kosong " onClick="kosong()">

<br>
Oleh: BLOG ANAK BANGSA<br>
Support by: http://ifoell.blogspot.com
</FORM>
</CENTER>

</body>
</html>

Cara membuatnya sama dengan cara pertama. Tinggal Copy kodenya (warna biru) dan simpan di notepad dengan menggunakan ekstention file .html. Semoga Bermanfaat


Membuat Gambar Melayang di Blog


Ternyata ada juga blogger yang masih bingung tentang cara membuat gambar melayang di blogspot. Buktinya ada pesan di buku tamu dari Sdr.Ucup (kimura_cs@yahoo.com). "Maaf mau tanya, klo nampilin gambar bendera itu gmn? boleh minta codenya. Kirim ke email saya ya..?". Gambar bendera pada blog ini maksudnya gambar melayang yang ada di sudut bawah blog. Jadi, inti yang ditanyakan gimana cara membuat gambar melayang di blog. Padahal tutorialnya banyak ya?, dari yang berbahasa inggris, hingga berbahasa indonesia. Mungkinkah bahasa tutotialnya kurang di mengerti? Atau si Ucup enggan mengunjungi rumahnya Paman Google? Entahlah.. Yang pasti berikut tutorial ulangnya yang di ambil dari berbagai sumber.


Gambar melayang adalah gambar yang letaknya selalu tetap dan tidak terpengaruh oleh scrool mouse. Maksudnya kita dapat membuat gambar seperti melayang di kanan, kiri, bawah, atas walaupun Scrollbar ditarik kemana-mana. Dan bukan hanya gambar yang bisa Anda pakai di posisi gambar melayang ini, tapi counter, Status YM, iklan dan lain-lain.

Sebelumnya back up dulu template Anda, agar jika terjadi kesalahan dan template blog Anda tidak rusak. Berikut step-step yang harus sobat lakukan :

  1. Login ke Acount blogger anda.
  2. Masuk pada Pengaturan.
  3. Pilih Tata letak.
  4. Pilih Edit html.
  5. Cari kode ini ]]></b:skin> truz copy paste kode di bawah ini di atas kode ]]></b:skin>

    #melayang {
    position:fixed;_position:absolute;bottom:0px; left:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  6. Berikutnya cari lagi di dalam template anda kode </body> Kemudian copy pastekan code dibawah ini dan letakkan diatas kode </body>.

    <div id='melayang'>
    <a href='http://ifoell.blogspot.com/'>
    <img border='0' src='http://i437.photobucket.com/albums/qq96/bloganakbangsa/benderamerahputih.gif'/></a></div>
  7. Simpan, Selesai deh....


Keterangan :
  • Pada langkah 5 : Kode yang tercetak merah (bottom dan left) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan Anda.
  • Pada langkah 6 : Kode yang berwarna merah silahkan diganti dengan url blog Anda sebagai link dan url tempat gambar anda disimpan, misal : di photobucket, di imageshack, di flickr, dll.



Semoga Bermanfaat ya Sobat..?? Happy Blogging

Button Or Show Spoiler

Penataan Artikel di website atau blog adalah hal yang biasa - biasa saja, atau point yang kesekian untuk hal - hal yang penting dalam dunia blogging. Tergantung seni dari penulis itu sendiri. Karena menurutku menulis itu adalah Seni, dan seni perlu ada kaidah atau nilai tambah buat menambah manisnya gaya tulisan kita, biar terkesan lebih unik dan ngga membosankan pengunjung. Wah.. kaya penulis tenar aja nih. hehehe.. Dengan melihat fenomena setiap Artikel di website, artikel yang panjang sering membuat pengunjung bete alias ogah membaca semuanya dari A sampai Z. Paling bentar hanya paragraf Awal sama paragraf akhir. Bukannya ngga boleh dan melarang artikel yang panjang. Ibarat Anda naik mobil melakukan perjalanan panjang, kalo ngga ada istirahatnya pasti bete


Istirahat yang aku maksudkan dan di sinkronkan dalam sebuah artikel adalah sebagai tampilan sambil lalu, Siaran - siaran di TV aja ada iklannya kok, begitupun dengan menulis. Maksudnya apa ya..? Dalam menulis dapat kita selingi dengan tampilan - tampilan yang atraktif, misal penambahan gambar, efek suara, Efek Marquee, atau blogroll untuk tulisan artikel yang panjangnya 2 km. hehehe.. Di artikel ini, aku ingin membagikan trik menulis dengan efek tombol. Tombolnya bukan untuk suatu link, yang di klik trus terbuka halaman baru. Tombol disini fungsinya untuk memperindah dan menata artikel yang panjang. Apalagi kalo tulisan Anda penuh dengan sensasi yang mengundang rasa penasaran dari pengunjung, dengan menambahkan efek tombol yang ada di bawah ini, di jamin artikelnya lebih menarik dan tertata bagus.

A. KODE TOMBOL YANG PERTAMA

Efek ini ngga di lengkapi dengan kode untuk menutupnya kembali. Aku dapatkan dari sumbernya, memang sudah begini tampilannya. Jika ada yang ingin menambahkan kode HTML nya atau yang hebat utak atik Kode HTML silahkan di edit dan infokan ke aku ya..?

<div style="border: 1px inset #00000; padding: 5px;"><div style="text-align: center;"><button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler."><span style="font-size:100%;color:#000000;"><b>"Kata Kata Tombolnya"</b></span></button></div><div id="spoiler" style="display: none;"><blockquote>
Kata Kata Atau Gambar Yang Mau Disembunyikan, letakkan disini...
</blockquote></div></div>

Stylenya dapat Anda edit sesuai selera Anda, Di posisi mana tombol ini, tampilan border, warna, perintah dalam tombolnya dan lain sebagaiya. Save aja kodenya biar Anda ngga bolak balik lagi ke blog ini. Hehehe.. Atau simpan kodenya di Notepad PC Anda. Contoh Tombolnya seperti di bawah ini.



B. KODE TOMBOL YANG KEDUA

Tombol ini selain di lengkapi dengan kode pembuka tombol dilengkapi juga dengan tombol penutupnya, lebih mantap kayaknya dari yang pertama. Kode HTML nya sebagai berikut...

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
Teks atau Gambar letakkan disini
</span></div></div></div></div></div>

Wah.. lebih banyak kodenya ya..?? Dan lebih ribet kayaknya. Silahkan Anda edit sesuai selera Anda, wong kode ini bukan ciptaanku kok.. hehehe. Contoh tombolnya seperti di bawah ini.




Sumber dari kedua kode ini aku sudah lupa.. Benar - benar lupa. Mohon maaf bagi yang menciptakan tombol ini. Swear aku lupa linknya, cos kode ini langsung di save di notepad. Maaf ya.? Namanya juga berbagi. Aku juga ngga mengklaim bahwa kode ini lisensenya aku toh.? Harus diakui bahwa kode ciptaan Anda sangat berguna buat sobat - sobat yang membutuhkannya. HAPPY BLOGGING