2011 ~ HOW-TO HOUSE

Add IP Address Widget in Blogger

Posted by silent screamer on 2:30 PM with No comments

With this widget, you can show your visitor ip address, operating system, browser, and country. This is cool widget to make your visitor know what is their ip address and some other information. Let's add it.

STEPS

1. Go to your Dashboard >> Design >> Page Element >> Add a Gadget.

2. Paste this code in.

<span style="display: block; text-align: center;"><a href="http://all-blogger-tools.blogspot.com/"><img alt="IP widget" border="0" height="125" src="http://www.wieistmeineip.de/ip-address/" width="125" /></a><br /> </span>

3. Save. Done!

Refresh your blog to see the result.

It will something like this:

How To Add Flash Animated Label Tags Cloud in Blogger

Posted by silent screamer on 12:58 PM with No comments

Blogger has a Labels tag widget to show your category of entries. This hack will show your labels tag in flash animated. Displaying animated cloud is a cool way of showing your tags in a limited space. Let's do it!

1. Go to Dashboard ->> Design ->> Edit HTML

2. Search this code (Ctrl + F),

<b:section class='sidebar' id='sidebar' preferred='yes'>

3. Then, paste the code below after <b:section class='sidebar' id='sidebar' preferred='yes'> tag.

<b:widget id='Label99' locked='false' title='Labels' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/><div id='flashcontent'></div><script type='text/javascript'>var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");// uncomment next line to enable transparency//so.addParam("wmode", "transparent");so.addVariable("tcolor", "0x333333");so.addVariable("mode", "tags");so.addVariable("distr", "true");so.addVariable("tspeed", "100");so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");so.addParam("allowScriptAccess", "always");so.write("flashcontent");</script><b:include name='quickedit'/></div></b:includable></b:widget>

4. Save your template.

Refresh your blog to see the result. Finish!

Leave your comment friends! :)

How To Stop Google Photo Indexing in Blogger

Posted by silent screamer on 1:12 AM with No comments

You can easily prevent Google from indexing photo from your blog by doing below steps. Let's know how.

1. Go to Dashboard ->> Layout ->> Edit HTML

2. Search this code (Ctrl + F), <head>

3. Copy below code and paste it after the <head> tag .

<meta content='noimageindex' name='robots'/>

4. Save template. Finish.

Yeah!

How To Create Spinning Popular Post Widget in Blogger

Posted by silent screamer on 9:32 PM with 20 comments

Yes. It is very nice effect to have to your Popular Post widget. Whwn you hover your cursor to the Post, the image will zooming anda spinning. You can have it by follow this steps.

SEE DEMO

1. Go to Dashboard ->> Design ->> Edit HTML

2. Search this code (Ctrl + F), ]]></b:skin>

3. Copy below code and paste it just after ]]></b:skin> tag,

<style type='text/css'>
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

Note: Make sure you add Popular Posts widget to your blogger sidebar.

4. Now save your template,

5. Edit your Popular Posts widget setting into something like this...

6. Save it.

Refresh your blog to see the result. Cool huh? Good job!

Leave your comment!

How To Create Google Plus Fan Page For Blogger

Posted by silent screamer on 10:27 PM with No comments

Google Plus has launch a Google Plus Fan Page. It's similar to Facebook Fan Page. You can use Google Plus Fan Page for business to promote your products, events, etc. This is how to create and add it into your blog.

Create Google + Fan Page

1. First, go to this page, click on the Product or Brand.

2. Enter the Blog Title and URL, select Category

3. Tick the Agree Page Terms check-box and Click on Create Button.

4. Enter the Tagline and Upload a Profile photo.

6. You're page is almost done, click the Share on Google+ button and Finally Click the Finish button.

Add Fan Page Badge to your Blog
Grow your fans or follower by adding this badge to your blog.

1. Go to Get Started page, click the get the Badge link.

2. Choose a Style of Badge and Language (Leave the Advanced options to Default).

3. There is 2 code to add into your blog.
4. Go to Blogger Dashboard > Design > Edit HTML
5. Search for the </head> tag, add the Code #1 section before it.
6. Save your template.
7. Then, add the Code2 section in HTML/JavaScript gadget and place where you want the badge to be appear.

Finish. That's it! Enjoy! Leave your comment yeah!

How To Change Linkwithin "You might also like" Message in Blooger

Posted by silent screamer on 1:18 PM with 1 comment

Do you have Linkwithin Related post widget? You want to change the Linkwithin message to another message? Sure you can. Only add some code into it. Let's know how.

Add the red code, above your Linkwithin code:

<script>linkwithin_text='YOUR NEW LINKWITHIN MESSAGE :'</script>
YOUR LINKWITHIN CODE

Yeah, that's all you need. Refresh to see the result.

Hope you like it.

How To Add Scroll For Blog Archive in Blogger

Posted by silent screamer on 2:09 PM with 1 comment

Salam.

Your blog archive is too damn long to the bottom? Do you wanna add a scroll to your blog? Yes, you just to do this few steps to make your blog archive looks like this.

STEPS:

1. Go to your Dashboard >> Design >> Edit HTML >> Check Expand Widget Templates.

2. Search this code (Ctrl + F), ]]></b:skin>

3. Put this code below, after ]]></b:skin>

#BlogArchive1 .widget-content{
height:300px;
width:auto;
overflow:auto;
}

4. You can change the scroll height by edit the code in red:

5. Save. Refresh to see the result.

+ For more tutorial, just see through the labels.

How To Make Facebook Like Box Like Wordpress

Posted by silent screamer on 10:04 PM with 3 comments

Wanna have Facebook Like Box like this? Just like in Wordpress. Watch DEMO [click]

You only need to follow this few steps. Let's start.

INSTRUCTION:

1. Go to your Dashboard >> Design >> Page Element >> Add a Gadget.

2. Paste this code in.

<center>
<iframe frameborder="0" href="%0A%0AYOUR FAN PAGE URL%0A%0A" scrolling="no" src="http://www.facebook.com/plugins/fan.php?id=%0A%YOUR FAN PAGE ID%0A%0A&width=292&height=250&connections=25&stream=false&header=false&logobar=false&css=http://howtohouse.googlecode.com/files/fblike.css" style="height: 230px; width: 85%;"></iframe>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=%0A%0AYOUR FAN PAGE URL%0A%0A&send=false&layout=standard&width=292&show_faces=false&action=like&colorscheme=light&font&height=40" style="border: none; height: 40px; overflow: hidden; width: 250px;"></iframe></center>

3. Change:
YOUR FAN PAGE URL- Where to find? Just go to your fan page. Copy URL in the URL bar.

YOUR FAN PAGE ID - On your fan page, click on the Edit Info and copy the ID from the URL bar.

4. Save and FINISH!

Do you like it? ENJOY!

Add Follow and Dashboard Button Like Tumblr in Blogger

Posted by silent screamer on 4:29 PM with 1 comment

Do you like a follow and dashboard button just like in Tumblr? It's look like this;

Live DEMO [click]. Isn't its nice. Let's add it to your blog/site.

STEPS

1. Go to your Dashboard >> Design >> Page Element >> Add a Gadget.

2. Paste this code in.

<div style="display:scroll; position:fixed; top:5px; right:95px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID" target="_blank" rel="nofollow" title="Follow" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" /></a> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div></div>

3. Change the YOUR BLOG ID with your Blogger. Where to find the ID?

• Go to Dashboard ->> Design ->> Look at your URL bar.

4. Save and finish.

Enjoy new Tumblr style button.

How To Disable Image Lightbox in Blogger

Posted by silent screamer on 10:22 PM with No comments

Blogger previously has officially launched a lightbox image viewer in Blogger. I had wrote about it in the previous entry. For further info, click here.

But some of the user seems don't like to use it. Want to disable it? Let's know how.

Steps

• Log in to Blogger -> Settings | Posts and Comments section (new interface) or the Settings | Formatting section (old interface).

• Select “No” next to Lightbox.

• Finish!

Hope you like it!

Spread this entry if you think it's helpful.

How To Create Your Own Clock and Add in Blogger

Posted by silent screamer on 11:45 AM with 1 comment

You wanna add some widget like clock. You can do it so. It is good to have a clock in your blog. Time is always important. You can create your own clock and add it into your blog. Let's know how yo.

Let's get started

• Just go this site - click here

• Then, just select between listbox options.

• Customize colors with color pickers.

• Set your clock size with zoom slide.

• Hit the Download button.

• Copy the code and paste in HTML/Javascript

• Finish!

Place the clock on your desire position. Enjoy!

How To Get Email Notification When Someone Submit Form in Google Docs

Posted by silent screamer on 9:04 AM with 2 comments

Assalamualaikum~

In the previous tutorial, we learn to create a free form with Google docs. But some user ask me how to get notify if someone submitted form. We can get notify as soon as possible the form submitted. So, let's know it.

GET EMAIL NOTIFICATION
1. Go to your Google Docs homepage. Click on your form.

2. New tab will be open. Go to Tools tab -> Notification Rules

3. Then, just click on the Any change are made and email - right away.

4. Save. Yes, you done!

After this, if your form submitted, you will get the email notification right away.

