Related Posts Widget with Thumbnails and Summary for Blogger

There are several tutorials quite old in which I have shown different methods for displaying related posts in Blogger [1] [2] but in this tutorial, you will learn how to implement a really awesome Related Posts widget with Thumbnails and Posts Snippets that will appear in the footer of all your blog posts. If you want to get an idea of how it looks like, please visit this demo blog.

Now let's see how to add the related posts widget with thumbnails and summaries in a Blogger template:

Adding Related Posts Widget with Summaries to Blogger

Step 1. From your Blogger Dashboard, go to Template and click on Edit HTML

Step 2. Click anywhere inside the code area and then press CTRL + F to open the Blogger search box

Step 3. Type or paste this tag inside the search box and hit enter to find it:

After you found it, paste this script just above it:

   

How To Use IFTTT For Blogging And Internet Marketing

Guest Post - Our host is Matthew Woodward , In this post Matthew 'Winner Of The ProBlogger One To Watch In 2013 award'explains a popular new tool he is sure will help Bloggers called IFTTT.See How To Become a guest author on Spice Up Your Blog.

As any internet marketer knows, time is money! We are busy folks with a never ending to do list so anything that can help us save time is essential.

What Is IFTTT?

IFTTT (If This Then That) is a fantastic free tool that lets you connect web services so they can talk to each other.

It works like this-
Click Here To View Full Post >>

Top Social Media Tips For Bloggers In 2013 And Beyond

There are several paths that bloggers and marketers take in order to increase links and web traffic. Social media is one of them. Five popular social media sites are taking the web by storm: Facebook, Google+, Instagram, Twitter, and YouTube. This article will explain how social sharing enhances SEO (Search Engine Optimization) through link building and strong social signals. There are actionable tips provided in this article that explain how readers can use social media to drive traffic to blogs and websites.
Click Here To View Full Post >>

A Fresh Look At How To Make Money From Your Blog

If your a blogger or you might be among those few, who don’t have a blog yet but they’re eager to find out what’s all about and ready to start one.You have probably  heard great success stories about how a blog helped many people to improve their financial status, or  helped entrepreneurs to develop and to brand their personal businesses.

Either that's the case, or you're someone who has something new and great to share with the world, you should or actually must nowadays have a blog of your own and start self-publishing (blogging) and self-marketing (social media).

Know Your Audience

Start by identifying your audience, what problems they face and most important what can you do about it. The thing with blogs is that everybody can write one, but most certainly just a few will get revenue from it. And there's a simple explanation for that: you have to put value in what you write. If your posts are relevant to your followers meaning that by writing them you reach your audience's needs, the chances are that your blog will be successful.

One way of finding your niche (and one of the most popular) is to ask yourself what do you like/know most ? In what area of interest are you feeling most comfortable talking about? After reaching a conclusion you then need to put that against what will most likely answer to a reader's problem. Once you've climbed the three this far, you can start enjoying the fruits. From the plethora of monetization models available, you'll find below a handful of solutions that will make your blog sell.
Click Here To View Full Post >>

5 Headline Formats That Are Sure to Attract Readers

The goal of every blogger is for their blog posts to be read by hundreds or thousands of readers. But in most cases, that only happens in a dream world. The reality is that many articles are posted only to gather dust.The reason is not because the posts are poorly written or even because they are not interesting. In most cases, the reasons these posts do nothing more than sit around being unread is because the writer neglected to give the article an effective headline.

Without an effective headline, an article will do little to attract readers, much less get them to read the post. As everyone has heard repeatedly, content is king, but if you can’t get readers to read beyond the headline, they will never know that you have provided quality content for them.In effect, this can create a negative image in their minds, and therefore, it can potentially impact your business  in a negative way. On the other hand, the more readers you have who continue to return to and read your work, the more likely your profile is to soar.

Headline Formats That Work

Click Here To View Full Post >>

CSS Basics. How to Apply Rounded Corners On Images #2

In the previous post I have mentioned that we will learn about how to create rounded images using CSS, without needing to edit them one by one using a program. Now that we have seen the basics of CSS, let's try to apply it on some pictures.

What we will do in this tutorial is to upload an image (HTML) and then add some rules in the stylesheet that will transform the outer shape to look like a circle... or, at least, to appear round. This will depend on the proportions of that picture we will use.

