Selasa, 31 Januari 2012

Show – Hide Photo


Cara membuat Show – Hide Photo di Halaman Posting pada Blog

Tujuannya untuk menghemat Halaman Posting
Tampilannya seperti ini

Lihat Photo:


Cara membuatnya:
Terletak di Halaman Posting (entri)
     1. Sama dengan petujuk cara menulis posting pada blog
     2.  Upload Gambar / Photo yang akan di Show-Hide
     3. Klik Edit HTML 
     4. Copy paste kode HTML Gambar Photo yang telah di upload
     5.  Seperti contoh di sini adalah:
          warna Hitam adalah kode untuk kotak show - Hide
          Warna merah adalah kode HTML Gambar/Photo yang telah di upload
     6.  Ganti warna merah dengan kode HTML Gambar/Photo kalian
     7.  Warna Biru adalah kode HRML Warna Biground/latar (Lihat Kode Warna  HTML di Sini)
     7. Klik TERBITKAN ENTRI


Kode HTML -nya

<div style="margin: 5px 20px 20px;">
<div style="margin-bottom: 2px;" class="smallfont">
<b>Lihat Photo</b>: <input type="button" value="View" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }"/>
</div>
<div style="border: 1px inset; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
<div style="clear: both; text-align: center;" class="separator">
<div style="background-color: #11162d; text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4f8zK7eZJO2cQuJ1C_trjA7wEEEYbUQ08ljZC5e_qEaPzW9wDiOUnMyBdxPPKssklXCH1DrHf8lDNUHRzBTNT47UcaJGIJ1entcJGjIJw9IfIJhBa2PyUgJ8VkqZq1yIUrKg_LbxkZs_R/s1600/Mausoleum-construction-debris-Mausolus-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4f8zK7eZJO2cQuJ1C_trjA7wEEEYbUQ08ljZC5e_qEaPzW9wDiOUnMyBdxPPKssklXCH1DrHf8lDNUHRzBTNT47UcaJGIJ1entcJGjIJw9IfIJhBa2PyUgJ8VkqZq1yIUrKg_LbxkZs_R/s400/Mausoleum-construction-debris-Mausolus-1.jpg" width="400" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpOscQ9CxYW1dddJIWGu-_LDBfpOUoNOF2HVkhCbM0RpmWmqFDjQaHNx4yoUBDNAxy5UVUqUzGPFvjVbD7gDdYOMW1Ql_wRqz1H7U17Ckym2SEL3A6Hzw9PaO2sIyc94NOf7bAozzQ14q4/s1600/800px-WashDCMasonic2007.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpOscQ9CxYW1dddJIWGu-_LDBfpOUoNOF2HVkhCbM0RpmWmqFDjQaHNx4yoUBDNAxy5UVUqUzGPFvjVbD7gDdYOMW1Ql_wRqz1H7U17Ckym2SEL3A6Hzw9PaO2sIyc94NOf7bAozzQ14q4/s400/800px-WashDCMasonic2007.jpg" width="400" /></a></div>
</div>
</div>
</div>
<b></b></div>
</div>

Tidak ada komentar:

Posting Komentar