B-Blogger

Jumat, 23 April 2010

Selasa, 20 April 2010

Daftar Ke Feedburner Dan Widgetnya

Setelah kemarin yang di bicarakan adalah masalah duit, akhirnya kembali lagi deh seperti biasanya yaitu membicarakan soal blog tutorial. Artikel ini saya buat untuk memenuhi permintaan sahabat Setyo beberapa waktu yang lalu pada shoutbox, beliau meminta agar di buatkan tutorial bagaimana caranya memasang banner-banner seperti Add to Google, My Yahoo, dan lain sebagainya. Jawaban singkat dari saya adalah untuk mendapatkan semua banner tersebut (beserta fungsinya) anda harus bergabung dengan http://www.feedburner.com, apa itu http://www.feedburner.com? www.feedburner.com adalah satu situs yang memberikan layanan dalam hal syndikasi atau feed. Menurut berita yang saya baca dari halaman news miliknya feedburner, bahwa sekarang feedburner telah di akuisisi oleh google sehingga kita dapat mengalihkan feed blog kita ke feed yang dari feedburner.

Bagi anda yang ingin blognya lebih cepat terkenal saya sarankan untuk bergabung dengan feedburner, layanannya ditanggung gratis. Bagi yang ingin mendaftar tapi belum mengetahui caranya, silahkan ikuti langkah-langkah berikut ini :

Silahkan kunjungi http://www.feedburner.com.
Klik tulisan Register pada halaman bagian atas
Isi seluruh form yang yang ada
- Username --> isi dengan username yang diinginkan. contoh : japra
- password --> isi dengan password yang diinginkan. contoh : japratea
- Password (again) --> isikan kembali password yang tadi di tulis
- Email address --> isi dengan alamat email yang sobat miliki
- Secret Question --> isi dengan pertanyaan rahasia yang jawabannya nanti cuma sobat yang tau. Contoh : siapa nama pacar pertamamu ?
- Secret Answer --> isi dengan jawaban yang sesuai dengan pertanyaan di atas. Contoh : juleha
- Klik tombol Sigin
Jika berhasil, muncul ucapan selamat datang (welcome) dari feedburner
Isi kotak di bawah tulisan Burn a feed right this instant dengan alamat blog anda. Contoh : http://template-unik.blogspot.com
Beri tanda pada radio buuton yang tersedia, terserah mau pilih yang mana, kemudian klik tombol Next
Ubah Feed Title dengan Feed Address jika mau di ubah, kalo sudah tinggal klik tombol Active Feed
Ada ucapan Conrats, klik saja langsung tombol Next
Beri tanda centang pada kotak di samping tulisan Clickthroughs serta I want more ! have FeedBurner stats PRO also track (karena sekarang layanan yang PRO pun sudah gratis karena sudah di akuisisi oleh google)
Klik tombol Next
Klik tab Optimize
Silahkan setting yang anda inginkan, tapi yang paling penting adalah anda harus mengaftifkan fitur SmartFeed, karena fitur ini berfungsi agar supaya fungsi dari feed kita kompatibel atau klop dengan berbagai feed reader yang ada
silahkan klik SmartFeed lalu klik tombol Active
Klik tab Publicize, silahkan pilih fitur yang anda inginkan, tapi yang sering di gunakan adalah fitur feedCount coba klik FeedCount
Pilih bentuk style dari feedcount, yang biasa atau yang animasi, beri tanda pada radio button di sampingnya
Klik tombol Active
Copy kode HTML yang di berikan pada text area, paste pada notepad untuk nanti di pasang di blog anda
Klik Chicklet Chooser untuk memilih berbagai banner atau chicklet seperti yang di tanyakan sahabat setyo
Beri tanda pada radio button yang terletak di samping chicklet masing-masing, kemudian copy kode HTML yang di berikan yang ada pada text area, kemudian paste pada notepad. catatan : setiap sobat memberi tanda pada radio button masing-masing chicklet, maka secara otomatis kode HTML yang ada di bagian bawahpun akan berubah, jadi kesimpulannya beri tanda radio button lalu copy kode HTML nya beri tanda lagi lalu copy kodenya lagi
Klik Pingshot, beri tanda pada kotak di samping Ping-O-matic serta Newsgator, klik menu dropdown yang ada, lalu pilih yang sobat inginkan, klik tombol Add, klik lagi menu dropdownnya bila ingin di tambahkan lagi, klik Add kembali
Klik tombol Active
Klik Headline Animator untuk mendapatkan banner animasi
Klik menu dropdown di bawah tulisan Theme, pilih yang sesuai keinginan (yang paling banyak di minati adalah type classic)
Klik tombol Active
Klik menu dropdown di samping tulisan Add to, pilih Blogger blog
Klik tombol Next
Setelah muncul window baru, klik tombol Add to Blogger
silahkan Sign in dulu di blogger
Pilih blog yang mau di pasang banner animasi nya, lalu klik tombol Menambah Widget maka secara otomatis banner animasi akan di tambahkan. catatan : cara ini hanya berlaku bagi yang memakai template baru
Silahkan sign out dari situs tersebut
Selesai

