Fuuast Lab Manuals: June 2012

Archive for June 2012

How to Create Google Custom Search Engine for Blogger

When we search any thing on internet then we go to Google search before doing anything. Now, a conservative estimate would be that there is no so much internet without Google. Every blogger has a search engine in his blog for his blog post,s searching. There are unless templates for blogger and they have their own custom search engines. These search engines show limited result of search and they are not very good. Google Custom Search Engines (CSE) are very efficient and they show most important posts and data of our blog. CSE increase number of pageviews of your blog because your blog visitor is kept involved in reading more articles of your blog.

Create A Google Custom Search Engine

1. Go to Google Custom Search official page.
2. Click on Create Custom Search Engine Button.

3. Now set your settings as show in below picture.

4. Now click on Next button and choose the style of your custom search engine.You can click on Customize button to change the style and look of your search engine.

5. Now click the next button and then click Look and Feel on the next page.

6. you will see three layout options i.e Full-width, Compact and Two-column. See the picture below.

? If you want to add search box below post then choose Full-width.
? If you want to add your search box on sidebar then choose Compact.
? If you want to display your search box to sidebar and show search results above the post title then choose Two column.

Finally click on Save & Get Code and copy the code which Google will give.

Add Custom Search Engine to Blogger Posts

If you want to add your search engine below post then follow the below method:

1. Go to Blogger --> Template --> Edit Html and check Expand Widgets Elements.
2. Now search the below code

<data:post.body>

3. Now just below it paste the Custom Search Engine copied code(Full-Width)
4. Save your Template and you will see that Custom Search Engine is appearing just below blog posts.

Add Custom Search Engine to Blogger Sidebar

1. Go to Blogger --> Layout --> Add a Gadget(Sidebar), choose HTML Java Script Widget and paste the copied code in it.(Compact or Two Column)
2. Hit save and you have done everything. You will see a Google Custom Search Box to your Blogger Sidebar.

If you are facing any hesitation about this topic then comment me below.

Submit your Blogger Sitemap to Google

ItsGhani 00:55 Add Comment

ItsGhani

Google is largest search engine in the world and no any other search engine can compete it. Every internet user has to deal with it. People were use Yahoo, MSN and Bing first but with the passage of time, Google has become more popular and more reliable due to his easiness. Every blogger and any site owner think about Google search after creating his/her site. All the people in the world know much about Google and they find their problems on Google Search. Every blogger has to add his/her blog to Google otherwise his/her blogger will not be popular and blog traffic will always very low. Some people like to search in Yahoo, Bing, Msn, and Ask because they like the style of these search engines but Google provide easy and reliable search results. So, most of people use Google. It is very important to add your blog/site to Google so that your blog traffic will increase in days. Below is a full article for adding your blog/site to Google.

Adding Blogger/Website to Google

1. Go to Google Webmaster Tools and Click Sign in to Webmaster Tools.

2. Now Sign in with your Gmail account.

3. When you have signed in, your dashboard will look in front of you. You have to click on Add a Site button placed on top-right of your dashboard.

4. Now type your Blog/Site url in text field and click on continue.

5. Now Google will ask you to verify your blog/site ownership. Google will give your 3 or 4 options to verify your site ownership. Click on Alternate Methods, choose HTML Tag and copy the meta tag code.

6. Now Login to Blogger ---> Dashboard --->Template ---> Edit HTML and find the following code,

<head>

paste the copied Meta Tag code just below it and click on verify button.

7. After verification, Click on Add/Test A Sitemap button placed on the top right of your dashboard page.

8. After clicking on Add a Sitemap, it will ask you to enter the sitemap of your blog. The address of your blog will be already there and you just have to add the remaining part which is following:

feeds/posts/default?max-result=100

However the code will look like this:

http://your-blog-url/feeds/posts/default?max-result=100

9. If your blog has more than hundred posts then you can change the red code with the following code:

feeds/posts/default?max-result=200

10. you can change the red code according to the number of your posts in blogger but it always should be in hundreds.

Last thing i want to tell you that Google will take some time (24 hours) to index the contents of your sitemap.
Ask in comments if you have any problem about this topic.

Hide your Folders in Windows

ItsGhani 18:59 Add Comment

ItsGhani

I hope that you will all be in happy mood. Today, i am sharing a small tip of windows for you. I am here to tell you that how to you hide your folders & files in windows(Xp, Seven, Vista). When we install new windows on our computer then many of files and folders are hidden and we can,t access those type of folders. There is a method to show a hidden file which i will tell you below. There are many softwares which are able to hide files in windows but i will teach you a manual method for hiding your files and folders. I will tell you that how to hide folders in windows 7 and method of hiding folders on other windows like Xp, Vista is same. Below is a full method to hide & show your files and folders.

Hiding Your Files and Folders

