Sunday, May 31, 2015

Google Adsense Ads Code Below Post Title in Blogger

Adsense is the best earning money source for blogger so many blogger want to add Google Adsense Ads Code Below Post Title in Blogger to... thumbnail 1 summary

8:53:00 AM

Adsense is the best earning money source for blogger so many blogger want to add Google Adsense Ads Code Below Post Title in Blogger to get high Click Through Rate (CTR). Every webmaster increases the ad revenue to get maximum output from Google adsense advertisement program. Most of websites prefer adding ads below post title because it is the best place to put adsense code to increase Click Through Rate (CTR). You can also check yourself which place works best for you. Today's we provide you tutorial about how to show Google Adsense code below post titles in blogger.

How to Add Google Adsense At Below Post Title

We give you step by step guide to add Google adsense ad code below post title:

Create Google Adsense Ads

Step 1

Go to Google Adsense Account.

Step 2

Go to My ads tab and create a new ad unit.

Step 3

Create 300x250 Medium Rectangle or 336x280 Large rectangles for best results.

Step 4

Now convert this code to HTML Parse Tool to change special characters. For Convert In HTML Please Go To bohememoi.blogspot.in and paste your adsense code here.

Step 5

Now copy Parsed HTML Code code.

Add Google Adsense Code Below Post Titles

Step 1

Go to Blogger Dashboard.

Step 2

Go to Blogger Template then click on Edit HTML button as shown in below picture.

Step 3

Click on Expand Widget Template box as shown in below picture.

Step 4

Press Ctrl + F and search below code

<data:post.body/>

Step 5

Now copy and paste below code just above it.

<b:if cond='data:blog.pageType == "item"'>
<div align="center">
PLACE YOUR AD CODE HERE</div>
</b:if>

Tips: The above code show ad in center if you want to change it to left or right then replaces center to left or right.

Step 6

Change PLACE YOUR AD CODE HERE with your Google Adsense code

Step 7

Click on Save Template Button.

Once you save your template your ad look something like below picture.

Saturday, May 30, 2015

How To Disable Right Click on Blogger/BlogSpot

Today we provide you simple blogger tricks on how to Disable Right Click on Blogger/BlogSpot blogs easily. You can easily manage copyright ... thumbnail 1 summary

8:46:00 AM

Today we provide you simple blogger tricks on how to Disable Right Click on Blogger/BlogSpot blogs easily. You can easily manage copyright issue from disabling right click on your blog. Disable Right Click easily avoid users to copying your blog content, images etc. This is very simple blogger tricks to avoid copyright issue from blog. Many blogger noticing that most of blogs copied their blog content so they want protect their blog from copying and Disable Right click is very good idea to avoid this.

Disable right click becomes a disadvantage that if you disable right click than your sharing codes on blog post also not copied from blog post. So first think about this than applied this code on your blog or you can also remove this code easily if you don’t want more this on your blog.

Disable Mouse Right click on Blogger or BlogSpot Blogs

Please follow below steps to Disable Mouse Right click on Blogger or BlogSpot Blogs:

Step 1

Step 2

When you click Add a Gadget link a popup window will open with all gadgets list. Please choose HTML/JavaScript gadget form list as shown in below picture.

Step 3

Past below code just inside it:

Step 4

Save the gadget.

Step 5

Save the Layout.

Friday, May 29, 2015

Arrow Keyboard Navigation for Blogger

Most of our readers asked for How to Add Arrow Keyboard Navigation for Blogger Blog posts. Default blogger template shows older and new... thumbnail 1 summary

8:43:00 AM

Most of our readers asked for How to Add Arrow Keyboard Navigation for Blogger Blog posts. Default blogger template shows older and newer link navigation that appears at the bottom of the Blogger. Most of wordpress blog and HTML based website used keyboard navigation on their websites. Keyboard navigation is very fast, reliable and easy to use. Today we will provide you tutorial about how to add Keyboard navigation in blogger.

This is very simple and easy widget for blogger to get fast navigation through keyboard. If you want to see live demo than use the left and right arrow key of your keyboard to navigate different posts on this blog. This methods work with simple JavaScript and you can add this with follow some simple steps to add code in your blog.

How to Add Arrow Keyboard Navigation for Blogger

Please follow below steps to Add Arrow Keyboard Navigation for Blogger:

