How to add animated recent post slider for blogger/auto scrolling recent post slider
(Beautiful animated recent post slider for blogger)
This automated recent post slider/featured post slider widget updated automatically when you posted on your blogs.
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot- menu-doc/Jquery.min.1.5.1.js"> </script> <script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/ 66256041/Menu/Namkna-blogspot- menu-doc/Jquery.min.1.3.js"></ script> <script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/ 66256041/Menu/Namkna-blogspot- menu-doc/script.js"></script>
- You should download the above 3 Js files and upload to your own host for long term of usage. If you don't have host, you can check this post hoặcor this post to see what to do
.main-slider{width:414px; /*the width of the left part*/ height:300px; /*the height of the left part*/ border-right:#ccc solid 1px;} .lof-slidecontent { width:710px; /*the width of the whole widget*/ height:300px; /*the height of the whole widget*/ background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;} .preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF} .preload div{ height:100%;width:100%; background:transparent url(http://2.bp.blogspot.com/- 84W1GJxu2EA/T5DJ1a3O-qI/ AAAAAAAABMQ/RN6ZLjmPiTU/s1600/ load-indicator-namkna- blogspot-com.gif) no-repeat scroll 50% 50%;} .sliders-wrapper{position: relative; height:100%; z-index:3px; overflow:hidden; } ul.sliders-wrap-inner{ overflow:hidden; background:transparent url(http://2.bp.blogspot.com/- 84W1GJxu2EA/T5DJ1a3O-qI/ AAAAAAAABMQ/RN6ZLjmPiTU/s1600/ load-indicator-namkna- blogspot-com.gif) no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; overflow:hidden;} ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;} ul.sliders-wrap-inner li img{ padding:0px; width:414px; /*the width of the image on the left*/ height:300px; /*the height of the image on the left*/ } .slider-description a{ color:#000; } .slider-description{ font-size:12px; z-index:100px; position:absolute; bottom:0px; left:0px; width:400px; /*the width of the content sumary*/ background:#000; height:100px; /*the height of the content sumary*/ padding:0px 8px 5px 8px; color:#fff; opacity:0.8; line-height:1.5em; } ul.navigator-wrap-inner h2,.slider-description h2{background:none; } .slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;} .slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff} .navigator-content {position:absolute;right:0; top:0px;z-index:9;height: 300px;color:#FFF } ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin- left:85px;color:#fff;} .navigator-wrapper{ z-index:10; height:180px; /*the height of the right posts list*/ width:310px; /*the width of the right posts list/ overflow:hidden; color:#FFF; } ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; } ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin:0px; overflow:hidden; display:block; text-align:center;} ul.navigator-wrap-inner li.active{background:url(http: //4.bp.blogspot.com/-JY_ fqYF2LRY/T3QZqbn1BZI/ AAAAAAAAAv8/cHeTRoWwN08/s1600/ arrow-bg-namkna-ngoctra.png) no-repeat scroll left center; color:#FFF } ul.navigator-wrap-inner li.active div{background:url(http://1. bp.blogspot.com/-PUT1Yred-Jc/ T3QaEk6AqYI/AAAAAAAAAwE/ YLrJP459rwk/s1600/grad-bg- namkna-ngoctra.gif); color:#FFF;} ul.navigator-wrap-inner li > div{ background:#333; color:#FFF; height:100%; position:relative; margin-left:15px; padding-left:15px; border-top:1px solid #E1E1E1; text-align:left } .navigator-wrap-inner img{ height:75px; /*The height of list thumb on the right*/ width:75px; /*The width of list thumb on the right*/ margin:8px 8px 8px 0px; float:left; padding:2px; border:#C5C5C5 solid 1px; } .button-next, .button-previous{ display:block; width:40px; color:#FFF; cursor:pointer; position:absolute; height:100%; z-index:40; top:0; text-indent:-999px; } .button-next { right:0px; background:url(http://3.bp. blogspot.com/-67hwuKSVr-4/ T3QYoBTXfvI/AAAAAAAAAvc/yth_ B5w22jw/s1600/next-namkna- ngoctra.png) no-repeat right center; } .button-previous { left:0px; background:url(http://2.bp. blogspot.com/-iZGmrZk6eIU/ T3QY3tPnpXI/AAAAAAAAAvk/ 9CXKHmlQRKU/s1600/previous- namkna-ngoctra.png) no-repeat left center; } .button-control { background:#333; position:absolute; top:10px; right:48%; height: 20px; width: 20px; cursor:hand; cursor:pointer; } .button-control span { display:block; width:100%; height:100%;} .action-start span { background:url(http://2.bp. blogspot.com/-iqqR9dcU-P0/ T3QZJvnvBwI/AAAAAAAAAvs/ BhvMIcgKTDw/s1600/play-namkna- blogspot-ngoctra.png) no-repeat center center; } .action-stop span { background:url(http://1.bp. blogspot.com/-jImuLv5abSs/ T3QZZmpJ-_I/AAAAAAAAAv0/7hO_l- JREhE/s1600/pause-namkna- ngotra.png) no-repeat center center; }
4. Save template and come back to "Page Elements"
5. add 1 HTML/Javascript and paste the below code into it
5. add 1 HTML/Javascript and paste the below code into it
<script type="text/javascript"> $(document).ready( function(){ var buttons = { previous:$('#jslidernews .button-previous') , next:$('#jslidernews .button-next') }; $('#jslidernews').lofJSidernews( { interval:5000, easing:'easeOutBounce', // name of the effect duration:1200, auto:true, mainWidth:414, //the width of the slide on the left mainHeight:300, //the height of the slide on the left navigatorHeight : 100, //the height of the post list on the right navigatorWidth : 310, ///the width of the post list on the right maxItemDisplay:3, buttons:buttons}); }); summaryposts = 30; //number of summary letters numposts = 15; //number of posts to show label = "Advanced blogger"; //change your own lable name home_page = "http://namkna.blogspot.com/"; //change to your own blog address </script> <div id="jslidernews" class="lof-slidecontent"> <script src="http://dl.dropbox.com/u/ 66256041/Menu/Namkna-blogspot- menu-doc/jqslidernews.js" type="text/javascript"> </script></div>
- In the above code, I choose the (easeOutBounce) effect, you can change (easeOutBounce) to one of the following effects: easeInOutExpo, easeInOutQuad.
- The above code will show all the reccent posts, so you do not need to care about the (label = "Advanced blogger";), cause I just added that part for those who want to show posts in a specific lable. To show the posts in a specific label, you must change this JS:
http://dl.dropbox.com/u/ 66256041/Menu/Namkna-blogspot- menu-doc/jqslidernews.js
into this JS file:
http://dl.dropbox.com/u/ 66256041/Menu/Namkna-blogspot- menu-doc/jqslidernews_label.js
Remember to change the name of label (Advanced blogger) to the label you want to show in your blog
6. Save your template- you done!.
6. Save your template- you done!.
Đăng nhận xét