Let's see the demo here .

When your mouse is on button "up" ,the content is scrolled up ,and when mouse is on "down " ,content is scrolled down .
To make scrolling content like this ,follow this steps :
1,Login to your Blogger account . Go to Layout . Go to Page elements .
2,Create a HTML/Javascript Widget .
Paste the code bellow into widget content :
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/easyscroll.js"></script>
<script type="text/javascript">
var speed = 5;
var height = 250;
</script>
<style type="text/css">
#easyscroll{
background:#eee;
margin:1em 0;
/* add additional styling */
}
/* easyscroll navigation buttons */
#easyscrollnav, #easyscrollnav li{
height:28px;
line-height:28px;
margin:0;
padding:0;
}
#easyscrollnav{
margin:1em 0;
}
#easyscrollnav li{
list-style:none;
float:left;
background:#eee;
margin-right:10px;
padding:0 10px;
color:#333;
cursor:pointer;
}
#easyscrollnav li.over{
color:#999;
text-decoration:underline;
background:#ccc;
}
</style>
<div id="myContent">
...........
Content
...........
</div>
in this code , variable speed = 5; is speed of scrolling and variable height = 250; is height of content widget .
..........
Content
..........
is what will be showed in Scrolling content box . So you change it to your own .
Save setting .You are done .
0 comments:
Post a Comment