Adding Meta Tag to your Blog or Site

Post titles and Meta Tag Description Must be put according to search search engine. Meta Description must be between 50–300 characters. The meta description is an HTML tag, which looks like this in the HTML code for the page:

<meta name="description" content="A page's description, usually one or two sentences."/>

---

The purpose of a meta description?

---

The use of a meta description for your page is very simple. It describes about your blog to give targeted idea to get someone searching on Google to click your link. In other words, meta descriptions are there to generate click through from search engines. 

---

How long should be meta description?

---

You can put meta descriptions for any length, however Google generally assosiates snippets ~300 characters (this limit increased in December 2017). There is no use of Descriptive Meta tag. Meta Tag must be targeted and short in size.

---

Examples of a good meta description

---

Meta Tag has its value just below the blog or site address. See in given image Mata Tag put in right way, not exceeding the limit.

---

Adding Meta Tag to your Blog or Site

---

Adding Meta Tag should not exceeds145 Characters. Count Your Characters including spaces in given Character counter. I recommend adding meta descriptions between 50–300 characters.The meta description is a snippet of up to 320 characters, a tag in HTML, that summarizes a page's content. Search engines show the meta description in search results mostly when the searched for phrase is contained in the description. Optimizing the meta description is a very important for your blog or site. 

---

What is the use of meta tag?

---

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

Count Your Words Here

Change Read More with image Blogger

It is wise to replace 'read more' text link at your blog with image showing read more link.  It shows more attractive and stylish. Follow Some Simple steps to replace read more text with given images. Simply select the the image that suits your template color scheme and replace read more text with the codes given below your selected image. 

• Log in Blogger Dashboard.
• Enter in Template » Edit HTML.
• Check ' Expand Widget Template'
• Now, Search out the read more text in your template depending what text mention in template [Tip: Use Ctrl+F to search fast by using browser's Search menu].

Replace read more text with the codes given below of selected image.

<img width="120px" height="32px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sFH88US0wB9oVuFHGhEXPK_mfxx-H9wVtmi2JZL-b2YpWoPSZ0mjWr_xhwn5CyRcV7tkNy7YkHT9HKym-5UJV-SUZWddmCaCz6KAi6V4k-siG7OliOYKzKF-u0uKDf7WOF0JdMwtAQ/s1600/blue.png"/>

HTML HEX Color Value Generator Blogger

Give Your Blog text, link attractive colors. Color Picker will help you to choose appropriate color value to make your text, link and blog color more realistic and attractive. If you like it please share it.

Some Examples of Major Color values.

Social Share Widget For Blogger

Default Blogger templates have not social share button after the post area. If you have social share button set at your blog your visitors can share your post with the social network platform that they use. No doubt it is useful to increase blog popularity and page rank. So, what is next, follow some very simple steps to add this social sharing sites button set at your blog.

Demo

• Log in Blogger Dashboard.
• Enter in Template » Edit HTML.
• Check ' Expand Widget Template.
• Find out the given codes in template (Tip: Use Ctrl+F to use your browser search menu to search quickly).

]]></b:skin>

Increase width of blogger comment bar

Default Blogger comment bar is smaller than width of post area. This disturbs the layout and looks unprofessional. You can easily change it through two ways, suitable with your template. Follow some simple steps to increase the width of comment bar similar to the width of post area-

• Log in Blogger Dashboard.
• Enter in Template » Edit HTML » Check to 'Expand Widget Template'.
• Now search out the given code (Tip: Use Ctrl+ F  to search fast by using browser search bar.)

]]></b:skin>

Now just above ]]></b:skin>  add the given codes.

 .comment-form{ min-width: 100% !important; }

Hide or Remove Blogger Navbar

Blogger provides a navbar as a default to log in and navigate to next blog with search blog. This navbar is hidden in third party templates. The advantage of blogger navbar are given below:

• Blogger Navbar Takes you back to www.blogger.com.
• Search box: Search Box provides the pages and post at the blog you currently viewing.
• G+ share button: Lets you share the blog to your circles on Google+.
• More: This drop-down lets you share the blog by email or on other social websites as well as notify our team of a Terms of Service violation by clicking "Report Abuse." You can also report abuse through  Help Center.
• Next blog: Takes you to a recently-updated Blogger blog similar to the one you're currently viewing.
• [email address]: If you're signed in to your account, you'll see your own address here. Other viewers will see their own email addresses, or none at all if they aren't signed in.
• New Post and Design: If you're signed in, these links will take you to your Blogger Dashboard.
• Sign In/Out: This displays the appropriate option, depending on whether you're signed in or not.

---

How To Hide Blogger Navbar

---

You can hide blogger navbar completely by adding some codes to your template. Follow some simple steps to hide blogger navbar completely.

• Log in Blogger Dashboard.
• Go to Template » Edit Html (check mark to 'expand widget template' )
• Search out the given code in your template (Tip: use ctrl+f : to search by using your browser search bar)

]]></b:skin>

Now add the given codes just above ]]></b:skin>

#navbar-iframe, #navbar { height: 0; visibility: hidden; display: none; }

Add Google Translate Widget to Blogger

English is major language at web sites, but if you are writing in non English language at your blog or site, it is wise to add translate widget so that your visitors can translate your blog or site and understand what are you writing. Your Blog visitors can translate your blog to their native language by Google Translate Services. Google Translate is free service to translate web sites and currently supports 64 different languages. if your are searching how to add translate service to your blog, this post is for you. This translate widget is easy to add. Follow some easy steps to add this to your blog.

• Log in Blogger Account.
• Enter in Layout » Add a Gadget » HTML JavaScript.
• Now copy the given codes and paste into content area of HTML/JavaScript.
• Give it a name under title section such as Translate me, Translate this site etc.
• Save it and done.

Remove Comment Box from Blogger Pages

There is no need to show comment bar at blogger pages such like 'about me', 'disclaimer', 'privacy policy' or 'contact me'. If you are looking for how to remove comment Box from selected pages or whole pages this post can help you. You can easily remove comment section from Blogger Pages. There are two ways to hide comment section from Blogger Pages. Follow Some Simple steps for it. .

---

Remove Comment Bar From all pages

---

• Log in Blogger Account » Template » Edit Template » Proceed. 
• Check Expand Widget Templates 
• Now find </Head> (Use Ctrl+F for quick search) 
• Paste following codes just above </head>
  

<blockquote><b:if cond='data:blog.pageType == &quot;static_page&quot;'><style>#comments {display: none;}</style></b:if></blockquote> 

Add Favicon To Blogger

New Blogger Interface

---

If you are using new Blogger Interface, you can upload your image file as favicon directly on your Blogger dashboard.

• Log-in to your Blogger account.
• Go to Layout tab.
• Click Edit under Favicon.
• Upload your image file. It should be less than 100KB (16X16 pixels). Image file formats supported are ICO, PNG, GIF, JPEG, SVG.
• Click Save and done.

Old Blogger Interface

---

If you are using Old Blogger Interface, follow some simple steps-

• Select your desired image and convert to it into "ico" file format by 16x16. If you have not ico file generator tool visit Here
• Save your ico file on your Hard Disk
• Upload it to Some Free File Hosting Websites that supports "ico" file. for example click Here 
• Copy the Share Link
• Log into your blogger Account » Design » Edit HTML.
• Find the code <title><data:blog.pageTitle/></title>

Now, immediately below <title><data:blog.pageTitle/></title> paste the given code

<link href=' Paste the URL of your icon file here ' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Replace the 'Paste the URL of Your icon file here ' with the link of your ico file that you upload to some file Hosting Web Sites. Save template and the favicon file will be attached just before your blog's Name.

Add Floating Social Media Buttons to Blogger

Social Media buttons play a great role to share your web content by the visitors quickly on Facebook, Twitter, Google+  and many other platforms. If you have sharing widget you can increase your blog traffic also. There are several ways to add these buttons such below post title or at footer area, as I shared in my previous posts. Now, in this post we will discover how to add floating Social Media Buttons. Forget about the some share widgets based on J-query scripts, because they increase blog loading time and still some browsers like Internet Explorer does not support J-query scripts function properly. This social button set is based on CSS and does not increase blog's loading time. 

Follow some simple steps to add this quick share tool to communicate with your visitors/ audiences.