How To Write Search Engine Friendly Blog Post Titles?

Nearly 80% percent of the traffic that you receive from Search engines depends on your Post title. Titles are termed as second to Content. Content is surely the King in SEO terminology but Titles follow just after in priority. If blog authors dedicate a minimum of their attention towards how they write their blog post titles then I believe there is nothing else left to optimize. Search engines need a reason to rank you higher in a particular topic and you must know how to provide them with a good reason. Learning SEO is the simplest yet the most important thing when it comes to earning Online and we all should know how to make proper use of this art. So lets look at some useful tips that have always helped me and thousands others.

What is an Optimized title?

An optimized title is one that succeeds in drawing maximum attention of search engine robots towards itself. The simplest way to understand how to develop good SEO skills is to treat search engines like humans and take their likes and dislikes as those of humans. Using this approach here are some of the things that you must know while writing a title. And again its not a philosophy subject with thousands of confusing things to remember. I am just sharing few tips that work and make sense. The three tips below are more than enough to understand what exactly is a search engine friendly title.

1. Use Google Keyword tool to analyze Keywords
2. Keep the Title length to 66 characters
3. Make your title Attractive!

1- Use Google Keyword Tool

Always research the words that you use. Using smart words bring smart results. For example if you wish to write a country’s  name in your title like America, then check how majority of people write it. Do they write it as America, US, or  United States 

To know which word is used widely globally then you must research it using Google Keyword tool. Simply Write one word per line and hit the Search button to see the results as shown below,

Note:- Always select All countries in Advanced Options and English as the Language

 

You can clearly see that the word US is the highly search word with 83,100,000 Monthly Global searches followed by the word America with 45,500,000 searches. So if you use the Word US instead of United States or America then obviously the traffic flow to your website will be greater. Always use this tool for keyword analysis. It takes minutes to know what keyword you should use.

2- Keep the Title length to 66 characters

Web masters and even most search engine optimizers use repeated  keywords/phrases that are relevant to their site. Though this seems like a great idea, you're actually destroying your chances of being ranked higher on a particular category on search engine results. Search engines gives importance to keyword density i.e Keywords per line. So if you use too many keywords in your title then you are simply making your title more confusing to search engines and they will take it as a spam. Google displays about first 66 characters of your title and yahoo displays 120. The rest of the title is chopped off. See some of my mistakes of the past,

See how the titles are chopped off just after about 66 characters? This is what you need to avoid. Now see these titles,

 

See the difference? In fact the above two posts bring us around 100-200 visitors per day which counts a lot.

And this is how the current post appears in Google while appearing on the top first link. Even if you search for “How to write search engine friendly titles” this post appears on first page and that’s how optimize title gifts you in the end! :)

To make sure you may not exceed the maximum number of characters in your title, our Character Counter tool will always be at your service.

3- Make your title Attractive

Why should your article be ranked higher by search engines? You must prove it to search engine robots that your title is the best in every aspect. Keep robots and your readers always in mind. Robots love keywords and short titles and readers love what attracts them the most!

See the following title as an example,

Learn best tips on how to write search engine friendly titles for your websites

The words in the above title contain many useless phrases and count a total of 80 characters including spaces. Now see this title,

How To Write Search Engine Friendly Blog Post Titles?

The above title is attracting, contains three keywords i.e Search Engine Friendly , Blog and Post titles with an attracting How-to start and question mark (?) at the end of the title and all this count a total of 53 characters. That's how you hit three birds with one stone!

Analysis,

• The word websites in the first title is useless for me because this post is for bloggers only and they will often write blogs while searching a query instead of websites.
• The words Learn, best tips are less effective and not well organized compared to the keywords used in the second title.
• The first title uses no question marks or good starting keyword while the second does. Exclamation marks (!) and question Marks (?) will always entice the searcher to click, and visit your website over your competitors.

I don’t need to add anything more here because you all are genius enough to apply the common sense and make things more smarter, stunning and intriguing.

Summary

This is what you always need to do while writing highly optimized and attractive Post titles,

