Cara membuat spoiler atau tombol sembunyi12

Cara membuat spoiler atau tombol sembunyi

 Halo sobat evanzip...wah udah lama bgt ya evanzip nga update postingan maklum sob, evanzip ahir ahir ini sedikit sibuk hehehe,sebelum nya evanzip sudah jelaskan cara membuat pojok kanan atas Blog melipat dan untuk Tutorial kali ini evanzip akan jelaskan cara membuat tombol spoiler atau tombol sembunyi pada postingan blog. Tombol spoiler atau tombol sembunyi pada blog mudah saja kita buat, hanya perlu menambahkan perintah tertentu agar menyembunyikan kontennya lalu menampilkannya jika tombol tersebut diklik. Dari pada sobat bingung Berikut evanzipkasih contoh nya:

Contoh Spoiler :

Klik Disini

piZap.com free online photo editor

nah itu lah contoh nya sob,kalau sobat ingin spoiler seperti itu silahkan sobat ikuti langka2 berikut ini
1. Login ke dashboar blog sobat => Buat postingan, pilih pada mode Edit HTML

2. Copy code berikut, paste dipostingan sobat. 

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Klik Disini</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Isi Spoiler sobat disini, boleh gambar, code dll

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

• Ganti tulisan warna Merah, dengan tulisan yang sobat inginkan, bisa berisi penjelasan atau hanya sekedar "klik untuk melihat", tapi jangan dihapus nanti gak berfungsi spoilernya.
• Kemudian sobat ganti tulisan biru dengan isi spoiler sobat, misalnya gambar sobat.

 3. Publikasikan dan lihat hasil nya

Selamat Mencoba Semoga Berhasil

Kritik Dan Saran sobat Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

Baca Selanjutnya...

Membuat Pojok Kanan Atas Blog Melipat32

 MEMBUAT POJOK KANAN ATAS BLOG MELIPAT

halo sahabat evanzip....wah sudah lama banget evanzip nga update postingan blog,maklum sob sibuk cari sesuap nasi dan segudang berlian....:^_^ baik sobat evanzip, Tutorial kali ini evanzip akan menjelaskan cara memasang pojok kanan atas blog melipat yang sebelum nya evanzip sudah jelaskan cara pasang screen saver Blog dengancss3.mungkin sobat evanzip penasarankan seperti apa pojok kanan atas Blog bisa melipat???? evanzip akan jelasakan dulu cara kerja nya ,sobat cukup arahkan kursor mouse sobat  tepat di pojok kanan atas maka secara otomatis blog kita akan ter buka/terlipat kalau sobat masih penasaran silahkan sobat lihat dulu demonya:

    

KLIK DI SINI

contoh gambar

evanzip sarankan untuk sobat blogger bisa bergabung dengan member HTC seperti blog evanzip untuk script nya sobat tinggal copas script berikut:

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )


Pasang Kodenya Di Bawah ini di atas kode </head> :


<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

dan kalau  sobat  mau tampilan gambar yang lain silahkan ikuti langkah langkah berikut ini:

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik Edit HTML.
4. Klik Expand widget template.
5. Cari kode <b:skin><![CDATA[
6. Kalau sudah ketemu copy kode dibawah ini diatas kode <b:skin><![CDATA[
   

<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

7.Lalu cari lagi kode ]]></b:skin> Dan letakkan kode berikut tepat di atasnya.

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUpV2TrEoEvPQYROvLaGPRz9-jBwCNMIKbjCc7TH0OGzbRY5b77uiJ76_y0uLuAzxOigvTIrKVIddWKvMII3ADzZ6MirsKYTtRx1UU3LkAqplqJIK6KW8-EB6QLp2rcPCEVthfS0tWM84/) no-repeat right top;
text-indent: -9999px;
}

8. Lalu cari lagi kode <body> Dan letakkan kode berikut tepat di dibawahnya. <div id='pageflip'>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger'target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bJy2xd0LAwMw1U0CWDYOm6_TqbKTih-qeN1sBjdCuSdbtNml3uL5NFCTHuSFQGJBzo6NKTCrE2VVMYbQcljX0d-hkr-4f-kj_30FYo5EUgSI6YbMBrIaZBclcu8HfVhnAaJo-ivFDNpD/'/>
<span class='msg_block'/>
</a>
</div>

9. Anda bisa mengganti warna  merah dengan Link yang anda inginkan. Saran saya Link RSS atau link berlangganan.

10 Simpan template.

1.Selesai

1. Untuk mengganti gambar dinding, sobat bisa mengganti URL berikut :
   #pageflip .msg_block {

   width: 50px; height: 50px;

   position: absolute;

   right: 0; top: 0;

   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUpV2TrEoEvPQYROvLaGPRz9-jBwCNMIKbjCc7TH0OGzbRY5b77uiJ76_y0uLuAzxOigvTIrKVIddWKvMII3ADzZ6MirsKYTtRx1UU3LkAqplqJIK6KW8-EB6QLp2rcPCEVthfS0tWM84/) no-repeat right top;

   text-indent: -9999px;

   }

   
   
   
   

   SELAMAT MENCOBA SEMOGA BERHASIL

   
   

