WEB DESIGN

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 http://www.feedburner.com/


• 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

Site search option is friendly for the users. They Can easily find out their topics through searching the site. The process of adding site search is:

1. Go to Dashboard


2. Then Layout >> Page Elements And then Add a Gadget


3. Click HTML/JavaScript


4. Copy and Paste the codes:
   
   <form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>


5. Save it

Simple Scrolling Text Code:

How to add scrolling text

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


• Write your marquee code and save

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.

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>

Why someone is looking for disable right click? If you write a basic article and if you want to protect it from copying, then you may also try to disable right click. Through disable right click, you may save your content from copying.

Here is my personal view. Please read this part. Your article is helpful for your user. Most of the internet user copy article for personal use, not for publishing your article in their page. So think again before you do it. Your most of the user may suffer for it.

Process of Disable Right Click:

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


• Copy the following Codes and Paste it.
  
  
  <script language='JavaScript'>
  <!--
  
  //Disable right mouse click Script
  //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
  //For full source code, visit http://www.dynamicdrive.com
  
  var message="No Right-Click!";
  
  ///////////////////////////////////
  function clickIE4(){
  if (event.button==2){
  alert(message);
  return false;
  }
  }
  
  function clickNS4(e){
  if (document.layers||document.getElementById&&!document.all){
  if (e.which==2||e.which==3){
  alert(message);
  return false;
  }
  }
  }
  
  if (document.layers){
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown=clickNS4;
  }
  else if (document.all&&!document.getElementById){
  document.onmousedown=clickIE4;
  }
  
  document.oncontextmenu=new Function("alert(message);return false")
  
  // -->
  </script>


• Then save

Create Recent Posts Widget. It will help your reader. They will able to know the recent posts. Follow the process to Get the Recent Posts widget.

• Sign in your site ant go to layout>>Page Elements>>Add a Gadget.


• Select HTML/Javascript


• Copy and paste these codes:
  
  
  
  

  <script style="text/javascript" src="http://scraptoall.googlepages.com/recentposts.js"></script><script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://shortmemory-shorttime.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

  
  
• Change the url ("http://shortmemory-shorttime.blogspot.com/) and write your site's URL


• Save the gadget.

Why You Need Button?

Button Code

Process Of Adding Button

Button Code

Style code used for Button:

Button link codes:

Process of Adding Style code used for Button



• Go to your Dashboard
  Go to Layout and then Edit HTML




• Find <b:skin> and </b:skin> tags in your template. You will find it in your Templates Style section or just use Ctrl+F to find out it.



<b:skin>




</b:skin>




• Then copy and paste these codes within these <b:skin> and </b:skin> (1) tags and save template (2):

  
  

  
  
  a.navigation {
  background: #000000;
  color: #ffffff;
  margin: 1px;
  padding: 5px 35px 5px 5px;
  border-width: 0;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  }
  a.navigation:hover {
  background: #5d5d54;
  text-decoration: none;
  }
  
  
  
  

You will see that there are two statements in this styling: the first statement defines (a.navigation) what the buttons will look
like as they appear in your blog and the second (a.navigation:hover) statement defines the background color of
the button when you place your cursor over the button (the "mouseover" effect).
If you you want to change button style then you can change the color code of the backgrounds to colors which you
prefer for your blog. You can easily find and see 350+ color codes from here.

Process of Adding Button link codes:




Create your links in an HTML/Javascript widget



• After saving your template Go to Page Elements >Add a Gadget






• Select HTML/JavaScript




• Copy and paste these code (1) and then click save (2):

  
  

  
  <a class="navigation" href="http://your-link-url.blogspot.com">HOME</a>
  <a class="navigation" href="http://your-link-url.blogspot.com">PICTURE</a>
  <a class="navigation" href="http://your-link-url.blogspot.com">ABOUT ME</a>
  
  

Make sure to replace "http://your-link-url.blogspot.com"
with the URL of the post page (or link) and replace the link text (eg: HOME) with the text you would like to display.

It will look like: