Ini posting pertama tentang tips-trik di blog ini, Drop Down Panel, ada yang tau tempatnya di blog ini....??? ya kalau belum tau silahkan aja klik bacaan cout yang ada di sudut kanan atas.
bagaimana bagus gaK????
nah langsung saja ke cara buatnya..
pertama simpan file berikut
- dropdownpanel.css
- dropdownpanel.js
caranya klik kanan →"open in new tab"→ "save page as" → save
nah dah itu upload file sudah kamu simpan tadi ke web hosting kamu.... disini saya menggunakan jasa layanan Ripway.com
next step
login ke blog anda klik edit html
letakkan file berikut dibawah tag "<head>"
<link rel="stylesheet" type="text/css" href="dddropdownpanel.css" />
<script type="text/javascript" src="dddropdownpanel.js">
/***********************************************
* DD Drop Down Panel- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
next step
ganti "dddropdownpanel.css" dengan url dddropdownpanel.css upluod-an kamu
ganti "dddropdownpanel.js" dengan url dddropdownpanel.js upluod-an kamu
next step
lalu letakkan script berikut sesuai keinginan kamu, sebagai contoh yang ada disini diletakkan tepat dibawah tag "<body>"
<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent">
<p style="padding:10px">
<img src="http://i36.tinypic.com/kak1t0.jpg" class="closepanel" style="float:left; width:200px; height:172px; margin:0 10px 10px 0" />The Milky Way is a barred spiral galaxy that is part of the Local Group of galaxies. Although the Milky Way is one of billions of galaxies in the observable universe,[4] its special significance to humanity is that it is the home galaxy of our Solar System. The plane of the Milky Way galaxy is visible from Earth as a band of light in the night sky, and it is the appearance of this band of light which has inspired the name for our galaxy. It is extremely difficult to define the age at which the Milky Way formed, but the age of the oldest star in the Galaxy yet discovered, HE 1523-0901, is estimated to be about 13.2 billion years, nearly as old as the Universe itself. -Source: <a href="http://en.wikipedia.org/wiki/Milky_way" style="color:white">Wikipedia</a>.
</p>
<br style="clear: left" />
<p>Note: Click on any link or the Milky Way Image auto closes the panel.</p>
</div>
<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span>Toggle</span></a>
</div>
</div>
next step
klik save
dan lihat hasilnya.
tweaking :
mengganti background dalam drop down panel.
lihat potongan script dddropdownpanel.css yang anda download tadi
.ddpanel .ddpanelcontent{ /*CSS for "content" DIV of Drop Down Panel*/
color: white;
background: black; /*background of Drop Down Panel*/
/*Do NOT add any "padding" or "margin" properties here! Any padding/margin should be added to your content's container within this DIV instead */
}
ganti tulisan black dengan "url(alamat gambar kamu)" tanpa tanda petik
selesai deh.
sumber : http://www.dynamicdrive.com
mahasiswa DBS,
