How to Backup/Restore Blogger Template?

Many a times, we need to customize blogger template. Sometimes we want to change body colour and sometimes width of body. If I am not happy with 2 column default template, I may want to change it to 3 or 4 column template.

In this process, its quite possible that the template becomes corrupt and we lost several settings.
Thus make it a habit that before making any change to blogtemplate, take the backup of it. In case, anything goes wrong, we can restore the template from backup file.

Backup template

Step1:- Go to Layout - Edit HTML.
Step2:- Download Full Template
Step3:- Save template to hard disk.

Restore template

In case you want to restore the template, follow these steps:
Step1:- Go to Layout - Edit HTML.
Step2:- Browse and then upload template (saved at hard disk)
Step3:- Save the template

Read More Add Your Opinion 0 Opinions

Blog Layout - understand its basic

I will discuss about basic Minima template and once you are comfortable about basics of template, you can apply this learning to understand other templates also.

Here is an image of Minima template Layout.

Hierarchy goes like this

1. Navbar
2. body
   
   
   
   
   
• Header
• Outer wrapper
  
  • Main wrapper
  • Sidebar
  
  
  
  
  
  
• Footer

Navbar:- Navbar is provided by Blogspot and there is a little about its customization. We can just change its colour and this customization is available in only  4 colours.
You can't remove (or add costomized) text to Navbar.
For me, it doesn't look professional. Hence, I usually prefer it to hide/remove.
Link:- How to hide/remove Navbar.

Body:- This section is completely in your hand and you can modify it as per your preference. This is the parent of Header, Outer wrapper and Footer.
If you have defined any style at body level, all children will follow it unless the same style is overridden at child level. Assume if you define background colour (say yellow) at body level, whole body will appear in yellow unless you separately define background colour at header/outer wrapper/footer.
Here you can

• increase/decrease width of body
• change default 2 column template to 3 or 4 (or any number) column template
• change text decoration for whole body
• change link css

Tips for professional blog:-

• Keep width of header, outer wrapper and footer same.
• If body colour is not white, keep different colour for header/outer wrapper/footer.
• don't go for more than 4 column in the template

Read More Add Your Opinion 0 Opinions

How to remove dotted bottom border from post?

In this post, we will discuss that how can we remove bottom border (which is a dotted line) from post.

Step1:- Go to Layout - Edit HTML

Step2:- Find below mentioned code:-
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Step3:- modified this code as
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}

Its done and bottom dotted border has been removed from your post.

BlueOcean

Read More Add Your Opinion 0 Opinions

How to remove dotted lines in sidebar of blogspot?

I never liked these dotted line separated of gadgets in sidebar of blogger. These lines appear dirty to me and I removed them.

Just thought to tell you about it, so that if you don't like these dotted lines, you could also remove them from sidebar.


How to do that?

Step1:- Go to Layout -- Edit HTML and find the below mentioned code

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

You could see that bottom border of sidebar widget is of 1px and its dotted. Margin and padding are also present.

We have to modifiy width, margin and padding to zero. And modified code will look like as:-
.sidebar .widget, .main .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 0em;
padding:0 0 0em;
}

Now, save the template and dotted lines from sidebar has been removed!

Note:- If you have created more than one sidebar with different identification (eg sidebar1, sidebar2, sidebar3, etc), please look at the code with caution and wherever you find similar code as mentioned above, set width, margin and padding to zero.

Making width zero (border-bottom:0px dotted $bordercolor;), will remove dotted lines. Rest two (margin and padding) will decrease distance between two gadgets in sidebar.

BlueOcean

Read More Add Your Opinion 0 Opinions

Resource - under construction

Read More Add Your Opinion 0 Opinions

my project - under construction

Read More Add Your Opinion 0 Opinions

Advertize Here - under construction

Read More Add Your Opinion 0 Opinions

Blogger Templates Download

In this page, you will have an option to download blogger template free. There is absolutely no charge for it. At the end of every template, I have inserted a link to this blog.
Template provided by Blogger Tips and Tricks.
There is no legal obligation to keep this link in your blog if you download template from this place. However, I will humbly request you to keep that link as it is in the template. It will be very sweet. Also, I will consider it as a great favaour from you and a reward for working here.

3 Column Blogger Templates

(Click on the image to get look and feel of the template)

Download

Read More Add Your Opinion 0 Opinions

HTML color code

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Read More Add Your Opinion 0 Opinions

Link - hover, visited, active