1. Always analyze your keywords using Google Keyword tool.
2. Spell your words correctly and keep School Grammar in mind
3. Write Short titles with one or two keywords
4. Always Keep title length less than 66 characters
5. Make your title attractive to both robots and readers by adding attention-drawing phrases and symbols. Use  words like How to, Best tips, Top 10, free, easy etc
6. Always try to end your title with a question mark or an exclamation mark when necessary.

 

That’s All!

On my next tutorials I will share some important tips on how to optimize the opening paragraph of your articles/posts and will share some secrets of mine. I have also not discussed some more basic things related to title URLs in today’s post because I don’t wanted to make things difficult and we will surely discuss it on coming posts. Till then I hope you will find it really useful and I just hope you learnt something new today. Peace and blessings! :d

Do also read the following post,

• Importance Of Post Title Limit In The Eyes Of Search Engines

How to Show and Hide Widgets in Blogger?

Some questions that are most asked are : How to Show blogger widget on homepage only? How can I show widgets only on sub pages? How can I hide widgets on Static pages? How to show widgets on selected pages in blogger? To answer all these questions today's tutorial will be a delicious one. Its really important to control widget Display in Blogger. some widgets are meant for homepage only while some makes sense when you show it at your Contact Pages, About Me pages or static pages. So how do we actually do this. The trick is really simple. You just need to enclose your widgets in few pieces of codes. So lets jump straight on how to manage widgets on different pages in blogger.

Its often the HTML/JavaScript widget that is widely used for adding your customized widgets to Blogger and its mostly this widget that needs to be easily managed. Since you often paste some widget code inside HTML/JavaScript widgets so the only extra thing that you need to do in order to control widget’s display is to enclose that code between two pieces of code as shown in each control codes below,

How to Show Widgets Only On Homepages?

Simply enclose the code inside HTML/JavaScript widget between these lines,

<b:if cond='data:blog.url == data:blog.homepageUrl'>

WIDGET CODE GOES HERE

</b:if>

where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Hide Widgets On Homepages?

Same procedure here,

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

WIDGET CODE GOES HERE

</b:if>

 

How To Show Widgets Only On Static Pages?

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

WIDGET CODE GOES HERE

</b:if>

How To Hide Widgets On Static Pages?

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

WIDGET CODE GOES HERE

</b:if>

How To Show a Widget On a Selected Post Only?

<b:if cond='data:blog.url == "URL OF Selected Post"'>

WIDGET CODE GOES HERE

</b:if>

How To Hide a Widget On a Selected Post?

<b:if cond='data:blog.url != "URL OF Selected Post"'>

WIDGET CODE GOES HERE

</b:if>

 

How To Control Blogger’s Official Widgets?

The same procedure can be applied to Blogger’s official widgets like About Me, Archives, Poll etc. For controlling that widgets do this,

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Check the Expand Widgets Templates Box
4. Search for the title of the widget you want to control
5. The code for the widget will look something similar to this one,

<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>
<b:includable id='main'>

LARGE CHUNK OF WIDGET CODE

</b:includable>
</b:widget>

On finding the title in place of WIDGET-TITLE-HERE you will find two similar codes like those I have shown in bolded blue  You just need to add the Controlling codes in the following manner. For example if you wish to show a widget at Homepage only then do this,

<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>
<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

LARGE CHUNK OF WIDGET CODE

</b:if>

</b:includable>
</b:widget>

 

That’s it. Do the same for applying any controlling code. I hope this was useful :)

How To track Downloads On your Website?

Probably we all love to know how many times a file on our website is downloaded. You can observe that I track all my downloads whether its templates, icons, buttons or any other blogger resource. This helps me know how popular that particular file is. Many questioned us about the script we use to track our files and today we would share every detail on how we actually track downloads on Blogger.

 

 

Live Demo

 

How To Track Downloads in Blogger?

I use Dstats service for tracking number of downloads. The method is simple. There are two steps which are,

Inside your posts simply paste the code below. Replace  PASTE-FILE-LINK-HERE with the link of your file you want readers to download. And replace Image URL OF Download Button with the Image Link of your Download button.

<a href="http://dstats.net/download/PASTE-FILE-LINK-HERE"><img src="Image URL OF Download Button" border="0"/></a>

<p>Downloads:<a href='http://dstats.net/download/PASTE-FILE-LINK-HERE'></a>
<script type='text/javascript' src='http://dstats.net/dstatsjs.php?file=PASTE-FILE-LINK-HERE'></script>
<script type='text/javascript'>document.write(dsCounter);</script></p>

 

Grab these Download Buttons.

You can use the following Download buttons from dryicons Simply right click an image and select “Copy Image Location” and this will give you the Image URL for the button.

 

Once you are done, publish your post and see a beautiful Download button with an auto download tracker hanging inside your post. Enjoy! :)

Add WordPress Style Menu Tabs Widget To Blogger!

The widgets on a Wordpress Blogs surely are well designed and coded but they look even better when they are bloggerized and made compatible to work in Blogger.  Last year we created Advanced Multi Tabbed Widget that was well appreciated by everyone and today we have yet another but far improved multi tabbed widget. The best thing about this widget is that you can add as many widgets as you want inside a single Tab which you could not do previously. Beautiful CSS and Jquery effects are added this time to the tab views and I have tried again to make its installation as easy as possible. So do not delay any further and learn how to add a professional looking tabber widget to your free Blogger blogs.

Live Demo

 

How To Add this Multi Tabbed Widget To Blogger?

I have divided the tutorial in three parts which are,

1. Adding the JQuery and JavaScript to your Blogger templates
2. Adding the CSS
3. Adding the HTML

1- Adding the JQuery and JavaScript to your Blogger templates

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for ]]></b:skin>
4. Just below it paste the following code –> MBT Menu Tabs JavaScript
5. Save your template
6. Done!

2- Adding the CSS

1. Inside your template search for ]]></b:skin> again
2. Just above it paste the code below,

/*---- Wordpress Style MBT Menu Tabs----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Simply replace #A46F38 with the HexaDecimal Colour code of your template so that the tabs may blend perfectly into your template.

3- Adding the HTML

1. Now Search for <div id='sidebar-wrapper'>
2. Make sure the widgets box is unchecked.
3. Just below <div id='sidebar-wrapper'> paste the code below,

<div class='MBT-tabviewsection'>

<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    $(this).addClass(&quot;MBT-tabs-current&quot;);
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                      
</div>   

<div style='clear:both;'/>                       
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                        
</div>   

                       
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                       
</div>

</div>
<div style='clear:both;'/>

 

Please Replace Subscribe, Latest Tricks and Search with your Widget Titles that you will be adding.

   4.  Now Go To Page Elements. You will see something like this,

Start adding your widgets and after you have added all your widgets then simply view your blog to see it in action. Done! :-)

Note:- Most of you will ask me several questions here as usual =d Because every template is coded differently. People who are not very familiar with HTML often find it difficult to understand this part but no worries anymore if you are not able to pass this step then kindly email me your template at mustafa.stc @ G Mail and I will tell you where should you paste the code. Plus I will also help you on how to add an extra Tab to your widget to make a total of four tabs. This help is for MBT subscribers only if you haven’t availed the opportunity of becoming a MBT reader then kindly subscribe here to avail unlimited resources.

Let me know how you find it?

I just hope this little contribution from our side will be of value to all of you. I would love to know about your precious views. Peace and blessings.

Earn $20 Dollars Plus 300 Free EntreCard Credits!!

I have Uploaded My Niece's Sample Home Video. Hope you will like it.

---

Isn’t it strange the way our lives have turned. What we find in internet is just a virtual reality.  No real faces, smiles or voices. We talk to readers, we chat with them, we help them and we make them smile and in return they pay an equal tribute but how often do we  talk to one another in real life? Authors often don’t know where their readers come from, where do they belong, what language do they speak and how does life looks like at their end. So I thought why not give and take something from you people who supported us for consecutive two years with your love, support, feedback and motivation. I love memories and I love preserving them. So lets do something really exciting this time!

Create an Interesting Video message For “My Blogger Tricks” Blog

I hereby would love to give free 300 EntreCard credits to anyone who will create an interesting video containing a message of love for MBT and their experience of the tutorials shared at MBT. The video will have a simple format. The video must contain this,

• Make sure you speak in English, doesn’t matter if you are not fluent. Keep greetings in your native language only like Hi, Bonjour, Namaste, Salam etc.
• Mention your name, country,native language and blog URL.
• Mention how did you came to know of MBT.
• Mention why you love MBT.
• Define MBT’s author in One word.
• Kindly record the video using your Mobile phone or digital camera but not webcam.
• Kindly record the video in your garden, college corridor, market street anything but not a dark gloomy room please!
• Kindly keep the video simple, natural and no more than two-three minutes.

See This Sample Home Video of my little niece.

It was late night and I found her eager to narrate the adventure stories of her heroic cartoon idols.. She was bitten by bugs all over her face and I went into her shuttle nest for a short me-to-her chat.. :)

Note:- Your video should be specific. I just recorded this one for fun. :p

Why should you record a Video Voice Message For MBT?

Because I love you as much as I love my work. I don’t blog for fame, revenue or anything that may help me materially. I blog to to help and that’s it. I don’t know if I could continue blogging all my life because the world around is full of responsibilities and keeping everything balance isn’t that easy.

The benefits you get by making such a video message are,

1. The videos will be posted at MBT’s homepage and will be publicized at major social media networks. So you and your Blog will draw some serious attention!
2. Your Blog Links will be added to our Fans List in a Post
3. People seeing the message will surely visit your blog to know if you are not a fake person reviewing MBT
4. Your name and Blog URLs will be captioned
5. All those who will submit one video will be granted 300 Free EC Credits. You can use them to advertise at 150 blogs worth 2EC each!
6. The best video will be granted $20 via PayPal!

Note:-

If you feel shy to record your video and instead wish to record a voice message only. Then we will even honour that with 200 EC Credits. The best audio message will be granted $10 via PayPal.

I think there can be nothing more honorable then this that we can gift you all in return of your love and respect.

What’s the Deadline of Video Submission?

When there is something sweet to hear and share then of course no one will appreciate any delay. I would be grateful if you Email me the video the sooner Possible. I will accept no more than a total of 30 videos. The deadline for fetching all these great gifts for a little effort is February 15th 2011.

If you truly love MBT then bless me with a memory that I may never forget. Peace and blessings :)

Is Directory Submission a Waste of Time?

Driving continuous flow of traffic to your blog is a wish that never seems to end. With the growing expansion of social media networks and creation of more advanced search engines, traditional methods of driving traffic to your blog is slowly loosing its importance. Indeed Blog directories that once flooded the blogosphere are loosing reputation considerably. Check your Google Analytics and discover it for yourselves that how much Traffic are these directories paying you in return for their reciprocal links and banners? I am sure the answer would not be a delightful one. So today we are going to remove all doubts regarding directory submission and will try to educate you all with something that may be worth trying.

 

Why Should You not Submit Your Blog to Blog Directories?

Following are some of my strong reasons against this tradition.

 

Reason #1

When there is competition then quality service emerges by its own. Five years back Search engines were battling with one another to reach a status and today we finally have Google as an ever developing Search Engine that has turned out to be a multi million dollar company now. Before 2005 blog directories were trusted and often visited by all international traffic to find blogs of their interest and read the specific articles. But today what do you do when you have to find an answer to a problem? Of course you Google it. Who will in today’s hectic life would waste time navigating blog directories in order to read content of their interest.

Reason #2

Most Blog directories seem inactive and their service seem dead. Many exist today just by name with no active query service. You will have to wait for weeks in order to get something done. For instance I once submitted my blog to xyz.com (This anonymous directory has good PR and traffic but dead!) with my previous domain tnt-by-stc and when I changed to mybloggertricks. I requested them to kindly update my domain and months past but got no reply. I had to then remove my URL from the list.

Reason #3

Most of these directories share reciprocal links which means in order to submit your blog to them you will have to add their banner or link to your homepage. This surely benefits them but harms your search engine ranking. Its best when people link you. But when you link websites which are not in your niche, you simply flow your precious PR juice in waste!

Reason #4

Most Blog directories have no authority. Directories with PR<3 and with Alexa Rank> 100,000 itself have no proper traffic then how can it benefit you? Many of these directories have Alexa Rank in 132,000 which means they receive around 300-400 daily visitors.

Reason #5

Linking Directories and adding their banners on your homepages diverts your traffic and effects your PR. Ask yourself what impression do you get from blogs which have long list of ugly banners added on their sidebars? The first impression that you get is that “Man he is just a newbie!”

You blog needs a professional touch and your readers want a clean touch. Serve them with justice.

Do not be a Blind Blogger!

A good blogger is one who respects what others share but do not take things blindly. You should test what others are advising and examine if they really make some sense. Almost every tutorial on Blog Directories tell you that by submitting your Blog to one of them can boost your Traffic significantly. But your criteria of work should be such that you must always keep a good look at your Google Analytics and ensure if a particular Directory is bringing you some traffic. If they are bringing you one or five visitors a month then you must rethink your idea of submission and may give priority to what is more important.

Are All Directories not useful?

Well of course not. There are some directories where search engine robots love to crawl. They sometimes provide the biggest hits and do really contribute in building fair traffic. It can be accepted to some extent that well established Directories like DMOZ and Yahoo Directory do bless you with good PR and Traffic but then again the traffic even from these directories is temporary.

For newbie Bloggers Who wish to drive readers to their Blogs, I have shared below some Directories which can help you to some extent.

• BlogCatalog
• Mybloglog

But again don’t add their widgets. Just add their code in your templates. Keep your template as clean as possible. Add only those widgets which the readers want and not those which makes your blog look like a Widgets Shop.

What is Alternative to Blog Directories?

The answer is simple. Its all about better understanding the Search Engine crawling, indexing and ranking criteria more and more. In other words, do what Search robots love and stop what they hate. I may be sounding complicated here but my future posts on SEO will help you better understand how exactly are people getting several visitors a day by making use of their good optimization skills.

Optimizing your Blog is the easiest but the most significant thing when it comes to achieving your Online Goals. The only way to drive consistent and good traffic is to write what the current era demands and give more importance to Post titles, Post frequency and search engine likings. Simple but fact. I will write consecutive posts on SEO from today on wards. I will try my best to make this SEO term look more like eating chocolate for all of you. Things that will be required will be shared and those tips that never helped will surely be avoided.

That’s All!

Hope you may understand my point and may take mature steps in making your Blog a place where readers may find comfort. Do let me know about any interesting story that you may wish to share with all of us. Peace and blessings :)

Hide Read More Link In Blogger Static Pages

The Read More link tutorial that I previously shared summarizes all posts to a specified length but then it even appears on Blogger’s newly introduced Static Pages where it should not be. I was scratching my head on how to solve this problem when Sam of Plenty Of E-books came to my rescue. He provided me with a code that shortens posts and also doesn’t let the read more link or button to appear on static pages. So lets replace our old code with this more updated one.

Note:- If you have never implemented this trick before then kindly read this tutorial first –> Add Read More Link To Your Posts

 

 

How To Summarize Posts and Hide Read More Link in Static Pages?

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for the old read more code which looks like this,

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

<div style="text-align: right;">Read More ->></div></a>
</b:if>

 

or something similar to this. Simply replace it with this one,

<!--READ-MORE-STARTS-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'><br/>
<a expr:href='data:post.url'><div style='text-align: right;'>
<img height='33px' src='IMAGE URL OF READ MORE BUTTON' width='120px'/></div>
</a>
</b:if>
</b:if>
<!--READ-MORE-STOPS-->

 

kindly replace IMAGE URL OF READ MORE BUTTON with Image link of your read more button. If you don’t have a button then grab one from some of the buttons I designed in past,

Visit these links,

• Blinking Read More Buttons
• Animated Read More Buttons
• Arrow Head Read More Buttons

 

Save your template and view your static Page to see it working just perfect! Peace :)

How to Customize Each Sidebar Header Differently?

After successfully customizing Blogger Comment Form and then the About me/Profile widget we have again got something really different this time. Few months back while looking at some word press templates I observed that some Sidebars had each sidebar headers with a different Look. I kept looking for a way through which this trick could be implemented in Blogger and just last week while editing my test bog I came across an interesting fact about Blogger Widgets. All widgets that I added on sidebars had a unique ID assigned to it by Blogger. I used this ID and tried if I could use it to customize the Sidebar Header and amazingly it worked wonders! With this ID I could customize any portion of the widget I wanted. So I am curious to share this brilliant trick with you. Today we will keep it simple. We will learn first on how to customize the Sidebar Headings and in our coming posts we will keep on doing more interesting things to today’s tut. So lets jump on to the tutorial..

 

First kindly view a demo to see how each sidebar headings have been customized differently,

Live Demo

How To Find out Unique ID Name of each Blogger Widget?

Simply follow these steps,

1. Log into your Blogger Account
2. And click the link that says  View your Blog
3. At your Blog below each widget you will find this Edit key image,
4. Hover your mouse cursor on it and right Click and choose Copy Link Location
5. The link will look something like this,

http://www.blogger.com/rearrange blogID=#####&widgetType=HTML&widgetId=HTML4&action=editWidget

Copy your Widget ID and keep it save as it will be used in the next part. In my case you can easily see that the widget Id is HTML4

HTML/JavaScript widgets are usually assigned such ID’s as HTML1, HTML2, HTML3 and so on.

About me widget will have an ID like Profile1 and Link lists widgets have Ids as LinkList1, LinkList2 etc.

The ID’s are case sensitive so use them as they appear.

How to Customize a Widget using its Unique ID?

Now here comes the interesting part. We will now customize the Widget’s Heading Style i.e H2 tag. Customization of other portions of the Widget will be shared in future posts.

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for ]]></b:skin>
4. Paste the following code just above ]]></b:skin> ,

#ID h2{
background:#575656;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}

 

Now replace ID with your unique widget ID. To change the background color change #575656 and to change the Font colour change #ffffff. May be you will like using our Colour Code Generator Tool

   5. Hit save and you are Done!

View your blog to see the new dress :)

That’s All!

Hope you find it useful and worth trying. More interesting CSS tricks on it will be shared soon InshAllah.

Note: Kindly respect Copyrights. Most of our tricks are being duplicated without attaching any credits and this really destroys our efforts. It’s a request from all our readers to respect the content of the original author.

How To Use Google Fonts In Blogger? Part-1

Read Part-2 here -> Style Post Titles and Sidebar titles With Google fonts in Blogger

---

It is no wonder that web technology has developed tremendously over the recent years. Fonts that were once stored in user’s computers are now embedded in templates. Few years back you could use only those fonts in your templates which were available on major operating systems and in order to view those stylish fonts on your websites, the user should already had fonts installed on their PCs. Today you can use any font you like for your designing purposes and the reader doesn’t need having those fonts installed on his PC. Thanks to Google Fonts API you can now embed any font you like in your templates out of the popular fonts available at Google Font Directory.

Google Font Previewer Tricks

For making things as simple as possible I would first discuss in detail some important things about this excellent Font Previewer tool provided by Google itself. We will use this tool to produce our desired embeddable code and CSS code. For this reason I have divided this article in two parts. Part- 1 will let you know how to properly use Google Font Previewer and Part- 2 will involve the use of these fonts in different parts of your Blogger template so keep track of both parts.

This is how Google Font Previewer looks like,

 

As you can see that there is a Tools menu at your left and the display at right. You set the options to create your custom font. You can change everything through this tool except the color. Once you have set your preferred text you just need to copy the embedding code which appears below the display like this,

<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 

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

This embedding code can be edited in many ways to make the text appear bold, regular or italic  but when you have CSS then why bother disturbing the HTML? :)

and just below this code appears the CSS code which looks like this,

<style>
body {
  font-family: 'Lobster', serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1.2;
}
</style>

 

The blue part is what that will be used in Part- 2 of this tutorial. This CSS code is the most important part and even if you don’t use the Google Font Previewer you can easily customize the Custom Font using this CSS. Now how would you use these custom fonts in blogger? So create your custom Font with your preferred look and feel and keep the embeddable code and blue part for Part- 2.

How To Embed Google custom Fonts in Blogger?

The method is simple. Do this,

1. Go To Blogger > Design > Edit HTML
2. Backup your Blogger Templates
3. Search for </head>
4. Just above it paste the embeddable code that you copied from Font Previewer with one adjustment. By default the embeddable code ending tag is not closed and it looks like this,

<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 

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

 

You must add a back slash at the end like this,

<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 

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

 

You can add as many embeddable fonts as you wont. You just need to end each code with a closing tag.

Now how would you use this font in Blogger posts, titles, block quotes, sidebars, headers, footers and how would you further customize the font, all this will be shared in Part –2 so keep in touch. I have shared below the embeddable codes of some of the best fonts available which will be required in Part –2. The list below will help you use the best fonts for yourself and would save your time too. So here we go,

1.  Fontdiner Swanky    

<link  href="//fonts.googleapis.com/css?family=Fontdiner+Swanky:regular" 

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

2.  Geo    

<link  href="//fonts.googleapis.com/css?family=Geo:regular" 

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

 

3.  Homemade Apple

<link  href="//fonts.googleapis.com/css?family=Homemade+Apple:regular" 

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

 

4.  UnifrakturCook

<link  href="//fonts.googleapis.com/css?family=UnifrakturCook:regular" 

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

5.  Irish Growler

<link  href="//fonts.googleapis.com/css?family=Irish+Growler:regular" 

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

 

6.  Orbitron

<link  href="//fonts.googleapis.com/css?family=Orbitron:regular" 

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

 

7.  Permanent Marker

<link  href="//fonts.googleapis.com/css?family=Permanent+Marker:regular" 

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

 

8.  Rock Salt

<link  href="//fonts.googleapis.com/css?family=Rock+Salt:regular" 

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

 

9.  Slackey

<link  href="//fonts.googleapis.com/css?family=Slackey:regular" 

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

 

10. Sniglet

<link  href="//fonts.googleapis.com/css?family=Sniglet:regular" 

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

 

11. Tangerine

<link  href="//fonts.googleapis.com/css?family=Tangerine:regular" 

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

 

12. Kenia

<link  href="//fonts.googleapis.com/css?family=Kenia:regular" 

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

 

13. Kranky

<link  href="//fonts.googleapis.com/css?family=Kranky:regular" 

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

 

14. Lobster

<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 

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

 

15. Luckiest Guy

<link  href="//fonts.googleapis.com/css?family=Luckiest+Guy:regular" 

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

 

16. Mountains of Christmas

<link  href="//fonts.googleapis.com/css?family=Mountains+of+Christmas:regular" 

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

 

 

17. IM Fell English SC

<link  href="//fonts.googleapis.com/css?family=IM+Fell+English+SC:regular" 

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

 

18. Allerta Stencil

<link  href="//fonts.googleapis.com/css?family=Allerta+Stencil:regular" 

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

 

19. Cherry Cream Soda

<link  href="//fonts.googleapis.com/css?family=Cherry+Cream+Soda:regular" 

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

 

20. Chewy

<link  href="//fonts.googleapis.com/css?family=Chewy:regular" 

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

 

21. Coda

<link  href="//fonts.googleapis.com/css?family=Coda:regular" 

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

 

22. Coming Soon

<link  href="//fonts.googleapis.com/css?family=Coming+Soon:regular" 

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

 

  23. Covered By Your Grace

<link  href="//fonts.googleapis.com/css?family=Covered+By+Your+Grace:regular" 

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

 

24. Droid Serif

<link  href="//fonts.googleapis.com/css?family=Droid+Serif:regular" 

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

 

25. Corben

<link  href="//fonts.googleapis.com/css?family=Corben:regular" 

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

 

 

If you found anything unclear till now so please feel to post your question. The next part is more interesting so make sure you have subscribed to our Updates. Till then Take care! :)