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/AVvXsEjBXYNl4JEuSXMzeX83aglTw7gBZAS2opJQJ7OMVwuwjzCSQGcRimmheOo7tM6PlLW8kbXexYFS4PApsEtxsybH5JA9kRaJT4yebmfRCuN9KFFKTaZpRStlKAYG-pjl3j60jjC_dXUMAQqU/s1600/facebook+coment.png" />
</a>
</div>
.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/AVvXsEjBXYNl4JEuSXMzeX83aglTw7gBZAS2opJQJ7OMVwuwjzCSQGcRimmheOo7tM6PlLW8kbXexYFS4PApsEtxsybH5JA9kRaJT4yebmfRCuN9KFFKTaZpRStlKAYG-pjl3j60jjC_dXUMAQqU/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/AVvXsEjBXYNl4JEuSXMzeX83aglTw7gBZAS2opJQJ7OMVwuwjzCSQGcRimmheOo7tM6PlLW8kbXexYFS4PApsEtxsybH5JA9kRaJT4yebmfRCuN9KFFKTaZpRStlKAYG-pjl3j60jjC_dXUMAQqU/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/AVvXsEjr_tC_6q_zYBnLLsRtSrMV5JXOjtBeyfVwcYWYsqQpgJSvqmygJK6xDHlkCWg1X7vCpkocRwgbNChRJR9cXdV95dTdiBEJx4WnMFzWgIqR9FTGE2LkTAaGB_9pdTbbfs-AdWEt5_QbuAMm/s1600/registrasi.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
Kode URL nya :
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYdbYtbpOVA0fUx5pDfGpDWkYRamWRpxqtSxrznwJyw9cBlmwkXoDpiNdkMDCx2svv3JXyoqQiUph9pEDVybptOVAFuoBpaoxcSq6z8W9ZWXtcEjenkU_m82HU48PnDg14uA7jr3KJwLM/s1600/buku%25252520tamu.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
Kode URL nya :
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWKOb_iOFp6qJmCoYPxiknrhC5FjHX4qdmR6Tr_ILrckv5CR8GciuMBlNeO_t3oBYrprj2f05yT0-hKMUkycu4A8EB6PJQbUhsrXY3RcXMO48sMzlUw4GJSk7IhsyaUhZHk-mV4VRInmj/s1600/live_chat.png
3. setelah selesai mengobok-obok kode nya silahkan anda simpan dan lihat hasil nya.
Akhir nya rampung juga neh....dan tambah lagi cendol untuk mempercantik blog kita he he walau sempet neh kepala di kelilingi 8 bintang dan semedi selama 3 hari sampai ga mandi-mandi takut ilmu nya luntur ho ho ho untuk mencari wangsit akhirnya terbalas sudah dengan hadir nya artikel ini...dengan berbagi nya pengalaman ini semoga bisa menambah wawasan kita dan saling belajar tentang dunia blogger tentu nya agar bisa lebih maju dan kreatif dalam mendesain blog...
Jika ada kesulitan silahkan sediakan kopi nya..eh salah komentar nya di bawah ini dan di tunggu hasil kreasi dari para sobat sekalian yang tentunya akan lebih menarik dari pada ini...wassalam
0 komentar:
Posting Komentar