Blogger Keyboard Shortcuts

List of blogger post editor keyboard shoutcuts...

Keyboard Shortcuts	Function
CTRL + Z	To Undo
CTRL + X	To Cut
CTRL + C	To Copy
CTRL + V	To Paste
CTRL + B	To Bold
CTRL + A	To Select All
CTRL + S	To Auto Save and Keep editing
CTRL + D	To Save as Draft
CTRL + F	To Find a Word or Phrase
CTRL + G	Indic Transliteration
CTRL + Y	To Redo
CTRL + U	To Underline
CTRL + I	Change To Italic
CTRL + K	To Insert Hyperlink

Create A Custom Search Box For Blogger

Every blog needs a search for but some blogger template doesn't provide search boxes or any search bar. If you're sacrificing search box because of a template like that then it's your time to create your own first custom search box with little help of this article.

In this article i'll teach you creating custom search box and it's not that tough , just a little attention and it's done.

First :

It's to simple to create a search box like this below is the code :

<form id="search" action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" type="text"/>
<input id="submut" value="Search" type="submit"/>
</form>

There are two input field in above box one is a text and second is a submit button , that's all about above search bar...to easy?

Second :

After adding a little CSS this search box will look like this :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form> 

Just try to edit CSS and see what you can do.....

Third :

This time we'll use CSS3 not so tricky just try to edit this one

<form id="searchform" action="/search" style="display:inline;" method="get">
<input id="searchbox" name="q" size="25" type="text" style=" border: 2px solid black;border-radius: 60px;outline: 0px;">
<input id="searchbtn" value="Search" type="submit" style="background: whitesmoke; border: 2px outset black;  font-weight: bold;border-radius: 20px;position: relative;right: 30px;">
</form>

 This one looks amazing without any doubt now let's move on to next level

Forth :

Now we'll take this to a new level with some more advance CSS3 but it's not that hard :

<form id="search" action="/search" style="display:inline;" method="get">
<input name="q" type="text" value="Search"/>
</form>
<style>
#search {
}
#search input[type="text"] {
    background: #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: white;
    outline:0px;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }
</style>

I know this hard a nightmare but CSS is not that scary.....it was hard but you can get an idea from this for some future design.....i hope this helped you.....got any question then leave a comment

Setup Feed On Your Blogger

In this quick post, I'm not gonna teach you how to create feed for your blogger, but how to setup correctly in blogger. After doing this your visitors can check your feed out in this url : http://yourblog.blogspot.com/feeds/posts/default

It's too simple we just have to put your feed url in blogger settings. It's necessary to setup feed otherwise some widgets will not work in your blog.

• First create your blogger's feed at Feed Burner.

• Grab your feed url (Example : feeds.feedburner.com/WidgetCraft

• Go To Blogger > Settings > Other > Post Feed Redirect URL

• Paste your feed url and click on save.

That's IT!

Tip : You can also get feed url by adding 'Subscribe By Email' Widget on your blog.

Creating Contact Us Form Using Google Docs

Probably every blog needs some forms like Contact Us , Feedback , Survey and all that , in this post i'll be talking about creating forms for your blogger using google docs. It's simple just follow each step correctly :

• First visit Google Docs

• Click On Create > Form

• Now create your form using Google Docs editor (It's so simple even Justin Bieber can do this )

• After creating form click on Save :

• Now click on More Actions > Embed and copy the embed code

It's done....your form is ready to just paste this embed code where you wanna embed this...(On Posts/Pages) but only problem is that you have to check Google Docs to know if any one submitted form....so now we're going to change notifications settings so if any one will submit the form Google will mail you about that.....

• Again go to Google Docs > Click on your form

• Now click on Tools > Notification Rules

• Fill the form like given in below pic and click on save :

You're 100% done...just like this you can create more forms and embed on your blog :) 

Different Background In Each Post Of Blogger

So in this tutorial i'am gonna show you how to use different background in each post of your blogger......ok so here we go.....

• Go To Your Blog > Settings > Posts And Comments 

• Paste this code at the top of the box :

<div style="background:url(Image_URL) no-repeat;">

• And paste this code at the bottom of the box :

</div>

• Click on Save Settings and then Create a new post

• The Post Editor will open with the code already in it.

• Replace Image_URL with your background image url

• Type in your post before the </div> tag at the bottom, give it a Title and Publish.

Creating A HTML Email Form

So today i'am gonna teach you a simple HTML tutorial on Creating HTML E-mail Form for your blog, website or any html page ....First of all sorry i wrote wrong form/forum spelling on pic above ......so here we go :

• On Blogger : Go To Post/Page > HTML and paste the html given below.

• On HTML : Paste html given below on your html document.

<h3>Send E-mail To Your Name:</h3>
<form action="MAILTO:USERNAME@gmail.com" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" value="Your Name" /><br />
E-mail:<br />
<input type="text" name="mail" value="Your Email" /><br />
Message:<br />
<input type="text" name="comment" value="Your Message" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

• Change  USERNAME@gmail.com  with your email and you're done.....

Creating A Pop Up On Blogger

• Paste the script given below on your blogger post to create a link to popup

<script type="text/javascript">
// Popup window code
function newPopu1p(url) {
 popupWindow = window.open(
  url,'popUpWindow','height=300,width=200,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a href="javascript:newPopu1p('URL');">Text To Display</a>

Replace URL with url of the page you want to pop-up and text to display with your text.....

Example : -

Click Here To Open A Pop-Up

Recent Comments Widget For Blogger

Add Recent Comments Widget Display Last 5 Comments in Sidebar on your blog . To Add this comments widget follow the simple Procedure:

• Go to your blog > Layout > Add A Gadget > Feeds

• The Feed Gadget will ask you for Feed URL, you need to

• http://YOURSITE.blogspot.com/feeds/comments/default

• Click on continue

• Change title with Recent Comments/Latest Comment and you're done by the way style of your recent comments widget depends on your blogger template :D for any help please comment and i'll try to help you out.

Recent Posts Widget For Blogger

Ok so recent posts widget is the one of the best widgets for blogger to show whats new on your blog and its so easy to add this you don't need any html or css coding just some simple steps to follow from the picture tutorial below.....

• Go to your blog > Layout > Add A Gadget > Feed Widget

• Enter the feed url of your blog and click on continue....

• Almost done just change title to Recent Posts/Latest Posts and chose number of posts you want to show and click on save and we're done.....

How To Remove Or Hide Navigation Bar (Navbar) In Blogger

The navbar (navigation bar) is the horizontal bar located at the top of your page. If you think it doesn’t match your blog’s design, or if you need that extra space for your banner — you can remove it to suit your needs. Here’s how:

• Go to your Dashboard > Template

• Under Template tab, click Edit HTML to edit template

• Just add the piece of code below somewhere between the <html> and </head>  tags of your blog’s template…

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}

• Like This-

<head>                                        
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>      
    <b:skin><![CDATA[                          
/*-----------------------------------------------
Blogger Template Style                          
Name:     Widget Craft                        
Designer: Hardeep Asramo                        
URL:      www.blogger.com                    
Updated by: Blogger Team                        
----------------------------------------------- */
                                               
#navbar-iframe {                                
height: 0px;                                    
visibility: hidden;                            
display: none;}