Every blogger loves to display their talents to their visitor.The main motivation of a blogger is to busy their visitor in their posts. This also helps your visitor to get the lates posts. The main advantages of this kind of slider that it is light weight and the helps your blog to gain more page view.
Following some simple steps you can easily add Newsticker slider to your blog.
Step 1: Login to blogger.com
Step 2: From your blogger dashboard select Template and click on "Edit Html"
Step 3: Now click on any code section and press Ctrl+F from keyboard. This function allows you to find any code snippet in that page.
Step 4: Now in the search box type "<body>" or you can copy the below tag.
Step 5: Now add the following script just below <body> tag.
Step 6: Now press Ctrl+F and search </head> tag and put the following style just above </head> tag.
Any changes you want to make in in newsticker slider can be done from this style sheet.
Step 7: Now visit to blogger layout and add a widget "HTML/JavaScript"
Step 8: Add the following code in it and save it. Now drag this Widget and place below header section (You can place it anywhere in your page) for optimal use.
To change post title Just change Put "Put your xxxxx post title" with your own post title.
Don't forget to change post description in every list item section.
Hope you have successfully implemented this slider to your blog. Feel free to comment on any problems and suggestion.
Following some simple steps you can easily add Newsticker slider to your blog.
Step 1: Login to blogger.com
Step 2: From your blogger dashboard select Template and click on "Edit Html"
Step 3: Now click on any code section and press Ctrl+F from keyboard. This function allows you to find any code snippet in that page.
Step 4: Now in the search box type "<body>" or you can copy the below tag.
<body>
Step 5: Now add the following script just below <body> tag.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
function newsticker(){
$('#news-ticker-1 li:first').animate({'opacity':0}, 200, function () {
$(this).appendTo($('#news-ticker-1')).css('opacity', 1); });
}
setInterval(function(){ newsticker () }, 3000)
</script>
Step 6: Now press Ctrl+F and search </head> tag and put the following style just above </head> tag.
<style type='text/css'>
/*Newsticker by studyinfozone*/
.ticker {
width: auto;
overflow: hidden;
border: 1px solid #DDD;
margin: 0;
padding: 0;
list-style: none;
border-radius: 10px;
box-shadow: 0px 0px 5px #DDD;
font-family:Georgia, 'Times New Roman', Times, serif;
}
#ticker_02 {
height: 110px;
background: ghostwhite;
}
.ticker li {
overflow: hidden;
height: 55px;
border-bottom: 1px dotted #DDD;
padding: 5px;
margin: 0px 5px;
}
</style>
Any changes you want to make in in newsticker slider can be done from this style sheet.
Step 7: Now visit to blogger layout and add a widget "HTML/JavaScript"
Step 8: Add the following code in it and save it. Now drag this Widget and place below header section (You can place it anywhere in your page) for optimal use.
<div style="position:relative;"> <div style="position:absolute; right:-35px; top:-5px; z-index:5; font-family:Georgia, 'Times New Roman', Times, serif;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61MCZREkaCC-tCnBjNHv0Ak41gv6EFsbjcq-dfTS-IiqCi49gShCIV9PGMspawfb_j-0W0b_VyAvPfr9Ej7xH7joogb1yH3zhjlE2fA8a6touQOTzTzeg7jqT2Ar_9zpTz9sDDqjYIzw/s1600/newimage.png" /></div> <div> <ul id="ticker_02" class="ticker"> <li> <a style="text-decoration:underline" href="http://Put_your_first_post_link.html">Put your First post title</a><br /> Download this and more Blogger Templates at . For tutorials, tips and tricks about Blogger visit our Blog.» A normal paragraphEa eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam m </li> <li> <a style="text-decoration:underline" href="http://Put_your_second_post_link.html">Put your Second post title</a><br />An ImageDownload this and more Blogger Templates at . For tutorials, tips and tricks about Blogger visit our Blog.» A floating image with link and text Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora </li> <li> <a style="text-decoration:underline" href="http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects">Put your Third post title</a><br /> Download this and more Blogger Templates at . For tutorials, tips and tricks about Blogger visit our Blog.» A normal paragraphEa eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam m </li> <li> <a style="text-decoration:underline" href="http://workshop.rs/2010/02/moobargraph-ajax-graph-for-mootools/">Put your Fourth post title</a> <br />An ImageDownload this and more Blogger Templates at . For tutorials, tips and tricks about Blogger visit our Blog.» A floating image with link and text Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora </li> </ul> </div> </div>
To change post title Just change Put "Put your xxxxx post title" with your own post title.
Don't forget to change post description in every list item section.
Hope you have successfully implemented this slider to your blog. Feel free to comment on any problems and suggestion.
0 comments:
Post a Comment