In fact, we can apply this effect to any picture, to a specific part of our blog or to all the pictures found in our blog. This depends on your tastes.

Marking up HTML

Obviously, the first thing we need to do in order to set a rounded border around an image is to get a picture and upload it to get the html structure. The code could be a little bit more complicated, but an image is built within the img tag, which basically, looks like this:

image_URL"/>

Screenshot:

Adding this code inside the HTML of the post with the url of our image - instead of the text in blue - we will be able to display it like this image on the left.

Usually, it might also contain an alt text, and sometimes, may have some predetermined dimensions (with a specific width and/or height). When we upload an image using the Blogger post editor, the code will also have a link pointing to the original image.

But if we want to modify this image using CSS, we need to add a class selector. We can add it in two ways: within the img tag or in a parent box. The name that I have chosen for the image selector is roundedcorners, however, you can add any name you want:

roundedcorners" src="image_URL"/>

roundedcorners">
image_URL"/>

Applying style to all homogeneous elements

But that selector alone won't do anything special. It needs to be linked to a style rule telling what to do with it. The same if when we add just classes, if these are not defined within the CSS, the appearance of a picture (or a certain element) will not change.

To change the shape of the all the pictures on our blog, this is what we should add to our CSS:

img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 1000px;
-moz-border-radius: 1000px;
}

And how this translates to your browser?

Search for images by name tag (img) and apply the following style:

• a solid green border of 2 pixels
• set the margins (space outside the border) and padding (space inside the border) to zero
• apply the rounded corner look to all the four corners

Now that we have this rule in our style sheet itself, we'll be able to see the picture as we want - take a look at the image on the right.

To declare a property correctly, we need to know what it does and how to write it - details which could be found all over the internet, although W3C is the authority in this.

For instance, the border-radius property initially requires four (4) values reading from left to right, which represent the roundness of the upper-left, upper-right, lower-right and lower-left corner. If you add a single value, it will make all the four corners to be equal with that value.

It is important to mention that when the value of the border exceeds the dimensions of the container, this border will create a circle.

How to apply the same style on the elements of the same container

Sometimes, we don't want all the images on our blog to be round, but only the ones that we choose, otherwise adding the style above within the head tag will make all the pictures taking this shape. Before, we used an HTML tag (img) and not a selector and, for this reason, the style will affect all our images.
To avoid this, we can do one of the things we saw at the beginning of this post and that was to place the image inside a div with the roundedcorners class. This way, only the images within the container with that class will be affected by the rule that will make them round.

roundedcorners">image_URL"/>

But the rule then should not affect the img tag directly, but the roundedcorners selector. In this case, you should write it like this:

.roundedcorners img {
border: 2px solid #BADA55;
....
}

This implies that this style applies only to images that are within the container with the roundedcorners class.

Final words

To end this tutorial on creating pictures with rounded borders, keep in mind that if these are not square, instead of becoming circular, they will look oval:

To fix this we should add the width and height with the same measure (value in pixels) to force the image cropping and to make it appear perfectly circular. That was all!

If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below ;)

CSS Basics. How to Apply Rounded Corners On Images #1

This tutorial will explain how to change the outside border of any image by using some simple CSS rules to make it round, but this is so easy doing this, that I'm finally going to make this post for other purposes.

The trick today that I'm going to publish in two parts is to help you to understand, at least, a little of what CSS (Cascading Style Sheets) is.

For those who would like to learn more, please take a look at this link and for those who really want to learn thoroughly, I recommend to visit this site.

Introduction and terminology

Style sheets aim to help sort out what is the structure of a website and which is its format or appearance. So, the CSS box model is, basically, a box that wraps around HTML elements, and determines how those boxes are presented in terms of colors, fonts, width, backgrounds etc.

The advantage is that, anytime we decide to change something, we don't have to change all the pages one by one, but simply, change the properties from the style sheet and these modifications will automatically apply in all the pages.

The style sheet is a set of rules made of selectors and declarations. The selector is to be used as a nickname or name of what you want to configure from the style sheet and apply to the HTML, and declarations are properties to which we add the desired values ​​(more information on CSS syntax)

Adding the CSS selector