1. Go to your desired folder, Right Click on it and click properties. I want to hide a folder which name is Setups.

2. After clicking on properties, a box will appear. On this box, choose General Tab & Mark Hidden and click on OK. When you will click on OK then another box will appear, you should choose your settings according to your wish on this box. (Apply Changes to this Folder, Sub folders and Files)

3. Now your folder has hide and if you want to show your hidden folder then Go to My Computer, Click on Tools and then Folder Options. Now a box will appear, Click on view tab and Mark Show hidden files and folders.

5. Now your Hidden file will show on your target. If you want to unhide your Folder then follow above method and unmark hidden.

Facebook Like Box for Blogger

ItsGhani 07:25 Add Comment

ItsGhani

Facebook like box is a very important facebook widget for every blog. It helps bloggers to increase their blog traffic. Every blogger should keep this widget in their blog. Facebook is a very large social sharing website and it has countless visitors. You can easily increase your blog traffic by telling your friends and other visitors about your blog. A blogger should must keep in his mind that his blog is nothing without facebook. All blogs in the world are closely associated with facebook.

Facebook gives many options to increase your blog traffic. A like box is also in these options. Facebook like box is a type of sharing widget which help you to enhance your visitors and if a one facebook visitor like your blog then your blog will look on his wall and his hundreds of friends will also take a look onto your blog and that,s why your blog traffic will be increasing in minutes. Below is method to place facebook like box to your blog .

Adding Facebook Like Box to Your Blog

1. Go to this link
2. Type your Facebook fan page url in Text field & set your settings like below picture.

3. Click on Get Code Button.
4. You have three options to copy the code. You will have to click on Iframe Tab and copy the whole code.

5. Now go to Blogger---> Dashboard ---> Layout & click on Add a Gadget.
6. Choose Html/Java Script Widget, set your title and paste Like Box copied code in text field.
7. Now you can see a beautiful Facebook Like Box on your blogger.

Mashable Style Social Sharing Widget for Blogger

ItsGhani 08:33 Add Comment

ItsGhani

Social sharing widgets are very important for increasing your blog/site ranking. Your blog visitors are much important for you and you don,t have to leave your visitors without any facility. You have to encourage your visitors by giving them many type of important things.

Mashable style social sharing widget is a very important to save your visitors on your blog. It has many social sharing sites like Facebook & twitter. It also has a beautiful subscription box and a google plus recommend button. After adding this widget to your blog, you will see that your blog is much comprehensive for your visitors and also for you.

Adding widget to your Blog

1. Login to Blogger >> Layout & click on Add a Gadget.
2. Choose Html/Javascript widget
3. Paste the below code inside it.

<style>
/* Social Widget */
#HN-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
height:80px;
}
.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone { float: left;}
.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:37px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYN0YpMeo9znjmyI8kiy87MwaPuD2sAldzJ0Icwz2BNQFdo5H5-wDf4cng429aKoz-BuP1EbtnHoqp5dVgZBL_4StY_Bo77gWJ_7j749B42YNrTpH9yBvjIxafeefc2Kz_lifSnsHZKg/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-linkedin {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOAFhNyagzdSJRVQE5MOi-q7zf8wjhTcptcll7aoTiNY4r0_nrm53xI6T-Z4fH0OJ3iDXU4XW7_Z29upjwk34elUlh4EWaNQWNzAUY9xJghWtptBa0bUDfvCDpcVxTqXDNoqp9oBhVqto/s400/linkedin-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0edGPv4_Q6zQIE-tFD3OtBNlIq-FTWcymsa91nLjGl998IvoMz07AZVE8ANwGkzRAyWy-YUbVJiStzPXmJp2uOPEXdvLsDp6LtPKfhJ476LnUnAfmQuPBpzh5eRH1KJCx6AOE4iLZQw/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}

</style>



 <div style="margin-bottom:10px;"> <div id="HN-mashable-bar" >  <div class="fb-likebox">  <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/HamzaNetwork&send=false&layout=standard& width=200px&show_faces=true&action=like&colorscheme=light&
font&height=100px&appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div> <div class="googleplus">  <span>Liked us on Google</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter">  <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&
align=&button=blue&id=twitter_tweet_button_0&
lang=en&link_color=&screen_name=HamzaFarooq7&show_count=&
show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe">  <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Hamzanetwork1', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
<input type="hidden" value="HamzaNetwork1" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div> </div> <div id="other-social-bar">  <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/HamzaNetwork1" target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="Linkedin Profile Link" target="_blank">linkedin</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/115812869135192839984/posts" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://hamzanetwork.blogspot.com" target="_blank" >Blogger Widgets �</a></span></div></div>
 </div>

Customizations

