How to Make Text Slider in Blogger

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:

How To Put Self- Animated Images And Text To Blogger

Create A CSS Image Slider With Thumbnails For Blogger

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(){
$(&#39;.timeline-item&#39;).first().addClass(&#39;active&#39;);
$(&#39;article.2006&#39;).slideToggle();
$(&#39;.timeline-item&#39;).click(function(e) {
e.preventDefault();
var clickid = $(this).attr(&#39;id&#39;);
var active = $(&#39;.timeline-item.active&#39;);
var activeid = active.attr(&#39;id&#39;);

if ( $(this).hasClass(&#39;active&#39;) ) {
return;
}
else {
active.removeClass(&#39;active&#39;);
$(this).addClass(&#39;active&#39;);
$(&quot;article.&quot;+ activeid ).slideToggle();
$(&quot;article.&quot;+ clickid ).slideToggle();
}
});

$(&quot;.carousel span:first&quot;).fadeIn();

jQuery.fn.timer = function() {
if(!$(&#39;.carousel&#39;).children(&quot;span:last-child&quot;).is(&quot;:visible&quot;)){
$(&#39;.carousel&#39;).children(&quot;span:visible&quot;)
.fadeOut()
.next(&quot;span&quot;).fadeIn();
}
else{
$(&#39;.carousel&#39;).children(&quot;span:visible&quot;)
.fadeOut()
.end().children(&quot;span:first&quot;)
.fadeIn;
$(&quot;.carousel span:first&quot;).fadeIn();
}
} // timer function end

window.setInterval(function() {
$(&#39;.carousel&#39;).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.

JavaScript Image Slider For Blogger
How To Add Responsive Slider Widget For Blogger Blog

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook