MBS: 2014-08-31

Adding a Profile image next to your blog post titles gives a more personal look to your site. It indicates that a real human is working behind the site and the site doesn’t generate auto content with no attention to readers. You have seen web entrepreneurs using their profiles pictures on their blog next to each one of their posts. An example includes shoemoney. So lets add this beautiful add-on to your blogger blogs and make things even more neater. Kindly see a demo first:

*Add a Profile Image Next To Post Titles

1.Go To Blogger > Design > Edit HTML

2.Backup your template

3.Search for .post h3 or .post h2

4.You will see a similar code like this one,

.post h3 { color: #7CA2C4; font-size: 20px; font-family: Arial, sans-serif;; font-weight: normal; margin: 0px; padding: 0px 10px 0 47px; }

Replace the above code with this one,

.post h3 { background:url(IMAGE LINK OF YOUR PROFILE PIC) no-repeat top left; color: #289728; font-size: 20px; font-family: Arial, sans-serif;; font-weight: normal; height:45px; margin: 0px; padding: 0px 10px 0 47px; line-height:1.1em; }

Now replace bolded yellow text with Image URL of your avatar. Your avatar should be 40px by 40px in size. For better visibility choose a profile pic with white background and coloured border like this one,

To Learn how to upload images on blogger and get their URLs read,

Upload images on blogger

Replace #289728 with the post title color code of your blog. You can find this title colour from the code which was already present. In my case it is #7CA2C4 so I will replace #289728 with #7CA2C4

5. Save your template and you are done!

Visit your blogs to see an interesting new change. If you faced any problem then do not hesitate to let your brother know. Would be a pleasure to help you out. Have Fun!

I am so grateful to bloggerspice for the idea about this post.

HAVE A NICE DAY

Since then, Blogging is rapidly changing daily. Previously, we used heavy images intended for decorating our blogger template. But due to the use of mass graphics template loading time dramatically increase on account of slow loading visitors are certainly not interested to stay on blog a certain site. In the mean time, many new features have revealed and after this we would able to use different widget and plugin within our Blogger template. At least, for now we can easily use vector icon instead of images without any java script html coding through Font Brilliant. Font Awesome bundled 369 Icons under one font that's best for using in a website. And it also helps designer intended for optimizing their web-site's icons. Now almost all of the professional Blogger
template designers are using Font Awesome.

*WHAT IS FONT AWESOME

Font Awesome is a pictographic language of web-related actions. It is also known as iconic font. For example if you write predefine font code then it will display as vector icon in your Site. And the most positive feature is that you can easily scale the icons that included in Font Awesome file. Not only icon you can also customize icon's size, color, drop shadow as well as able to add animated effect and so on by the help of CSS coding.Originally Font Awesome designed for Bootstrap but now using almost in every platform. Bootstrap is a collection of SVG (Scalable Vector Graphic) icons which can resize to any size.

In my Blogger template I am using 3.2.1 version of Font awesome icon like in comment, date, quote. But recently it has released 4.0 version with additional new 11 icons. The difference between older version and newer version, simply in coding. Suppose for home icon older version code is \f015 but in case of newer version code is fa-home.
Features of Font Awesome-

Font Awesome included 369 iconic font and the number of icons will increase with new versions.

Note: This very light to load, as a result it won't affect on your template loading time.

*HOW TO ADD FONT AWESOME 4.0.3 INTO BLOGGER?

Including Font awesome in Blogger template is very easy.
Just you have to follow some simple steps from below-

Step 1. Go to https://www.blogger.com and Sign in to your account

Step 2. From Blogger Dashboard click on ->Template ->Edit HTML

Step 3. And locate the <head> section in your Blogger template section in your Blogger template Step 4 Finally copy following line of markup and paste it below
Step 4. Finally copy following line of markup and paste it below <head>

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Step 5 Now simply hit the Save button.

*HOW TO USE FONT AWESOME FOR ADDING ICONS?

You will get a full list of Font Awesome icon code which can be used in blog or website. Just you have to choose the icon and get the code from Font awesome site then simply add the code. Though I have told before that we have to use CSS for applying Font awesome code so you have to pick some CSS class name. For Example most of the Font Awesome code start with fa (Font Awesome). For home icon the proper code is fa-home and now we have to use tag.

Font Awesome Icon can be Edit in different way. But mostly effective by CSS coding. You can apply CSS Style on any icon. Just take the class name, and write a new CSS style as shown below. For example the below CSS code block can be add before on HTML source or you can add the code inside

fa-laptop {font-size: 32px;color: #033;padding: 8px;border: 1px solid #000;float:left;}

And the HTML code is below

This will display a Laptop colored icon with border. And the color has added by CSS code.

*Resizing Icon

You can increase or decrease the icon size by using different code like fa-1g, fa-2x, fa-3x etc.

*Adding Spinning effect

You can easily add spinning effect in any icon. The code for spinning effect is fa-spin. And the whole code will like below-

Here you have to change the fa-spinner icon code for spin different icons.

*Add Icons with List Style

Generally for displaying icons in list style you can use the below code block. If you want to add more icon then just add extra line of the code block.

<ul class="fa-ul">
<li style="text-align: left;">Desktop Icon</li>
<li style="text-align: left;">Thumbs Up Icon</li>
<li style="text-align: left;">Fighter Jet Icon</li>
</ul>

*Add Icons with Stake Style

Under this style you can display icons horizontally two, Three or more icons in a row at a time.

To Get the all icon's code please visit the below link

http://fontawesome.io/icons/

Hope this tutorial will able to answer all of your questions about Font Awesome. Still Confused? Then feel free to leave a comment below.

I am grateful to bloggespice for this idea.

HAVE A NICE DAY!

Add your Profile Pic or Avatar next to Post Titles in Blogger

*Add a Profile Image Next To Post Titles

How To Integrate Properly Font Awesome Icons In Blogger Blog