Untuk fitur-fitur yang lain lainnya, silahkan anda coba-coba saja sendiri karena jika di terangkan semuanya, saya anggap terlalu banyak. alasan utamanya sih cape ngetiknya bro

.

Untuk pemasangan kode-kode HTMl yang tadi di copy pada notepad, saya anggap anda sudah bisa melakukannya, karena sudah sering saya bahas. Yang pake template klasik tinggal paste saja pada kode template nya, bagi yang pake template baru ya tinggal tambah elemen trus pilih yang HTML/Javascript, paste kodenya udah deh.

Satu yang paling terakhir. Seperti yang saya katakan diatas tadi bahwa sekarang feedburner sudah di akuisisi sama google, maka untuk feed blogger bisa di alihkan ke feedburner. Caranya seperti ini :

Sig in di blogger
Klik menu Pengaturan
Klik Feed Situs
Di sebelah tulisan Ijinkan Feed Blog, pilih yang Penuh
Simpan alamat feed dari feedburner pada kotak di samping tulisan posting URL Pengubahan Arah Feed. contoh alamat feed dari feed burner : http://feeds.feedburner.com/TemplateUnik
Apabila anda mempunyai account google adsense, anda bisa menyimpan kode iklan google adsense anda pada kotak di samping tulisan Feed Item Footer
Klik tombol Simpan Pengaturan
Selesai.

Ok deh, semoga dengan bergabungnya anda ke feedburner, blog sobat menjadi cepat terkenal dan ramai di kunjungi.

Rasanya ada yang lupa nih, contoh-contoh banner yang bisa di dapatkan dari feedburner antara lain seperti di bawah ini :

Sumber:http://kolom-tutorial.blogspot.com/2007/07/daftar-feedburnercom.html

Daftar Ke Feedburner Dan Widgetnya

Senin, 19 April 2010

Cara Buat Related post Pada Blog

Yuk kita langsung ke TKP :)
1)Login ke blogger masing-masing
2)Pilih tata letak
3)Pilih edit Html
4)Klik expand template widget
5)Copy Paste(COPAS) kode script berikut sesudah tag <head> dan sebelum tag </head>,berikut script nya:

<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)Kemudian cari kode Berikut (Agar lebih mudah mencari kodenya anda bisa memakai ctrl+f,dan taruh kode berikut pada kotak find):

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

#Pada script di atas,tambahkan script yang bercetak TEBAL(BOLD),Berikut Sript TAMBAHANNYA:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<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=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

7)Save Template
8)Pilih Tata Letak
9)Klik Page element
10)Pilih Konfigurasi HTML/JAVA SCRIPT,Dan kasih judul Terserah anda (Bisa Related Post,Bisa Posting Terkait,Dll(BEBAS)),Dan Copas(Copy Paste) Script Berikut:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script

11)Save
12)Pilih Edit HTML,Klik EXPAND TEMPLATE WIDGET,cari script Berikut Dan Tambahkan Script yang berwarna merah:

<b:widget id='HTML13' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

13)Save Template