Step 1

Step 2

Now Go to Template and Click on Edit HTML button as shown in below picture.

Step 3

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

</head>

Step 4

Now copy and paste below code above </head> tag:

Step 5

Click on Save Template button.

Thursday, May 28, 2015

How to Add Automatic Read More Button For Blogger Blogs

Today we give you trick to Add Automatic Read More Button For Blogger your long blog post which appear in your home page. Read more buttons... thumbnail 1 summary

8:39:00 AM

Today we give you trick to Add Automatic Read More Button For Blogger your long blog post which appear in your home page. Read more buttons needed because blogger show full post on your home page but many blogger want to show only summary of blog post on home page. So we need to add read more buttons on home page to split long blog post to summary and add read more after summary. Here I am showing you How to Add Automatic Read More Button For Blogger Blogs. After add this code your home page long post automatically convert into 2-3 line summary and add read more button after summary.

Add Automatic Read More Button For Blogger Blogs

Please follow below steps to Add Automatic Read More Button For Blogger Blogs:

Step 1

Step 2

Go to Blogger Template at the left panel and Click on Edit HTML Link as shown in below picture.

Step 3

Find below code with the help of CTRL + F:

</head>

Step 4

Copy and Paste below code above </head>:

Step 5

Now search below code:

<data:post.body/>

Step 6

Replace below code with this:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more...</a></span><a href="http://www.haakblog.com" title="Blogger Tutorial"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tutorial"></a>
</b:if>
</b:if>

Step 7

Click on Save Button.

Wednesday, May 27, 2015

How to Add Animated Mouse Cursors in Blogger Blog

Today we give you blogger tutorial about how to change your mouse cursor in blogger blog to an animated cursors. We give you best way to ad... thumbnail 1 summary

2:43:00 PM

Today we give you blogger tutorial about how to change your mouse cursor in blogger blog to an animated cursors. We give you best way to add animated cursors in your blog to give good look when any one visit your blog and changing your mouse cursor to animated cursors. You can easily change your mouse cursor to animated cursors in blogger or BlogSpot blog. You can decorate your blogger blog to good look. We give you step by step tutorial to change mouse cursor to animated cursors.

Add Animated Mouse Cursors in Blogger Blog

Please follow below steps to Add Animated Mouse Cursors in Blogger Blog:

Step 1

Log in into your blogger Account and go to blogger dashboard. First back up your template or you can also readHow to backup blogger template to know more about backup template in blogger.

Step 2

Go to Template and click on Edit HTML as shown in below picture.

Step 3

Find Below code with the help of CTRL + F:

</head>

Step 4

Please select your mouse style then Copy and Paste below code before it.

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7

Style 8

Style 9

Style 10

Style 11

Style 12

Style 13

Step 5

Now Click on Save Template Button.

Tuesday, May 26, 2015

How to Add LinkedIn Share Button For Blogger

LinkedIn share button for blogger will help to increase your reach on LinkedIn. Your readers can share your posts to LinkedIn news feed wit... thumbnail 1 summary

2:38:00 PM

LinkedIn share button for blogger will help to increase your reach on LinkedIn. Your readers can share your posts to LinkedIn news feed with the help of this button. If you need LinkedIn share button on your blog than do not think about how to do this just add given code on your blog and you can add LinkedIn button on your blog easily.

Add LinkedIn Share Button For Blogger

Please follow below steps to Add LinkedIn Share Button For Blogger:

Step 1

Step 2

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

Step 3

Find Below code with the help of CTRL + F:

<data:post.body/>

Step 4

Copy and paste below code above or before it:

Button Code For Vertical Count

<b:if cond='data:blog.pageType == "item"'>
<script type='IN/Share' expr:data-url='data:post.url' data-counter='top'></script>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US
</script>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="blogger tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></b:if>

Button Code For Horizontal Count

<b:if cond='data:blog.pageType == "item"'>
<script type='IN/Share' expr:data-url='data:post.url' data-counter='right'></script>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US
</script>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger
tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="blogger tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></b:if>

Button Code For No Count

<b:if cond='data:blog.pageType == "item"'>
<script type='IN/Share' expr:data-url='data:post.url'></script>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US
</script>

Step 5

Click on Save Template Button.

Monday, May 25, 2015

How to Add Google Breadcrumb for Blogger

Today we give you tricks about How to Add Google Breadcrumb for Blogger which will show breadcrumbs on your blog post and it will user frie... thumbnail 1 summary

2:35:00 PM

Today we give you tricks about How to Add Google Breadcrumb for Blogger which will show breadcrumbs on your blog post and it will user friendly for your blog. Breadcrumb show visitor's location on your website or blog. There are numbers of benefit for your website or blog by using of breadcrumb like it increase your site exposure in Google search engine. You can see below picture for how is that see on your blog.

Add Google Breadcrumb for Blogger

Please follow below steps to Add Google Breadcrumb for Blogger. Before edit your blog template please backup your template or read our blog post How to backup template in blogger?

Step 1

Step 2

Click on Expand Widget Template as show in below picture.

Step 3

Search below code with the help of CTRL + F.

<b:include data='top' name='status-message'/>

Step 4

Replace below code with above code:

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

Step 5

Search below code

<b:includable id=’main’ var=’top’>

Step 6

Replace below code:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

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

<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'><a href="http://www.haakblog.com/2014/02/download-best-blogger-templates-of-2014.html" rel="dofollow" target="_blank" title="blogger templates"><img src="http://img1.blogblog.com/img/blank.gif" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger widgets"><img src="http://img1.blogblog.com/img/blank.gif" alt="blogger widgets" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>

Step 7

Search below code

]]></b:skin>

Step 8

Replace with below code:

