.png)
Metro Style Ticker For Blogger Posts
A ticker is basically shows the important news and entries but in our case we will be using this ticker to show the latest posts in a nice metro design attracting the visitors attention while they are watching a old post of your this will help them to find more recent and awesome posts.
Code
You can add it anywhere in your blog using the template editor or the Layout.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<style>
#headlines {
overflow:hidden;
position:relative;
line-height:25px;
background:#34495e; /* Background Color Code By Bloggeraxe */
height:45px;
padding:0 0 0 135px;
}
#headlines h3 {
color:#fff;
font-family:Oswald, sans-serif;
font-size:17px;
font-weight:400;
text-transform:uppercase;
margin-left:-115px;
margin-top:10px;
position:absolute;
}
#headlines .right_arrow {
padding:0 38px 0 110px;
display:block;
background:url(//lh6.googleusercontent.com/--o4encAx1Tc/VApRPFfbQFI/AAAAAAAALd4/kf0T7CNSvY0/s41/arrow.png) no-repeat right center;
height:46px;
line-height:46px;
position:absolute;
left:0;
top:0;
}
#ticker_post {
position:relative;
margin:0;
margin-left:20px;
height:50px;
width:auto;
}
.marquee {
width: 980px; /* Width of the area where entries are shown Code By Bloggeraxe */
overflow: hidden;
line-height: 45px;
}
.js-marquee a {
font-family:Oswald, sans-serif;
font-size:15px; /* Size of texts Code By Bloggeraxe */
color: #FFF; /* Color of text Code By Bloggeraxe */
padding-bottom: 20px;
text-decoration: none;
}
.ticker_separator {
color:#FFF; color: #FFF; /* Color of Posts Code By Bloggeraxe */
margin:0 10px;
}
</style>
<div id='headlines'>
<h3>News</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http://bloggeraxe.blogspot.com";
var numero_post = 10; // Number Of Posts Code By Bloggeraxe
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style='clear:both;'></div>
<script>
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Direction left or right Code By Bloggeraxe
duration: 25000, // speed Code By Bloggeraxe
pauseOnHover: true,
duplicated: true
});
});
</script>
.png)
0 comments: