Author: web developer => suvanno
| at : 7:12 PM |
Category : blogger tips
|
Readmore function is used to cut our post on homepage, post will appear fully when we click readmore link. You can see my post on homepage. It's cut automatically and if we insert image, it appears thumbnail. This is automatic readmore function with thumbnail. We just need to set up our HTML code. How to?
1. Go to "Layout" click "Edit HTML" 2. Tick on "Expand Widget Templates" 3. Find </head> code 4. Insert this javascript under </head> code
summary_noimg = 430; is post cut height without image summary_img = 340; is post cut height with image img_thumb_height = 100; is thumbnail image height img_thumb_width = 120; is thumbnail image width
Or how to post using mail.yahoo.com or gmail.com ?
1. Login into your blogger account. 2. Click on “Change Settings” icon of your blog. 3. Open ” Email” tab (see picture) ->
4. Enter your Secret Mail-to-Blog word (see picture) -> If you want to publish automatically don’t forget to check it.
5. Click “Save Changes”. 6. Login into your email account, write your post ( email Subject will be post Title and email body will be your post), sent it to youbloggeraccountname.SECRETWORD@blogger.com.
Wouldn’t it be nice to know how many people actually visited your blog each day? How about knowing which of your posts are the most popular? Well surprisingly Blogger doesn’t currently offer any native blog analytics but fortunately there is Google Analytics — available for free.
Google Analytics is a great tool that will show you all sorts of useful information about how people found your blog, keywords they searched on to find you, where they came from and even how long they stayed. You’ll learn more about where your visitors come from and how they interact with your blog. This is a must tool if you are trying to build a profitable blog otherwise you are flying blind!
This article will show you how to add Google Analytics to your Blogger blog. It’s a fairly simple process and doesn’t require any technical skill at all.
Step #1 - Setup a Google Analytics Account
Go to Google Analytics and sign in using your Blogger login. If your account doesn’t work for some reason, you can create a new one instead. Once you login you’ll see a screen that looks like this:
Click on the “Sign Up >>” button and proceed to the next step which will ask you for your general information. Website URL, Account Name, Country, and Time Zone. The screen will look like this:
If you noticed, I just put my Blogger url (without the http://) and called it “David’s Account” because this is your top-level container for 1 or 100 different websites so it’s a good idea to name it something more general. The next step will ask you for your contact information which includes your first name, last name, phone number, and country. Easy so far right?
Your last step in signing up will ask you to accept the user agreement terms and conditions which you should read (just kidding…who actually ever reads these entire legal terms anyhow?).
Now this next screen is very important. This is the code you will need to copy and paste into your blogger template. Go ahead and click into the box and it will automatically highlight the entire block of code for you. Now you need to copy that code and paste it into notepad or into a MS Word document. Save it as you’ll need to use it later.
After you click on the “continue >>” button you will be taken to your brand new Google Analytics dashboard! You will see your blogger blog listed but with no analytical data….yet.
Ok, now you are done with setting up your Google Analytics account. The next step is placing the tracking code into your Blogger template so it can report back to Google Analytics and provide you with some cool data points.
Step #2 - Adding GA Tracking Code to Your Blogger Template
This is not a very difficult step even if you are afraid to touch your template code. Login to your Blogger account and then click on the “Layout” => “Edit HTML” tabs. This will bring you to the template code. Before you make any changes, I advice you to back up your template just in case there are any problems. After you’ve done so, continue reading.
Now in the edit template html code window, scroll all the way to the bottom of your template code and look for the
tag. There should only be one of these closing tags in your template. If you can’t find it then your template wasn’t properly created and you should add one right above the </html> tag.The</html> tag should always be your last line of code in your template. It signifies the end of your template.
Ok, now go back to the code you saved before in a Word Doc from Google Analytics. You are going to copy it and paste it right above the tag as illustrated in the image below. The yellow highlighted code is the new GA code I just pasted into my template.
Save your template and you shouldn’t get any error messages. If you do, it’s most likely not related to this GA code and something else with your template itself. Assuming you’ve been successful with your save, you are all done embedding the GA code in your template!
Step #3 - Confirm Google Analytics is Tracking
Go back into your Google Analytics account and look at your dashboard. Most likely you will see a little yellow exclamation mark under the “status” column that looks like this: . This means everything isn’t working properly yet which is fine because we are about to tell GA we just added the code. From your dashboard, click on the “edit” link which is located to the far right.
After you click on that link, you’ll see another screen like below. It will say “Tracking Not Installed” followed by a link “Check Status”. You’ll want to go ahead and click on that link which will tell GA to visit your site and look for the new code you just pasted in your template.
Assuming you pasted the code in there as instructed above, GA will find the new code and begin tracking everything on your blog. If you are still having problems, it’s most likely something to do with GA and you should read their help guide to troubleshoot your problem.
The message seen here, “Waiting for Data” means you have correctly setup GA and data is being gathered! Click on the top left Google Analytics logo and it will take you back to your dashboard. From there click on the “View report” link and that’s where all your very important Blogger visitor data will start appearing!
Now it usually takes an hour or so before you will see any data (maybe longer if you don’t get much traffic to your blog) so please be patient. Trust me, you’ll be logging in at least once a day just to see how much traffic your blog is getting. It’s very addicting and powerful information to learn from. You’ll be surprised which posts are your most popular and what countries people are coming from to read your blog.
Google Analytics is very powerful and we have just learned how to install it into your Blogger template. We haven’t even scratched the surface on the features and reporting it can do. For most Bloggers, this will be enough. Data will be collected and you will just review it. Others with more in-depth goals (like selling products or services, creating a sales funnel, etc) will want to spend more time learning GA. Hope you enjoyed the tutorial and don’t blame me for your new found addiction!
Last night (Feb 12th, 2008) the Blogger/Blogspot engineering team at Google released a patch with a few updates and bugs fixes which apparently did more harm than good. There are numerous reports in the Blogger Help Group of people having problems with their page element layout editor not working properly.
Update (2/15/08): Blogger has acknowledged the scrollbar problem as a known issue but has not given an eta on a fix. They did recommend template designers use the body#layout CSS selector to add CSS styles that adapt templates to the editor which is a good idea. I’ve listed some css code below you can use if you want to add and tweak it for your template. You can also read more about it here.
I noticed this myself when I was trying to test and add a new custom xml Blogger template. With some custom templates, the overall width of the actual template is larger than the max 750px template editor window so you would typically have to scroll to the right to be able to edit widgets or page elements. If you look at the screen shot below, you’ll see what I’m talking about.
So how are you supposed to edit your sidebar page elements if you can’t even get to the “edit” link on each one? Well, luckily I discovered a workaround which will allow you to get to each buried page element. The template window is actually an iframe which means it’s a window within a window. Knowing this, you are able to scroll within this window even though the scrollbar is not physically visible.
Just click anywhere within the template window and hold down your mouse button. Keeping your mouse button held down, move your mouse as far right as you can. If you do it correctly, you’ll notice it moves the template window to the right and you can now see your “edit” links.
According to their official Blogger Buzz blog, this is a list of the updates made in this release. They probably didn’t realize this release would cause more harm than good but since the Blogspot team is pretty good about listening to feedback, I bet it’s only a matter of time before they fix this bug. They should also make the Blogger page element layout window bigger than 750px. I’d recommend they make it fluid width so it expands depending on the template size being used. Do they not realize the huge demand and usage of custom blogger templates which by nature are wider and better?
Anyhow, here’s a list of the updates announced with this release:
Clearer identity options on the comment form (can use OpenID)
Transliteration is now available in Kannada, Malayalam, Tamil, and Telugu as well as Hindi
Posts with more than 200 comments have them split across multiple pages
Layouts blogs now have a “Layouts” tab instead of “Template”
They also addressed a few bugs which seem pretty minor to me except for the “Faster loading times in the post editor”. Nevertheless, any bug fixes are good.
Better Persian translations and other BiDi layout fixes
A fix to the long-standing incorrect label counts bug
Safari 3 support for the Layouts template editor pages
Faster loading times for the post editor
Improved international support in the post editor’s date and time fields
Compatibility fixes for Picasa’s BlogThis! button
If you’re really advantageous and want to correctly fix your template, you’ll need to edit and add and tweak the following new .css elements. These elements actually control the Blogger layout frame so it will shrink the widgets so they properly fit.
This set is for a three column template so if you only have two then just delete the left-sidebar-wrapper element. Your template div ids might be named differently so you’ll need to make sure the names are consistent otherwise it won’t work properly.
Hopefully this will help you and fix your Blogger template so the layout editor shows all your widgets properly. I plan on adding this code to any new templates going forward so it’s not a problem for you!
Having a top rank in Google is the holy grail for anyone who has a website. Organic Google traffic is free advertising and how most bloggers (especially those just starting out) achieve visitors and traffic to their site. It all comes down to a simple numbers game. Essentially, more traffic = more money-making opportunities from your blog. The question is, how do you get ranked higher for my blog posts using Blogger?
Before I tell you how, let me give you a quick lesson is search engine optimization (aka SEO). There are two main components: “off-page” and “on-page” optimization. “Off-page” SEO refers to tactics such as link building. The more websites that point their links to your blog/website, the better. It’s a democratic way of showing Google that your site must be important if lots of people are pointing to it. Even more important with “off-page” inbound links is the actual link text (anchor text) that is used to point to your site.
Here’s my proof. If you search Google for the term “click here” you’ll see that Adobe Reader and Apple’s Quicktime software are in the top 3 results. Why? Because so many other sites are linking to these two sites with “click here” as the anchor text to download their software. That’s the power of “off-page” SEO which you as a blogger can’t do much about besides writing such great unique content that generates lots of links.
So with “on-page” SEO you have complete control over how well you’re optimized for Google. This includes keywords in your post titles, title tags, using header tags (h1, h2) and other tactics. Now the one we’re going to focus on in this article is the blog title tag.
Title tags are one of the most (if not the most) important “on-page” elements to ranking high in Google. Search engines such as Google weigh the importance of each word in the title from left to right. So ideally you want your blog post title all the way to the left and your actual blog name to the right. Below is a perfect example of how this should look. You can also check out our Premium Revolution Template which is currently using this technique as well.
Blogger templates by default don’t come with search engine optimized (SEO) title tags meaning you aren’t maximizing your blog to rank better in Google. If you take a look at your existing Blogger title you’ll see that blogger displays the blog name first then followed by your post title. They have it backwards so let’s get your blog setup properly.
We’re going to have to make a quick edit to your Blogger template which might intimidate some of you but it’s very small and painless. All I ask you to do first is to backup your template just in case you make a boo boo. That makes it easy to revert back without much headache.
Step #1
In your Blogger dashboard, go to “Layout” => “Edit HTML”.
Step #2
In the template code, do a search for this: <title>. It’s usually in the first 5-10 lines of code in your template near the top.
Step #3
Replace that bit of code with the following code:
|
Step #4
Save your template and go back to your blog. Click into any individual post and look at the page title.
All your blogger posts are now much better optimized to rank higher in Google. I’m not going to promise you a night and day difference but you’ve taken a step in the right direction. Now just go post unique high quality content so people searching Google will find your blog first!
Ready to super charge your blog? Check out our professional premium blogger templates or make money by joining our blog affiliate program!
If you like this post then please consider subscribing to our eBlog Templates RSS feed. You can also subscribe by email and have new templates and articles sent directly to your inbox.
In order to enable the Recent Posts and Recent Comments page elements in your recently downloaded Blogger template, you need to follow a couple simple steps.
These lists aren’t going to show up when you first install the template so we’re going to bring them to life now. They are actually both RSS Feed widgets so we’ll need to paste in your feed and comment rss feeds to make them work.
Let’s start with the Recent Posts page element so click to edit it. Then paste in your RSS feed url which will most likely be in this format http://YOURSITE.blogspot.com/feeds/posts/default . Make sure to replace “YOURSITE” with your actual blog url.
There’s no need to change the title (unless you want to call it something else) so then hit “Save Changes”. Then save your blogger layout and go over to your other browser window, refresh and see the Recent Posts appear in your blog’s sidebar.
Now you’re going to do the exact same thing with the “Recent Comments” page element but you’ll instead use this feed format http://YOURSITE.blogspot.com/feeds/comments/default . Again, make sure to replace “YOURSITE” with your actual blog url. Save and make sure it’s working properly. If it doesn’t appear on your blog, chances are you don’t have the correct feed url or you might not have any comments yet.
If you really want to fine tune your Recent Posts and Comments settings like increasing the max number displayed to 10 you can. Go read our advanced recent posts settings article and take your widgets to another level.
Ready to super charge your blog? Check out our professional premium blogger templates or make money by joining our blog affiliate program!
If you like this post then please consider subscribing to our eBlog Templates RSS feed. You can also subscribe by email and have new templates and articles sent directly to your inbox.
Even though I would consider myself a “Blogging Pro” I don’t think I could ever have the patience to design and build a Blogger template from scratch. I’m certainly capable of doing it but the amount of time and effort for me to do it just wouldn’t be worth my time.
Now just to get things straight — I’m not a designer so it’s not my passion. I’d rather be building or working with blogging technology than designing. I have a lot of respect for website and blog template designers and you would too if you’ve ever tried to create one yourself.
It’s almost an art because you have to first have an artistic ability and understand how to balance out designs, etc. Then you need experience in a design software package like Photoshop CS3 or Adobe Illustrator. After that you need to take the .psd and convert it into .css, html, and images for the blog template!
I bet you didn’t even realize the amount of work that goes into building the Blogger templates you are so quick to download and install. Maybe you’ll have more appreciation for the next template you download and install.
So after all my talk about the difficulty and time it takes to create a Blogger template I’m going to give you a great site that will make it easy for you to modify your blog template.
How many times have you downloaded a template that’s “almost” perfect? You wish you could change the header image, adjust the font, or add a background image but you just didn’t know how to. Well, thanks to Amanda over at Blogger Buster, she gives you a cheats’ guide on how to customize your blogger template. Her tutorial isn’t really meant for professional designers but rather those like yourselves who wish to change the look of their blog. In other words, I’d say it’s perfect for you!
The article is part of a series called “Why your blog design needs to be unique!” which is a great read. I’d subscribe to her rss feed as well so you are able to get the latest posts about blogging design tips and tricks. Great work over there Amanda….I enjoy your posts and I’m sure my readers will as well!
Ready to super charge your blog? Check out our professional premium blogger templates or make money by joining our blog affiliate program!
If you like this post then please consider subscribing to our eBlog Templates RSS feed. You can also subscribe by email and have new templates and articles sent directly to your inbox.
To Put Label cloud or tag cloud on yours blogger sidebar template you have to follow below instruction carefully and with free mind This hack will really add flavour to your blogger Template and help yours readers in finding contents according to label or tags ,this features will really make you free to add many tags according to your blog post.Make sure you backup your template before making any changes!
Author: web developer => suvanno
| at : 5:34 AM |
Category : blogger tips
|
1.Sign in to your blogger dashboard>click the 'layout' button[see the screenshot below] 2.Click on the 'Edit html' tab
Here is the code you have to add <meta content='DESCRIPTION HERE' name='description'/> <meta content='KEYWORDS HERE' name='keywords'/> <meta content='AUTHOR NAME HERE'name='author'/> DESCRIPTION HERE:Write your blog description KEYWORDS:Write the keywords of your blog AUTHOR NAME:Write the author's name(Your name)
3.Add the above code just after this <b:include data='blog' name='all-head-content'/>
Don't forget to add description and keywords. and save the changes.
Whether you have a business website or a personal blog, you'll want to drive traffic to your site. Learning how to submit a website to Google is one way to accomplish that. Google is the most popular search engines so it's important to use Google as a tool to promote your website. Following a few simple steps will teach you to easily submit a website to Google and you'll be on your way to internet followers. Steps
Venture to the add a URL to Google webpage. In order to submit a website to Google, you’ll want to visit the submit a URL internet page. A link to this page is listed in the resources section of this article.
Type the URL of the page your are submitting in the empty box provided. When you submit a website to Google, you’ll want to look for the empty cell right after it says URL. This is where you will provide the web address you are trying to add to Google.
Add comments about the website you are submitting to Google. You’ll want to give a little bit of information about the website you are trying to submit. Underneath of the URL: box you’ll see a box labeled Comments. You can provide the info regarding the website you are trying to submit to Google here
Type the Captcha you see in the empty box underneath it. In order to prove you are a real person trying to submit a website to Google, you’ll want to type in the squiggly letters you see in the box provided.
Hit the add URL button. After you’ve provide all the relevant information in the previous steps, the last step to submit a website to Google is to hit the add URL button.
Author: web developer => suvanno
| at : 6:51 PM |
Category : blogger tips
|
If you want to prevent users from copying contents of your blog or site than you need to put this code in ur blog so that user can not copy ur blog's contents , i was browsing through ashish's blog and got this script
Go to Layout and click on add new gadget > select Html/Javacsript
Now in the box copy and paste the following code
<script type="text/javascript"> var omitformtags=["input", "textarea", "select"] omitformtags=omitformtags.join("|") function disableselect(e){ if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1) return false } function reEnable(){ return true } if (typeof document.onselectstart!="undefined") document.onselectstart=new Function ("return false") else{ document.onmousedown=disableselect document.onmouseup=reEnable } </script>
Author: web developer => suvanno
| at : 6:47 PM |
Category : blogger tips
|
If you want to hide navigation bar of your blogspot blog than you need to write this code in the html section of ur blog
1- Log in to blogger
2- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.
3- paste the CSS definition in the top of the template code asn shown in below code:
<b:skin><![CDATA[/* ----------------------------------------------- Blogger Template Style Name: Rounders Designer: Douglas Bowman URL: www.stopdesign.com Date: 27 Feb 2004 Updated by: Blogger Team ----------------------------------------------- */
Author: web developer => suvanno
| at : 6:44 PM |
Category : blogger tips
|
If you are blogspot blogger than you must have missed the fact that blogspot doesn't provide any way to count how mant times any post on your blog has been read, same was the case with me too.
I've written a script to count blog page views or blog post views and sharing it with everyone who needs it to put page views counter in all posts of your blog , follow these steps
Author: web developer => suvanno
| at : 1:04 PM |
Category : blogger tips
|
When I entered Engineering I learnt a lot of new things. Having good knowledge about softwares and computer tips, I decided to make a blog and share my knowledge with others and make few bucks out of it. Today I am sharing my own experience how to launch a successful blog. It will be a step by step tutorial. If you are new to blogging it is an important post for you .
Now my Alexa Ranking is 84,519 and Page Rank 3. In this tutorial I am going to tell you that how I promoted my blog, how my Alexa graph went up and how I got my first cheque of 100$ in 3 months…
iche :
Before starting a blog you should ask yourself that on what topic you can write, on what topic you have knowledge, on what topic you have interest. This is known as Niche. You should choose a correct niche for your blog. Do not think that your friend is earning good from a tech blog so I should also make a tech blog. No ! This thinking is totally wrong. Every person have different taste, interest and skills.
Always choose a niche for your blog in which you have :
1) Knowledge : If you have knowledge about any topic, do not think just start a blog on it. 2) Interest : Make sure that beside knowledge you do have Interest in the topic that you have chosen.
Knowledge without interest does not last long. The same is case with a blog if you have knowledge but no interest your blog’s graph will gradually decrease.
Note : Please note that do not make a blog on pirated softwares, games, movies, MP3’s and any illegal stuff. Google will delete your blog if you select any such niche for your blog. Please read Blogger Terms & Conditions before moving further.
Blog Platform :
After choosing niche for your blog the next thing you should look for, is hosting. If you do not want to spend any money, Blogger is the best service. Most of the blogger start from .blogspot and then after they start making money from it they take their own hosting and domain. If you do not want spend a single penny I recommend you to use Blogger.
log Name :
Now after selecting hosting the third thing that is most important is Blog Name. Your blog name should be according to the niche of your blog. ( I realized this thing after 1 month of blogging )
Always remember that use a simple domain that is easy to remember. A 2 letter domain is recommended like Real Trix, Techno Lizard etc.
You can also use your name as domains like JohnChow. Do not use a word that is not in the dictionary if you are starting a small blog. It only looks nice for big companies like Google, Yahoo… For a small blogger, combination of 2 letter domain will be the best option.
Blog Template :
The last basic need you should fulfill is Look & Design of your blog, its popularly known as Template of your blog. The template of your blog should be simple and attractive. Read this post of mine on “Some Tips On Selecting A Blogger Template”
>> Blog Niche >> Blog Platform >> Blog Name >> Blog Template
These were the basic needs of a blog that most of the new blogger never read because they are never told to them.
oogle Analytics :
Use Google Analytics to know about where your visitors come from and how they interact with your site. It will tell you about your unique visitors and daily page views. It is very easy to install. They will give you some code, just enter it in your template and you are done. Then you can use Google Analytics to see your site traffic.
Writing Skills :
After setting up a blog its time for writing something. Below are some quick tips for writing a post :
1) You always start your post with Title. So always use a title that is attractive and SEO friendly.
2) Your posts should be simple and to the point.
3)Do not use tough English words.
4) Always write a mega post once a week. By mega post I mean that it should be self written and should not be there on Internet before. New bloggers should write articles that you think are the best.
5)Do not copy content from other websites. If you do, always give proper credits. Not giving any credit creates a negative impression on the reader. You should know that you have to impress your readers so that they should visit your blog again.
6) Blogger and Wordpress gives an option of Spell Check, so make sure that there should be no spelling and grammar mistake in your posts. Having any such mistake can irritate the reader.
7)Do not make your posts colorful. Simple and plain post will be highly appreciable than a colorful post. Rather you should use bold, italic and quotes for making for your posts more attractive and easy to read.
Now your blog is able to stand and we have to take your blog to the next level i.e promotion. Before promotion I would like to tell you that you should now register to Google Adsense. It is the best service with which you can earn money with your blog. Always register to Adsense via Blogger as your blog will get approved quickly.
Here are few posts of mine to increase your Adsense revenue :
Now we move further on promotion of your blog. Promoting a blog is not a one click job. It requires hard work. Here are few posts of mine on promoting your blog.
First of all submit your blog to Search Engines, RSS Feeds and Pings…
Using StumbleUpon and Digg will surely help you in getting more traffic to your blog.
Create List Of Bloggers :
The next step is to look for other blogs that have same niche as yours. Ask them for link exchange. This will help you in getting traffic, feedback, comments and ideas from others bloggers. This link exchange is known as Blogroll.
You can get a lot of friend bloggers from famous social networking websites like Digg, StumbleUpon and Twitter
RSS FEEDS :
Lastly, start feeds for your blog so that your visitors does not miss any new post from you. Feeds are a way for websites large and small to distribute their content well beyond just visitors using browsers. Feeds permit subscription to regular updates, delivered automatically via a web portal, news reader, or in some cases good old email. If you do not know what is RSS please visit the post below to watch 5 videos that teaches you RSS.
Author: web developer => suvanno
| at : 12:59 PM |
Category : blogger tips
|
While writing about April Fools prank today I thought to make it sticky so that it always appears on the top of the posts till 1st April. Then I got an idea to share a tutorial on how to create a sticky post on Blogger.
Below are the steps explaining you about this in detail.
Step1) First write a post that you want to make sticky and click on Publish Post.
Step2) Now after clicking Publish Post you will be directed to a new page, here click on Edit post. Have a look :
Step3) Now in the edit post page at the left bottom click on Post Options and in the right bottom page change the date and time, till you want the post to remain sticky. This means that if you will publish any new post, it will come below the sticky post.
Suppose I have changed the date from 3/25/09 to 3/30/09. Now from 25th of March to 30th of March the sticky post will remain at the top and after that, new posts will come at the top. I hope this fact is clear to you.
Step4) After changing the date and time, again click on Publish Post.
Note : Always remember that to create a sticky post first you have to publish it and then edit it again.
Here is a working trick that will help you in getting more and more Twitter followers. In this post I am going to explain you that how you can add a Twitterbadge to your blog or site that slides down automatically when you scroll down the web page.
This is how the badge will look :
So here is a tutorial to add this Twitterbadge to your blog. Lets start :
1. Visit Go2Web20, who are the creator of this badge.
2. Now fill in your Twitter username and enter your desired settings and click on Update Code.
Note : Its better to add the badge to left hand side as the readers start reading your posts from there and they will notice your badge immediately.
3. Now if your are using Blogger as your blogging platform, go to Layout and click on Edit HTML. Here put a tick on Expand Widget Templates and search for tag. Its in the 2nd last line of the template code.
Now, paste your code above </body> and click on Save Template.
If you are using Wordpress as your blogging platform, go to Editor under Appearance tab, and select Footer.php file from the list. Here, search for </body> tag and paste the code above it.
If you are facing any kind of problem in adding this badge, feel free to BeepUs.
(function() { var f = document.getElementById(’cse-search-box’); if (!f) { f = document.getElementById(’searchbox_demo’); } if (f && f.q) { var q = f.q; var n = navigator; var l = location; if (n.platform == ‘Win32′) { q.style.cssText = ‘border: 1px solid #7e9db9; padding: 2px;’; } var b = function() { if (q.value == ”) { q.style.background = ‘#FFFFFF url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat’; } }; var f = function() { q.style.background = ‘#ffffff’; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();
We have to perform the following steps to change the watermark image :
1. First copy all the javascript code and paste it in Notepad.
2. Now change the watermark.gif image link with your own desired image.
3. Now save the file as google.js and upload it on web.
4. Now, go back to the GCSE code and replace the javascript code with your own edited code i.e
I know its bit confusing and if you are facing any problem in using this tutorial, drop your comments and I’ll reply to to your queries as soon as possible.