Cara Membuat Tombol Show Hidden + Award

Curhat sedikit: Setelah cukup direpotkan oleh kegiatan Ta'aruf (ospek) kampus UII, sebenarnya sempat terpintas dalam benak saya untuk berhenti ngeblog. Namun, setelah 2 minggu lamanya saya tidak mengurusi blog ini. Betapa kagetnya saya melihat blog saya masih memiliki pengunjung yang lumayan. Hal tersebut berhasil mengembalikan semangat ngeblog saya. Pada akhirnya saya kembali mengurus blog. Walaupun pada akhirnya saya mengalami krisis ide, saya tetap berjuang keras mencari ide. Dan, tara............... saya mendapatkan ide untuk postingan plus ide untuk perombakan blog.

Kali ini saya kembali dengan membawakan tips seputar Tips Trik Blog. Pada kali ini saya akan membagikan informasi seputar cara membuat tombol show hidden. Lalu, apa itu tombol show hidden??????  Tombol tersebut adalah tombol yang berada disebelah kanan (lihat kotak Quick Tips and Download). Atau lebih jelasnya lagi ada pada contoh dibawah ini.

Judul Spoiler

Masukkan Teks/Gambar Anda disini

Jika kalian sudah mengerti dan ingin segera mempraktekkan, silahkan copy dan paste-kan kode berikut.

<div>
<div style="margin-bottom: 2px;">
<i><b><small>Judul Spoiler</small></b></i><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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 120px;" type="button" value="Show" /></div>

<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Ganti dengan tulisan atau gambar anda
</div>
</div>
</div>

Semoga tips saya kali ini bermanfaat untuk anda semua. Jangan lupa berikan komentar anda.

Award

Sekali lagi saya mendapatkan award, dan kali ini berasal dari sobat Bukan Isapan Jempol .

Saya sampaikan terima kasih buat sobat saya yang satu ini. Selanjutnya sesuai aturan main, saya akan membagikan pada kelima teman blogger saya untuk mereka bagikan kembali.

Inilah gambar awardnya. Mohon maaf jika sudah saya ubah sedikit, karena sebelumnya ada teks link blog yang tidak saya kenal.

Award ini saya berikan buat :

1. Situs Unik
2. Pagaralam
3. d'54v3
4. Oempak
5. Kusmalarita

Nah, bagi para penerima award silahkan mempostingkan Award ini dan membagikan kepada kelima atau sepuluh temanmu. Semakin banyak teman yang anda bagi semakin besar nilai backlink yang anda dapatkan. Jangan lupa untuk mencantumkan nama/link saya sebagai penyalur award.

Terimakasih buat sobat semuanya.

Memberi Variasi Pada Chat Box

Mungkin ketika kalian membaca judul diatas kalian akan mengira saya akan memberikan tips memasang emotion pada chatbox. Hal tersebut memang benar, tetapi saya akan memberikan lebih dari sekedar tips memasang emotion. Saya akan memberikan tips menghapus pesan, memBANNED ip address si pengganggu, Mengatur jumlah karakter maksimal dalam satu pesan, membuat setiap kiriman url berubah menjadi [link] dan e-mail menjadi [mail], Serta membuat kolom pesan menjadi dua baris. Untuk melakukannya silahkan ikuti tutorial saya di bawah ini:

Sebelumnya harap login di http://www.cbox.ws/

Menambah EMOTION pada Chatbox dan sejenisnya:

1. Pertama kunjungilah situs penyedia icon emotion seperti Smiley Codes.
2. Lalu pilih emotion yang ingin kalian tambahkan, klik emotion tersebut, copy htmlnya.
3. Lalu masuk pada cbox.ws,  klik nav Options, lalu klik Smilies.
4. Paste html yang kalian copy tadi di tab Url, lalu pada tag code isi dengan kode yang ingin anda gunakan buat menampilkan emotion, pada tag Alt isi dengan kode alternatif untuk menampilkan kode tersebut.
5. Jika ingin menambah lebih banyak emotion lagi tinggal klik tombol New Row yang terletak di Bawah.
6. Jika sudah selesai mengedit emotion simpan dengan mengklik Save 

Menghapus Pesan dan MemBANNED IP si pengganggu

1. Klik nav Message, lalu klik Message juga yang ada dibawahnya.
2. Beri tanda centang pada pesan yang ingin di hapus atau di Banned.
3. Klik delete untuk menghapus pesan tersebut, Klik Ban untuk membanned IP address tersebut.
4. Lalu pesan tersebut terhapusa atau IP address tersebut telah di BANNED.

Mengatur Jumlah Karakter dalam Postingan dan Mengganti alamat Url dan e-mail Menjadi [link] dan [mail]

1. Klik nav Options, Lalu Klik Posting Options
2. Pada kolom Message Length beri tanda pada angka yang menunjukkan maximum message length
3. Untuk menyingkat url dan mail, pada kolom Message Options, Auto linking pilih On (Short Link)
   
   

