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



How to Add Professional Text and Image Slider In Blogger


Marquee is one of the best tools to use if you want to make a text and image slider in your Blogger blog. In this post I will show on how to use this marquee tool in two different ways. First is we will make your texts slide from right to left and pause it as the mouse passes over (hover) it. Second is we will use images that slide  from right to left, pause it when mouse hover at the center part of the frame and it moves fast upon putting the mouse cursor near at the left side of the frame.
 professional text and image slider for blogger

Demo: Make Text and Image Slider Using Marquee

You may also browse some of  the posts that talks on Image Slider:

How to Make  Text Slider Using Marquee In Blogspot


Step 1. Go to Blogger Dashboard >> Template (back-up) >>Edit HTML
Step 2. Look for the code below,

</head>

Step 3. Just above that code in step 2, place the code below

<script src="https://bloggingtipsandtrix.googlecode.com/svn/marquee_slider.js" type="text/javascript">

Step 4. Save your template and your partly done
Step 5. Go back  to Blogger Dashboard >> Post or New Post
Step 6. Switch your Blogger Post editor page to HTML mode and then paste the code below for the text slider style,


<div class="slider_text" id="marqueetext"> Bloggingtipsandtrix is happy to serve you. Bloggingtipsandtrix  is happy to serve you.  Bloggingtipsandtrix  is happy to serve you. Bloggingtipsandtrix  is happy to serve you. Bloggingtipsandtrix  is happy to serve you.
</div>
<script type="text/javascript">
marqueeInit({
 uniqueid: 'marqueetext',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
    'width': '100%',
    'height': '1.6em',
    'color': '#fff',
    'background-color': '#158aee',
    'font-family': 'sans-serif',
    'margin': '0 auto'},
      inc:1, //speed - of marquee slider.
 });

</script>

Step 7. And for the image slider, copy the code below and paste it in your Blogger post editor's page (HTML mode)
<div class="marquee_slider" id="marqueeimage">
<a href="##########" target="_blank"> <img src="***** " /> </a>
<a href="##########" target="_blank"> <img src="*****" /> </a>
<a href="##########" target="_blank"> <img src="***** " /> </a>
<a href="##########" target="_blank"> <img src="*****" /> </a>
<a href="##########" target="_blank"> <img src="***** " /> </a>
<a href="##########" target="_blank"> <img src="*****" /> </a>
<a href="##########" target="_blank"> <img src="***** " /> </a>
<a href="##########" target="_blank"> <img src="*****" /> </a>
</div>
<script type="text/javascript">
marqueeInit({
 uniqueid: 'marqueeimage',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
    'width': '400px',
    'height': '100px',
    'color': '#fff',
    'border-top': ' 5px dashed white',
    'border-bottom': ' 5px dashed white',
    'border-left': ' 0px dashed white',
    'border-right': ' 0px dashed white',
    'background-color': '#158aee',
    'font-family': 'oswald',
    'margin': '5px auto'},
 inc:1, //speed - of marquee slider
 mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
 moveatleast: 4,
 neutral: 150,
 savedirection: true
});
</script>

Customization:

Replace the sign ########### with the link (url) you desired
Change the sign *****  with your image link.
Change 400px  and 100px with your preferred  image width  and height
Replace #158aee with another hexadecimal color.
Change border styles with your own and its numerical value, the bigger the number the larger its size
Change 1 to much higher number to speed up the movement of the slides.

Step 8. Save your work and your done pal. Congrats!



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


Express yourself!
2 comments : Post Your's Buddies!

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...