? Replace HamzaNetwork with your Facebook username.
? Replace HamzaFarooq7 with your Twitter usename.
? Replace http://feeds.feedburner.com/HamzaNetwork1 with your Feedburner link.
? Replace LINKEDIN PROFILE LINK with your Linkedin profilelink.
? Replace https://plus.google.com/115812869135192839984/posts with your Google plus profile link.
? Replace HamzaNetwork1 with you Feedburner title. Your feed burner title is the word placed at the end of your Feedburner link. Example : http://feeds.feedburner.com/HamzaNetwork1
? Click on save and you have done everything. your cool widget will look onto your blog.

Note : This widget was manufactured and created by Mashable.com
Give your comments for this beautifull widget.

Highlights Author Comments in Blogger

ItsGhani 10:10 Add Comment

ItsGhani

Nowadays, i am not busy and i spend a lot off time to blogger.com. Previously, i wrote on How to warn your blog visitors from any type of prank. I will tell you today that how to highlight blog author comments in blogger. Blog author comments are specific and visitors must have to know that this is the comment of blog author otherwise they can,t understand your blog easily. After doing below method, your comments will look different from others.

Highlight Blog Author Comment

1. Login to Blogger >> Go to Template and click on Edit Html.
2. Check Expand Widgets Elements.
3. Copy the below code and put it before ]]></b:skin>

.author-comments {
background: #ffffff;
border: 3px solid #666666;
padding: 5px;
}

4. Then find the following code.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<b:if cond='data:comment.authorUrl'><data:comment.author/><b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

5. You have to add blue code at the same position and your position must be correct.
6. Now you can see changes on your comments in blogger.
Please give your feedback for this beautiful tip.

Write Comment Warning in Blogger

ItsGhani 20:42 Add Comment

ItsGhani

Comments are very important and very necessary for any blogger. If a blogger has not any comment on his/her blog then his/her blog ranking is very low and blogger should optimize his blog. When a new comment appear in a blog then blog author feels that his blog is optimizing day by day. Sometime, some wandering people don,t like your blog or they want

to prank with your blog and they get their anger through comments. The point solution for this problem is that you should appear their comments after approval. But for some reasons, blogger don,t do this. we should not catch up this type of people. Let,s come to the topic.
Today, i want to tell you that how to you warn people from bad commenting and how to alert them from a message. Lot of bloggers write warning in comment section like "Abusive Comments are not allowed on this site" etc. Below is a Trick to warn people from bad commenting.

Warn People from Message

1. Login to Blogger
2. On Dashboard Click on Settings.
3. Select Posts and Comments.

4. Now type your warning in Comment From Message text box and click on save changes button placed on top right of image. (See above picture)

Please give your feedback so that i will publish more helpful articles about blogging.

Change Start Button Name in Windows Xp

ItsGhani 10:56 Add Comment

ItsGhani

It is time to having some fun. Windows Xp was a well known Windows in the world. Most of people are using windows xp and they are satisfied with xp. Windows 7 & Windows 8 are now considered fast and efficient. There are many things which we think that they are permanent and we can,t make any changes on them. Changing start button text is a good example of it but impossible is nothing. We can change everything and make it as our wish.

Changing Start Button Text in Windows Xp

1. Go to below link for downloading Xp Start Button Renamer.

Download Here

2. Install your software and open it.
3. Write your text in New Label text box and Click on Rename It!

4. Your Result is here.

Remove Wrench icon on Blogger

ItsGhani 10:14 Add Comment

ItsGhani

Bismillah! Here is an article about removing wrench icons on your blogger. When we add a new gadget in our blog then our blog automatically gives us wrench icons so that we can change our widget settings quickly. It is very useful thing and bloggers can save their time but many people don,t like this type of wrench icons. A normal visitor can,t see this type of icons and only blog author can see this but some blog authors hate wrench icon,s and many of them don,t know that how to remove them. The solution of your problem is here.

Removing Wrench Icons

1. Login to Blogger >> Click on Template >> Click on Edit HTML and check Expand Widgets Elements.
2. Find the following code

<b:include name='quickedit'/>

3. Remove all codes of this kind, Preview your changes and then save your template.

Note : When you will add any type of widget in your blogger then wrench icon will also come with your gadget so you must remove above code every time after adding any widget.

Add Labels With Top Menu Pages In Blogger

ItsGhani 06:56 Add Comment

ItsGhani

There are many facilities and many difficulties in Blogger. Adding labels with pages was not easy in old Blogger interface. But we can do many things on new blogger interface. We can change our old blogger interface by clicking on new blogger interface. There are many templates which provide many facilities for labels and pages but lot of blogger templates don,t provide this type of easiness. Today you will know that how to add pages with labels in top menu on blogger.

Adding Pages with Labels on Blogger

1. Login to your blogger account >> Go to Dashboard >> Click on More Options and select Pages.

2. Click on New Page and then Web Address.

3. Now Type your label title and then paste your label link and click on save. You can see that your label has added with your pages and your label is working with your blog pages.