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.

Demo: Make Text and Image Slider Using Marquee

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

• CSS Image Slider with Thumbnails


• Javascript Image Slider


• Add Responsive Widget Slider


• Make Text Slider


• Add a Tiny Circle Jquery Slider


• Professional Image Slideshows with Jquery

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:

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