Aktifkan PingShot, Artikel Baru Anda Akan Lebih Cepat Dideteksi

Sebenarnya ini adalah hal yang dapat dilakukan hanya dalam beberapa menit saja, namun banyak dari anda belum melakukannya. Mungkin saja anda belum mencapai fungsi sampai sejauh ini.  Apa itu PingShot? Adalah fasilitas feedburner yang berguna untuk memberi tahukan secara otomatis kepada mesin pencari dan beberapa directory ketika terjadi update feed. dalam kata lain ketika Anda membuat postingan baru.

Meski pada akhirnya mesin pencari atau dorectory akan indeks dan mengetahui sendiri, tapi ini membuat artikel Anda diketahui lebih cepat.

1. Langkah pertama silahkan kunjungi situs feedburner.com dan login dengan akun gmail Anda.
2. Lalu pilih feed yang Anda inginkan di daftar feed.

3. Kemudian klik Publicize pada tabmenu atas
4. Lalu pilih PingShot pada sidebar kiri.
5. Setelah masuk ke jendela PingShot silahakn tekan tombol Activate untuk mengaktifkan layanan ini.

Tidak sulit kan? dan berdampak positif dalam kemajuan blog anda tentunya.

Membuat Buku Tamu Melayang

Pernah tidak melihat sebuah blog yang di samping kanan atas ada gambar bertulisan Buku Tamu, yang kalau diklik akan keluar form isian yang menanyakan Nama, Website dan Message. Buku Tamu tersebut melayang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap nampak. Mau tahu caranya?

1. Sign in ke blogger dan silahkan Login dengan Account Anda
2. Pilih Layout/Tata Letak
3. Pilih Page Elemen/Elemen Halaman
4. Klik Add a Gadget/Tambah Gadget
5. Lalu pilih "HTML/JavaScript"
Kemudian Copy-Paste kode di bawah ini :

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6oS69xPi98pNArzKnb8l4KpXykeiMMIpsT4C_vBHnORa_dG3ehozSshCRBLsargnM2KaTYxMGXCSFp4H8wyC0Gsfv6xx2fDdcTaQAJaupDeB-XQNKfB1chk6fGGAmpaegfdtzvQKxKx03/') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> Letakkan disini <br/> Anda berminat buat Buku Tamu seperti ini?<br/> <a href="http://paksi-dirgantara.blogspot.com"> Klik disini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [tutup] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

6. Ganti Tulisan berwarna merah dengan kode shoutmix anda.
7. Selamat Mencoba

Memasang Stripe-Ad Di Blog Anda

Beberapa saat lalu saya berhasil memasang Stripe-ad di blog kesayangan saya ini. Jika anda belum mengetahui apa itu stripe-ad anda bisa melihat yang ada diatas blog ini. Sesuatu yang seperti navbar tersebut sangat cocok untuk mempromosikan sesuatu karena stripe-ad akan terus muncul dihalaman anda walaupun anda melakukan mouse scroll pada halaman anda. Dan anda bisa menutupnya dengan mengklik tombol ( - ) dipojok kanan atas. Stripe-ad sangat cocok untuk menampilkan satu focus informasi yang dirasa penting (bisa berupa iklan baris, pengumuman, Feed atau informasi apa saja sesuai kebutuhan).

Jika anda ingin memasangnya anda dapat mengikuti tutorial saya, seperti berikut:


1. Simpan kode dibawah ini dengan nama Stript-ad.js lalu upload ke penyimpanan file anda seperti fileave.com

var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}


2. Sekarang Masuk Pengaturan/Rancangan lalu klik edit HTML. Cari kode ]]></b:skin>. Lalu Copy Paste kode dibawah ini dan letakkan di atas kode tersebut.

/*-- (mta bar) --*/
#mta_bar{background:#58ACFA; border-bottom:2px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px;
z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);}

* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}

#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FF0080; width:65%}

#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FF0080; width:20%}

#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}

#mta_bar .right a{font-size:10px; color:#FF0080; text-decoration:underline}

#mta_bar .right a:hover{font-size:10px; color:#FF0080; text-decoration:none}

#left_bar a{background:url('http://i806.photobucket.com/albums/yy349/p4ksi/th_fb-1.jpg?t=1277134971') no-repeat; text-decoration:none; color:#FF0080; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar a:hover{text-decoration:underline; color:#FF0080}

#left_bar2 a{background: url(http://i806.photobucket.com/albums/yy349/p4ksi/th_fb-1.jpg?t=1277134971) no-repeat 2px; text-decoration:none; color:#FF0080; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar2 a:hover{text-decoration:underline; color:#FF0080}