Kritik Dan Saran Sobat Sangat Membantu evanzip Dalam Menulis Artikel Pada Tutorial Berikutnya

Baca Selanjutnya...

Screen Saver Blog dengan Css328

Screen Saver Blog dengan Css3

hallo sobat evanzip mgn kabar nya???? wah dah lama juga ne nga update postingan maklum sob sibuk...:D

baik sobat evanzip sebelumnya evanzip sudah menjelaskan cara update status FB via BlackBerry dan untuk Tutorial kali ini evanzip akan membuat postingan cara membuat Screen saver css3.Screen saver Css3 akan muncul /tampil pada blog pada saat Mouse kita diamkan dan pada saat mouse kita gerakkan maka kita akan kembali  lagi pada halaman yang tadi.

penasaran kan sobat, silahkan lihat  dulu demonya :

DEMO

 

 

nah gimana sobat evanzip tertarik mau buat screnn saver css3 di blog sobat silahkan ikuti langkah berikut ini:

1. Login Ke Akun Blog Sobat
2. Pada Dasbor Klik Rancangan=>> Kemudian Tambah Gadget Dan Pilih HTML Java/Script
3. Pastekan Kode di bawah ini Tepat Didalamnya

<style type="text/css">body .saving{position: fixed;width: 100%;top: 0;left:0;height: 100%;opacity: 0.98;filter: alpha(opacity=98);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";background: #000;border-bottom: 3px solid transparent;z-index: 999999;-o-transition: all 3s ease-in-out 10s;-moz-transition: all 3s ease-in-out 10s;-webkit-transition: all 3s ease-in-out 10s;}body:hover .saving {opacity: 0.0;height:0.001%;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";background: #0a7f01;border-bottom: 5px solid #333;-o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;-moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;-webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;}body .saving p.esm1{margin: 0;padding: 0;width: 92%;background: transparent;font-size: 100px;font-family: "Serif", Times New Roman;color: #FF0000;text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40,   2px -10px 10px #f10;position: relative;margin-top: 200px;line-height: 20px;font-weight: bold;text-align: center;border: 30px solid transparent;border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s;-moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;-webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s;}body:hover .saving p.esm1{font-size: 10px;color: red;width: 25%;margin: 340px 0 0 300px;padding: 25px;background: #aaa;border: 20px solid #888;border-radius: 170px;-moz-border-radius: 170px;-webkit-border-radius: 170px;-o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in;}.saving p span.esm2{font-size: 18px;opacity: 0.5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";display: block;text-align: center;width: 300px;margin: -10px auto; font-weight: normal;padding: 2px 8px;background: #000;border: 1px solid #333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;color: #0000FF;text-shadow: none;font-family: Arial, Helvetica, sans-serif;-o-transition: 1s ease-out;-moz-transition: 1s ease-out;-webkit-transition: 1s ease-out;}.saving:hover p span.esm2{font-size: 10px;width: 200px;padding: 0;}.saving p span.esm3{color: #ccc;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background: url http://i964.photobucket.com/albums/ae124...) left center repeat-x;background: -moz-linear-gradient(top,#666,#111);background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666));opacity: 0.6;filter: alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";width: 250px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius: 4px;padding:2px 10px;-moz-border-radius: 4px;-webkit-border-radius: 4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_evanzip{margin-left: 30px;text-align: center;color: #015828;font-size: 12px;font-weight: normal;position: absolute;bottom: 30px;width: 100%;height: 20px;left: 0;}.saving .by_Tejahtc span.esm4 {color: #aaa;font-style:italic;font-size:14px;font-weight:bold;text-transform:uppercase;}#recpost {width:210px;overflow: hidden;height: 327px;float: right;margin-top: 10px;padding: 4px 2px;background: transparent;border: 1px solid transparent;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-webkit-transition: all 1.5s ease-out;}</style>

<div class='saving'>

<p class='esm1'>Evano Saputra<br/>

<br/><div class='by_evanzip'>Original design by: <span class='esm4'> Evanzip.blogspot.com - Evanzip.blogspot.com</span> -  2011</div>

</p>

<center><span class='esm3'>Move your mouse to go back to the page!<br/><blink>Hey...jangan pergi dulu gerakin aja lagi mousenya,nah gitu dong!</blink></span>

</center></div>

4.Ubah nama warna kuning dengan nama sobat

5.Simpan

SELAMAT MENCOBA SEMOGA BERHASIL

Kritik Dan Saran Sangat Membantu evanzip Dalam Menulis Artikel Pada Tutorial Berikutnya

Baca Selanjutnya...