Have you noticed that almost all the links in my blog(except blog title, post title and link from external gadgets) appears in Blue and when you place mouse over it, text becomes underlined and colour changes to Amber.

In your case, these default colour of Link (hover/visited/active) may be different.
In this post, we will try to understand this Concept.
(For reference, I will take example of Minima template. Once you understand the basics, you can decipher it for your blog also.)

If you go to Layout - Edit HTML, you will find HTML code of your blog.In the very beginning, some variables are defined. They appear as:-

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#0033ff">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc8900">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#0033ff">

These are variables and are used in the code. Now, we will go to link section:-

body {
background:#ffffff;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

What do these line mean?
Default Link
a:link {
color:$linkcolor;
text-decoration:none;
}

This says that link colour will be $linkcolor (see variable - its value is #0033ff -- This Colour). There is no text decoration for default link (no italics, no bold, no underline, etc)

Visited Link
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

This says that visited link colour (once you click on the link and return to the parent page again), will be $visitedlinkcolor (see variable - its value is #0033ff -- This Colour).

Hover Link
a:hover {
color:$titlecolor;
text-decoration:underline;
}

This says that Hover Link (when mouse is placed over a link) colour will be $titlecolor (see variable - its value is #cc8900 -- This Colour).
Also, text decoration is underline. Thus Hover Link is always underlined in Minima template.

If you want to override these default colour or style, you can easily do it by changing colour code in variable, declared. Else it can be done by overriding at link setting.
Example:-
Variable override
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#0033ff">

If you want that all default link should appear in Yellow, change above variable as:
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#ffff00">

Else, change is to Link level:-
a:hover {
color:$titlecolor;
text-decoration:underline;
}

to

a:hover {
color:#ffff00;
text-decoration:underline;
}

List of HTML Color Code

Read More Add Your Opinion 0 Opinions

Gadget

1. Paypal
2. Google Translator
3. Drop-down menu
4. Bookmark Button

1st Lesson - Getting Started

Image in posting

Google Translate tool for your blog

Hide Navbar

How to create Admin Link?

Add Paypal doname buttton

Drop down menu in your blog

JavaScript in Blogspot Post

Video in blogspot

Music in Blogspot

How to add a counter to your Blog

Track your visitor

Create clickable Link

How to Unpublish a post in Blogspot.

Create clickable Image

Add bookmark button

Link Basics - Hover/Visited/Active

HTML color code

Remove dotted lines in Sidebar

Remove dotted bottom boder in Blogspot

Blog Layout - Understand Basics

Backup/Restore Blogger template

Make a sticky post in Blogspot

Create a popup webpage in Blogspot post

Read More Add Your Opinion 0 Opinions

Hello,

Please mail me by clicking the link below.
Click here to mail me, if you want

• to Place a link of your blog/website at this blog.
  
• to place a banner advertisement at this blog.
  
• me to review your blog.
  
• to improve your blog and want my help for it.
  

I will be very happy to assist you. Alternatively, you could comment here also.

Thanks,
BlueOcean

Read More Add Your Opinion 0 Opinions

How to add Bookmark Button after every post?

Why you should add a Bookmark button in your Blog?
And simple answer is because your blog visitors could bookmark your pages in various social bookmarking websites and could easily return to your post by just a click in their bookmark.

You can use several service available. However, I have used this bookmark button from http://www.addthis.com/.

At addthis.com, instruction to add BookMark button is given in very simple manner. You can visit this page and get your button in minutes.
This page will generae a JavaScript for you.

Now, go to Layout - Edit HTML - Check box of "Expand Widget Templates" - Search for <div class='post-footer'> , and paste that JavaScript just below of <div class='post-footer'>.

Thats all. You do have now BookMark button.

Thanks,
Blue Ocean

Read More Add Your Opinion 0 Opinions

How to create a link on Image: Clickable image?

If you click on the image shown above, it will open a new google page for you.

In this post, we will discuss that how to create a link on image.

Whenever you upload a picture into Blogspot post, BlogSpot automatically stores it to its server and creates a link for it. In my case, the link is:-

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp

I got this information from Edit HTML of editor. If you go to Edit HTML, code will appear very similar to:-

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;">

<img border="0" iq="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp" />
</a>
</div>

 
You can see a line as src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp.
It says that image displayed in the blog will be from this source.
 
Then one more line:- 
<a href=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp

It says that when Image will be clicked, open document , https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp
which is the same source image.
 
Now we want to modify this code, so that when we click on the link, it should open the google page.
Thus we need to modify it as <a href=http://google.com

If we want to open this link in a new browser, we need to use target="_blank" attribute for it. Also, we will add alt attribute, which will help to display a text message in case image line is not available in the server.

Thus, modified code will appear as:-

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.google.com" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank" alt="Google Search" >
<img border="0" iq="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp" />
</a>
</div>

More information about basics of creation of a link, Click Here.

I hope this post was not complicated. ;-)

Keep Blogging.

BlueOcean

Read More Add Your Opinion 0 Opinions

How to unpublish a post in Blogspot?

Hi,

If you want to take some of the published post down from your blog, there is no need to delete it from your blog. In stead, there is a smart way to do it.

Step1:- Click on Edit post, which you want to unpublish.
Step2:- Editor will appear. Select "SAVE AS DRAFT".

Thats all. The post has been unpublished now and it is saved as draft. If you want to publish it later again, just select it and say 'Publish'.

Easy... isn't it?

BlueOcean

Read More Add Your Opinion 0 Opinions

How to create a link?

In this post, we will discuss about how to create a clickable link.
Technically, we use html tag <a>, known as anchor tag to create a link. It can be used to
(1) create a link to another document, by using the href attribute
(2) create a bookmark inside a document, by using the name attribute.
 
Here, we will discuss about creation of link to another document in Blogspot. Some examples of link:-
(a) Click me to open google in a new window
(b) Click me to open google in the same window. After clicking me, you can use Back button in your browser to come back to this page.

Create a link
Step1:- Highlight the text, where you want to create the link

Step2:- Click on Link icon of text editor

Step3:- A window will appear. If you want to create link for website, enter the url. Else, enter emailid for email link.

Step4:- Save the window. And publish the post. Link will work now.

Step5:- If you click on the link, Google will be opened in the same window (like example (b)). If you want it to open in a new window, go to Edit HTML editor.

There, you will find anchor tag as <a href="http://www.google.com/">Click me</a>

Modify it to <a href="http://www.google.com/" target="_blank">Click me</a>

After this modification, Click me link will open the link document in a new browser!

Read More Add Your Opinion 0 Opinions

Add Counter

Have you noticed that there is a counter on the footer of this Blog. It tracks number of unique visitors of this blog.

Why I have added this counter?

It gives me an idea of traffic to this blog. Also, various reports to track the vistors are available to me.

How to add a counter in you blog?

If you Search in Google about 'Web counter', it will gives you several links where you can register free and can get your counter. I like http://www.statcounter.com/. After registration and giving information about your page, it will generate some lines of code. Settings can be customised.You need to paste this code to your blog at the section of your preference.

Thats it. Your counter is ready.
Apart from giving number of visits, you can have several reports which tell you about traffic source to your page, popular page, exit page, Country/city of visitors, ISP of visitors, browsers, and many more.

Adding a counter is really easy. Try it once.

BlueOcean

Read More Add Your Opinion 0 Opinions

Track your visitors

The purpose of using counter for your webpage is to track your visotors and to get information about the trends. And based on the information, we can modify the page to suit user's requirement.

Assume if your webpage/blog is viewed in IE for 80% of the visit, then you should concentrate to development of that page so that it is more compatible to IE.
In other case, assume if most of your visitors are from France, you definitely would like to change/modify/update the language of your page to suit user from France.

I prefer to use Google Analytics to track my visitors.You need to register on Google Analytics and add your page. It will then provide you some lines of code, which you need to enter in your blog.
When someone visits your blog, that script will send required information to Google Analytics and it will be available to you in the format of various report.

It gives you number of visits, pageviews, page/visit, bounce rate, average time on site, new visits, time on site, Visitor Loyalty, Browsers, OS, Network Location, Hostnames, etc. informations.

Also, it give you information about Traffic Source:- Direct traffic, Reffering site, Search engine, keyword, etc.
Based on these reports, you could know that how many time, Google sends a visitor to your page.
Once you have all these informations, it will be helpful for you to increase traffic to your page.

Use it. I found it one of the most useful tool for a webmaser.

Happy Blogging.

BlueOcean

Read More Add Your Opinion 0 Opinions

Music in Blogspot

Hi,

In this post, we will discuss how to place a music player in your blog, either in posting or anywhere in Gadget.

HTML 5 introduces a new tag known as <embed>. This tag can be used to embed video/music or any other plug-in.





Here are the steps to create a music player in your blog:-
Step1:- As Blogspot does not support to upload music file, you will have to find a source for music file.
You can either use any other music site or just upload your music file. If you use other's file, there will not be surety that file will be available forever. It may be deleted or URL may be changed.
In my case, I just created a page in Google Sites and uploaded the music file I wanted to embed.
URL of this music file source is http://sites.google.com/site/diyblogspot/barebear.wav.

Step2:- Go to new post - Edit HTML editor and paste below mentioned html there.

<embed src="http://sites.google.com/site/diyblogspot/barebear.wav" height="60"
width="300"
autostart="false"
loop="true"/>
</embed>

I have set autostart as false, means the above music file won't start playing automatically when page loads. It needs to be played manually.

Loop="true" - Once music ends, it starts again as I have set it as true.

src - URL of your music file

width/height - as per your preference.

For more information/setting of <embed> and HTML 5, please visit any other website, which provides specialized information about it.

Keep Blogging!

Thanks,
BlueOcean

Read More Add Your Opinion 0 Opinions

Video in Blogspot

In this post, we will discuss about how to embed a video in a posting/sidebar/header/footer.

HTML 5 introduced a new tag, <embed>. This tag can be used to embed any music/video or plug-in.
As Blogger does not support the storage of music/video file, we need to give its reference in the <embed> tag.




Most of the video sites provides a link to embed a video to your page. Just copy-paste that link to Post-Edit HTML or in a HTML/JavaScript Gadget for sidebar/footer/header.

You can customize some settings directly from the hosting sites or a bit of html knowledge will help you to change size, use a boder etc.
For your reference I am giving the html code, which I copied from youtube.


<object width="500" height="405">
<param name="movie" value="http://www.youtube.com/v/sU4RcVdJ64o&hl=en&fs=1&border=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/sU4RcVdJ64o&hl=en&fs=1&border=1" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="500" height="405">
</embed>
</object>

Now publish your favourite video and impress your visitors. :-)


BlueOcean

Read More Add Your Opinion 0 Opinions

Blog Label

What is a Label?

Label is a kind of categorization, where we associate an item with a particular name. This name serves as an identity to that item.

 

In this image, you can see Gadget(4), PayPal(2), Basics(1).

I labelled 4 blogs which were associate with gadget as 'Gadget'. Thus if you want to view all the posts which talks about Gadget, you just click on Gadget Label.

Here, we will discuss about how to create Label and publish them in SideBar.

(of course, publishing Label in post does not make any sense.)

 

Step1:- When you create any new-post or edit-post, assign a Labels to it at the right bottom of Post-Text-Editor. It will allow to enter any new label, or chose from predifined label.

Step2:- Whenever you publish a post, you are having an option to Label it or posts can be published without a lable also.

Step3:- I assume that you have already created some posts and associate lable to them. Now, you want to publish those Labels in sidebar.
Select the section of page (if you are not okay with sidebar, it can be published in header/footer also), where you want to place this Label Gadget.

Step4:- Select Labels (Show all the labels of posts in your blog.) and apply some setting as per your preference. Save it and return to your blog.

Its done now. Label has been published now. Also one important point, a post can be associated by more than one label also. Use comma separated value to create more than one lable for a post.

Just fyi... I am labelling this post again as Gadget'. :-)

Blue Ocean

Read More Add Your Opinion 0 Opinions

JavaScript in Blog Post

Today, I was going through one blog and it was written that JavaScripts works in a post, only when we put all the scripts in a single line. It also says that if there will be a line break, JavaScript won't work.

I found it is not correct. So thought to publish this post with example.
It works straight away. Just click on the button, which is on top of this post. It really works!

It is very simple to use JavaScript in a blogpost. If you want to check it, here are the steps:-

Step1:- Go to New Post. Click on Edit HTML tab. (Don't click on Compose).

Step2:- Paste following code there and simply, publish the post.

<script type="text/javascript">
function show_alert()
{
alert("JavaScript in Posting... it works!");
}
</script>
<input value="JavaScript in Blog Post - Click me."onclick="show_alert()" size="477" style="height: 30px; width: 358px;" type="button" />

It started working now. Go to you blog and you can verify it.
Isn't it very simple to use JavaScript?

I used JavaScript to create a Cookie. It is kept at my testing blog. In my testing blog, if you search in Right-SideBar, you will find a Button named "Remember Name". Click on that button. Enter your name in the next box. And click "Remember Name" button, again. It will remember your name.

Now, return to that blog after an hour or so and check if the button still remembers your name?
It will, unless you have not deleted cookies manually.

One last JavaScript trick!!

Blue Ocean

Read More Add Your Opinion 0 Opinions

How to add drop-down menu in your blog?

Hello,

Have you noticed that there is a drop-down menu in the right-sidebar of my blog. If you select a value from this menu, it will redirect you to the corresponding blog. In this post, we will discuss that how to create such menu.

Step1:- Select the section of page, where you want to place this Drop-down menu.

Step2:- Select "Add a Gadget".

Step3:- Select HTML/JavaScript (Add third-party functionality or other code to your blog.)

Step4:- Paste below mentioned HTML code in the gadget. Save the gadget.

<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://google.com">Google</option>
<option value="http://blogger.com/">Blogger</option>
<option value="http://gmail.com/">Gmail</option>
<option value="http://diy-blogspot.blogspot.com/">diy-blogspot</option>
</select>
</form>
 
 
Please replace URL of the page and name, you want to redirect to.
 
Its done now. Drop-down menu has been appeared to your blog. Verify it, now.
 
Thanks,
B.O.

Read More Add Your Opinion 0 Opinions

How your PayPal donation will be utilized?

not published yet. please check it back, later.

BlueOcean

Read More Add Your Opinion 0 Opinions

How to add PayPal donate button?

PayPal Donate button is very useful when you expect a donation from your visitors or if you sell something on your blog.
I have created 2 PayPal Buttons. One for serious donations (which is placed at top of left-sidebar) and another for demonstration (which is at botton of right-sidebar).
Demonstration PayPal Donate Button will accept a fixed amount and it is set to $0.05.

Here, I will discuss step-by-step process of creating such a donate button.

Step1:- You need to have one id at PayPal. If you don't have, please create one.

Step2:- Login to PayPal. It will place you to 'My Account' section. Click on 'Merchant Services'.

Step3:- Go to Key Features - Donations.

           

Step4:- It will now ask you for Create PayPal payment button. There are several options/settings there and self-explanatory.

Chose/enter details as per your preference.

Click Create Button. Next screen will generate the code.

Step5:- PayPal Button code is ready for you now. Copy it to notepad.

Step6:- Go to Blogger dashboard login - Layout - Page element

Step7:- Select the section of page, where you want to place this PayPal Button.

Step8:- Select "Add a Gadget".

Step9:- Select HTML/JavaScript (Add third-party functionality or other code to your blog.)

Step10:- Paste PayPal generate button code in the text editor, which we copied in step 5. Save the gadget.
 
Thats it. PayPal button has been created for you blog.
 
Happy blogging.
 
B.O.

Read More Add Your Opinion 0 Opinions

Hello,

First of all, thanks for visiting my blog. You must be thinking when there are several blogs present the same topic, why I chose to create this one?
Here is the answer. Almost every other blog gives you a ready-made code and you use it. In this process, you never learn the basics of blogging. So, when the same situation arise, you fail to decipher it on your own. Again you visit to someone for help.

Thats not good. Here I will discuss the basics and make you proficient in blogging so that you will be able to do almost all the things without any help.

If you like this blog and if it serves your purpose, a return link of my blog in your blog/digg/facebook/orkut will be sweet.

Please post your comments. It will be helpful to raise the standard of this blog.

BlueOcean.

Read More Add Your Opinion 1 Opinion

How to create Admin link?

Once you have removed Navbar, your admin link has been gone. Have you noticed that I have created an Admin link for my blog (left sidebar - top)? Whenever I want to edit this blog, I just go to Admin link and do whatever please me. :-)

We will discuss here that how to create such admin link.
Step1:- Go to Layout - Page element
Step2:- Select the section of page, where you want to place this Admin link.
Step3:- Select "Add a Gadget".
Step4:- Select HTML/JavaScript (Add third-party functionality or other code to your blog.)
Step5:- Paste below code in the text editor. (If you want, you can give a title to this link. However I chose to not to give the title, as "Admin" itself explains its purpose.)

<a href:="https://www.blogger.com/home"><strong>Admin</strong></a>

Step6:- Save it and its done. Admin Link has appeared at your blog.

Happy Blogging.

Read More Add Your Opinion 0 Opinions

Hide Navbar

Many bloggers wants to remove/hide Navbar for several reasons. Main reason is that Navbar provides you a link for 'Next Blog'.
You never know that what would be the content of next blog. It may be something very wiered. Apart from content issue, it provides a distraction for your visitors also. Quite possible that a visitor will go to next blog and will not return to your blog for that session.

How to hide Navbar?

There may be several methods to do this. I will discuss here two of them.
Method 1
Step1:- Go to Layout - Edit HTML
Step2:- a text editor will appear with the html/xml content of layout. Paste below script just before </head> tag.

<style type='text/css'>
#navbar-iframe {
display: none;
}
</style>

Step3:- Save the template. Thats it. Navbar is gone!!!
Method 2
Step1:- Go to Layout - Edit HTML 
Step2:- a text editor will appear with the html/xml content of layout. Paste below script just after <b:skin> tag.

div.navbar {
opacity:0.0;
display:none;
}
 
Step3:- Save the template. Thats it. Navbar is gone!!!
 
What you have lost in the process of hiding Navbar?

Navbar provides you two important functionality. Search and Dashboard. Since you have removed Navbar appearance, these functionality have been lost also.
 
But you don't worry. There is a work-around for it. We will create/add two gadgets for our blog, which will serve searching and link to Dashboard (I will call it admin link).

Follow these links for:-
Creation of Admin Link
Search Gadget for your Blog

Read More Add Your Opinion 0 Opinions

Google Translate tool for your blog

Hello,

Have you noticed about Google Translate tool, which is placed at the top of right-sidebar? I will discuss here that how to install same gadget (or similar kind of various gadget) to your blog.

Step1:- go to Google's webmaster gadget at http://www.google.com/webmasters/gadgets/.

Step2:- Search for your favourite gadget. In this case, I searched for 'Google Translate'.

Step3:- You can find "Google Translate My Page". Click button Add to your webpage .

Step4:- Change appearance of this gadget as per your preference and Click on "Get the Code".

Step5:- Copy this code to use it in blogspot.

Step6:- Go to Layout - Page element section of your blog. And select "Add a Gadget" in the desired section of your blog layour.

Step7:- Select HTML/JavaScript (Add third-party functionality or other code to your blog.)

Step8:- If you want to give a title, go for it. Paste the code of "Google Translate Gadget" from step 5.

Step9:- Save from this gadget window. Save the page.

Your Google Translate gadget has now been added to your blog.
Click Here for some kool gadget of my preference from Google Gadget.
Happy Blogging!

Read More Add Your Opinion 0 Opinions

Image in a posting

There could be at least 2 ways to insert an image into a posting.

• By refering the URL of an image. This method is good if you host the image (say in your picassa or in any other website). But if the image is hosted by somebody else, be ready to for unavailability of its without a notice to you.
• Better to save the image (you want to publish) in the hard-disc of your computer and then embeded it into the post.

Step1:- New posting - Compose - Image Icon

Step2:- Either select image from your hard-disc (Upload Image) or give a URL. Let the image uploaded.

Step3:- Now image will appear in the editor of your post. Click on image. Several options will appear.
Small, Mediun, Large, Left, Center, Right, Remove.
You can define size by choosing Small/Medium/Large. Default allignment will be Center. Change it to left or right if you want.
Click on the image to drag-drop it vertically. Do a bit of trial and position will be as per your convinience.

Step4:- Click on Preview tab (Just before Edit HTML | Compose).

Step5:- If you are good at html, you can also change some allignment and settings at Edit HTML tab.

Step6:- If you are happy with the post, go for "PUBLISH POST".

Read More Add Your Opinion 0 Opinions

1 Getting Started

As this will be the basic post about creation of a blog, I will keep it very basic and elaborative.

Step 1:- sign in at https://www.blogger.com/.

Use your existing google account or create a new account at create new account and use this new account to sign into blogger.

Step 2:- Chose your display name and accept Terms and conditions.

Step 3:- Chose blogname and check availability

of your blog.

Proceed further by clicking Continue.
It will ask you to select template. For the time being, I will ask you to select minima (1st template available), as almost all the example will be based on this template only. Once you are confortable in modifying template, you could chose any template and customize it.
Step 4:- Thats all. Blog is ready. Now, we will go to for the first posting.

Step 5:- If you are at Dashboard, select New/Edit Post for your blog.
Else, you are already at administrative section.

Step 6:- You will land to your blog administrative section. Chose Posting - New Post. Give a suitable title of your post and in the text editor, chose Compose. It will give you various HTML options.
For the time being, just create a test text posting. Click "PUBLISH POST".

Step 7:- Now your posting has been published and it can be viewed at the URL chosen by you at step 3.

Keep blogging. This article just gives you a rough idea about how to create a blog and publish a simple post.

Read More Add Your Opinion 0 Opinions