Tuesday, March 31, 2015

How to Change Blogger Default Template

When anyone starts blog with blogger then he think how to change blogger default template with their own or other blogger template. Every o... thumbnail 1 summary
When anyone starts blog with blogger then he think how to change blogger default template with their own or other blogger template. Every one wants to change default template because it does not attractive and professional. Default template also not search engine optimized template because it doesn't designed professionally and don't update after that they designed. Search engine updated their algorithm many times so always need search engine friendly template for website or blog.


Change Default Blogger Template

To change your blog default template you need to download a new template or designed your own template. You can also search blogger template on the internet. There are many source of blogger template on the internet, you can found that when you search blogger template in Google. After download or create your blogger template you need to just follow below steps to change your blogger template:

Step 1

Log in into Blogger Dashboard.

Step 2

Now choose Template in drop down menu as shown in below picture.

Step 3

Before apply new template please backup your old template.

Tips: You can also read our post about How to Backup Blogger Template.

Step 4

Now click on Browse button and browse you template that you want to apply on blog.

Step 5

Click on upload button. 

Monday, March 30, 2015

How to Customize Blogger Lightbox

Today we provide you tutorial about Customize Blogger Lightbox for images. When you click on image in your site its show in browser so we p... thumbnail 1 summary
Today we provide you tutorial about Customize Blogger Lightbox for images. When you click on image in your site its show in browser so we provide you lightbox settings to show images in lightbox. When you click your image a lightbox popup window will open and show current image in popup window without leave your post. You can also customize your lightbox like shadow of images and color of background.


How to Change Blogger Lightbox

You can customize your blogger lightbox with follow some simple steps:

Step 1

Go to Template > Edit HTML Button as shown in below picture.



Step 2

Find below code with help of CTRL + F

]]></b:skin>

Step 3

Copy and paste below code just before it:

 /* Blogger Lightbox
----------------------------------------------- */
/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(
image-url-address) !important;
opacity: 
0.8 !important;
filter: alpha(opacity=90) !important;
}
/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(
image-url-address) no-repeat !important;
width: 24px !important;
height: 24px !important;
}
/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}
/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: 
#555555 !important;
}

Tips: Change image-url-address in red color with your image URL. You can also change opacity 0.8 means transparent of your background. Replace #555555 to change color of images.

Step 4

Click on save template.

Sunday, March 29, 2015

How to Change Favicon on Blogger or BlogSpot Blog

Today's we give you an tutorial about How to you change your favicon on your blogger or BlogSpot blog. Favicon is a small picture which... thumbnail 1 summary
Today's we give you an tutorial about How to you change your favicon on your blogger or BlogSpot blog. Favicon is a small picture which shows in before your title in browser. This favicon mostly used for attract people with used of great graphics. Blogger user can be changed default blogger favicon to their own favicon by just follow some easy steps.

How to Add Favicon on Your Blogger Blog

Please follow below steps to add a favicon on your blogger blogs:

Step 1

Log in into Blogger Dashboard and Go to Layout than Click on Add a Gadget link as shown in below picture.


Step 2

Now click on the Edit link on the Favicon setting as shown in below picture.


Step 3

Now a popup window will open where you can browse your image from your computer to replace default favicon image. Click on Brouse button and search your favicon image and click on save as shown in below picture.

Step 4

Now you can see your own fevincon in place of default favicon.

Now it’s done. You can see your changed favicon to refresh your blog.

Saturday, March 28, 2015

How to Add Animated Favicon in Blogger Blog

In previous post we have discussed about how to Change Favicon on Blogger or BlogSpot Blog now we give you How to add animated favicon in B... thumbnail 1 summary
In previous post we have discussed about how to Change Favicon on Blogger or BlogSpot Blog now we give you How to add animated favicon in Blogger. Favicon is used for attract your blogger with using of great graphics. We provide you how to add an animated favicon in your blogger blog with follow some simple steps.


An Animated Favicon in Blogger Blog

You can add Animated Favicon in Blogger Blog with follow below steps:

Step 1

Log in into your Blogger Dashboard, Go to Template than Edit HTML.

Step 2

Click on Expand widget templates

Step 3

Search below code with CTRL + F

<b:skin>

Step 4

Copy and paste below code before or above it

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

Tips: replace your favicon URL with your-favicon-links-goes-here.

Step 5

Now save your Template.

You're done perfectly.

Friday, March 27, 2015

How to Create Static Pages In Blogger

Today we will give you tutorial about how to create static pages in blogger. Static pages in blogger allows you to create a static pages on... thumbnail 1 summary
Today we will give you tutorial about how to create static pages in blogger. Static pages in blogger allows you to create a static pages on specific topic like contact us page, about me page, Privacy Policy page, terms of services page, advertisement page and so on as you wish to create any static pages. Static pages are same as blog post page but it’s some difference from post like it’s not appear in the home page, it’s don't have any label, not indexed like archive pages.


Create Static Pages in Blogger

You can Create Static Pages in Blogger with follow some simple steps given as below:

Step 1

Log in into your Blogger Dashboard and click on pages at left side menu as shown in below picture.

Step 2

Now click on new pages and select blank page as shown in below picture.

Step 3

Now type your title of page and put content on body as shown in below figure.

Step 4

You can also check your page preview before publishing any page for see how to your page show when you publish it.

Step 5

Now click on publish button to publish your content for publicly.

Step 6

Now in pages you have 3 options to set it on home page.

  • Top tabs - Its show your page in nav menu at below header.
  • Side Links - Its show your page in your blog sidebar
  • Don't Show - You can add your page manually in your template for show as your requirement.
Step 7

Now set your page where it appears than save arrangement button.


You've done perfectly. If you have any question or doubt about any steps than you can contact us any time or please leave your comment at below, we solved your issue as soon as possible.

Thursday, March 26, 2015

How to Change Blogger Post A Comment with Image

We will show you How to Change Blogger "Post A Comment" text to image in this tutorial. We provide you full step by step guide to... thumbnail 1 summary
We will show you How to Change Blogger "Post A Comment" text to image in this tutorial. We provide you full step by step guide to replace Post A Comment with an image which is shown above comment box. Many blogger not want to show common word above comment box so here a tutorial about changing it’s to image. You can add your own image and we are also providing some images if you like any one of them then you can use on your blog.


Replace Post A Comment with Image

To replace "Post A Comment" text to an image in your blogger blog with follow below steps:

Step 1.

Login to Blogger Dashboard. Go to Template > Edit HTML as shown in below picture.


Step 2.

Click on "Expand Widget Templates" as shown in below picture.


Step 3.

Now search following code with the help of CTRL + F:

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
And also search below code
<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Step 4.

Replace <data:postCommentMsg/> to below image code


<a href="http://www.haakblog.com/2013/06/change-blogger-post-a-comment-with-Image.html" target="_blank"><img src="https://lh6.googleusercontent.com/-zyIO7auzric/Uc8pw71PVUI/AAAAAAAAAOY/0v_qVt_9VXI/h105/leave-a-comment-trans.gif" /></a>


<a href="http://www.haakblog.com/2013/06/change-blogger-post-a-comment-with-Image.html" target="_blank"><img src="http://3.bp.blogspot.com/-OcNUD6OBM3E/Uc8qeKx274I/AAAAAAAAAOg/d1VGnGP29wM/s180/leave-comment.gif" /></a>

Or replace your own image with image source URL.

Step 5.

Save Template.

Now you have done perfectly. If you have any suggestion or updates about codes please give us your update at below form we will publish your updates as soon as possible.

Wednesday, March 25, 2015

Managing Your Blogging Freelance Business the Easy Way

Freelancing is a great company.  You’re your own boss . You can work hours that suit you. You can meet the most interesting of people and b... thumbnail 1 summary
Freelancing is a great company. You’re your own boss. You can work hours that suit you. You can meet the most interesting of people and blog about the most interesting of things. It’s a great career to have, and you are undoubtedly thrilled that you are doing something that you love.

But, when it comes to matters of money and running your blog like a business, it can be difficult to know where to start. After all, you got into this game because you love what you do. You don’t want to act like a faceless corporation. There does come a time when you need to start managing your freelance business in a more robust way. Whether this helps with payments or helps you acquire more work you need to start managing your processes.

