New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



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!
professsional texts slider for blogger


Recommended:



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.


About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, 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

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...