#to_top{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGUQONMwWGKtjcABPJQ8CSEF6gG4Rks465dHjDtYzN6f_byR-wPdfsqdtyszspNN4gmobf8xkpR7lnUhlabRueKa6MCMVxS7ugFLxP0ov14m2dBGj_13NEXy6IxQk2GYKbw8ITaixzAR1/s400/delete.png) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to Larry ofhttp://blog.lroot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px}

#to_top a{padding:8px}

Catatan :
    *Kode warna merah adalah kode warna. Silahkan sesuaikan dengan keinginan anda. Lihat kode warna html di sini.
    *Kode warna hijau berfungsi untuk membuat warna kelihatan transparant. Anda bisa menghapusnya atau membiarkannya.
    *Sedangkan yang berwarna biru adalah alamt url gambar. Silahkan sesuaikan dengan kebutuhan anda.


3. Masukan kode pemanggilan JS dibawah ini, letakan diatas kode </head>

    <script src='http://www.alamatserveranda.com/Stripe-Ad.js' type='text/javascript'/>

    atau jika anda tidak ingin repot  anda bisa langsung memakai punya saya ini :

    <script src='http://p4ksi.fileave.com/blog/Stript-ad.js' type='text/javascript'/>

4. Cari kode berikut <body> lalu letakkan kode dibawah ini dibawah kode <body>


<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/profile.php?id=100000103770646' target='_blank'>My Facebook</a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://www.facebook.com/pages/PAKSI-DIRGANTARA/116725541689873' target='_blank;'>Suka Dengan PAKSI DIRGANTARA? Ayo bergabung sekarang......!!!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;paksi-dirgantara.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGUQONMwWGKtjcABPJQ8CSEF6gG4Rks465dHjDtYzN6f_byR-wPdfsqdtyszspNN4gmobf8xkpR7lnUhlabRueKa6MCMVxS7ugFLxP0ov14m2dBGj_13NEXy6IxQk2GYKbw8ITaixzAR1/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>

Cara Memasang Snap Shots Di blog anda

Nah, akhirnya saya bisa memberi Snap Shot pada blog saya. Hehe...... cukup puas juga rasanya. Tapi mungkin kalian ada yang bertanya-tanya, apa itu Snap Shot? Snap Shots adalah semacam screen shoot suatu Website ketika kursor mouse diarahkan pada suatu link (mungkin seperti itulah jawabannya hehe.....). Blogger/blogspot memang tidak memiliki fasilitas ini, namun kita bisa membuatnya sendiri.

Test Menimbang Berat Web/Blog

Kalian ingin tahu berapa ukuran web kalian, dan berapa kecepatan untuk membuka web kalian. Tenang saja. kali ini saya akan membantu kalian untuk mengetahuinya. Caranya sangat mudah, kalian hanya perlu mengetikkan alamat web/blog anda di bawah ini, lalu klik check.

Memasang Artikel Terkait Dengan Warna

Mungkin kalian belum mengetahui tentang Link Within. Link Within adalah sebuah widget yang biasanya diletakkan di bawah Artikel. Bentuknya seperti gambar dibawah ini:

Nah, di kotak tersebut berisi postingan kita yang lainnya. Jadi Widget ini mengambil secara acak artikel kita yang telah ada. Kalau sudah mengerti pasti kalian ingin mencobanya.

Cara Mengganti Icon / Gambar Adress Bar

Saat kalian membuka halaman suatu website atau blog, kalian pasti sering kali menjumpai sebuah gambar atau icon kecil yang terletak disebelah alamat web. Jika kita mempunyai halaman di blogspot, maka akan muncul icon seperti ini:


dan di sertai alamat blognya.
Bagi kamu yang sudah bosan dengan icon tersebut dapat menggantinya. Caranya pun sangat mudah sekali, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat).
kalau belum bisa membuat gambarnya ikuti langkah-langkah berikut ini :

Link Teman dengan Efek Marque

Di sini saya akan mengulas bagaimana cara membuat efek marque. Caranya sederhana, Pertama log in ke bolg anda, lalu pilih tata letak, tambah widget, klik html javascript, copas kode di bawah ini:

<marquee style="color: rgb(255, 0, 0);" direction="right" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" align="center" height="30" width="100%">

<a style="color: rgb(51, 102, 255);" href="http://YOURLINK.BLOGSPOT.COM/">LINK NAME</a><span style="color: rgb(51, 102, 255);">

<a style="color: rgb(51, 102, 255);" href="http://YOURLINK.BLOGSPOT.COM/">LINK NAME</a><span style="color: rgb(51, 102, 255);">

<a style="color: rgb(51, 102, 255);" href="http://www.paksi-dirgantara.co.cc/">Paksi Dirgantara</a><span style="color: rgb(51, 102, 255);">

</marquee>

Yang berwarna merah adalah arah gerakan marque. bisa diganti sesuai keinginan
Klik Save. Selesai, maka hasilnya akan seperti ini:


LINK NAME
LINK NAME
Paksi Dirgantara






Nah, selamat mencoba