Let’s take a look at how you can manage your freelancing venture with ease.

Managing Your Finances
Managing your money, and your finances can be tough. If you have a large number of clients, finding the time to invoice and track all of them is difficult. But, you don’t have to worry about that once you download apps and services to your phone. Invoicing for freelancers has been made easy. You can manage a plethora of clients and ensure that you set up alerts for payment deadlines. It’s never been easier to track and manage your money.

Cloud Based Documents
Cloud storage is the perfect solution for many bloggers. Having a cloud-based word document is an essential item in your blogging arsenal. Make sure that you share the information with clients. You can collaborate for a greater working experience. If you can both access your article and blog, before it hits the website, you can make sure that you are both happy with the finalised version. Commenting, chat functions and editing can be done together. This is something that cannot be done in a word processor. This can ensure that your processes are streamlined. What’s more, your clients will be happy too.


Online To-Do Lists
Online to-do lists are imperative. If you are having trouble organizing your client's needs, or juggling a wide range of clients, an online to-do list is just the tool for you. You can ensure that your day is being managed to its full potential. After all, you don’t want to dip in and out of tasks and blogs. You need to add structure to your day. But, you can also add invoice due dates, so that you can chase payments if necessary. Who knew the life of a blogger could be so organised?

Use Task Management Solutions
Did you know that Google provide a free download called Google Tasks? As a blogger, you may talk to your clients via email. This means that it can be easy to lose tasks that are assigned to you. Once you receive an email, you can move it to tasks and set-up reminders of when the article or blog needs to be completed. This is an excellent way to making sure that you meet your client’s demands and manage your time processes.

Tuesday, March 24, 2015

Add Click to Drop Down Menu Widget for Blogger

Many blogger want to implement   Click to Drop Down Menu Widget  for their blogger blog in sidebar but they do not know how to do this. We ... thumbnail 1 summary
Many blogger want to implement Click to Drop Down Menu Widget for their blogger blog in sidebar but they do not know how to do this. We provide you full code to add Click to Drop Down Menu Widget for Blogger and you can easily add to your blog.
Click to Drop Down Menu Widget help to boost the traffic on your posts and passing on the link juice via your home page. Click to Drop Down Menu Widget that helps you to implement very good looking drop down menu in your sidebar.

Click to Drop Down Menu Widget for Blogger
Follow the below steps to add Click to Drop Down Menu Widget for Blogger blogs:

Step 1

Go to Blogger Dashboard.

Step 2

Go to Layout and click on Add a Gadget Link as shown in below picture.


Step 3

Now add HTML/JavaScript widget from list.

Step 4

Copy and Paste Below code into box:

<div class="msg_list">
<p class="msg_head">
Heading #1</p>
<div class="msg_body">
<ul>
<li>
<a href="#">
Link Name 1 </a>
</li>
<li>
<a href="#">
Link Name 2 </a>
</li>
  </ul>

  </div>
<p class="msg_head">
Heading #2</p>
<div class="msg_body">
 <ul>
 <li>
<a href="#">
Link Name 1 </a>
   </li>

 <li>
<a href="#">
Link Name 2  </a>
   </li>
 
</ul>
<a style="color:#E2E2E2; padding-left:160px;" href="http://www.haakblog.com/2014/10/click-to-drop-down-menu-widget-blogger.html">Drop Down Menu</a>
</div>
<style>
 p{
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 320px;
display: block;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#316C55;
margin:1px;
  color:#FFFFFF;
  font-family: Sans-serif,Arial,Helvetica;
    font-size: 12px;
    font-weight: bold;
}
.msg_body {
padding: 15px 10px 15px;
background-color:#F4F4F8;
}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script></div>

Tips: Change Heading#1 & Heading#2 to your heading and change Link Name 1 & Link Name 2 to your Link Name and Hyper Link with your link.

Step 5

Click on Save button.

Monday, March 23, 2015

How to Become a Successful Blogger

