Showing posts with label design. Show all posts

Thursday, 29 November 2012

Membuat Spoiler (Show/Hide pane) di Post

Posted by Adi Fahmi, on 7:51 am



1.  Spoiler dengan Border Tanpa Background.
 
Kode :
<div id="Spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Lihat lagi'; }" name="button" type="button" value="Nama Spoiler" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><p style="text-align: justify;">Masukkan teks yang ingin disembunyikan disini</p></div><div id="Tutup"></div></div></div>

Hasil :

  
2.  Spoiler Show/Hide dengan Border Tanpa Background

Kode :
<div id="Spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Lihat lagi'; }" name="button" type="button" value="Nama Spoiler" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><p style="text-align: justify;">Masukkan teks yang ingin disembunyikan disini</p></div><div id="Tutup"></div></div></div>


Hasil :

Sunday, 30 September 2012

Membuat 'Read More...' / 'Baca Selengkapnya' Pada Post di Blog (Versi Sederhana)

Posted by Adi Fahmi, on 8:59 pm


Kali ini gw akan share cara membuat 'Read More ... ' / 'Baca Selengkapnya' pada blog, tapi ini versi mudahnya, gk perlu pake edit html scrip segala, cukup 1 - 2 klik saja :D .

 Tujuan nambahin 'Read More ... ' / 'Baca Selengkapnya' supaya blog kita di lihat orang lebih rapih dan lebih ringan load page-nya.

Apalagi kalo blog lo isinya banyak gambarnya (kayak punya gw) kasian kalo orang harus ngload seluruh gambar padahal dia cuma pengen liat salah satu postnya doang.

Langsung aja ini caranya bro :

     1. buka blog lo, trus masuk ke Desain di pojok kanan



     2. di sebelah kiri, pilih tab post trus pilih edit di post yang mau di bikin 'Read More ... '
         / 'Baca Selengkapnya'


Sunday, 23 September 2012

Segarkan Tampilan Windows dengan Skin Pack

Posted by Adi Fahmi, on 9:15 am
 


Bosan dengan tampilan Windows-lo ?
Pengen ganti tampilan secara keseluruhan ?
Pengen gonta-ganti tema ?

 SkinPack™ solusinya :D

 biar lo pada tertarik, berikut ini gw kasi beberapa contoh Windows yang telah bertransformasi menggunakan SkinPack
Android Jelly Bean Style

 
Subscribe to: Posts ( Atom )