Creating Slide Picture Version Two In Blog
By Unknown - Friday, September 14, 2012
- Please login to the admin page of your blog through http://blogger.com/home
- Go directly to a page layout or layout, and click edit html-template
- Check mark on expand widget template
- Place the following code in 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;
}
- Put the code below the above code </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://panitah.googlecode.com/files/coin-slider.min-panitah.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 set to the appropriate size, I'll look sweet views.
- Save, then click the layout
- Add gadget html / java script then copy and paste the following code:
<div id='coin-slider'>
<a href="imgN_url" target="_blank">
<img src="layout link image" />
<span>
Image description ......
</span>
</a>
<a href="imgN_url" target="_blank">
<img src="layout link image" />
<span>
Image description ......
</span>
</a>
<a href="imgN_url" target="_blank">
<img src="layout link image" />
<span>
Image description ......
</span>
</a>
</div>
Link please change the location of the picture with your picture storage location. - Save and please enjoy the results.
Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS
0 komentar for "Creating Slide Picture Version Two In Blog"