Being a real Blogger is not difficult, all your need to do is begin composing and start a fresh Site. But perhaps you have thought what is ... thumbnail 1 summary
Being a real Blogger is not difficult, all your need to do is begin composing and start a fresh Site. But perhaps you have thought what is needed to be a successful Blogger? Bloggers make 1000s of dollars on a monthly basis? Well, response is fire, commitment & most significant they're seriously interested in Blogging.


Many individuals make an effort to make money but success is got by quite few. Among the most effective method of getting is blogging. Blogging is among the most effective career chance today. Blogging needs a lot of effort, long working hours and research. If so, why many bloggers give up their Blogging and fail. Why many sites get into parked page following annually and a lot of people do not even trouble reviving their Website? The clear answer is insufficient motivation and fire.

1. You've got writing skills :-
It is possible to turn into an effective blogger for those who have great writing abilities. Writing is for being a blogger, the essential ability. Your website readership is determined by how great your writing abilities are. You aren't composing to get a paper, as they may be distinct or to get a publication.

2. You're disciplined :-
Although profession or every work desires disciplined but a blogger ought to be disciplined. You must post routine at your site, if you would like true readers afterward. In case you aren't going to blog often then your readers will be lost by you.

3. Willing to Learn New Things :-
A blogger should prepare yourself to understand. I m a student. I read lots of other sites to find out more knowledge. Usually bloggers share their experiences to ensure that others can study from them. Do spend sometime so it is possible to improve your knowledge, to read other sites. I am certain you're among those eager to master why you're here, and that is. But you get first success and realize few targets, do not stop reading. Reading is an important necessity that may let you keep updated with latest info.

4. Great Communicator :-
Some folks believes that the blogger's work is over after composing this article. But the people are incorrect. The key work beginning following the conclusion of post. A blogger must market that post on social media websites and he also needs to respond to each of the remarks he got on his post. You are in need of an excellent communicating abilities with this. So boost your communication abilities in the event you would like to be a successful blogger.

5. Work Hard :-
A blogger must work night and day to discover new thoughts and then he's to active on all the social networking sites to advertise his website. You do not have to stress yourself with too much of work, instead use your time smartly and delegate work that is time consuming to your virtual staff.

6. Become Creative Man :-
It is not essential that each blogger needs to be an individual that is creative, but it is definitely an edge for you personally. Imagination is of writing, the most important part. Posts that are creative consistently draw readers' interest. It allows you to stick out in the rest.

7. Don’t Make Mistakes:
But the actual price is instead of making errors, learn from errors created by others that may let you prevent those errors that are stupid.

All these are the qualities in the event you'd like to be a blogger, you need to have. Anyone can become blogger if the blogger have these qualities, as I mentioned.

Sunday, March 22, 2015

Tips to Increase Google Crawl Rate Of Your Website

Website crawling is a key part of search engine optimization and you will see many significant pages aren't indexed in Google or other ... thumbnail 1 summary
Website crawling is a key part of search engine optimization and you will see many significant pages aren't indexed in Google or other search, if your site can not crawl efficiently. A website with appropriate navigation helps in deep and indexing of your website.

There are a number of matters which we are able to do get quicker indexing and to improve the successful website Crawl speed. Search engines use your site to crawl for ranking and indexing. Therefore you will need to possess appropriate and an excellent crawling speed of site or your site to be successful. Here I am sharing a few of the strategies that are powerful to raise increase visibility and website Crawl speed in search engines like google that are popular.

Simple tips to Increase Website Crawl Rate

Increase Google Crawl Speed As I mentioned you may do a lot of things to assist search engine bots crawl them and locate your website.


Otherwise, you can find a number of other things we may do from our end like Website pinging, Sitemap entry and commanding crawling speed through the use of Robots.txt. I'll be talking about few of the strategies that may help Google Crawl speed to raise and get bots crawl your website quicker and better method.

1. Upgrade your website Content Frequently
Content is definitely the main standards for search engines like google. It's possible for you to supply content that is fresh by means of a website that's in your web page. That is more straightforward than continuously shifting your page content or attempting to add web pages. Inactive sites are crawled frequently than the ones that supply new content.

