Add Fully Customizable Scrolling Posts

Want to draw attention of your visitors on your recent posts?  Adding animations to it can help your cause. This widget exactly does the same thing . It adds a an animated scrolling posts lists. Its fully customizable. Have a look at the widget below.

 Live Demo >>

How To Install This Widget On Blogger?

• Login to blogger > Layout 
• Add a Gadget > Html/Javascript

<script type='text/javascript'> var mdWidth="100"; var mdScrollAmount="10"; var mdScrollDelay="150"; var mdDirection="left"; var mdtargetlink="yes"; var mdnumPosts="10"; var mdBulletchar =">>>";
var mdimagebullet="yes";
var mdimgurl="https://lh5.googleusercontent.com/_Ew0x_ybA53U
/TbqItqHQDjI/AAAAAAAAAk4/etWxg7lxrWk/JerryAni.gif";
var mdfontsize="16"; var mdbgcolor="FFFFFF"; var mdlinkcolor="FF0000"; var mdlinkhovercolor="3366CC";</script>
<script type='text/javascript' src='http://gj37765.googlecode.com/svn/trunk/h
tml/mddemo/making
different2.js' ></script>
<script type='text/javascript' src="http://bloggertrickszz.blogspot.com/feeds/posts/defaul
t?alt=json-in-script&callback=
mdAdvRecentPostsScrollerv3&max-results=10"
></script><a href="http://goo.gl/
yu486">Get This</a>

Customize : 

• You can change the look of the widget by changing certain values. They are highlighted in various color's. 
• Use  the color code generator  to change colors. 

• var mdWidth="100"; -  Change the value 100  to change the width of the widget
  
• var mdScrollAmount="10"; - Change the value of number of scrolls
  
• var mdScrollDelay="150"; - Change 150 to change the speed of scrolling
  
• var mdDirection="left";  - Change left to right for the scrolling to start from right hand side.
  
• var mdtargetlink="yes"; - Change to no if you don't want clickable links.
  
• var mdnumPosts="10"; - Minimum number of posts ( change 10 )
  
• https://lh5.googleusercontent.com/_Ew0x_ybA53U/TbqItqHQDjI/
  AAAAAAAAAk4/etWxg7lxrWk/JerryAni.gif - Change the link for your own custom image. Its a good idea to use your blogger favicon ( size - 36x48 )
  
• Change the font properties by changing the values below :
  
  var mdfontsize="16";
  var mdbgcolor="FFFFFF";
  var mdlinkcolor="FF0000";
  var mdlinkhovercolor="3366CC";
  
  
  Drop your comments and questions below :)

If You Enjoyed This Post Please Take 5 Seconds To Share It.

Follow @shipsocker

Stay Connected With Free Updates

Subscribe via Email