How To Create Free Form in Blogger

Posted by silent screamer on 9:39 PM with 3 comments

You just need to use Google Docs. Web forms in Google Docs are a great choice for creating forms like Contact Me/Contact Us or for conducting polls and surveys since it's free and no limits of people can participate. It is also great because all replies are directly saved in an online spreadsheet. It becomes more easy to analyze your own data.

How To Create jQuery Content Slider in Blogger

Posted by silent screamer on 3:24 PM with 1 comment

Do you know what is content slider? It's like a slideshow. You can watch the demo.

DEMO

Like it? Let's add it.

Steps:

1. Go to your Dashboard >> Design >> Edit HTML >> Check Expand Widget Templates.

2. Search this code (Ctrl + F), ]]></b:skin>

3. Copy below code and paste it just before the ]]></b:skin> tag.

#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

4. Now, search this code (Ctrl + F), </head>

5. Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition 1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>

6. Save your template. Now go to your Dashboard >> Design >> Page Element >> Add a Gadget >> 'HTML/Javascript'.

7. Add the code below;

<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

</div>
</div></div>

8. To add new slideshow, just add this code;

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

DONE!

Blogger Released Official Lightbox Image Viewer System

Posted by silent screamer on 3:50 PM with No comments

Do not need to use any hack code to magnify the image on blogger blog anymore. Now Blogger.com has provided the official Lightbox image viewer system. You can take a look at your blog. Just click on the image on your entry post, then it will magnify itself and there is also has image thumbnail under the preview image to select which image you want to look at.

Just click on the [x] button at the right top corner or just click on the dark area to back to normal.

Interesting!

You also can disable this feature - tutorial here.

How To Add Colorful Effect For Your Links For Blogger

Posted by silent screamer on 9:39 AM with No comments

Let's add some fun to your blog by adding cool effect to your links when your visitors hover it. It’ll be lighting and colorful. It's easy and let's do it.

How To Add Page Navigation to Blogger

Posted by silent screamer on 11:17 AM with No comments

Page navigation script will replaces the default blog pager (links to newer, older and home pages) with numbered page navigation. Furthermore, it offers the ability to customize the number of page links and the number of posts displayed on each page. It gives you more easy to discover your old entry. Let's know how.

Demo

Change Blogger Favicon More Easily

Posted by silent screamer on 4:06 PM with No comments

HH already made a tutorial about how to change favicon previously. Now for this tutorial, it's more easier than previous trick. Blogger already got the service for you. You only need to choose your own or create yourself. Let's know how.

How To Add Google Plus Profile Widget in Blogger

Posted by silent screamer on 8:04 AM with No comments

This widget will show real time followers stats of Google Plus circles and also with a “Add me To Circles” Button. It's completely customizable. The number of followers displayed automatically. You just need to get the code and put it on your blog. Add it now!

How To Add Static Twitter Follow Me Button in Blogger

Posted by silent screamer on 8:24 PM with No comments

Wanna make your visitor to easy to follow you in Twitter? Twitter is the good social network to promote your blog. Why? Because Twitter is second most popular social network with 200,000,000 estimated unique monthly visitors according to eBizMBA. This widget is the best to do so . Let's add it.

How To Add Image Magnifier in Blogger

Posted by silent screamer on 12:00 PM with 1 comment

This the creative hack to enlarge or zoom image in blogger. With this hack, you will be able to zoom in the image in blogger by clicking on the image. It's a simple hack. Only need a few steps to add it into your blog.

WATCH DEMO

#STEPS:

1. Go to your Dashboard >> Design >> Edit HTML.

2. Search this code (Ctrl + F), </body>

3. Copy and paste this just CODE above </body> tag.

4. Save your template.

How to apply Image Magnify:

1. Add this class="magnify" data-magnifyby="1.5" on each image you want to magnify.

2. You need to go to Edit HTML section instead of Compose section. Example :

<img class="magnify" data-magnifyby="1.5" src="Image URL" />

3. Finish.

Nice and easy. :)

How To Active Microsoft Office 2010

Posted by silent screamer on 8:47 AM with 1 comment

Assalamualaikum~

Our reader Yvonne ask about how to activate the MS Office 2010 in HH Forum. So, all you need is this tool to activate your copy of Microsoft Office. Easy to use. Only 3 in steps.

How To Add Twitter Flying Bird in Blogger

Posted by silent screamer on 8:55 PM with 2 comments

You have a blog and twitter account? Many of you already have their own accounts. This widget will give your visitors to easily communicate with your twitter account. The bird widget will fly over the site. it's compatible with all browsers. You will love it.

How To Add Floating Share Button Beside The Post

