Improved Headlines Widget for Blogger Blogs

Tweet

 

As mentioned in a previous post, adding a headlines widget to your web page is a cool and easy way to let your readers know at a glance what your recent blog entries are about. It is also a good way to attract attention and to encourage the reading of recent posts.

Code

<script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswidgetv1.js'></script><script style='text/javascript'>var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 90;</script><script src='http:// YourOwnBlog.blogspot.com /feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>

Installation

1. Sign in to your Blogger Dashboard --> Design --> Page Element --> Add a Gadget --> HTML/JavaScript.

2. Copy and paste the code into the new HTML/JavaScript.

3. In the code, look for the line:

…src=”http://YourOwnBlog.blogspot.com/feeds/posts/default….

and replace the blog address (shown in color blue below) with your own blog address:

…src=”http://YourOwnBlog.blogspot.com/feeds/posts/default.…

For self-hosted blogs:

…src=”http://www.YourOwnBlog.com/feeds/posts/default….

4. Add a title (optional).

5. Save.

Layout

Headlines are usually placed at the top of the web page. For your Blogger blog, go to your blog’s Design page, drag your Headlines Widget and place it above the Blog Posts box. Do not forget to click SAVE!!

Customization

You can change the number of posts shown by changing the value in green.

If you do not want the post date to be shown change var showpostdate = true to var showpostdate = false.

If you do not want a summary of your posts to be shown change var showpostsummary = true to var showpostsummary = false.

You can change the number of characters shown in the summary by changing the value of var numchars = 90 (between 80 – 120 is recommended).

Good luck!

 

Related articles:

Recent Posts Widget for Blogger

Recent Posts Widget with Thumbnails for Blogger

How to Post Larger (Especially HQ) Images in Blogger Posts

Tweet

 

In this post I am going to show you how to post extra large images in blogger posts. :-)

This is one of the most searched for Blogger hacks. It makes it possible to post big size pictures in Blogger posts.

Normally, If you upload a large image to Blogger(with large thumb size selected), it will automatically resize it and then post it as thumbnail . Moreover, the quality of the resized image is very poor. So, if you want make your images look cleaner and sharper, this trick will come handy.

Normally Uploaded Image (with large thumbnail selected):

Image after applying the hack:

Here is how to do this:

1. Calculate how large you want the displayed image to be (normally, the size will be just a bit less than your main body width). Suppose the main body width is about 560px. So, the maximum width for a large image is 560px. But to make the image looks nice, we have to give some padding to it. Therefore you might want to choose a width which is a bit less than the post body width, for instance 550px.

2. Sign in to Blooger, then go to Dashboard --> Design --> Edit HTML.

Find (Ctrl + F) the line:

]]></b:skin>

Add the following code before that line:

img {
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
}

Change the value in blue depending on the calculations made in the previous step.

