Spoiler cantik icon menu show hidden
Mungkin sobat bingung dengan maksud gambar di atas? saya pun juga
bingung bagaimana bagus nya memberi judul pada artikel ini he he gambar
di atas adalah gambar icon spoiler yang menyimpan data-data gambar,kode
chat atau lain nya secara tersembunyi dan akan timbul jika icon nya di
klik atau kalo ga begini maksud nya:
" Icon spoiler di atas jika di klik akan menampilkan data yang
tersimpan di balik icon nya yang terlihat seperti efek Jquery ( apa lagi
neh...)..waduh pokok nya kayak spoiler deh...!! "
Bingung ya maksud nya??? nanti jika sobat sudah mencoba akan ngerti
sendiri maksud nya he he ...kelebihan kode spoiler ini sangat menarik
untuk di tempat kan di blog kita karena bisa membuat blog kita makin
cantik dan menarik ..dan posisi icon spoiler ini pada blog bersifat
melayang di sebelah kanan atas halaman blog dengan lebar kotak nya yang
otomatis menyesuaikan gambar ,tulisan maupun kode script serta di
lengkapi dengan scroll ....
Ok..dari pada banyak basa basi yuk kita coba belajar membuat nya .....
1. Silahkan login terlebih dahulu jika sudah langsung ke layout ( rancangan )
2.klik Layout ,Tambah gadget dan klik HTML / Java script (red: kayak gambar di atas) dan Copy paste kode di bawah ini terserah di bagian gadget mana yang mau anda letakan..
Kode Icon Spoiler nya
<style type="text/css">
.gb_fixed{
position:fixed;
top:30px; right:10px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
background: white;
)repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)"
onclick="gb_showHideGB()"><b style="
background:-moz-linear-gradient(top, #051547, #999, #051547);
color:#6cec17;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;"> TUTUP CHAT FACEBOOK </b></a></div>
<br/>
DISINI KODE CHAT,SCRIPT,GAMBAR MAUPUN TULISAN
</td></tr></table>
</div>
<script src="http://gallerydunia.googlecode.com/files/shouteffect.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg049Ggp7r_G0wKlygLwNqTy0CqZAR8QThXPTT9IA9wV-fz9fF1tMiCwOrukH39aYD3eC_dhgYQ7pUschg198NMap2x3lUQ8hEgE2GmHlqUAWEDGsRG4bEDoJnyW2SAq57CiBcFtCnD4DT5/s1600/facebook+coment.png" />
</a>
</div>
Catatan modifikasi nya:
Saya akan mencoba menjelaskan tulisan-tulisan berwarna pada kode
diatas agar sobat bisa lebih mudah mengobok-obok dan memodifikasi ..kita
mulai dari tanda tulisan berwarna paling atas ya:
angka 30px @ Angka di atas untuk
mengatur tinggi rendah nya icon gambar bisa anda ganti dengan angka
40px,50px dll sesuai keinginan juragan sekalian.
angka 10 px @ angka ini untuk mengatur jarak samping icon gambar dengan batas halaman.
Tulisan White; @ ini adalah kode warna
dasar atau background kotak spoiler ..untuk merubah nya silahkan anda
pilih-pilih warna nya bisa warna red; blue; atau kode warna lain nya
yang bisa anda lihat di sini .
warna dasar spoiler ini bisa anda ganti dengan link background gambar
nah untuk background nya yang bergambar anda coba modifikasi sendiri ya
he he he
Tulisan TUTUP CHAT FACEBOOK @ tulisan
ini bisa di ganti dengan gaya sesuka anda kayak contoh : Close
Disini,Klik Tutup atau apa aja deh yang penting artinya buat nutup kotak
chat he he
Tulisan DISINI KODE CHAT,SCRIPT,GAMBAR MAUPUN TULISAN
@ nah ini isi dari spoiler nya ...disini anda bisa berkreasi bisa anda
masukan gambar,tulisan,URL,kode chat Shoutmix,kode pinkbox
yahoo,iklan-iklan atau apa aja yang anda ingin kan yang penting jangan
ayam goreng ya..wkwkw ( red : bercanda )
link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg049Ggp7r_G0wKlygLwNqTy0CqZAR8QThXPTT9IA9wV-fz9fF1tMiCwOrukH39aYD3eC_dhgYQ7pUschg198NMap2x3lUQ8hEgE2GmHlqUAWEDGsRG4bEDoJnyW2SAq57CiBcFtCnD4DT5/s1600/facebook+coment.png
@ URL link ini adalah inti icon spoiler nya...anda bisa mengganti URL
link gambar nya sesuai selera terkecuali di larang memasang foto
tetangga nya...he he maksud nya kita bisa mengganti icon nya dengan
gambar apa aja bisa kartun,tokoh masyarakat atau artis idola dan menurut
saya bagus nya gambar yang di pasang format nya.PNG karena hasil nya lebih bagus dari pada .jpeg untuk berkreasi coba anda ganti URL link nya di bawah ini..:
Kode URL nya:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufldfrIgYlKayN8UNWkWA53cZ6X0yrJ8kXTwl_-3j5NzcbdoxnCDJzDOBVCpQCp-6ezjohyphenhyphen-zUzjlSYUx9zTP5hmm4weaE0jxsWI6sZE9yHfSu1X1iJi_H5WLVEDYudD3LsZBtWrHAxd5/s1600/registrasi.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWaLzFU2bdtXRpKu2RHZyi3w34HDCfNVRtc0F5XTEvNVIqydW5Dvs8kCy1v_agyKmKH_TQtnXUru8Pc1q1zA4RtyQympx9Qngfl9DkOoKlC9bsQx-1m2ttLCI8MxHr2ladq-6G4TgTc8gV/s1600/TabGBcopy.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhse_GWHYfEw1nUsqgkbhQ5-TJ_wORWs8668f2n0GGjNPceK802xdnDrJZZ5n0BQuxmoIiI-PZUjNjhMi0xEnj33bZn1RPE7Akwi5APOdPub52ecDOcopWi_i6a53Ai__aTp0EJ026LzXa_/s1600/Teoringeblog-buku%252Btamu%252B1%252B%252878%252Bx%252B190%2529.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMAY2AkiKng5EAXjlbazMuBmWSy_aMcBk2ZGEF6s9sCZlV7MdSsMX-SvUmOpfGuhN3ldmXESsbc0PLsT-fRoBirVl5Cc9wvFwXIH2uuHwXxWc8PhLtLdSA8_niM125Ni0Rcd2gVmo19vzs/s1600/th_UpinBukuTamu.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0zI9scb2p2TWmgxPuPIp93cB87hmfnP-87cRbqdLToEBBAzehs35b09FzGv-viyZa_kmny_oWmztlSHt30bRES1ZpkUVyekrB_I6GA7sqXwAy-mIsBhy494PMa9I5ChdicVSk8p7BelmS/s1600/buku%25252520tamu.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKf5NQ6wwAYIN1lFjiH4RkE4U4sVcaP3VgEtL55zJi4L3wgajFJrDLOltvtPoBVNJHdrPwKnwZ2PViSGiTODIRl2bmwwg8H6b8b0-s8tiYNbF842hZBhKzshQMoHKyULWGL5lSrExP1wn/s1600/buku_tamu.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit7lcoVncoh329-YFBwbPv9D9YXjDCs-0tL20bWHuFNkMqIac9Ko53WBm7bSLyC2379fWcKQV55HKTgnrVXymtZMB0LRhBTCiC1ttNeGtmctJjnVbq3c8ZCIBbQ-0bEOOKcLICYseQCvBz/s1600/coment+fb.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsLTF-SCV2iFbsKYJKG3-LPxSsu-pszT5HGucONgpKIAUtH8llozDhAQlQMnvgtdjXwmOjZYGlwkoZL_Ow0Mdx4CMnoe1U4KxYogtBcLYsSmzrsKWk6DKW5PWwmg3rFZxcoc-Ml0itBLQD/s1600/contact_chat.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjeaOWww7IvXW1_B3O1PEgoYVykverdD9st1I-PVykZvXAc7ns6V27QtwMdeNCDF10ahznn_2LgFknqANUdoWGluPAkRKInUNgC61RdTZxWw3Z2aXt0hHsMteKOHY780lI9ABBd2Bw2Vnq/s1600/facebook+coment.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsPo6jTS755ckZs_xTgMeStfvVkSkolDUIotN7YCuJApceYhZkvkUdOneAyjKPN3AMhyphenhyphen7Isoq6Dmo2TfEg82T6iOHO7Jw4duxEfWFkTvKS67BYV8kzV6U1r2NINvp8LBJce6d_Cq7tUKTj/s1600/live+chat.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBroeHximZsFaCztWKtcdtJRTKHuedkobwm8ZnAYzd7y2KGDiPU6SP5nmq2TzdP197gT_AWpLU914KmllFV1MfT0sW24eioPjBGnVFK4SRPiFNy17y5ZKAexSoGAKfFJOvomzBI-E_nHcJ/s1600/live_chat.png
3. setelah selesai mengobok-obok kode nya silahkan anda simpan dan lihat hasil nya.
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar