Add Email Subscription in your Blog

It is good to add an email subscription in your blog. Almost every popular bloggers' site has email subscription option and it is good for blogging. Your site may rich with a lot of good articles. User my like them. But within tons of site they may forget your site's url or not always like to visit your site regularly because you may not updated that regularly. So let them a choice. Put an email subscription option and let them subscribe. As a result whenever you post an article they will get it without visiting your site. It is also a way to get connected with your user.

Process of adding email subscription:

• Go to FeedBurner


• Sign Up


• Then go to again FeedBurner and Put your sites's URL and click next





• Click Next





• Click Active Feed





• Click Skip directly to feed management ( you may like to click next if you want to know about some other service)





• Click Publicize





• Click Email Subscriptions





• Click Activate




• Select Language As English and Use as a widget in Blogger (see image, please). Copy the code and save





• To add email subscription in your blog; Go to Dashboard >> Layout >> Page Elements >> Add a Gadget >> HTML/JavaScript


• Then Paste the Code and Save

Read more...

Add Scrolling (marquee) Text-make a different look

Simple Scrolling Text Code:

<marquee>code to simple scrolling text</marquee>

Example:

code to simple scrolling text


Change background color to the text:

<marquee bgcolor="#0000ff">code to simple scrolling text</marquee>

Example:

code to simple scrolling text


You Need More Color ! Here

350+ Color Code

You can change the direction of the scrolling text. The direction attributes are:

direction="left"


direction="right"


direction="up"


direction="down"

You can also change the scrolling style. The attribute is:

behavior="alternate"

behavior="scroll"

behavior="slide"

Write these code for direction and behavior:

<marquee behavior="alternate" direction="down" bgcolor="#0000ff">code to simple scrolling text</marquee>

Example of direction and behavior attribute:

code to simple scrolling text

Set the speed of the text. To do so, use this attribute:

scrollamount="2"

Example Code:

<marquee behavior="alternate" direction="left" bgcolor="#0000ff" scrollamount="2">code to simple scrolling text</marquee>

Example:

code to simple scrolling text

Another Example:

<marquee behavior="alternate" direction="left" bgcolor="#0000ff" scrollamount="8">code to simple scrolling text</marquee>

It will appear as:

code to simple scrolling text


Controll the text when mouse is over the text. The text will stop:

Example Code:

<marquee behavior="alternate" direction="left" bgcolor="#0000ff" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50"> code to simple scrolling text</marquee>

Example:

code to simple scrolling text


Changing the text colour:

<span style="#ffffff">
or

<font clor="#ffffff">

Write these code:

<span style="#ffffff"> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" bgcolor="#0000ff"> <br /> <br />code to simple scrolling text<br /> <br /> </marquee>

Example:



code to simple scrolling text




Make hyperlinks (open in the same window):

Example Code:

<marquee behavior="scroll" direction="left" bgcolor="#0000ff" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<a href="url#1">LINK#1</a>
<a href="url#2">LINK#2</a>
<a href="url#3">LINK#3</a> </marquee>

NOTE:Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target


Example code:

<marquee behavior="scroll" align="middle" direction="left" bgcolor="#0000ff" scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()">
<br /> <br />
<a href=" http://blogging-for-bloggers.blogspot.com">Blogging</a>
<a href=" http://shortmemory-shorttime.blogspot.com">short memory</a>
<a href=" http://makemoneyonliine.blogspot.com"> Make Money Online </a>
<br /> <br /> </marquee>

Example:






Blogging
short memory
Make Money Online





Open the links in new window,here is the code:

Example Code:

<marquee behavior="scroll" direction="left" bgcolor="#0000ff" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<a href="url#1" target="_blank">LINK#1</a>
<a href="url#2" target="_blank">LINK#2</a>
<a href="url#3" target="_blank">LINK#3</a> </marquee>

NOTE:Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target


Example code:

<marquee behavior="scroll" direction="left" bgcolor="#0000ff" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<a href=" http://blogging-for-bloggers.blogspot.com">Blogging</a>
<a href=" http://shortmemory-shorttime.blogspot.com">short memory</a>
<a href=" http://makemoneyonliine.blogspot.com"</a>
<br /> <br /> </marquee>

Example:



Blogging
short memory
Make Money Online

How to add scrolling text

• Go to your Dashboard > > Layout > > Page Elements > > Add a Gadget > > HTML/JavaScript


• Write your marquee code and save

It's all. Make a good look of your site. Happy Blogging.

Read more...

Change Your Blog Template

I think most of the bloggers of blogger platform are not satisfied with bloggers' template. Most of them are unprofessional and not good looking. So you can change your template. Here is the process.

• Download template from internet. Search with "free blogger template". You may like to add "3 column blogger free template" or "3 column professional free blogger template". Download the template and save it in your hard drive


• Go to your Dashboard or sign in



• Go to Layout > > Edit HTML



• Download your template




• Then Click Choose File and choose your downloaded template and then click Upload



• Then there you will see a message that you are going to delete all your widget. Click Confirm and Save to change your template

You have finished. Happy blogging.

Read more...

Add a Comment Box with Name, Email,URL and more

You may see it in many professional website or blog. A comment box with name, email, URL etc below the article. It is good for your user to make a user friendly good looking comment box. It will increase your traffic and good practice for SEO. (See SEO Tips). Here is the process through which you can make one.

Process Of Creating an Embeded Comment Box With Email, URL, Name field

• Go to creator.zoho


• Click Sign Up For Free





• Then in next page Click on Sign up again under Personal Free Edition








• Fill up the form and click Sign Up





• To activate your account you need to verify the link that is in your email account. Go to your email account and click the link to complete your account.


• Enter your password (that you used to sign up) and click Confirm





• Click Continue Signing In





• Then Sign In With your user name and password





• Then Click Zoho Creater from the list of services





• Create New Application





• Write "Specify Application Name:" and "Specify Form Name:" and click Create now





• We will use the Red selected items to create our comment box





• Drag Single Line in the box in right sight field and drop there. Then change the lebel name and write Name. Click Options to see more option. If you want it as a required field then Tick in the box. Otherwise left it and click Done.





• Then Drag and Drop Email and from the option Tick the Tick Box of "This is required field" and change the lebel name as Email and click Done





• Drag and Drop Multi line and change the lebel name as Comment and click done





• Then Click on More Actions and Form properties




• Change the success message, tick the verification code if you want and click Done





• Then Click Email Notification From the More Actions Dropdown Menu





• Enter your email account in To, Add a Subjects, Tick the Include user submitted data, Tick the Enabled radio button and click done.





• Click Access This Application





• Then Click Embed in Your Website from More Actions dropdown menu.





• From the header portion Click "Click here" to disable user login to Zoho and then copy the code





• You can paste this code in your website. If you want to paste in your blogger blog then go to Dashboard > > Layout > > Page elements > > Add Gadget > > HTML/JavaScript > > paste your code and Save. You can also paste it within your template.


• It Will look like:

If you like this article then subscribe with your email and get new article without visiting this site.

Read more...

Add Navigation Button In Your Blog-2

I have already Post an article on this topic. That was the simple process and a Link widget for navigation. But if you want a colorful navigation Button then follow this Article. It is a little difficult than 1st article but it is very easy. You can do it.

Follow this process:

• Go to your Dashboard > > Layout > > Edit HTML


• Find Out this word <b:skin> <![CDATA[/* and ]]> </b:skin> . Paste the codes within these. If it doesn't work then paste the codes just before body {


• Here is These code.
  
  
  
  
  <!--menu attributes-->
  /* Menu */
  
  #foxmenucontainer{
  height:35px;
  background:url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/menu.jpg) ;
  display:block;
  padding:0px 0 0px 14px;
  }
  #foxmenu{
  position:relative;
  display:block;
  height:25px;
  font-size:11px;
  font-weight:bold;
  font-family:Arial,Verdana,Helvitica,sans-serif;
  }
  #foxmenu ul{
  margin:0px;
  padding:10px 20px 0 0;
  list-style-type:none;
  width:auto;
  float:left;
  }
  #foxmenu ul li{
  display:block;
  float:left;
  margin:0 1px 0 0;
  width:105px;
  }
  #foxmenu ul li a{
  display:block;
  float:left;
  color:#dfdcd6;
  text-align: center;
  text-decoration:none;
  padding:6px 0px 0 0px;
  width: 105px;
  height: 19px;
  background:transparent url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/li2.gif) no-repeat top right;
  }
  #foxmenu ul li a:hover{
  color:#ffc35a;
  background:transparent url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/li2.gif) no-repeat top left;
  width: 105px; height: 19px;
  text-align: center;
  }
  #foxmenu ul li a.current,#foxmenu ul li a.current:hover{
  color:#ff9600;
  width: 105px; height: 19px;
  background:transparent url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/li2.gif) no-repeat top right;
  }
  
  .post a:link,
  .post a:visited {
  color: #ad4100;
  background-color: transparent;
  }
  
  .post a:hover {
  color: #fff;
  background-color: transparent;
  text-decoration: none;
  }
  
  
  <!--ends menu attributes-->
  


• You have added the attributes for menu in your template. You can change these attributes if you want to make a unique one. You van change the image, hover color etc.


• Then you need the Button Code. Copy and paste these code within your <body>......</body>.

  (NB: Please remember: You will see a lot of codes within body. You should paste the codes where you want to see your menu. You may want it in Head portion, Sidebar or Footer Portion. So paste your codes and preview it to make sure it is in right position)



• Button code. Copy and paste these.
  
  
  <!--button code-->
  <div id="foxmenucontainer">
  <div id="foxmenu">
  <ul>
  <li class="current"> <a href="http://your site url">HOME</a> </li>
  <li class="current"> <a href="http://your site url">FREE SOFTWARE</a> </li>
  <li class="current"> <a href="http://your site url">TUTORIAL</a> </li>
  <li class="current"> <a href="http://your site url">BLOGGING</a> </li>
  
  </ul>
  </div>
  </div>
  <!--end of button code-->
  


• Change your site url with your url


• And change HOME, FREE SOFTWARE, TUTORIAL, BLOGGING with your desired name. You can also add more button. To add more button copy <li class="current"> <a href="http://your site url">BLOGGING</a> </li> and paste before </ul>

Read more...

Add Signature to your Blogger Post

If you want to see your signature after each posts of your blog then follow the process:

• Create a signature, signature should be an image. You can make an image signature with GIMP


• upload it in a server. Here you can upload it ripway or photobucket
• Go to Dashboard > > Settings > > Formatting > > Post Template
• Write this code in Post Template box: <p> <image class="centered"alt="post signature" src="SIGNATURE URL" /> </p>
• Change "SIGNATURE URL" with your signature URL

Read more...

Add a Headline Animator

Why you will add a headline animator? If you are a blogger then you will find that after a time you have posted a lot of article. If you add a lebel from add a gadget then it show your article's lebel, Not the real head line. If your head line and lebel are same then you can all your posts in lebel gadget. If you you recent posts gadget then your user will sea a fixed number of posts or headline. But if you use a Headline Animator then your user can see all the Headline. It is animated and it looks good. I'm using a Headline Animator below my Template. You can also use TOC (Table Of Contents). Here your user will get all the contents headline within a Table. (I think TOC is better than Headline Animator).

Here is the Process of Adding Headline Animator:

• Go to FeedBurner and sign in


• Insert your blog url



• Clock publicize



• Click Headline Animator



• Cutomize your Headline animator and click activate



• Select Blogger blog from the dropdown menu and click next



• Here you will get a new window showing Add Headline Animator To blogger. Click Add To Blogger.



• Then a new window or tab will open. Click ADD WIDGET



• Go to your Dashboard or sign in



• Then go to page element



• You can see your Headline Animator here. If you want to see your headline animator in another place of your template then click Edit



• Copy the code and paste where you want it

You have finished. Enjoy with your Headline Animator.

Read more...

Add All Posts Widget or Table Of Content Widget

If you are a blogger and you are blogging for a long time then you will find that your site is carrying a lot of pages with a lot of title. The lebel gadget or recent posts are not displaying all the articles name. It will be better for your user if they can see your all posts. You can sort the TOC by Post Title by clicking the column header. Click it again, and it is sorted in reversed order. The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full TOC. I think it is good for SEO and it will increase your traffic because it will make your site user friendly.

Here is how to install it to your Blog.

• Back Up your Template.



• Add a HTML Page Element

Edit your template in HTML-mode, and look for the <b:section> with id=main. This is the section that holds the Blog posts.


Change that line as follows:



<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>



Save the template and switch to the Page Elements Tab.



• Go to Layout < < Add a gadget and then Add a HTML page element above your Blog Posts element.
  Leave the title blank. Add the following html:





<div id="toc"></div>




• Save your template.



• Add a Sidebar HTML-element

Now add a HTML-element to the sidebar. Set the title to "TOC".
For the contents, enter:


<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div><script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>


Replace YOURBLOG with the name of Your Site's URL...... exactly.
Oh yes, and save.


• Add custom styles to the skin of your template.

New id's and classes are:
#toc : the div-wrapper that contains the TOC
.toc-header-col1 : header of column 1
.toc-header-col2 : header of column 2
.toc-header-col3 : header of column 3
.toc-entry-col1 : cell in column 1
.toc-entry-col2 : cell in column 2
.toc-entry-col3 : cell in column 3


• For your convenience: Beautiful Beta uses the following styling:



<style type="text/css">#toc { border: 0px solid #000000; background: #ffffff; padding: 5px; width:500px; margin-top:10px;}.toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #ffd595; color: #000000; padding-left: 5px; width:250px;}.toc-header-col2 { width:75px;}.toc-header-col3 { width:125px;}.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:80%; text-decoration:none;}.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:80%; text-decoration:underline;}.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:70%;}</style>

You can add this code to the <b:skin>-part of the template, or insert it in the sidebar widget.

Read more...