Day-to-day content updates are provided by many websites. However, it is also possible to add your website and new videos or sound streams. It is suggested that you simply provide your Crawl speed to increase. In this manner, at least part of your website is continually upgrading and will probably be helpful.

2. Improve your Pagerank
It is among the very critical variable. Lots of PageRank dictates the search engines Crawl Speed, with higher PR sites/site usually being crawled frequently. But as usual while you assemble links to your website, this is not the only variable you can find other things. Although it may be thought to be myth also, as Google mention Page status really has nothing related to traffic and website ranking, but to improve page position we must construct links, which helps a lot for quicker crawling.

3. Server with Great Uptime
Host your site on a trusted server with great uptime. You do not need your site to be visited by Googlebots during downtime right? The truth is, in case your website is down their crawling speed will be establish by Google crawlers correctly and you'll find it more difficult to get your content indexed quicker. There are a number of Great hosting sites and it is possible to look at Web Hosting page that is recommended.

4. Create Sitemaps
Sitemap entry is among the very first few things that you can do to get your website find quick by internet search engine bots. In WordPress it is possible to use Google XML sitemap plugin submit it and to create dynamic sitemap. Read More about Sitemap below:


5. Prevent Duplicate Content
Crawl speeds decrease. Search engines can quickly pick on duplicate content. This can lead to less of your website being crawled. Additionally, it may lead to the search engine lowering your position or prohibiting your website. You need to supply useful and fresh content. Content could be anything from website postings. There are a number of ways to optimize your articles for search engines like google. Your Crawl speed cans also enhance. This is recommended to check do not have any duplicate content on your own web page. Duplicate content may be between sites or between pages. Additionally see below hints on using robots.txt.

6. Reduce your site Loading Time
Mind your page load time, Notice that a budget is worked on by the Crawl- there isn't going to be a time left to see your other pages, if it spends an excessive amount of time crawling your enormous pictures or PDFs.

7. Block use of unwanted page
An easy editing on Robots.txt can let you prevent bots from crawling such worthless portion of your website.

8. Screen and Optimize Google Crawl Speed
Now it is also possible to monitor and optimize Google Crawl speed using Google Webmaster Tools. You can establish your Google Crawlspeed and raise it to quicker as given below. Though I might propose put it to use only when you're in fact confronting problems with bots not crawling your website efficiently and use it using care. It's possible for you to read more on the topic of shifting speed crawl here.

9. Use Ping services:
Pinging is an excellent method showing your website existence and let bots understand when your website content is upgraded. There are a number of manual ping services as well as in WordPress it is possible to add more ping services. This kind of list can be found by you .

10. Submit your site to online Directories like DMoz etc.
Since DMoz and Technoarti are regarded as active directories & important, bots can arrive at your website by following your website listing pages.

11. Interlink your website pages just like a professional:
When you compose a fresh post, return to old posts that are associated and put in a link to your own brand-new post there. This will no right help in raising Google Crawl speed but will help pages that are profound to efficiently crawl in your web page.

12. Do not forgot to Optimize Pictures

Crawlers are not able to read pictures right. Make sure you make use of alt tags to give a description if you are using pictures. Pictures are a part of search results but as long as they have been correctly optimized. You a learn about Picture optimization for search engine optimization here and you also need to consider installing Google picture sitemap plugin and submit it. This can help all of your pictures to be found by bots for those who have taken care of picture alt tag correctly and also you may anticipate adequate level of traffic from internet search engine bots.

This can help your sitemap page to be found by bots immediately plus they are able to crawl and index deep pages from sitemap of your website.

Do let us understand if another solution is being followed by you to boost speed of your website crawls?

Saturday, March 21, 2015

How to Use New Blogger HTML Editor

Its Blogger template HTML editor has been recently upgraded by Blogger. The Blogger template editor has enhanced. If you used Blogger now, ... thumbnail 1 summary
Its Blogger template HTML editor has been recently upgraded by Blogger. The Blogger template editor has enhanced. If you used Blogger now, and are a Blogger user, you may have seen the brand new Blogger Template HTML Editor. It is a first important upgrade since 2006 to Blogger Template editor. Layout and its characteristics is enhancing. Couple of days back, Blogger has upgraded now the brand new Blogger Template Editor and its Website post editor.