#Muncul Tidak?gak muncul,coba element yang tadi kita add ato kita bikin di taruh di bawah posting,dan klik salah satu posting,turunkan cursor anda ke bawah(ke tempat coment) dan jeng-jeng-jeng jet hehe ada related post ato judul element yg tadi anda bikin,kalo masih belum bisa coment ntar ane bantu

Cara Buat Related post Pada Blog

Minggu, 18 April 2010

Cara Tambah Widget Translate Pada Blog

1)Login ke blogger masing-masing
2)Tata Letak
3)Tambah Gadget
4)Configurasi HTML
5)Copas(Copy Paste)kode berikut:

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsf5lZp8pPDZcuArj1dBIXAthA-1naBBzcbN6ZQuSyE6ox1xnw7NB0wTOYNkn4N2dR8ctBAi1JUKn7EkjDd83K5NWjN0og80MRNhauyklYGUfuTnbz_B1uuAz4WUm90gRpA3XVtFCFLx8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD7Tln5LrCI-ro1JFuFHwneomxm83Q8k6AX6xve2Qjv7KFU7s7oVbPrsPe6jtHmxLn7v8WPJZZfRG_P15FkcxNn3DkSThAhmBi3PXdohgEluWbZlHxIeteImb2zV1pv-v3dmTEwq_qbDk/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewZCKcPl9b-CJXZsHK01MCqo3e980cITKyIx2XJY99975dpdCadTKl9mCD4psgOGlI_krlnjDgoff6kwU_8mkYuR7tKvbvWklyMIyWkryzob_WF1P6Z9W5M2AbCT07BqyUcq0ADNknZWC/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBYonaUnYPYilOqyQ8z761pQBlI_dd_6pYMmLO7LLklhJIV4bO67skJ-JUT5viTdm-zkgW0LcfFZ1Spj0N7wfuwYL6rU4AaMfTNm3dt54XnoHQn9m19dS31LMpm43d-VhGzloi5vTId-Az/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpr4omEtRtsoEFKkXf_ffJl_cM9ohENRzV4l7VelfcyAP33jcY00bal2Ma-EBg2nia6iCQuDMy537SoJmKQ3GN1gJvW5WT6hSH9cP4HYWYxjFuGzUA3gZ349clvVAzTvt1Nc_fqL2T4vI/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMRvWZYUTsaN872yV5zrmE1GfWMQj5E4uaPIadaZwin4g7mevlPRt6qq6nApNPhzxW-e5kArAF1HNHn17h15E0Xc0-hczlku1gzBGY8f5u8YeDFS1-x-YZ3reYMhj9_XuhVIyY-jQKp40/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<br /><br />

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM74bDijUdlGQRA_1EEgcZOre7Tkr_FPrVaH-KYeYXW31FjdtaXqVHADbrw-XaudnkgBAN7EMmHYcyDEWuGBB4b4j4MUDUm4E3ZtjibVQtyIHJvQ_0cMiab3fLiqdJQXkSYvY-CsU2-LA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGldWK4ixZEIMRqCYyxpgTqcPXch_ZMXe-l2C_Pm3WONDfUA94PjC_1DbKw0oeSwky4-OsUR4-AySXanjgANXqTd-_bJ4qXAfwfGUxYvRaLp5l1NvMx5Zv7eJE7EQMM3KqVjSfb09Nc8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5h3MEb4HbDhy3ZeMlUDLvimOSUjAkjceKawrS-ypMFu206RCMCrcB1_iNNP2CEVQF3FIEEfqwZUGVgfUbsFCB9OpS-RwD7Yv72qEGLFYaLh8RXczmMe4RniinP24v0t4LFxv1TwRKJhnf/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGdc4kH7JxNTTTlvO8Yngz1rfSeXRvv-mOXKYvMwEqEZ5HKmKjtov1JkxVVKBh16W4w79hTXQgxIb8Za3bJ9MkmBV4TWlQij1kRjX3SG_4MwxBpl-aEOiSYoiUL4pxL-LKyf2tUC5HB5Y/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpNmM6rxG0tsZACjIeCnHjXAlbA4T_fX0edgYjE2BoqxS0nKLMo_eZLGtmdAvy0a9dlh6ZK0QMMBtfEpjIPWX-VBe4o2_CA5BaAD_QqP7Cephs-68sWqm2oj_Hd5Z3uigLBJM-q_mYxU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEahqUifwW5nafAoRUM7hEdB2LdMJC9ewR83mrlC4VdET6LDvUkr9HErfmbgUPsU3UtZCQ0Ke-bgujr8eDuKcKPIgI1OymmQ2KyXYM4_51kNi1jKyYKyCu0T-RKFTfiPJmAu4xYsxsWFM/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

