Demo :
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: Wikipedia.
Note: Click on any link or the Milky Way Image auto closes the panel.
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.ddpanel .ddpanelcontent{color: white;background: black;}
.ddpanel .ddpaneltab{margin-right: 20px;font: normal 12px Arial;}
.ddpanel .ddpaneltab a{
float: right;
color: white;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElR-CJQFeW6dbCUX1FGHJZpu2zEqAr7ajyK056dYwpZZTcUtugKH3a6ZSjLG6BE3H2qLSObENJajMLhDFFETePvkA7wc1SZX9hF7iv36bMNm4dy6Pvr-bbhg1odWy7j1yQG2MIvZxozeM/s1600/Nano+Yulianto+-+Left.gif) no-repeat left bottom;
text-decoration: none;
letter-spacing: 1px;
}
.ddpanel .ddpaneltab a span{
float: left;
display: block;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheS_pFcEu2Um40Kxp0FP9EXj8nMJsHAW9dDDZK9TccV7uDnbVDGi9W56C-3w08gTNJXghN9_qJNcQwtj8pkKzUO7YlTX7DrymYP4PSLRYKZowaKtI_A6ijVsccZHK5wmv3gp8F7J-pmZ2j/s1600/Nano+Yulianto+-+Right.gif) no-repeat right bottom;
padding: 1px 12px 4px 13px;
cursor: pointer;
}
.ddpanel .ddpaneltab a span img.pointerimage{margin-top: 2px;margin-left: 5px;}
.ddpanel .ddpaneltab a:hover{color:black;background-color: #666;}
.ddpanel .ddpaneltab a:active, .ddpanel .ddpaneltab a:focus{outline: 0;}
.ddpanel .ddpaneltab a:hover span{background-color: transparent;}
Langkah kedua > Penempatan URL JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/DD%20Drop%20Down%20Panel.js"></script>
Langkah ketiga > Penempatannya kode HTML
dibawah <body>
........
diatas </body>
<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent">
<p style="padding:10px">
<img alt="Tempat lebih efisien dengan Drop Down Panel" src="https://lh5.googleusercontent.com/_NUTOdYaT1os/TUnyAcSm_QI/AAAAAAAACVM/mK03srH-ppw/s800/milkyway%20-%20Nano%20Yulianto.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/>
<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>
Diganti dengan konten anda.
Credit : Dynamic Drive
Alhamdulillah
2 comments:
Jquerynya keren..
keren bro.
nice efek
Posting Komentar