In addition, it has planned to helping the user who's much unskilled in HTML/CSS codes and Coding. So nowadays the brand new Blogger template editor can be also used by folks having less expertise readily. Among the recent Blogger template editor's most effective attribute is, its layout that is user friendly. Since it's now not difficult to locate template errors in the brand new Blogger template editor, as it's started revealing line amount of every code also in the brand new Blogger template editor.

How to make use of the brand new Blogger Template Editor

Since its template HTML editor has been improved by Blogger, you need to learn the way to put it to use now. Some of the best features of the new Blogger template HTML editor given below.

1. Jump To Widget:

Hop is a most significant characteristic that Blogger has added. It can help you to discover code that is associated into a particular widget just. You only need to click on "Hop to Widget Dropdown" and choose the widget you would like to edit. Begin to see the image below.

2. Preview Template:

Because it's an attribute that is old, the last template editor also lets you preview your Blogger template. Nevertheless, the brand new Blogger template editor allows you to preview the template in an identical window. Begin to see the image below, tips on how to preview your Blogger template in an identical window.

3. Expandable Code Markers

A new additions to the new Blogger template editor. The expandable code segments keeps your Blogger template codes in short and makes your Blogger template editor seem less cluttered and clean. See the picture below.

4. Format Template:

Format Template is thing that is new here. Blogger has introduced together with the development with a fresh Format Template attribute. And if you're using an extremely altered template to your website, you are recommended by me, for not attempting this. You need to preview your Blogger template if you are using this choice.

5. Find, Replace And Replace All Option

It is a among the very most useful changes. The preceding Blogger template HTML editor lets you just discover your blogger template codes. The brand new Blogger template editor allows you to use Replace Find and Replace All functions. The HTML Editor that is brand new has a unique Replace Find and Replace All functions. Simply press Ctrl F to locate codes to replace Press Ctrl Shift R and codes to replace all with a few other codes in your Blogger template editor that is new. Begin to see the image Below.


It's going to be helpful when you use a fresh Blogger template in your site. This Replace Find and Replace All Functions allows you to replace all Website template links along with your personal Website links.

What is your viewpoint regarding the Blogger template HTML Editor that is brand new?

Friday, March 20, 2015

Elegant Popular Posts Widget for Blogger

Today we provide you Elegant Popular Posts Widget for your Blogger blog. If you want to this than we provide you full working codes. Popula... thumbnail 1 summary
Today we provide you Elegant Popular Posts Widget for your Blogger blog. If you want to this than we provide you full working codes. Popular post widget is most important part of blog because popular post widget shows most popular posts of your blog for your visitors. I have already provided you some popular post widget and now I am provide you another popular post widget for your blogger blog.

Popular Posts Widget for Blogger

Follow below steps how install Elegant Popular Posts Widget for your Blogger blog:

Step 1

Login into your Blogger Account. Go to Your Blogger Dashboard and Click on Layout tab at the left side panel. Now click on Add a Gadget Link like below picture.


Step 2

After click on Add a Gadget Link a popup window will open with all available gadgets. Select popular post widgets from gadgets list. See below picture for more help.


Step 3

Now Go to Template & click on Edit HTML button as shown in below picture.


Step 4

Now search below code with the help of CTRL + F:

]]></b:skin>

Step 5

Now paste below code just above ]]></b:skin>

