After observing the about page of OLX.com, I decided to make a slider not for the image but a slider intended for the texts. You can put this technique in your about page, in your sidebar or anywhere you like. Furthermore, this innovation also adds professionalism to your works. Without much words to say, let's make a texts slider for your Blogger blog!
Recommended:
Recommended:
See the demo: How to Make Text Slider in Blogger
Put a Text Slider in Blogger Blog
Step 1. Go to Blogger Dashboard >> Edit HTML (back-up your Template)
Step 2. Find the code below,
</head>
Step 3. Just above that code in step 2, paste the code below,
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script>
$(document).ready(function(){
$('.timeline-item').first().addClass('active');
$('article.2006').slideToggle();
$('.timeline-item').click(function(e) {
e.preventDefault();
var clickid = $(this).attr('id');
var active = $('.timeline-item.active');
var activeid = active.attr('id');
if ( $(this).hasClass('active') ) {
return;
}
else {
active.removeClass('active');
$(this).addClass('active');
$("article."+ activeid ).slideToggle();
$("article."+ clickid ).slideToggle();
}
});
$(".carousel span:first").fadeIn();
jQuery.fn.timer = function() {
if(!$('.carousel').children("span:last-child").is(":visible")){
$('.carousel').children("span:visible")
.fadeOut()
.next("span").fadeIn();
}
else{
$('.carousel').children("span:visible")
.fadeOut()
.end().children("span:first")
.fadeIn;
$(".carousel span:first").fadeIn();
}
} // timer function end
window.setInterval(function() {
$('.carousel').timer();
}, 1500);
});
</script>
Step 4. Look for the code ]]></b:skin> . Above it, paste the code below,
.carousel span {
width: 50%;
font-size: 40px;
text-align: center;
position: absolute;
font-family: oswald;
left: 25%;
color:#158aee;
display: none;}
Step 5. Save your Template and you're halfway done!
Every time you want to integrate this style in your post just copy the code below,
<div class="carousel">
<span style="display: none;"><a href="http://btt-testblog1.blogspot.com/">Bloggingtipsandtrix</a></span>
<span style="display: none;">offers</span>
<span style="display: none;">Latest Blogger tutorials</span>
<span style="display: none;">tips</span>
<span style="display: none;">tricks</span>
<span style="display: none;">news</span>
<span style="display: none;">tools and resources</span>
<span style="display: none;">presented in more understandable</span>
<span class="last" style="display: none;">and easy way</span>
</div>
Customization:
Replace the italic bold texts with your own texts
You can also add link to each group of texts. See the first word Bloggingtipsandtrix as an sample.
Change also the time 1500 to speed up or slower the text to appear. The bigger the numerical value the slower it appears and smaller the numerical value the earlier it appears.
Finally, for the css above, you can change the font size 40px. Greater numerical value the bigger its size and vice versa. And the text color #158aee. Select variuos hexadecimal color for your guide.