If we add, for example, the code above in our style sheet, we might not see anything particular happening in our website. As I have mentioned above, the selector relates to the HTML and CSS so, if we want a box to take these values ​​for width, background color, border and font size, we need to include the selector within the HTML of a page element, like this:

class="SelectorName">Text here

Here we added a rule telling the browser to interpret that this box has to be of a certain type or class. This class or selector could have some specific properties and values ​​defined in the style sheet, as you can see in the image above.

Now let's see how this will change the look of the box, while all others that don't have the SelectorName  name will follow the standard appearance.

Basically, when we add a rule in a style sheet, or modify an existing one, what happens is that all boxes marked with that selector will change their appearance according to the properties and values that we have defined in the style sheet.


Where to add the CSS style

This style can be added in external CSS files - create the CSS file with all the rules, upload it on a hosting site and get the URL of the file. To make use of it, include the following line in the header of your template. For Blogger, you can add it between and :

syle.css" rel="stylesheet" type="text/css"/>

Note: replace the text in blue with the url of the CSS file.

You can also add the style directly in the HTML of the template by adding the CSS between the style tags:

This can be added in the HTML of a page element as well. In this case, you don't need to add any selector to indicate where the CSS style is:

background-color: #EAEAEA; border: 1px solid #444444; width: 200px; font-size: 12px;">Text here

In Blogger, the rules are between the and ]]> skin tags. If we access the HTML of our template, we will find a bunch of codes in between these tags, which is actually the CSS styling that defines the appearance of our blog.

For those who don't want to touch the template code, we can add the CSS directly by going to the Blogger Template designer > Advanced > Add CSS.

That's enough for today. In the next tutorial we'll get to know how to add rounded corners to our images using CSS -> how to set a rounded borders around an image using CSS.

Giveaway - Enter to Win a WordPress Theme or a Joomla Template

We’ve teamed up with TemplateMonster to offer 5 premium web page designs for free. We hope you will find the giveaway useful, especially those of you who love WordPress and Joomla. Please, read on to learn more about the prizes and how to get them.

Important - This Giveaway has closed we will have a new giveaway soon.

About TemplateMonster

TemplateMonster is a US based web design company offering a huge choice of WordPress Themes, Joomla templates, Magento themes, osCommerce templates, HTML templates, Flash templates, and many other products. What is also important is that TM provides 24x7 support for their clients.

What Can You Win?

- one of five templates from TemplateMonster (it can either be a WP theme or a Joomla template)

Note: you can choose from more than 1800 WordPress themes and more than 1000 Joomla templates which are available at templatemonster.com.


How to Win?
Click Here To View Full Post >>

10 Places to put Adsense ads in Blogger

In this article we'll talk about the most common 10 places in our blog where we can add AdSense ads and about how we can implement these and we'll get to know as well which are the most suitable formats based on those available in our AdSense account.

Adsense Advertisements

In the Sidebar

How to implement

This is one of the easiest areas to put AdSense. Just go to the Page Elements (Layout), click on the "Add a Gadget" link, then add an HTML/Javascript widget with your ad code inside it or add directly an AdSense widget.

Recommended formats: 125 × 125, 120 × 600 and 160 × 600, 300 x 600

Between posts

Implementation. You can add AdSense ads between your posts by going to Layout, click on the "Edit" link below the Blog Posts section, then check the "Show Ads Between Posts" option.

Recommended formats: 468 × 60, 300 × 250 and 336 × 280

Under the header

Implementation:

Before anything, you need to convert your AdSense ad code - you can use this converter here:

AdSense Ad Converter

Next thing to do is to go to your Blogger Template (log in to your Blogger Dashboard, click on Template and press the Edit HTML button) and click anywhere inside the code area to search for the following code using the CTRL + F keys:

Paste the converted code right after it.

Recommended formats: 728 × 90 and 728 × 15

Above the blog posts

Implementation:

Convert your ad code and search for

in your template.

Paste the converted code right after it.

Recommended formats: 460 × 68, 468 × 15 and 336 × 280

Under the post title (this will be visible on all the pages)

Implementation:

Convert your AdSense ad code and go to your Template > Edit HTML > click anywhere inside the code area and search for the following line (CTRL + F):

Note: if you can't find it, search it without the ending slash /