/* Popular Posts Widget customized by haakblog.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }

Step 6

Now search </body> and paste below given code just above it:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by haakblog.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

Step 7

Now Save Template button.

Thursday, March 19, 2015

H1, H2 & H3 Heading Tags Optimization in Blogger

Today we provide you tutorial about H1, H2 & H3 Heading Tags Optimization in Blogger and how to easily optimize H1, H2 & H3 heading... thumbnail 1 summary
Today we provide you tutorial about H1, H2 & H3 Heading Tags Optimization in Blogger and how to easily optimize H1, H2 & H3 heading tags for better seo of your website. Heading tags are very important in a HTML Document. There are 6 Heading tags from H1 to H6. From these six tags H1 is the very important heading tag than followed by other tags H2, H3 and so on. Blogger uses H1 tags for the blog title, H2 for sidebar titles and H3 for post titles. Heading tags are play very important role in SEO and this tutorial help to improve your SEO by heading tags.

How to Use Heading Tags in Blogger

By default blogger assigned heading tags to titles based on their priority and H1 is most important tag for SEO.

Blogger uses the Heading Tag distribution like as below:

<h1>Blog Title</h1>
<h3>First Post Title</h3>
<h3>Second Post Title</h3>
<h2>Sidebar Widget Title</h2>

Heading tags are not important in sidebar. So we will change these tags to:

<h1>Blog Title</h1>
<h2>First Post Title</h2>
<h2>Second Post Title</h2>
<h4>Sidebar Widget Title</h4>

By default, Blogger uses the following heading distribution

<h1>Blog Title</h1>
<h3>Post Title</h3>
<h2>Sidebar Widget Title</h2>

We will change this to

<h2>Blog Title</h2>
<h1>Post Title</h1>
<h4>Sidebar Widget Title</h4>

How to Modify Template According to Heading Tags

Please follow below steps to change your heading tags:

Step 1

Login to your blogger Dashboard and Go to Blogger Template > Edit HTML as shown in below picture.

Step 2

Now for change Blog Title to H2 on post and static pages find the h1 tag like <h1 class='title'> as shown in below picture.


Step 3

Change post title to H1 - find h3 tag like <h3 class='post-title entry-title' itemprop='name'> with the help of CTRL + F as shown in below picture.


Wednesday, March 18, 2015

Mashable Style Social Subscription Widget For Blogger

Mashable Style Social Subscription Widget is very good widget for blogger. Most of wordpress blogs used this widget. Now I am providing you... thumbnail 1 summary
Mashable Style Social Subscription Widget is very good widget for blogger. Most of wordpress blogs used this widget. Now I am providing you Mashable Style Social Subscription Widget For Blogger. I will give you full customize code of Mashable Style Social Subscription Widget for blogger. This widget includes facebook button, Twitter button and Google plus button for your blog visitors to share your post on social media websites. You can also increase your visitors with the help of social subscription widget on your blog from social sites.

Mashable Style Social Subscription Widget

Now we explain how to install Mashable Style Social Subscription Widget on Blogger. Please follow below steps to add Mashable Style Social Subscription Widget for Blogger:

Step 1

Login into Blogger Account and Go to Blogger dashboard.

Step 2

Go to Layout and click on Add a Gadget as shown in below picture.


Step 3

When you click on Add a Gadget link a popup window will open with all gadget lists. Select HTML/JavaScript Widget as shown in below picture.

Step 4

Copy & Paste below code into HTML/JavaScript box:

<style>
    /* Social Widget */
    #MBT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin-top:15px;
            height:45px;
    }
    .googleplus {
        background: #F5FCFE;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-image: initial;
        font-size: .90em;
        font-family: "Arial","Helvetica",sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;}
    .googleplus span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;}
    .g-plusone {    float: left;}
.gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}
    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}
    #email-news-subscribe .email-box input.email:focus{color:#333}
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}
    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}
    </style>
    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>
    <![endif]-->
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" > <!-- Begin Widget -->
<div class="gplus"> <link href="https://plus.google.com/
117296108713578780888" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script>
<!-- Place this tag where you want the badge to render --> <g:plus href="https://plus.google.com/
117296108713578780888" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/
haakblog&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp; font&amp;height=100px&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div>
<div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=en&amp;link_color=&amp;screen_name=
haakblog&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=
haakblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="haakblog" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/haakblog" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/haakblog"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/117296108713578780888" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.haakblog.com" target="_blank" >Blogger Widgets »</a><a href="http://www.haakblog.com/2014/02/download-best-blogger-templates-of-2014.html" rel="dofollow" target="_blank" title="blogger templates"><img src="https://bitly.com/haakblog" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget-->

Tips: Change all red color with your id.

Step 5

Click on Save Button.