Join Us : Agus Istiqlal Agus Istiqlal Agus Istiqlal Agus Istiqlal
Info dahsyat Info dahsyat
Browse » Home » Label: » Membuat scrool, spoiler dan drop down di blog

Membuat scrool, spoiler dan drop down di blog

Untuk menghemat tempat di blog tentunya kita akan menggunakan beberapa cara , diantaranya yaitu dengan menggunakan spoiler scrool atau drop down. selain menghemat tempat cara ini menurut saya juga akan mempercantik tampilan blog kita dan berikut adalah beberapa cara yang dapat anda gunakan .
1. Dengan scrool.
Dengan scrool ini pengunjung akan mudah melihat semua isi yang kita pasang di blog kita , contohnya adalah seperti ini  :

Dan berikut adalah kode yang anda perlukan :

<div id="scroll" style="border: 1px solid #cccccc; padding: 10px; overflow: auto; width: 328px; height: 200px; background-color: #FF0000;">
Script, kode html, link.
</div>
Silahkan kustomisasikan : Width dan height adalah panjang dan lebar kotak scrool sedangkan background adalah warna belakang , anda bisa mencari kode warna html semau anda .
atau anda juga menggunakan kode berikut :
<div class="widget-content">
<div style="width: 100%; height: 240px; border: 0px solid #; overflow: auto;"><ul>

kode html /script

</ul></div></div>
Kalo dengan kode ini anda hanya mengatur tinggi nya dan lebarnya akan otomatis menyesuaikan dengan tempat yang akan anda pasang.

2. Dengan Spoiler
Spoiler adalah dimana ketika diklik akan memunculkan widget atau link atau script atau apapun yang anda simpan, contohnya adalah seperti dibawah ini :


















<center><div style="text-align: center;"><div class="button-spoiler"><input value="Lihat Kode Klik Di sini" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampak&#39;; }" type="button" /></div><div class="spoiler"><div style="display: none;"><div style="text-align:center; font-size: small;"><br />

<br />








kode script/html




<right>

<br />




<br /></right></div></div></div></div></center>













Silahkan anda copy kodenya dengan mengklik spoiler tersebut

3. Dengan drop down

Drop down ini biasanya adalah untuk menyimpan sebuah link,Contohnya adalah seperti dibawah ini :


Dan inilah kode asli drop down di atas , silahkan anda sesuaikan sendiri
<div style="font-family: inherit; font-size: 1em; font-style: inherit; font-weight: inherit; line-height: 1.3em;">
<span class="Apple-style-span" style="font-size: large;"><span class="Apple-style-span" style="color: red;"><b><select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option selected="selected" value="0">Partner Link</option><option value="http://www.uprian.com/2010/05/facebook-mencari-cara-lain-untuk.html">ini sip</option><option value="http://innah-blog.blogspot.com">inah blog</option><option value="http://inimu.com/berita/tag/aneh/">inimu</option><option value="http:/www.ghufron.com/">gufron dot com</option><option value="http://juhayatpriatna.web.id/cara-verifikasi-blog-di-google-webmaster-dengan-meta-tag/"> Seo</option><option value="http://melodanta.com/agar-feed-networkedblogs-terpublikasikan-di-wall-secara-otomatis.html"> melodanta</option><option value="http://www.duniakita.info/"> dunia kita</option><option value="http://www.abizmal.co.cc/2010/08/kunang-kunang-cahaya-dan-eksotisme.html/"> sumber 1</option><option value="http://www.blogodolar.com/bagaimana-saya-mempromosikan-blogodolar-dalam-3-bulan-pertama/"> blogger</option><option value="http://www.ihsanfirdaus.com/10-website-alternatif-google-adsense/"> ihsan firdaus</option><option value="http://www.masizan.co.cc/"> maz izan</option><option value="http://www.klipberita.com/"> klip berita dot com</option><option value="http://bang-koko.blogspot.com/"> bang koko</option><option value="http://www.inilah.com/"> inilah dot com</option><option value="http://azenngepas.blogspot.com/"> Sumber</option><option value="http://ninetyoneerz.blogspot.com /"> urang kampung</option><option value="http://wilzdownload.blogspot.com/"> wilzdownload</option><option value="http://www.vahray.co.cc/"> Vahray Site&nbsp;</option><option value="http://www.masbugie.com"> mas bugie</option><option value="http://rambutkribo.blogspot.com/"> si kribo</option><option value="http://www.gotbloggers.co.cc/"> gotbloggers</option><option value="http://rambutkribo.blogspot.com/"> si kribo</option><option value="http://mahadesain.com"> mahadesain</option><option value="http://sekolahdi.blogspot.com/"> catatan sekolah</option><option value="http://zikriyahya.blogspot.com/"> zikri yahya</option><option value="http://kangtiar.blogspot.com/"> kang tiar</option><option value="http://www.shalimow.com/">shalimow/</option><option value="http://www.blogmamet.com/"> blogmamet/</option><option value="http://www.bannerfans.com"> banner/</option></select>

Demikian tutor singkat saya kali ini, semoga bisa membantu anda untuk menyesuaikan dan mendinamiskan tampilan blog anda , terima kasih, salam blogger

--- Share Yaa Bro ----
Artikel Yang Lain :
Isi Lengkap Blog Ini Lihat :Daftar Isi Blog
Hubungi saya jika Anda menemukan konten yang rusak, aneh atau tidak berhasil Anda terapkan. Silahkan beritahu kami dengan klik : Contact Me! . Kami akan berusaha membalas atau memperbaiki konten secepatnya. Terima Kasih.

8komentar:

Post a Comment

--------------- IKUTI BLOG INI --------------