New Blog Online

Home » All posts

adding text links(hyperlinks) and image links to your blog

This post explains how to add hyperlinks to text,how to make hyperlinks open in new window.

If you don't know what hyperlinks means?Hyperlink means a link which when clicked go to another section of document or webpage,etc.
Here are a few examples:
Put youtube videos in your blog
Disable navbar in blogger blog

As you can observe the above links,when clicked go to another page.
So,how to add the hyperlink,
Adding hyperlink(open in the same window):

Here is the sample code to do it

Example: put inplace of
TEXT HERE - Google
target - google.com

So,the html code looks like

and the output will be Google

How to add hyperlink(open in new window):
Anyone don't want their visitors to go away from their site.So,placing links which open in new window is very useful and very good thing to do.
So,here is the code

the output will looks like Google (If you click on the link,it will open in the new window)

As you can observe,we added the attribute "target......blank" to make this happen.
Not in this case, add that attribute to any link(image or text) to make them open in new window.
If you want to know how to add hyperlinks(html codes) to IMAGES, please refer this.
How to add hyperlinks to images

scrolling text-marquee-html codes for bloggers

This post explains you how to add Scrolling text(also called as marquee)to your blog sidebars,blog posts,etc.
Another way to attract the visitors is adding some decoration to the site like scrolling text,etc.But,don't decorate it too much,particularly if your site contains too much text as it irritates and spoils the concentration of the reader.You can add scroll bars to tell your visitors what will be your next updates,popular posts,advertisements,etc.

So,how to add the scrolling text in your blog,let me explain it:

Adding simple scrolling text:
Here is the code to add a simple scrolling text from right to left side

The output will be like:
Example 1:

code to simple scrolling text

If you want some more attraction,then try these,

Add a background color to the text,

Example 2:

code to simple scrolling text

You can choose your background colour by replacing the hexadecimal code(#99ccff).
Click here to see the codes of the different colors.

Here are some mode attributes to learn:

direction="left"

direction="right"

direction="up"

direction="down"

The above attributes tells the text which direction to scroll.
Use the code below:

Here is are some examples:
To scroll in the 'right' direction:
Example 3:

code to simple scrolling text

Example 4:
To scroll in the 'up' direction:

code to simple scrolling text

Example 5:
Downwards:(I changed the hexa decimal codes for different colours)

code to simple scrolling text

few more attributes:
You can add this attribute to alternate the text

Here is the code to do this:

Example 6:

code to simple scrolling text

You can also set the speed of the text with this simple attribute:

The lower the scrollamount value, the less the speed it moves,
the html code for this:

example 7:(for scrollamout =2)

code to simple scrolling text

Example 8:(for scrollamount=5)

code to simple scrolling text

Pausing the text when mouse is over the text:
It is very useful when the reader wants to read the text,and the scrollamount is big,sothat he will put the mouse over the text to pause the text and read the matter:
Here is the code to do this

Example 9:

code to simple scrolling text

(place the mouse over the text to test it)
Changing the text colour:
Here is the code to change the text colour:(Add it before the marquee tag)

So, the code looks like this

Example 10:

code to simple scrolling text

Here is the important one and most useful one, adding hyperlinks in the scrolling text.
Hyperlink means a link when clicked go to another location(site).
Let's see how to add hyperlinks to the scrolling text:

Adding hyperlinks(open in the same window):
Here is the sample code:

NOTE:Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target url addresses.
Here is an example:

The output will look like this

Flash animations in your blog Youtube videos Hexadecimal codes

If you want to open the links in new window,here is the code:

That's it!Now you can add this to your blogger sidebar,in the blog post,where ever you want.

If you want to put this in sidebar,then sign in to your blogger account>click the add a page element> and paste the code in html/javascript and save the changes .This is shown in the below pictures.

Next,

If you have any doubts, ask your questions via your comments.

Hexa decimal color chart for bloggers

If your blog is looking poor,dull and lacking attracting the visitors,then you will have to spice it up a little bit by changing the colors of sidebars,header,blog posts, trying different combinations and see which color combination best fits your blog.

You can change the color of the blog background,sidebar,etc...by going to(see the below image).

But blogger provides limitied color codes.So,if you want another color that is not in that blogger list,then simply copy the code from the colour chart as show below.

COLOR CHART

HTML CODE	COLOR
#000000
#150517
#250517
#2B1B17
#302217
#302226
#342826
#34282C
#382D2C
#3b3131
#3E3535
#413839
#41383C
#463E3F
#4A4344
#4C4646
#4E4848
#504A4B
#544E4F
#565051
#595454
#5C5858
#5F5A59
#625D5D
#646060
#666362
#696565
#6D6968
#6E6A6B
#726E6D
#747170
#736F6E
#616D7E
#657383
#646D7E
#6D7B8D
#4C787E
#4C7D7E
#806D7E
#5E5A80
#4E387E
#151B54
#2B3856
#25383C
#463E41
#151B8D
#15317E
#342D7E
#2B60DE
#306EFF
#2B65EC
#2554C7
#3BB9FF
#38ACEC
#357EC7
#3090C7
#25587E
#1589FF
#157DEC
#1569C7
#153E7E
#2B547E
#4863A0
#6960EC
#8D38C9
#7A5DC7
#8467D7
#9172EC
#9E7BFF
#728FCE
#488AC7
#56A5EC
#5CB3FF
#659EC7
#41627E
#737CA1
#98AFC7
#F6358A
#E4317F
#F52887
#E4287C
#C12267
#7D053F
#CA226B
#C12869
#800517
#7D0541
#7D0552
#810541
#C12283
#E3319D
#F535AA
#FF00FF
#F433FF
#E238EC
#C031C7
#B048B5
#D462FF
#C45AEC
#A74AC7
#6A287E
#8E35EF
#893BFF
#7F38EC
#6C2DC7
#461B7E
#571B7E
#7D1B7E
#842DCE
#8B31C7
#A23BEC
#B041FF
#7E587E
#D16587
#F778A1
#E56E94
#C25A7C
#7E354D
#B93B8F
#F9B7FF
#E6A9EC
#C38EC7
#D2B9D3
#C6AEC7
#EBDDE2
#C8BBBE
#E9CFEC
#FCDFFF
#E3E4FA
#FDEEF4
#C6DEFF
#ADDFFF
#BDEDFF
#E0FFFF
#C2DFFF
#B4CFEC
#B7CEEC
#52F3FF
#00FFFF
#57FEFF
#50EBEC
#4EE2EC
#48CCCD
#43C6DB
#9AFEFF
#8EEBEC
#78C7C7
#46C7C7
#43BFC7
#77BFC7
#92C7C7
#AFDCEC
#3B9C9C
#307D7E
#3EA99F
#82CAFA
#A0CFEC
#87AFC7
#82CAFF
#B0E2FF
#566D7E
#6698FF
#736AFF
#CFECEC
#AFC7C7
#717D7D
#95B9C7
#5E767E
#5E7D7E
#617C58
#348781
#306754
#4E8975
#254117
#387C44
#4E9258
#347235
#347C2C
#667C26
#437C17
#347C17
#348017
#4AA02C
#41A317
#4AA02C
#8BB381
#99C68E
#4CC417
#6CC417
#52D017
#4CC552
#54C571
#57E964
#5EFB6E
#64E986
#6AFB92
#B5EAAA
#C3FDB8
#00FF00
#87F717
#5FFB17
#59E817
#7FE817
#8AFB17
#B1FB17
#CCFB5D
#BCE954
#A0C544
#FFFF00
#FFFC17
#FFF380
#EDE275
#EDDA74
#EAC117
#FDD017
#FBB917
#E9AB17
#D4A017
#C7A317
#C68E17
#AF7817
#ADA96E
#C9BE62
#827839
#FBB117
#E8A317
#C58917
#F87431
#E66C2C
#F88017
#F87217
#E56717
#C35617
#C35817
#8A4117
#7E3517
#7E2217
#7E3117
#7E3817
#7F5217
#806517
#805817
#7F462C
#C85A17
#C34A2C
#E55B3C
#F76541
#E18B6B
#F88158
#E67451
#C36241
#C47451
#E78A61
#F9966B
#EE9A4D
#F660AB
#F665AB
#E45E9D
#C25283
#7D2252
#E77471
#F75D59
#E55451
#C24641
#FF0000
#F62217
#E41B17
#F62817
#E42217
#C11B17
#FAAFBE
#FBBBB9
#E8ADAA
#E7A1B0
#FAAFBA
#F9A7B0
#E799A3
#C48793
#C5908E
#B38481
#C48189
#7F5A58
#7F4E52
#7F525D
#817679
#817339
#827B60
#C9C299
#C8B560
#ECD672
#ECD872
#FFE87C
#ECE5B6
#FFF8C6
#FAF8CC

adding clickable pictures on blogger sidebars,blog posts,etc.

This post shows you how to add pictures,clickable images,images(open in new window),etc.
If your site is full of text,then it will spoil the look of your blog.So,if you add some pictures here and there in the sidebars in your blog,then it will give your blog a professional look.
Let's see how to do it.
Adding a picture(unclickable one):
First upload your photo to any free image hosting site like photobucket.com.They will provide an url(link) directly to the photo.Take a note of the url and use the code below replacing the url( from http to jpg) in the code to your original one.(Set your own dimensions to suite your needs)

The image looks like this(unclickable)

john cena

Code to add a clickable image:
Here is the code to add a clickable image(open in the same window)

In the above code,kranthitips.blogspot.com is the target url(replace that url with your desired target url) and
the image url aswell(set your own image dimensions).
The output image will looks like this

Clickable image(open in new window):
Here is the code for it

The output image looks like

(click on the images if you want to test)

If you want to add the pictures in sidebar,sign into your blogger account>add a page element>html/javascript>paste the code and save the changes.

If you have any doubts,you can ask your questions via comments and get the answers.

How to add background image to blogger header

So, you want to add an image or a picture to your blogger header to give a unique look to your blog.Adding image to header is not a complex one,it is very simple.

Before this,first take a backup of your blog template,so there is a chance to get back to your current template if you made any mistakes.

1.First sign in to your blogger account>Edit html

and scroll down the template till you see the below one and note down the width(sothat, you will have an idea of which image dimensions best fits your blog)

In the above case, my template is minima and the width is 660 px.

2.If you have photoshop or any other tools,crop the picture corretly to 660 px(width).If you don't have photoshop,then you can crop a photo by this free online tool Click here.

3.So, your image is ready now! click the page elements tab again.

Click on the edit button as shown below next to your blog name.

4.And you will go to a window just like the below one.First select,the option whether you want to place the image behind the title and description or insted of title and description.Next,browse for the image and save the changes after the image has uploaded.

5.That's it! Now, your blog has a background image in the header.
Have any questions?ask your question via comments.

how to submit blogger sitemap to google-useful tip for new bloggers

This tip explains how to generate and submit blogger sitemap to google webmaster tools:
Before doing this,let me say what are sitemaps and how they will help us.The reason we use them is,they will help google bot to crawl,index pages of your site and tell you if there are any problems when they try to index it.It also helps you to know,how many pages exactly are indexed,and what people searched in the search engine to visit your site.
Let me explain the detailed procedure on how to submit your blogger sitemap to google.
1.First,go to google webmaster tools and sign in with your gmail account.
2.After you logged in, you will see this asking you to add a site.

Add your blog url(ex:kranthitips.blogspot.com).Don't add with http or www.

3.Next,it asks you to verify your site.It is just to confirm whether you are the owner or not.

CLICK on the 'verify your site' link.

Next,

4.There are two ways to verify your ownership but, there is only one way for the blogger users to add a metatag.

5.Copy the metatag.

Now,sign into your blogger account>click the layout button>Edit html and paste the metatag just after the head tag and save the changes.

and click the verify button in the google webmaster tools and there will be a confirmation message saying that you have sucessfully verified.

Now,you have to submit a sitemap for google to crawl your site.Go back to the google webmaster dashboard or (home) and click the 'Add' link which is next to your blog name and in the Sitemaps column.Then,you see this,

Choose 'Add general web sitemap' from the dropdown menu and type rss.xml or atom.xml next to your blog address as shown below

and click the 'Add General Web Sitemap' button.

6.That's it.Now your sitemap is successfully submitted to google.Check 2 or 3 days after and you will see the detailed statistics of your blog(indexed pages,any errors,etc.)

If you have any questions regarding this,you can ask here via your comments

Embed flash(flv,swf) files in blogger-useful tip for new bloggers

This tip explains you how to embed a flash(FLV or SWF videos) movie in your blogger(blogspot) blog or any other blogs.
Generally, most people prefer the simple code provided by the youtube to embed their videos.
(If you didn't know how to embed/insert a youtube video on your blogger blog,please read this
How to embed a youtube video in your blog).But,it is not unique content which will be availabel only on your blog.So,if you want to add original(raw) stuff like some interactive flash animations to your blog to attract the attention of your visitors,you will have to know this tip.First,create your flash videos,movies,etc and upload to your server.
There are many sources which will allow you to upload your flash files,but most of them are not free.However, you can upload your flash files on Google pages for FREE.
Simply follow the steps as shown in the below pictures.
1.Click on the upload link which is at the right side after you logged into 'google pages'

click on the upload link

Next,

browse

I will show you an example.I have uploaded a file named 'flash.swf',after uploading click on the link as shown in the figure

click on the link

Next,save the url

save the url

2.The url in this case is

http://templates.bloggertricks.com/flash.swf

note that url and paste it in the below code and use it whereever you want,in your blog post,in the sidebar,etc.

NOTE:Replace the url in the code to your original url & also set your own dimensions to suite your blog.In this case,I prefer width:120 px and height:120 px

3.Finally,the flash file will appear like this

If you have any doubt,don't hesitate to ask.You can ask your questions via YOUR COMMENTS