Paste the converted code right after it.

Recommended formats: 468 × 68 and 468 × 15

Under the post title (visible only on the posts pages)

Implementation:

Convert your ad code and then go to your Template, click anywhere inside the code area and look for:

Note: if you can't find it, search it without the trailing slash /

Paste the converted code, following this example:

Recommended formats: 468x68 and 468x15

In the posts' footer

Implementation:

Convert your ad code and then go to your Template > click anywhere inside the code area and look for:

Note: if you can't find it, search it without the trailing slash /

Paste the converted code right after this line.

Recommended formats: 468x68 and 468x15

In the post's body (it will be visible on all pages)

Implementation:

Convert your ad code and then go to your Template > click anywhere inside the code area and look for:

Note: in case you don't fint this code, search only for

And paste the converted code by following the example below:

Recommended formats: 125x125, 180x150, 120x240 and 200x200

In the post's body (visible only in post pages)

Convert your ad code and then go to your Template, click anywhere inside the cod area and look for:

Note: in case you don't fint this code, search only for

 

And paste the converted code by following this example:

Recommended formats: 125x125, 180x150, 120x240 and 200x200

Between post and comments (visible only on posts pages)

Implementation:

Convert your ad code and then go to your Template, click anywhere inside the code area and look for:

Paste the converted code just above it, following this example:

Recommended formats: 468x60, 300x250 and 336x280

In the blog's footer

Implementation:

Convert your ad code and then go to your Template, click anywhere inside the code area and look for:

Paste the converted code right after it.

Recommended formats: 728x90 and 728x15

FAQ

Some questions that are likely to arise:

I can't find the codes, what should I do?
When searching for a specific code, make sure that you have no spaces before/after it. These are the default codes of Blogger and should be found in all the templates unless they have been modified by the template designer.

Why should I convert my AdSense code?
The Blogger's Template reads it as text and not as code so it is better to avoid any errors when trying to save it.

The ads are not displaying properly, why is that?
The ads could be affected by the styles (CSS) selectors (divs) containing them and some templates could be wrong designed, then you should consider modifying these styles, look for another relevant place or in extreme cases, change the template.

Can I put the all 10 codes on my blog?
No, you should choose just one of the locations where you want to put the ads considering that AdSense have some limits on the number of ads that could be displayed. Try to make a balance with your content.

Why there should be only 3 ads displayed on the main page?
This is due to the limit set by AdSense. Combine the type of ads (text, rich media ads and link units) if you want to show more ads.
Hopefully, this guide will be useful to those of you who need to display AdSense ads on your blog.

samedi 16 mars 2013

The Top 5 Reasons People Aren't Reading Your Blog!

Building a great blog is hard work. It takes hundreds of hours of your time and an unrivalled dedication to your subject. But what if, after all of that hard work, no one ever visits your blog? Or worse, you get streams of traffic but none ever stays or engages?

After all, you write for the outside world and you want them to hear you. Whatever your reason for starting and maintaining your blog, it can be disheartening to feel you have worked for nothing. But don’t worry. There are some very common reasons why people aren’t reading your blog and this article will help you address common blog issues and allow you to enjoy a growing readership.
Click Here To View Full Post >>

vendredi 15 mars 2013

Recent Comments Widget with Hide Author Comments function For Blogger

A few days ago, Mrpolie asked if there's a way to hide the author comments in the Recent Comments widget so that we would be able to see only readers' comments and our replies to be hidden. So, in this post I'll be sharing with you the Recent Comments widget that comes with this function. If you want to show just blog readers' comments rather than yours, you have just to change "Blogger User" text with the surname under which you are posting.

The main features of this recent comments widget:

- You'll be able to hide your comments
- Change the avatar size
- Set the number of comments to display
- Set the length of comment for the widget to display

Recent Comments Widget with Hide Author Function

Step 1. From your Blogger Dashboard, go to Layout and click on Add a Gadget link

Step 2. In the pop-up window, choose the HTML/JavaScript widget

Step 3. Copy-paste the following code:

Recent Comments Widget with Round Avatars: 

Click to see the code

Recent Comments Widget With Post Titles (no avatars): 

Click to see the code

Some changes before saving it.

