Monday, March 14, 2011
make silde show pictures on the blog
hue he he eh.....
Okey, just :
1. Please login to your blog admin page through http://blogger.com/home
2. Go directly to the page layout, or layout, and click edit html-template
3. Write a check in the Expand Widget Templates
4. Put the following code above the code ]]></ b: skin>
2. Go directly to the page layout, or layout, and click edit html-template
3. Write a check in the Expand Widget Templates
4. Put the following code above the code ]]></ b: skin>
/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
5. Put the following code above the code </ head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>
Width: 563: please adjust the width of the image you want, try to picture already be set to a proper size, let me look nice views
6. Save, then click the layout
7. Add gadgets html / java script and then copy and paste the following code:
7. Add gadgets html / java script and then copy and paste the following code:
<div id='coin-slider'>
<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Pictures Description....
</span>
</a>
<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Pictures Description....
</span>
</a>
<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Pictures Description....
</span>
</a>
</div>
Please replace the image location link with your picture storage location.
8. Save and please enjoy the results.
dendy blogs = make silde show pictures on the blog
8. Save and please enjoy the results.
dendy blogs = make silde show pictures on the blog
Subscribe to:
Post Comments (Atom)
|
Tukeran Link Yuk...! Silahkan copy kode di atas...! |
0 komentar:
Post a Comment