The Bloggerpreneur: Blogger tricks

Showing posts with label Blogger tricks. Show all posts

How to Put Adsense in the Middle of Post for Blogger

Experimenting and analyzing where to put your Adsense ads is necessary for you to know where your visitors click on the ads. So today I will share another adsense placement tips. This time we will put your ads on where most readers focuses their eyes, in the middle of your post.

With this ad placement it could increase your Adsense earnings and make more money blogging. If you are having a low CTR on adsense, I suggest you try putting ads in the middle of your blogger post.

The instructions are easy, just follow the simple steps below:

1. Go to Blogger account

2. Template > edit HTML and open template editor

3. Look for the <data:post.body/> tag

Note: Some blogs who uses the "automatic read more" function could have more than two of these, I suggest you try them each and always back up your template before tweaking any template.

4. After looking for that tag, replace it with the code below.

<div expr:id='"aim1" + data:post.id'/>
<div style='clear:both; margin:10px 0'>

YOUR ADSENSE CODE HERE

</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById("aim1<data:post.id/>");var obj1=document.getElementById("aim2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf("");if(r>0){obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1)}
</script>

5. Go to your adsense account and create your desired ad size. After customizing it parse the html using this HTML parser.

6. Replace YOUR ADSENSE CODE HERE with your parsed HTML code.

7. Save template.

You are DONE!

DO you liked it?

Kindly share!

Cheers!

Show Post Title Only on Homepage for Blogger

One of the things I liked figuring out when it comes to blog design is make everything easy for my visitors to navigate and browse my blogs. So now I will share a simple yet cool trick for blogger, its about showing post title only on homepage for the blogger blogging platform.

This trick is really cool if you blog about more about writing and you use less image for your blog. I implemented this trick on this blog because I want to focus more on writing and not looking and creating images that will fit with my blog post.

So lets start this trick shall we

Show post title only on homepage

1. Go to your blogger.com account > select a blog > go to layout > edit HTML

2. Use control+F and look for the </head> tag.

3. After looking for the above tag, kindly paste the codes below just above it.

<style type='text/css'>

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

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#000000;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>
</b:if>

</style>

4. Save your template

5. If you like to add more blog post on your homepage, just go to > layout > blog post section and enter the number value on the "number of post on main page" of your choice then save.

Customize

*If you want to change the default font color just change the value of 000000. You can also change the color of the hover effect by replacing 333333. If you have trouble with hex colors check out my blog tools.

You are all done! with this trick you can show a lot of posts on the main page which will help expose more of your articles.

Do you liked it?

Let me know by sharing it to others.

How to Show and Hide Blogger Widgets

Do you have problem hiding or showing your widget on your blog? fear no more because today I will share to you blogging tricks on how to show and hide blogger widgets.

The importance of controlling your widgets is, there are plug ins that are meant to be shown only on homepages, or only on post pages. Through widget control. you create flexibility on your blog and balances each widget and maximize its functions.

In blogger platform, installing a widget usually uses the "HTML/layout" function on layout. In order to control widget display we just enclose some codes on the widget.

If you want to show and hide your widgets, just follow these simple tricks:

Since we use the "add gadget" on installing widgets, we need to search first where it is on your blog template.

How to control widget display

Before we proceed make sure you backed up your template in case you mess things up.

1. Log in to your dashboard.

2. Go to template> click edit HTML > and click on expand widget templates

3. Then look for a code similar to this one

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

WIDGET CODE HERE

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

If you use a blank name on your widget, try renaming it that has no similarity then go back to edit HTML and use ctrl + F to search for that widget title. After you searched for it you can rename it back to blank.

How to show widgets only on homepage?

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

WIDGET CODE HERE

</b:if>

How to hide widgets on homepage?

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

WIDGET CODE GOES HERE

</b:if>

How to show widgets only on static page?

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

WIDGET CODE GOES HERE

</b:if>

How to hide widgets on static pages?

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

WIDGET CODE GOES HERE

</b:if>

How to show a widget on selected post only?

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

WIDGET CODE GOES HERE

</b:if>

How to hide widget on selected post only?

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

WIDGET CODE GOES HERE

</b:if>

Note: Once you find your widget just select which code you will use to hide or show widgets.

For example you want to show widgets only on home pages, use this

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

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

WIDGET CODE HERE

</b:if>

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

Do you like it? got some problems? let me read your thoughts

Remove Blogger/Blogspot Auto Read More

Most of my blogs has changed template for more than at least 5 times, the reason is I am having problems with blogger.com's flexibility so I keep looking and switching themes. When I found a great template I always encounter problems with its static page, if you click the page you will see it looks like a post but you can't see it as a whole page.

I have looked for tips on removing automatic jumpbreak but some of them doesn't work. And I keep on looking until I found this one that actually worked and I used it for my other blog which has problems with its static page.

Now I am going to share it to you guys. If you have the same problem with your template just follow the simple instructions below.

Steps on removing auto read more

1. Go to your blogger dashboard and click on template > edit HTML > click expand widgets

Find this code on the template:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div class='readmorecontent'><a class='readmore' expr:href='data:post.url'><b>Read more »</b></a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Note: Some of the code might be different according to your blogger template but you can find it easily.

Also read:
How to show/hide text on blogger post

2. Replace the above code with the code below

<data:post.body/>

If you can see the "read more" on static page, then search for this code and remove it

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='readmore-wrap'> <a class='readmore' expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

Note: And again some codes may not look like exactly as shown above but they look almost the same so you won't have a hard time identifying them.

3. Save template

Did I miss something? Let me read your thoughts

[image: rediscover youth]

How to show and hide text in blogger post

Hello and welcome back to another blogger tutorial on FH2M. Today I will share a cool trick that you probably want to know, its about how to show and hide text in blogger post. I have seen this kind of trick on some websites "about" page, in where they create an FAQ on their site, and when you click on the questions a hidden answer will appear. This is also used for creating sub topics on their posts or static pages.

Here are some of the Demo

Title One

Subscribe to my site.

Title Two

For more tutorials.

Title Three

And blogger tricks.

How to install show and hide text in blogger posts

1. Go to your blogger.com account.

2. Click on template > Customize > Advanced then add this code to the CSS area. After that click "Apply to Blog".

.posthidden {display:none}
.postshown {display:inline}

If you didn't know how to find it, it is just between the <b:skin><![CDATA[ and the ]]></b:skin> in your blogger template.

3. Then find the </head> tag and put the codes below just above it.

<script type="text/Javascript">

function expandcollapse (postid) {

whichpost = document.getElementById(postid);

if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>

4. After pasting those codes, save your template. Now go to your blogger post or static page, click "HTML" and use the following codes. The result is the Demo above.

<a href="javascript:expandcollapse('subtopic0001')">
<h4>Title One</h4></a>
<span class="posthidden" id="subtopic0001">
Subscribe to my site.</span>

<a href="javascript:expandcollapse('subtopic0002')">
<h4>Title Two</h4></a>
<span class="posthidden" id="subtopic0002">
For more tutorials.</span>

<a href="javascript:expandcollapse('subtopic0003')">
<h4>Title Three</h4></a>
<span class="posthidden" id="subtopic0003">
And blogger tricks.</span>

Note:

Remember if you are going to use it more than 1 times, you should always customize its unique ID just like shown in the sample colored in red.
Replace Subscribe to my site. with your own sentence you want to be hidden.

Cheers!

and

Happy Holidays!!!

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!

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("div[id^=\'clickjack-button-wrapper\']").hide();
}
function ClickJackFbShow(){
jQuery("div[id^=\'clickjack-button-wrapper\']").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">

<iframe src="http://www.facebook.com/plugins/like.php?href=Fanpage URL Link&layout=button_count&show_faces=false&width=50&action=like&colorscheme=light&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.

Credits:[image: tag-pictures.com, 360techreviews.com], [script source: gj37765.blogspot.com]

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

<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>

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.

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:

I LIKE YOU

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

Easy to install facebook comment box for blogger

Not all people has a Google or blogger account in which they will use to comment on your blog. That is why some people uses a 3rd party comment plug ins just like Disqus and Intense Debate. But actually people are too lazy to comment on those commenting platform and I am one of those. But, if you have facebook comment box on your blog, chances of comments from your audience will increase because almost everyone is on facebook.

Advantage of facebook comment box

More convenient for visitors. Most people while surfing the web has their facebook account opened, having this comment box will not bother them signing up or entering captcha's symbols when they want to comment.
It boosts traffic. Visitors has the option to post their comments on their profile and when someone on their profile liked it, it will appear also on their profile page and so on.
Threaded comments. Some blogs has no threaded comments on their default blogger comment box. Using this plugin will increase conversation from your daily visitors.
No spam comments.

If you want to hide your default comment box follow this

1. Go to your blogger dashboard > Settings > Comments

2. Find "comments" it is usually embedded below posts > choose hide

3. Save!

Installation

1. Go to layout > Edit html

2. Tick on "expand widget" and search for this tag <data:post.body/> (some templates has more than 1 of this if you are using "read more").

3. Copy and paste the code below under the <data:post.body/> code. If you have 2 of these tags place it on the second of the same code

<p align='left'>
<a alt='FB comment box to your blog' href='http://fromhobby2money.blogspot.com/2012/11/easy-to-install-facebook-comment-box.html' target='new'>
<img alt='' class='icon-action' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEtVrLWxzAnwxA_S-xMHGK6L8uDdMffPVBeX4PFO8xL99M7xqXkJnLzRn9QjwGWA1VxDjXDuUW16t2NqTCbu61YhVgg4Ze8duR6yKPjfJ74Hjrwn0y81f5TF7uiOsCG6mciQsc5i8W9Td/s1600/CommentsFB.png'/>
</a></p>
<div id='fb-root'/>
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='470'/>
</div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:460px;'>
Facebook Blogger Plugin: Bloggerized by <b>
<a alt='FB comment box to your blog' href='http://fromhobby2money.blogspot.com/2012/11/easy-to-install-facebook-comment-box.html' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>Bloggerpreneur</a>
</b> Enhanced by <b><a alt='blogger widgets' href='http://fromhobby2money.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>fromhobby2money.blogspot.com</a>
</b></div>
</div>
</b:if>

Customize

Change the appearance of the comment box by replacing light to dark.
You can also change the width.

4. Save template!

Now check on your blog and you will see a facebook comment box just below each of your posts. If you can't see a comment box then your facebook account must have been logged out, try logging in and see your facebook comment box, it will now appear.

Enjoy!

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.

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 == "item"">
<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

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.

<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'></script>  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>  <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.

<b:if cond='data:blog.pageType == "item"'> <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 + "&send=false&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&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>

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!

Credits to www.abctrick.net

Remove Showing Post with Label for Blogger

When you are going to click a label for your blog you will see this message above "showing posts with label posts. Show all posts". For some, like me, I don't like that appearing on my blog. It is useless and annoying, so many people want it removed.

If you want it removed, here is the tricks that will remove that "showing posts with label" for blogger.

Step 1.

Go to blogger dashboard > Edit HTML > Click on expand template (make a back just in case).

Step 2.

Use CTRL+F and find this code in the template.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 3.

After you find it, delete the code above and replace it with this one.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Save template and that is all.

Get backlinks when someone copies your content

Most of you are spending precious time creating unique article for your readers and when someone comes and copies your hard work without permission and also not giving you credit by creating backlinks to its original post, it actually feels bad.

You need a backlink to credit all of your hard work and I have here ways on how to get backlinks when someone copies your content.

This will work on blogger and wordpress. Here are the simple steps

1. Go to your blogger.com account.
2. Click Layout > Add gadget> select HTML/ javascript
3. Copy and paste the code below

<script type='text/javascript'>
function addLink(){var a=document.getElementsByTagName("body")[0];var b;b=window.getSelection();var c="<br/><br/> Source : <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Content Copyrighted to Hobby to Money";var d=b+c;var e=document.createElement("div");e.style.position="absolute";e.style.left="-99999px";a.appendChild(e);e.innerHTML=d;b.selectAllChildren(e);window.setTimeout(function(){a.removeChild(e)},0)}document.oncopy=addLink
</script>

4. Just edit the code colored in blue as you like. Save your gadget and you are all done.

When someone copies your article an attribution link will automatically appear. giving you a backlink to your site.

Try it for yourself, copy an article from your blog and paste it, you will see a source line below of that copied text.

The Bloggerpreneur

Labels

How to Put Adsense in the Middle of Post for Blogger

Show Post Title Only on Homepage for Blogger

Show post title only on homepage

Customize

How to Show and Hide Blogger Widgets

How to control widget display

Remove Blogger/Blogspot Auto Read More

Steps on removing auto read more

How to show and hide text in blogger post

Title One

Title Two

Title Three

How to install show and hide text in blogger posts

Note:

Customize your blogger widget title

Increase facebook likes instantly

Display post title only on blogger

Keyboard effect on blogger post

Easy to install facebook comment box for blogger

Advantage of facebook comment box

Installation

Customize

Insert Adsense Inside blogger post body

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

Remove Showing Post with Label for Blogger

Get backlinks when someone copies your content

Search This Blog

Visitors