Create search box on Blogger com blog

Create search box on Blogger com blog

Today we will create a search box for our blogger.com hosted blog. This search box can able to search your blog context. Add this search box in a HTML/ Javascript gadget box.

First code:

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

This search box will look like this:

Here is an another code for a search box.

<p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text"/><input id="search-btn" value="Search" type="submit"/></form></p>

It will look like this one:

I wish these search box will serve as your wish.

{ Read More }

Create A Tag Cloud Based On The Content of Your Blog or Website

Create A Tag Cloud Based On The Content of Your Blog or Website

Tag Clouds, you have seen them on delicious, Technorati or Flickr, are an easy way to get people explore your site deeper. Heres a sample tag cloud that uses Google AJAX Search.

Tag Clouds (provided they are not cluttered and display just the relevant words) help visitors quickly visualize what your website is all about since the topics you frequently cover are mentioned in bold or relatively bigger fonts.

WordPress community already offers some excellent plugins for generating tag clouds (like the Ultimate Warrior) plus the upcoming release, WP 2.3, has inbuilt support for tagging.

However, if you are on Blogger or have a non-blog website, theres no reason that you should miss Tag Clouds.

Heres how to add a good looking tag cloud to your Blogger blog:

1. Type your Blogger feed address in RainMaker 

http://www.blogger.com/feeds/xyz/posts/default?max-results=999

Remember to replace xyz with your Blog ID. This URL will retrieve your latest 999 posts and supply that for analysis to RainMaker.

2. For the word link, type the following (where xxx is your blog name, e.g. labnol)

http://xxx.blogspot.com/search?q=%%enc_word%%

3. You can change the default font size, tag cloud dimension background image and colors to fit your site theme.

4. Now the tricky part. Once you have generated the tag cloud using RainMaker, right click over your tag cloud and click "View HTML source" - that the code you need to copy paste in your site.

Tip for Tag Clouds - If you really want visitors to spend more time on your site via Tag Clouds, always keep the number of words in Tag Cloud to an absolute minimum and that there is sufficient space around each word.

{ Read More }

Create Newsletter for your Blogger Blog

Create Newsletter for your Blogger Blog

Newsletter is a good option when you want to send custom mails to your blog readers. It lets you send content rich HTML emails to your readers.Its not like the Feedburner Email Subscription(which just sends post updates via email at regular intervals) .You will be able to compose and send the newsletter at any time. Here are the steps to enable and send Newsletters.

1. Go to http://google.com/friendconnect and login there

2.Click on your Blog Name from the Left Pane.(If your blog is not already there, then add it)

3.Click on the Send a newsletter Option

4. Click the check box which says �Ask visitors to subscribe immediately after their first sign-in". After that Click on the Newsletter Gadget Tab.

5.Customize the Colors and other Options and Click on the Generate Code Button and Copy the Code from there.

6.You need to add this Code to your website. If you are using blogger, then Go to theLayout > Page Elements and Click on the Add a Gadget Link

Opt for HTML/JavaScript Gadget

and paste the copied Code into the Box Which appears and Save the Gadget

7.Now your blog readers will be able to subscribe to your Newsletters.

When you have enough subscribers, you can Compose the Newsletter from theCompose newsletters tab ,When you are done with creating the newsletter, Click on thePreview and send newsletter button and Click on the Send newsletter button from the popup preview window. you can see how many recipients will receive the newsletter.(In my case it is Total recipients : 539 as shown in the screenshot)

Newsletter subscription is just one of the different Friend Connect Gadgets. There are many more on the Friend Connect Website.

{ Read More }

Creating a Contact Me page for Blogger Blog

Creating a Contact Me page for Blogger Blog

Blogger has added a new widget in their widget page. This widget is a Contact Me widget which allows blog visitors to contact you.

This can be added in your blog sidebar or footer. In this tutorial I will tell you to how to add this to a blog page.

Create a blank page from Blogger -> Pages -> New Page -> Blank Page

Toggle to tab HTML and paste these code in the HTML textarea :

<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Email
<span style="font-weight: bolder;">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message
<span style="font-weight: bolder;">*</span>
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><p style="display: inline-block;">Powered By <a href="http://sag-3.blogspot.com">Subins Blog</a></p>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Now we have to register the widget to make it work properly. To do that Go to Template -> Edit HTML and scrollto the bottom of the code and paste the following code before </html>

<script>
_WidgetManager._RegisterWidget(_ContactFormView, new _WidgetInfo(ContactForm1, lowerbar2, null, document.getElementById(ContactForm1), {contactFormMessageSendingMsg: Sending..., contactFormMessageSentMsg: Your message has been sent., contactFormMessageNotSentMsg: Message could not be sent. Please try again later., contactFormInvalidEmailMsg: A valid email address is required., contactFormEmptyMessageMsg: Message field cannot be empty., title: Contact Form, blogId: YOUR BLOG ID, contactFormNameMsg: Name, contactFormEmailMsg: Email, contactFormMessageMsg: Message, contactFormSendMsg: Send, submitUrl: http://www.blogger.com/contact-form.do}, displayModeFull));
</script>

Replace the Wheat color background text above to your blog id. See this post to see how you can find blogger blog id.

When a user submits the Contact Me form you will get a mail from Blogger like this :

{ Read More }