- to set the number of comments to be shown, change the "5" value from the orange line
- for the number of characters, change the "67" (for the 2nd widget, it is 95) value from the green line
- to hide your comments, replace the Blogger User text TWICE with your username
- to change the size of avatar, change "50" from the blue line.
- if you don't want rounded avatars, delete this line:

-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;

Step 4. Save your widget and you're done!

Best Manual Social Bookmarking Services Online for SEO and Backlinks

jeudi 14 mars 2013

Choosing Your "Mentor" To Become A Writer: Whose Works Can Inspire And Teach Writing

Often times one of the hardest things to deal with as a writer is a blank page. When faced with it you may find yourself looking for inspiration just about anywhere-your neighbors, the kids, the backyard, and of course the Internet. A good Google search can be your best friend when the first paragraph of your piece seems almost impossible to conjure up.

And in addition to these assistants, at some point or another a writer may also crave the support and inspiration of other writers. This is a pretty common occurrence. It may happen just due to the commonality of occupation, similar recounts of obstacles and victories, or just the overall connection that is present when you share the same experiences as someone else.

Likewise, the opportunities to connect are numerous.Sometimes it may be through a circle, group or forum, or a more personal encounter such as a writing buddy, friend, coach or mentor.

Choosing a mentor

Click Here To View Full Post >>

Ride The Reddit Wave: How to Maximize Traffic To Your Blog From Reddit

What is Reddit? If you’ve seen the front page filled with hysterical gifs and shared life-exposed memes to your friends, then you’ve Reddit. Not only have you read it, but also maybe used it to generate buzz for your brand or product or even as simple as having the quote of the day at your office.

For those of you who have no idea what I am talking about, you may be saying: I haven’t Reddit.

Well, similar to most social media sites, with Reddit you create a profile, join a community, and start sharing. However, unlike sites like Twitter and Facebook, where content and descriptive text is presented to you in real time news feed, Reddit is focused on presenting you with the highest rated content. This community is unique in that it is a self-monitoring social network, where your upvotes are translated into “karma”, the headline is the hook, and the content is the punch line. “Trolls” beware: there is a downvote as well. In this democracy style platform, you want to get as many upvotes as possible.

How do you use it?

Click Here To View Full Post >>

mercredi 13 mars 2013

The Changing Face Of Back Linking And Traffic

Guest Post By Daniel Vassiliou.

I lose track of the conversations I have with marketing agencies, looking to hire my services as a link builder, who only have one goal in mind. Build links, whatever the cost, and the more the merrier. Of course they all know about Penguins and Pandas, oh my, and are quick to add things like, “high DA”, or “PR over 4”. The trouble is I don’t think they have understood quite how dramatically the SEO scene has changed, and still is changing.
Click Here To View Full Post >>

mardi 12 mars 2013

Add a Different Background For Author Comments in Blogger's Threaded Comments

In this tutorial we will learn how to highlight the author comments so that they will have a different background color, border, or anything that makes them stand out from the others. To achieve this, we need to add a code in the Blogger's template and to modify the style according to our preferences.

  

How to highlight author comments in Blogger:

Step 1. Go to Template, click on Edit HTML

Step 2. Click anywhere inside the code area and try to find - using CTRL + F keys - this tag:

Screenshot:

Step 3. Just above it, paste the following code:

Customizing the Author Comments:

Border:
The line marked in orange represents the border's style.
What it can be done:

• 1px - you can increase the value to change the border's thickness
• solid - change the border's style to dotted, dashed, inset, outset etc.
• #FFA500 - this is the border's color value, change it with your own color

Background:
The line marked in blue represents the background's style. You can use a plain color or an image. By default there's a combination of both (a white transparent image with a gray plain color).
To change/add:

• a different color: replace the #F1F1F2 value with your own (use this tool to find the hex code of your desired color)
• an image: replace the defaul url http://www.blogblog.com/1kt/transparent/white80.png with that of your image

Font Color:
To change the font's color, replace the #444444 color value in green with your own. (you can use this tool to find the hex code of your desired color)

Font Size:
Modify the value in red by increasing/decreasing the "12" value in order to change the size of text.

Step 4. Now Save your Template.

To customize the entire style of threaded comments, please check my previous tutorial on How to Customize Comment's Background, Font Color and Border in Blogger.