/* Breadcrumbs by http://www.sitessubmit.blogspot.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Click on Save Template.

Sunday, May 24, 2015

Simple Related Posts Widget For Blogger With Thumbnails

Here we provide Simple Related Posts Widget for Blogger with Thumbnails for your blog post. Related posts widget shows other posts in same ... thumbnail 1 summary

2:29:00 PM

Here we provide Simple Related Posts Widget for Blogger with Thumbnails for your blog post. Related posts widget shows other posts in same category or label. With the help of related post widget you can increase your blog page views and attract your readers to give related posts for spend more time. It’s help to increase visitor time periods of your website. If you need this related post widget you need to create some changes in your Template.

How to Add Related Posts Widget

You can easily add related posts widget with follow below steps:

Step 1

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

Step 2

Click on the "Expand widgets template" as shown in below picture.

Step 3

Search below code with the help of CTRL + F

</head>

Step 4

Copy below code and Paste it just before </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jgKXJ8-DAjAR_WT8hKo9y27BUY5Rnnj-Vhc_W7Dq9FuihJNkOMgnVOJS1d1L8IvdJx8c3GYyZbZPtdDE6V985O8-CmwV4_zYVjDEsRnAC-Njb0DGblNM5JRfFgSVyEN3vo9I1pw5t-QW/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
</b:if>


You can changed your default picture, Just changed red URL with your new default Picture URL. You can also changed number of post, just changed 5 to your values that you want to show. If you also want to show related post on homepage then just removed Green colored codes.

Step 5

Now Search following code:

<div class='post-footer'>

Step 6

Copy and paste below code just above it:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.haakblog.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSBRXAGarvTe8i94zemWlr_1GsgdcQSQ3Va3I7aXM56hioahtdX85ezDudc-UWkZvIfzX0ydG_JpJyY0IeQJXPRC8IDxFXcXizBel6MYS7ZUd9WJRhf2I9ej1SqTYZXJ1hn4_EN5NXu65g/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://www.haakblog.com/2013/06/simple-related-posts-widget-for-blogger-with-thumbnails.html" target="_blank" title="Related Posts Widget">Related Posts Widget</a>
<a href="http://www.haakblog.com/" target="_blank" title="Blogger Widget">Blogger Widget</a></div>

Step 7

Save Template

You're done perfectly. Now refreshed your blog post to see related post with thumbnail in your blog post, it's look like as shown in below picture.

Saturday, May 23, 2015

Add Pinterest Pin It Mouseover Button on Blogger Images

Pinterest Pin It Mouseover Button on Blogger: Images have consistently played a notable role in attracting new visitors through search engi... thumbnail 1 summary

2:08:00 PM

Pinterest Pin It Mouseover Button on Blogger: Images have consistently played a notable role in attracting new visitors through search engines like Bing and Google. But when Pinterest decided to enter the social networking blend, it upped the ante in a big way.

Pinterest lets site owners use their service to include a 'pin' to content pictures in the website or pictures. Visitors of that site can decide to click in the reddish Pinterest button and add it when they see a picture they enjoy.

Whoever pressed your Pinterest pin it button share it with friends or followers in the service, and are now able to see your picture on their dash. They are also able to come across this picture when users add the picture and type labels or key words. Moreover, that picture links can include a description title of your website name or post and to your own website when clicked on.

Thus, adding the Pinterest pin it button can let you profit from individuals who'd located your pictures and lots of new traffic and post links utilizing the service. Below are a few measures to incorporate your own Pinterest button.

Pinterest Pin It Mouseover Button on Blogger Images

Please follow below steps to add Pinterest Pin It Mouseover Button on Blogger Images:

Step 1: Edit your Blogger Template

When your blogger editer open, Click anywhere inside the code area and search below code with pressing the CTRL + F keys:

</body>

Step 2: Add The Pinterest Pin it Script

Copy and Paste the following script just above </body>:

Step 3: Change Position of the Pin it! button

The amazing thing concerning this code is that you have some liberty over where the image will be gone over by the Pinterest button. Have a look in the code which you just copied and pasted to the HTML for the word 'centre'.

var pinit_button_position = "center";

Replace center with one of these texts if you want to move the pin to a different area:

- topleft

- topright

- bottomleft

- bottomright

and if you want to change pin it image than replace your own image url with below url in script

var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdIyBSteCuPAbByAznnynMTMOlJdgO52dPDDjijygqehRJVwXewNnqs4jD6Z6H1Ss5FXUIW15WdTwhzzCIkI5-8WFLSE-wrWqY638J1HPihgja4g1zuenyhtbLDPha3PDo0C79ilStQiaD/s1600/pinit-button.png";

Step 4: Save The Template

Make sure that you added everything right, browse to your current post which you made that include pictures and then save the template. Hover your mouse within the picture for Blogger exhibited in the picture and also you need to now see a red Pinterest button. Examine it out as well as see it it works.

This button's single drawback is that it will not require the data out of your custom picture names. It is mechanically set to choose the name of the blog post where the picture is found. Thus, you will want to pay closer attention to the name of the places to ensure it fits strongly together with the pictures being revealed.

Friday, May 22, 2015

Add Pinterest Follow Me & Pin It Button for Blogger

Today we provide you how to Add Pinterest Follow Me & Pin It Button for Blogger blog easily. This pin it button allows your visitor... thumbnail 1 summary

1:13:00 PM

Today we provide you how to Add Pinterest Follow Me & Pin It Button for Blogger blog easily. This pin it button allows your visitors to share your posts on Pinterest. Its pulls all images when your reader click on pin it button and choose images which one they pin on Pinterest. Pin it button also counts all pin and displays how many a blog post pinned.

We also provide you code of follow me button for Pinterest to increase your Pinterest followers. This follower buttons takes your readers to your profile page and they will follow your each board individually or follow all boards at one click as they wish.

Add Pinterest Follow Me & Pin It Button For Blogger

Please follow below steps to Add Pinterest Follow Me & Pin It Button for Blogger:

For Pinterest Follow Me Button

Follow below steps to add Pinterest Follow me button on your blogger blog:

Step 1

Go to Blogger account and select your blog which you want to add Pinterest follow me button.

Step 2

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

Step 3

When you click on Add a Gadget button a popup window will open with all gadgets list. Please select HTML/JavaScript from Gadgets List as shown in below picture.

Step 4

Select your Style and Copy & Paste below code in HTML/JavaScript text box. Also replace USERNAME with your Pinterest username:

Style 1

Style 2

Style 3

Step 5

Click on Save Button.

For Pinterest Pin It Button

Follow below steps to add Pinterest Pin it button on your blogger blog:

Step 1

Go to Blogger account and select your blog which you want to add Pinterest Pin It button.

Step 2

Go to Template and Click on Edit HTML button as shown in below picture.

Step 3

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

<data:post.body/>

Step 4

Copy and Paste below code after it:

<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>

<a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>

Tips For Button placement :

Position for top of post

- Place the button code before <data:post.body/>

Button alignment

- Align right: set it to right;
- Align center: set it to center;

Step 5

Click on Save Button.