Master SEO & Link Building: Your Guide to Make Money Online: Tutorial

Scrolling News Ticker For blogger is a basic requirement of every blog. To build your blogging community more dependable it is essential that you keep your readers up to date and News Ticker is the best way of doing that. You can use the Scrolling news widget for blogger to give frequent updates to your reader in just few clicks. WordPress blog have many plug-in to create it but Blogger is not known for its plugins this is the reason why we use external source widgets in blogger. So now in this post we will follow the same style to add a Animated Scrolling JQuery News Ticker Widget in Blogspot Blogs.

Adding Scrolling News Update Headline For Blogger:

To insert MBL Scrolling JQuery News Ticker in Blogger Follow these Steps.

Step# 1: Log in to your Blogger Dashboard.

Step# 2: Layout >> Add a Gadget

Step# 3: Add Html/Javascript and just Paste the below code

<span style='background-color:#7FB51A;'>    <a href="First-Headline-Url-Here"> <font color=#ffffff> <b>First-Headline-Title-Here</b></font>    </a></span>   <b>Your-First Headline-Description</b> 

<span style='background-color:#FFAA00;'>    <a href="Second-Headline-Url-Here"> <font color=#ffffff> <b>Second-Headline-Title-Here</b></font>    </a></span>   <b>Second-Headline-Description-Here</b> 

<span style='background-color:#0088FF;'>     <b><a href="Third-Headline-Url-Here"><font color=#ffffff>Third-Headline-Title-Here</font></a></b>    </span>   <b>Third-Headline-Description-Here</b> 

</b:if></b:if>

Customization

Customize your News ticker do like this:

For First Headline:

Replace Your-First-Headline-Url-Here With the URL of your first headline post.

Replace Your-First-Headline-Title-Here With the Title of your headline post

Replace Your-First Headline-Description With the small description of your headline

To modify colors simply replace #7FB51A and #ffffff

For Second Headline:

Replace Your-Second-Headline-Url-Here With the URL of your first headline post.

Replace Your-Second-Headline-Title-Here With the Title of your headline post

Replace Your-Second-Headline-Description With the small description of your headline

To change colors simply replace #7FB51A and #ffffff

For Third Headline:

Replace Your-Third-Headline-Url-Here With the URL of your first headline post.

Replace Your-Third-Headline-Title-Here With the Title of your headline post

Replace Your-Third-Headline-Description With the small description of your headline

To change colors simply replace #7FB51A and #ffffff

To Change width of the ticker replace 520px

One thing: If you want to add more Headlines in your ticker then just before <script type="text/javascript" Add the following code and this will add one more headline in your ticker.

<span style='background-color:#7FB51A;'>    <a href="Headline-Url-Here"> <font color=#ffffff> <b>Headline-Title-Here</b></font>    </a></span>   <b>Headline-Description</b> 

Step# 4: Now Press Save button and enjoy MBL Scrolling Jquery Ticker.

That’s it, how you can add a Scrolling News Ticker For blogger. If you feel any difficulty feels free to ask us via comments.

When you click a picture or an image in a Blogger post, the picture opens up in a light box, it’s a blogger default system. also you can create a picture link , that when a user clicks on an image, a new blog or a website will open. In this tutorial, I'll describe how you adding a link to blogger image or picture.

Blogger Default Performance of an Uploaded Image.

The following image is uploaded by me and did not change anything in it. Now click it, will open in a light box:

Let's add link the above image to others blog or website.

Adding a link to an Image on blogger blog.

At First, upload an image to your blogger post. After that, click to the HTML mode of post editor.

HTML mode shows the HTML code of your uploaded image, By default. here is the code of my uploaded image:

Your code will not be accurately the same because different images have different names, sizes and position.

There will get 2 addresses or URLs in the uploaded image. For my image, these URLs are:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBkkNgKGYXMU7J2xm0Hz47aDG-y4q6eq3rYnSYxp-46zH_z8btND2pJX2LvRDyb5ctibUdjBuVOfqWMEBzBkfY-zc5lFkQdsS0Vur_iindzBshnKlWSvIXQfzADpVyQJ3QsXO3TsiWOYYl/s1600/large.jpg

There is only one change in the image URLs which is s1600 and s320. First URL with s1600 is actually the link URL. It is answerable for making this image a link. Second URL with s400 is the basis URL. It displays the image or picture.

The first URL (Address) is responsible for making image a link so, you need to change the first URL. For example, if you want to link the above uploaded image to my blog's homepage which is http://www.blogsnucleus.blogspot.com/, you will only replace the first URL of image with the URL of my blog's homepage. After that, the image code will look something like this:

Hear I've only changed the first URL. Second URL is still an image. Now, if you'll click the following image, it will take you to my homepage.

How to Make Image Link Open in a New Window or Tab?

If you're linking your image to few other blog or website, then it is a good repetition to make it open in a new window or tab. By doing this, guests will stay on your blog.

To do this, you will just add target="_blank" in the image code just after the link address. The code will look like this:

For example, just click on my image and my blog homepage will open in a new window.

Scrolling News Update Headline For Blogger | Jquery Effect

How to add a link to an Image on blogger blog.

Adding a link to an Image on blogger blog.

How to Make Image Link Open in a New Window or Tab?

More From Webworld