Important: Please check if you have the img{ tag already in your template. If its there, just add the additional couple of lines to it.

max-width: 560px;
width: expression(this.width > 560 ? 560: true);

3. Save the changes.

4. Now, while doing your posts, upload the images like you did before. Once the image is uploaded, go to the Edit HTML tab. There you will find that the image code looks something like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 280px; height: 400px;" src="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

All you have to do is remove the text in green (width and height attributes) and change s400 to s800.

The final code should look like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

That´s all! Now your uploaded image will look big in the post.

Good luck!

Scrolling Text (Marquee) HTML Codes for Blogger

Tweet

 

In this post I am going to explain how you can add Scrolling text (also known as marquee) to the sidebars, post, etc. of your Blogger blog.

Another way to attract visitors to your blog or some of ist pages is adding some decoration to like scrolling text,etc. But do not overdo this, especially if your site contains a lot of of text as this irritates and spoils the concentration of the reader.You can add scroll bars to tell your visitors what will be your next updates, popular posts, advertisements, etc. Scrolling text works especially good for headlines.

How to add scrolling text to your blog

1. Adding simple scrolling text:

Here is the code to add a simple scrolling text that moves from right to left:

<marquee>code to simple scrolling text</marquee>

The output will look like this:

code to simple scrolling text

If you want something a bit more fanciful, then try this:

2. Add a background color to the text:

<marquee bgcolor="#99CCFF">code to simple scrolling text</marquee>

code to simple scrolling text

You can easily choose your background colour by replacing the hexadecimal code (#99ccff).
Click here to see the codes of the different colors or create your own.

3. Here are some more attributes to you can change:

direction="left"
direction="right"
direction="up"
direction="down"

The above attributes tell the text in which direction to scroll.
Use the code below:

<marquee direction="right" bgcolor="#99CCFF">code to simple scrolling text</marquee>

Here are some examples:
Scrolling to the right:

code to simple scrolling text

Scrolling up:

code to simple scrolling text

Scrolling downwards:(Note: I changed the hexa decimal codes for different colours)

code to simple scrolling text

4. And a few more attributes:

You can add this attribute to alternate the text:

behavior="alternate"

Here is the code to do this:

<marquee behavior="alternate" direction="down" bgcolor="#33FFCC">code to simple scrolling text</marquee>

code to simple scrolling text

You can also set the speed of the text with this simple attribute:

scrollamount="2"

The lower the scrollamount value, the slower it moves.
Here is the HTML code for this:

<marquee
behavior="alternate" direction="left" bgcolor="#9999CC"
scrollamount="2">code to simple scrolling text</marquee>

(scrollamount =2):

code to simple scrolling text

(scrollamount=5):

code to simple scrolling text

5. Pausing the text when mouse hovers over the text:

This is very useful when the reader wants to read the text, and the scrollamount is high. Readers can put the mouse over the text to pause the text to read it.

Here is the code:

<marquee behavior="alternate" direction="left" bgcolor="#CCCCCC"
onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2"
scrolldelay="50">  code to simple scrolling text</marquee>

code to simple scrolling text

(place the mouse over the text to test it)

6. Changing the text colour:

Here is the code to change the text colour (Add it before the marquee tag):

<span style="#FFFFFF">

So, the code looks like this:

<span><marquee
onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"
bgcolor="#cccccc"><br /><br />code to simple scrolling
text<br /><br /></marquee>

code to simple scrolling text

7. Here is the most important and most useful one, adding hyperlinks in the scrolling text.

Hyperlinks are links that, when clicked, take you to another location (site).

Let's see how to add hyperlinks to the scrolling text. Adding hyperlinks that open in the same window:

Here is the sample code:

<marquee behavior="scroll" direction="left" bgcolor="#99FFFF"
onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
    <a href="url#1">LINK#1</a>  <a
href="url#2">LINK#2</a>  <a href="url#3">LINK#3</a>
  </marquee>

NOTE:Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target url addresses.

If you want the links to open in new window, use the following code:

<marquee behavior="scroll" direction="left" bgcolor="#99FFFF"
onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
    <a href="url#1">LINK#1</a>  <a
href="url#2">LINK#2</a>  <a href="url#3">LINK#3</a>
  </marquee>

That's all!

Now you can add the scrolling text of your choice to the sidebar, in the blog post, or where ever you want it to appear.

To put scrolling text in the sidebar of your Blogger blog, simply sign in to your Blogger account --> Dashboard --> Design --> Add page element. Then paste the code in HTML/JavaScript and save the changes .

If you have any questions, please leave a comment.

Good luck!

How to Upload Your Javascript Files to Blogger – Bonus: Unlimited Bandwidth!

Tweet

 

In this post I am going to explain how to host JavaScript(.js) files in Blogger itself, so you do not need to worry about bandwidth limitations, page speed, etc.

„How to host Javascript files for Free with unlimited bandwidth?“ is one of the most frequently asked questions in the blogger community. There are tons of hosting providers out there who can help you host your .js files for Free, but all have some bandwidth limitations and also they are not very reliable.

In a previous post I expained how to use Google Sites to host your JavaScipt files for free. I used that method to host JavaScript files of my previously used magazine style Blogger template „Falkner Press „ but there is one small problem: even Google Sites have bandwidth limitations. So, if the bandwidth exceeds at a particular moment, the JavaScript files won't load, which results in complete template mess up.

If you happen to have those kind of problems (or don´t ever want to encounter them), there is a simple trick.

I'll take Falkner Press template JavaScript files as an example. If you look at the top of the template code, you see something like this:

As you can see, there are three JavaScript files (highlighted with different colors) in the template. These files are hosted at Google Sites.

Now what?

1. Copy each of those three links and paste them in your browser, then download those three files.

2. Open each file with Wordpad (not Notepad) and copy the code shown.

3. Now, here comes the trick... Paste the code you copied (from first file) in your Blogger template like this:

<script type='text/javascript'>
//<![CDATA[
PASTE THE JAVASCRIPT CODE HERE
//]]>
</script>

What if you have 2 or more JavaScript files (like the Falkner Press template)? Easy! Just repeat the process described above... like this:

4. Save the Changes.

That´s all!

Advantages of this trick:

» No file size limitations
» No bandwith limitations
» Super fast page loading (because files are stored within Blogger itself)

Do you like this neat little trick? Leave a comment.. :)

Good luck!

 

Related article:

How to Host Javascript Files for Your Blogger Blog for Free

How to Share AdSense Revenue In Blogger Blogs

Tweet

 

In this post I am going to show you how to implement the Google AdSense Revenue sharing feature in Blogger (blogspot) blogs.

Do you run a Blogger blog which is controlled or contributed to by multiple authors? Are you looking for a way to share revenue with your co-authors? If so, this nice Blogger trick is an elegant solution to this problems.

What is AdSense Revenue Sharing?

Let us assume you are the administrator of a Blogger blog which has a number of guest authors. If you want to share the revenue with them, normally you would divide the total revenue based on the Post count or Pageviews. But most of the time this will not nearly be accurate because CPC and CPM varies from post to post depending on the keywords, etc. So, it may not encourage the members of your team to post more stuff :(

Fortunately, there is an easy solution. With this cool trick you can share the blog revenue with the other writers more precisely because everyone will get his or her own ad displayed in all the posts he/she does.

How to add the AdSense Revenue Sharing Feature to your Blogger blog

[For this example, let us assume the blog has 3 authors - John, Ricky and Britney]

1. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Tick the „Expand Widget Templates“ box.

3. Using this trick, you can insert the ad anywhere you want inside the post body. In this example, I'll show you how to add it inside the blog post (between post title and post body).

Find the following line of code:

<p><data:post.body/></p>

and paste the below code right before said line:

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "John"'>
PASTE THE AD CODE OF JOHN HERE
</b:if>

<b:if cond='data:post.author == "Ricky"'>
PASTE THE AD CODE OF RICKY HERE
</b:if>

<b:if cond='data:post.author == "Britney"'>
PASTE THE AD CODE OF BRITNEY HERE
</b:if>

</b:if>
<br/>

Replace the names with the names of the authors of your blog (Case sensitive).

4. Do not Copy and Paste the AdSense code directly in the template. First, go to this Blogger Ad Code Converter page and paste your AdSense code in the box provided, then click on „Convert Ad Code“. Now, copy that code and paste it in the template.
(Look at the screenshot below.)

5. Save the changes.

That´s all!

From now on, each member of your blog can monetize their posts with their own AdSense ads. Happy Blogging :)

Note: You can use the same hack for ads from other advertising networks (AdBrite, BidVertiser, etc.) as well.

Good luck!

How to Make Your Blogger Blog Ready for Mobile Phones/Devices

Tweet

 

As you know, millions upon millions of people use their mobile phones to access the Internet. This is mainly due to the increased mobile internet speed due to new standards, 3G's, mobile apps, etc.

From this, we can safely say that quite a few of your readers are coming to your blog through mobile phones. Therefore, if you do not make your blog mobile friendly you may lose all (or a lot of) your mobile readers because, a normal blog takes lot of time to load in mobile devices and your site will not fit properly in the mobile screen.

So, here is how to make your Blogger (blogspot) blog mobile internet friendly:

1. Sign in to your Blogger account, then go to Dashboard --> Design --> Edit HTML.

2. Find the following line:

<b:include data='blog' name='all-head-content'/>

3. Paste the following code below that line:

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

4. Save the changes.

That's all!

Now, your visitors can access your Blogger blog through mobile phones with blazing speed (at least faster than before).

Good luck!