Create Scrolling Text (Marquee)

The animate text or scrolling text display is very easy to setup. You may add in the HTML in the posting or add in new gadget. Just follow and understand few steps below;

<MARQUEE>

Hi There! Welcome to Blogguideshare.blogspot.com

</MARQUEE>

Hi There! Welcome to Blogguideshare.blogspot.com

If want to reduce the inline space, you may add command width and change to your size.

<marquee width="50%">

Hi There! Welcome to Blogguideshare.blogspot.com

</marquee>

Result as below;


Hi There! Welcome to Blogguideshare.blogspot.com

Or change the Text direction

<MARQUEE DIRECTION="RIGHT">

Hi There! Welcome to Blogguideshare.blogspot.com

</MARQUEE>

Or change the inline space size

<MARQUEE DIRECTION="RIGHT" WIDTH="70%">

Hi There! Welcome to Blogguideshare.blogspot.com

</MARQUEE>

Hi There! Welcome to Blogguideshare.blogspot.com

Or with text background color

<marquee bgcolor="RED" direction="LEFT" width="70%">

Hi There! Welcome to xxxxxx.blogspot.com. Get 30% off thru online order

</marquee>

Hi There! Welcome to xxxxxxx.blogspot.com. Get 30% off thru online order

Move to center location by adding <center>

<center><marquee bgcolor="RED" direction="LEFT" width="100%">

Hi There! Welcome to xxxxxxx.blogspot.com. Get 30% off thru online order

</marquee<center>

And also, see the width % take effect.


Hi There! Welcome to xxxxxxx.blogspot.com. Get 30% off thru online order

Customize Title Header Placement

Did you know that the placement of the title header can be change either center or right hand position? In blogspot the default setting is on the left hand side.
By adding CSS code you will change the tittle header placement left, right or center within less than 1 minutes. Don't believe me. Let try.
Below are the steps;

Step 1

• Go to the design
• Then Template designer

Step 2

• On the template designer, select advanced
• On the sub tittle, select Add CSS
• Add below code into the CSS

.Header { 

text-align: right; 

}

Note: If want to change to center position, just change word right above to center 

How to make first letter big

When writing blog, we can't deny that every one like to do some decoration either adding gadjet or style to make it look better.

Sometime we can see that is interesting to have the first letter is bigger in each post or really bigger than text size.

How to make the first letter big? Here I'll share the method.
On the below are the screen capture from http://ilafashionhouse.blogspot.com . Watch out the capital B.

Big First Letter

Step 1.

• Go to the page element => Design => Edit HTML
• Find  /* Posts (By pressing F3 or CTRL+F and paste /* Posts will help you)
• Copy and insert below code

.dropcaps {

float:left;

color: black;/*#FFFFFF;*/

font-size:45px;

font-family: "Arial";/*Georgia, "Times New Roman", serif; */

font-weight: bold;

line-height:30px;

padding-top:0px;

padding-right:5px; }

What is it mean?

.dropcaps { 

float:left; color: dark blue;/*Color of your choice*/ 

font-size:60px;/*change this of you want to to span across more lines*/ 

font-family: "times bold italic";/*Font of your choice*/ 

font-weight: bold; line-height:30px;/*how thick you would like alphabet to be*/ 

padding-top:0px; padding-right:6px; }

 Step 2.

• On your panel, go to Edit HTML (beside the Compose tab)
• Insert below code at the first letter of your post. 

<span class="dropcaps">B</span>

•  For example your first sentence is "Blogspot is free". So the code is 

<span class="dropcaps">B</span>logspot is free.

• All post you want to have a big size for the first letter need to add this code.

Lets try.... if you have found another method, please leave comment.

Regards

Another way to create table

From post how to insert table, had shown how to insert table in the post. By using the same example, here is the blog tips how to inset table in another way.

<table border=2>

<tr> <th>No</td><td></td><th>Item</td><td></td><th>Price</td> </tr>

<tr> <td>1.</td><td></td><td>Blouse</td><td></td><td>RM30.00</td> </tr>

<tr> <td>2.</td><td></td><td>Pijamas</td><td></td><td>RM8.90</td> </tr>

<tr> <td>3.</td><td></td><td>Scarf Lina</td><td></td><td>RM9.90</td></tr>

<tr> <td>4.</td><td></td><td>Skirt</td><td></td><td>RM6.90</td> </tr>

</table>

Table result as below;

No		Item		Price
1.		Blouse		RM30.00
2.		Pijamas		RM8.90
3.		Scarf Lina		RM9.90
4.		Skirt		RM6.90

By sorting table header <th> as below, row eg to display the total sale in month XXX

<TABLE BORDER=2>

<TR> <TD>&nbsp;</TD>

     <TH>Week 1</TH>

     <TH>Week 2</TH>

     <TH>Week 3</TH>

     <TH>Week 4</TH>

     </TR>

<TR> <TH>Blouse</TH>

     <TD>$1070</TD>

     <TD>$1500</TD>

     <TD>$1700</TD>

     <TD>$500</TD>

<TR> <TH>Pyjamas</TH>

     <TD>$1270</TD>

     <TD>$1000</TD>

     <TD>$1400</TD>

     <TD>$1500</TD>

<TR> <TH>Scarf Lina</TH>

     <TD>$900</TD>

     <TD>$500</TD>

     <TD>$1400</TD>

     <TD>$1900</TD>

<TR> <TH>Skirt</TH>

     <TD>$1200</TD>

     <TD>$1600</TD>

     <TD>$1300</TD>

     <TD>$1570</TD>

</TABLE>

The table from above HTML will seen as below;

	Week 1	Week 2	Week 3	Week 4
Blouse	$1070	$1500	$1700	$500
Pyjamas	$1270	$1000	$1400	$1500
Scarf Lina	$900	$500	$1400	$1900
Skirt	$1200	$1600	$1300	$1570

Hope this will help you in order how to create table in blogspot.

Note: To move the table in center location, please add before the above code <center> and </center> at the end.

How to create more than 1 person as an admin

Blog tips how you can manage your blog account. You can create more than one admin. Follow from post How to give friend access to write in your blog, click on the "grant admin privileges".

Now both are become admin. This feature is useful especially for setting up a blog in group.

How give friend access to write in your blog

If you plan to share with your friend or to give an access to someone to write in your blog but don't know how. Here is the blog tips and below is the steps how to create blog with many authors.

On the page element, go to settings, then Permissions.

Under the permission, click ADD AUTHORS

Fill up the email address inside the box and click INVITE.

The person will notify via email and wait until he/she to response.
Once he/she response, you as the blog owner will remain as admin and he/she whose you had invited will be an author.

If you want them to be as 2nd admin, follow here to get the blog tips.


Cheers

Create a different background in each post

Do you know that you can create a different background in each post? How to setting up a blog with a different background in each post? Here they are. I only choose this post using a different background, to make it as an example.
By following below steps you can do it easily.


1. Change setting on the Posting Formatting

• On the blogger dashboard, go to page element, click on Setting
• Go to Formatting (sub tab of Setting)
• Go to line item Post Template and will find a text box (default is empty)
• Paste below code 

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

</div>

• Once done ==> save
• IMAGE_LINK_URL mean is the source of the image
• Be remember that the image must stored in web hosting. Use free one such as Google Docs or Photobucket 
• In this post I did used SHARE ICON which already availiable in istockphoto.

2. Do posting

• Write your post as usual
• Do not forget to change the IMAGE_LINK_URL above to your image URL by do editing in Edit HTML (tab beside Compose in posting page)
• Do not remove the bracket before and after IMAGE_LINK_URL
• Example; "background:url(http://www.xxxxxx/xxxx/xxxx) no-repeat;"
• If you want to repeat the background image more than 1 time, change the

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

         to

<div style="background:url(IMAGE_LINK_URL) repeat-y;">

• Click preview to see yours blogs posts

Now the background image is appear but it not center in location. To make it center, add below (in blue).

<div style="background:url(IMAGE_LINK_URL) center repeat-y;">

Cheer friends .. hope this blog tips will help you how to make blog.

Rotate the avatar image in comments post

You can set up your own blog with the avatar image in the comment section rotate not in straight stand. Below shown as an example;

How to do it?

• Go to page element
• Edit HTML and find below

.avatar-image-container img {

-webkit-transform: rotate(355deg);

-moz-transform: rotate(355deg);

}

• If having problem to find it, just press F3 or CTR-F and paste  .avatar-image-container img
• Change the angle (355deg) to your desire angle.

If it is not in the HTML script, copy above and paste just before 

]]></b:skin>

 Like below

.avatar-image-container img {

-webkit-transform: rotate(355deg);

-moz-transform: rotate(355deg);

}

]]></b:skin> 

Once complete, save and preview.
Now you can create a blog site with a fancy look comment.

Change word Read More

The default text setting is "Read More" and you may change as you wish. Below are the guide how to change the Read More word to other.

• On the page element click edit on the Blog Post. See below;

Blog Post

• Then change word Read More as shown in below

Happy blogging ..

New window open - click on link

How to avoid visitor left your blogs sites when the link clicked. Link is useful for some purpose but losing reader when they click on the link then left your blogs sites is not worth.
Here is some blog tips how to open new window or new tab when the link is click without closing your blog sites. By altering the HTML in your blog as shown below, this will help.

Look here where the word "Google" below has this code added and the "Google Icon" is without a code.

On the blog posting page, go to the "Edit HMTL" (the tab is just beside "Compose").  By taking an example HTML code from my post. (Click to refer)

1) Without open a new window

<a href="http://www.google.com" >

2) Open new window without closing your blog sites

<a href="http://www.google.com" target="_blank" >

So adding  target="_blank" it should work.

This is very useful blog tips as we need to do link in our blog sites but at the same time we don't want to loose visitor.

Insert Link in your posting

"Link" is useful for us to enable bring readers to another page. How to insert the link command. Current blogspot feature is no more required to the blogger to understand the HTML code.

Let share how to insert link, there is two way which normally people did;

1. Insert link on text;
Link on text mean to add a link in background for selected word or sentence. Eg; I proud used Google .By clicking the word "Google", will bring you to the Google's page.

2. Insert link on image;
Add link in background in image. On the Google image below has a link as above and will result the same as above when click on it.

How to do it ...

Move your cursor and highlight on the text, sentence or image you wish to do a link. On the posting toolbar, select icon  and new pop up window appear.
Enter the link address and press "OK"

Hope this will help you.