Cara Tambah Widget Translate Pada Blog

Menambahkan Widget Who's Amung Us Pada Blog

User online widget nampaknya menjadi salah satu widget wajib blogger saat ini. Hampir semua blog dan website memasangnya. Dengan widget ini pengunjung dapat melihat berapa orang yang sedang online saat itu di blog atau website. Saya pasang widget whos amung us. Selain itu, masih banyak situs lainnya yang menyediakan widget user online. Anda dapat mencarinya di google dengan keyword "user online widget" atau "user online status" atau "user online". Silahkan pilih widget dari situs mana yang akan anda pasang pada blog anda.

Secara umum, widget ini sangat mudah dipasang. Biasanya anda diharuskan mendaftar dulu untuk membuat akun. Proses pendaftaran pun sangat mudah, cukup dengan email saja. Bahkan ada yang tidak memerlukan pendaftaran. Setelah itu anda akan diberikan script user online status yang siap untuk dipasang. Nah, selain user online status dari whos.amung.us masih ada lagi yang lain seperti radarURL.com, whosread.com, 24counter.com, widgetbox.com, histas.com, dan banyak situs lainnya.

Oke, misalnya kita pakai user online status dari whos.amung.us karena widget ini termasuk yang terbaik dan teraman dari widget user online status lainnya yang ada di internet. Sekarang cara pasang widget nya seperti ini :

Login ke blogger dengan id anda. Setelah itu tinggalkan sebentar
Kunjungi situs whos.amung.us
Sekarang klik teks Customize your widget! untuk memilih warna dan setting lainnya.
Halaman berikutnya, pada Already have a map, or our widget? klik radio button No.
Berikutnya silahkan pilih widget color dan font color. Akan ada preview untuk melihat widget, seperti gambar di bawah ini. Sesuaikan dengan desain template blog anda.
Jika sudah, lihat di bagian bawah ada script widget yang diberikan. Sekarang klik teks Blogger untuk menempatkan widget ke blogger.
Nah, anda akan dibawa ke blog anda dan silahkan klik tombol MENAMBAH WIDGET seperti gambar ini :
Selesai.

Oke, sekarang widget user online dari whos amung us sudah terpasang. Silahkan menempatkannya di mana saja pada blog anda. Anda dan pengunjung blog lainnya akan dapat melihat berapa orang yang sedang online saat itu di blog anda. Selain itu, situs ini juga menyediakan map widget berupa peta dunia yang dapat menunjukkan dari wilayah mana saja pengunjung blog anda yang sedang online saat itu. Bagaimana, widget whos amung us memang layak dipasang di blog anda. Oke, mudah-mudahan bermanfaat.

Menambahkan Widget Who's Amung Us Pada Blog

Cara Buat Tombol Hide Dan Show

Namun pada kesempatan kali ini saya akan mencoba berbagi tips blogger tentang cara membuat tombol show dan hide seperti punya saya, yang saya pergunakan untuk membuat category. (lihat disebelah kiri). Bagaiamana??? tertarik??
Oke kita langsung aja,
Cara membuatnya pun sangat mudah, anda hanya perlu mengcopy-paste script yang saya berikan, kemudian edit sesuai dengan keperluan anda.

<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER</small></b></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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

ISI NYA (Terserah anda)

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

Maka akan terlihat seperti ini,

JUDUL SPOILER

Ataupun bisa seperti ini,

Kalau anda menginginkan tampilan seperti ini, anda hanya perlu menghilangkan kode JUDUL SPOILER lalu anda ganti kata show dan hide sesuai keinginan anda. Tapi jangan lupa juga untuk mengganti ukuran lebar nya, Misal: width:100px;

Selamat Mencoba.

Cara Buat Tombol Hide Dan Show