Posted by silent screamer on 8:19 PM with No comments

This widget make it easy for visitors to share any articles of your blog at any time. This widget is floating on the edge of your blog even if you scroll down. By a single click, your visitors can spread the contents of your blog to the world.

Add it to your blog.

How To Disable PES 2012 Demo Intro Video Montage

Posted by silent screamer on 1:35 AM with No comments

It's took about 3-4 minutes before we can play the PES 2012 demo because of the intro video montage. So this is how to disable it.

1. Go to Start Menu ->> My Computer ->> Local Disk (C) ->> Program Files ->> KONAMI ->> Pro Evolution Soccer 2012 DEMO ->> img

2. Inside the img folder, search a file named pes12pv.sfd

3. Delete it. Done!

Enjoy guys! Dont't forget to say Thank you! :P

More PES Tricks & Tutorials

+Leave your comment.

Real World Cup Trophy For PES 2011

Posted by silent screamer on 10:48 AM with 1 comment

Use a real trophy for your World Cup mode in PES 2011.

How To Scan Your Site or Blog From Any Virus

Posted by silent screamer on 2:40 AM with 5 comments

Are you worried about your site or blog health? If your site has a virus, people will scare to visit your site or blog and as a result your site traffic will drop! So, to check your site health and delete any virus or malicious software from your site, you can follow this method.

There are 3 free website scanning online you can use to check whether your blog infected by malicious software. Let's start check your site health.

How To Add Facebook Profile Badges into Your Blog

Posted by silent screamer on 1:48 AM with 3 comments

Almost everyone has a Facebook account, including bloggers. If you want to know and be friends with your readers, put your Facebook profile badge is a right step. Do you want to add your Facebook profile badge into your blog? Follow these simple steps :

Add Speech Bubbles Tooltip in Blogger

Posted by silent screamer on 9:26 PM with 8 comments

What is Speech Bubbles Tooltip?

Description : Speech Bubbles Tooltip lets you add tooltips to links using either the value of the link's title attribute, or rich HTML defined all inside a single HTML file and fetched using Ajax instead.

Now, let's add it to your blog.

Change Newer Posts and Older Posts with Post Titles like Worpress

Posted by silent screamer on 12:39 PM with 13 comments

Do you want to change your Newer Posts and Older Posts with your Post titles? We always see this trick only in wordpress blogs. But now, you can apply it into your blog. It also can attract more reader because they can stop to see your post title. Let's try it. Just in 3 steps.

Example : After apply the hack code

How To Change Blogger Comment Box Width and Height

Posted by silent screamer on 4:49 PM with 150 comments

Do you want to change the width and height of blogger comment box to make it look nice and fit your post page width. You only need to modify this code.

Add 'Bookmark This Site' Widget in Blogger

Posted by silent screamer on 10:24 AM with 9 comments

Bookmark page is serves to store page that you like in the browser's bookmarks. If visitors are interested with the content of your site, they will bookmark your blog/website. It will be easier to track website visitors easily. However, you can add a widget to make this bookmarking process more easier and with some style. Only use a Bookmark Site Script. See demo.

Do you wanna add it into your blog? Here we go..

Add Font Resizer Widget in Blogger

Posted by silent screamer on 7:28 PM with 2 comments

You feel more comfortable reading with big or small font? Some likes big font and there is also like a small font. Some of your blog visitors may be not comfortable with the font used in your blog. So you can add a Font Resizer widget on your blog.

Only use a simple script. Let's start :

Add Breadcrumb Navigation in Blogger

Posted by silent screamer on 9:40 PM with No comments

Breadcrumb navigation? What is breadcrumb navigation? Definition of breadcrumb :

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. - Wikipedia.

Breadcrumb navigation looks something like this :

Do you like it? Wanna add Breadcrumb in your blog? Let's do it.

How To Add Floating Notification Bar with Close Button

Posted by silent screamer on 10:02 PM with 3 comments

Do you want to tell/notify something to your blog readers with a more efficient way? What if you use "Floating Notification Bar" script to notify your friends. What is "Floating Bar Notification"? See demo.

Interested? Follow this tutorial to add the script.

How To Embed Youtube Subscribe Widget on Blog

Posted by silent screamer on 11:54 PM with 9 comments

Everybody knows how Youtube works and it become the most popular place to search any video. Do you? So, HOW-TO HOUSE will guide how to embed Youtube Subscribe Widget on your blog. It's simple and easy. You can add the widget in just 3 steps :

PES, Blogger, Computer and more!

Recommended Phone

Top 5 Posts

Hot!

Make Money

Categories

Archives

Blog Barcode

Followers

NETWORKEDBLOG

Search...