WEB DESIGN

How to make Hyperlink in Joomla

2010-03-02T22:54:00.002+06:00

Hyperlink is very important for Web Design. Actually website is a group of linked web pages. It is necessary to link the pages. In joomla, php language is used. So code of Hyperlink is different from HTML. in HTML language the code is:

<a href=" your web url as http://www.makemoneyonline-startnow.blogspot.com" >Make Money Online </a>

But in Joomla you have to use the following code.

"index.php?option=com_content&view=article&id=49"

For each article in Joomla, there is an article id. So you can change your id no.

How to change "Example of Category Blog layout (FAQs/General category)" from joomla

2010-03-02T22:12:00.002+06:00

While working with joomla, I tried to change this "Example of Category Blog layout (FAQs/General category)" sentence from the page title. Finally I did it. You will also find other "page title" for different types of Menue like "News Feeds", "About Joomla", "FAQS" etc. If you want to change it then you can do it in the same way that I did. To do it, please follow the rule:

I want to change this sentence: Example of Category Blog layout (FAQs/General category)

To do it go to : Control Panel >> Menus >> Example Pages >> News Letter (Menu Name like : Section Blog) >> Parameters (System) >> Page Title
Change the "Page Title" and write what you want to show in your web page title.

Here is the snapshots of the procedure:

If you face any problem with Joomla, I'm happy to know from you. Leave a comment.

Add a FeedCount in your blog

2009-08-29T01:13:00.002+07:00

Do you want to add a FeedCount in your blog?. It is amazing. I have made it. You can also. To add a FeedCount follow the steps.

Go to www.feedburner.google.com

Click Publicize

Select "Chicklet style" and color

Then click "Activate"

Find out "Use as a widget in" and select "Blogger" from the drop down menu.

Then copy the HTML code for the counter and Click Save

Then go to your blogger Dashboard

Click Add a Gadget and Then select "HTML/JavaScript"

Paste the HTML code and Save

You have finished

Add an Headline Animator in Your Blog

2009-08-01T00:54:00.012+07:00

Headline Animator is good to look and a blogger always try make the site good to look. Headline Animator shows about 5-6 headlines and if any user click on a Headline then he is able to see the page. To add a Headline Animator, follow the instruction

Go to http://feedburner.google.com (It was www.feedburner.com)

Copy your website/ Blogsite url and paste in "Burn a feed right this instant. Type your blog or feed address here:"

Select "Next"

A new page will appear. Just select "Next"

A new page will open. Just select"Next"

Then select "Skip directly to feed management"

Select "Publicize"

Select "Headline Animator"

You may edit your Headline Animator. After Editing select "Activate"

Then select "Save"

Then choose "Blogger blog" and "Next"

A new window will open. Select "Add to Blogger"

Then a new window will open. Select "ADD WIDGET"

You have finished. You may change the placement of your Headline Animator from your Layout

Add an Email Subscription in your Blog

2009-07-28T01:13:00.011+07:00

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/

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

Add a Chat Box in Your Blogsite

2009-07-28T01:02:00.002+07:00

Chat box is suitable for blogging site. It let the users to share their feelings and user can make funs. Sometimes they left some important informations about the site. So, blogger should add a chat box for the user. To add a chat box:

Go to :http://www.cbox.ws/

Then after completing youe sign up process, Log in the site with your Name and Password

Then Create your chat box. You may give a name your chatbox, change the lookings of the chatbox from "Publish! Look & Feel Options Users & Access Messages" options from the header part of the site. Make it suitable for your site and publish it.

Then Copy the Code

Go to your blog Dashboard or Sign in

Then Go to Layout > > Page Elements > > Add a Gadget > > HTML/JavaScript

Paste your ChatBox Code

Save

You Have Finished

JavaScript-program 2

2009-06-12T00:21:00.001+06:00

JavaScript is not work in all browsers. These browsers do not show
all the elements or writings within the <Script>.......</Script>
. So to make JavaScript usefull for all browsers, we have to use non script tag.
The non script tag is  .
Actually it is comment code that hide the JavaScript from the browsers
those do not support JavaScript. Browsers that support the JavaScript language just ignore the Comment.
You can only use 

Here is the Total code:

<html>

<head>

<title>JavaScript</title>

</head>

<body>

<Script Language="JavaScript">



</Script>

</body>

</html>

JavaScript-program 1

2009-06-12T00:17:00.000+06:00

How to use JavaScript?

In the introductory post of JavaScript language, I write about
how to write the JavaScript language. Here is an elaborated part
of that post.

<html>

<head>

<title>JavaScript</title>

</head>

<body>

<Script Language="JavaScript">

document.write("Welcome to Java World")

</Script>

</body>

</html>

Explanation

<Script Language="JavaScript"> is used for creating JavaScript
environment. Actually it is the start of JavaScript lanuage

document.write("Welcome to Java World")
document.write is used for writing anything with JavaScript.
The syntax isdocument.write("......."). Write anything within the brackets.

There is another syntax that is used to write in JavaScript. This is

document.writeln("......."). (writeln is for write line)

</Script> is used to close the JavaScript

JavaScript

2009-06-12T00:13:00.001+06:00

JavaScript is developed from Java and it is more simpler than Java language.
We can use JavaScript to design webpage. JavaScript is used within HTML language.
To write JavaScript follow the following steps:

Open NotePad or WordPad

Write

<html>

<head>

<title>JavaScript</title>

</head>

<body>

<Script Language="JavaScript">

document.write("Welcome to Java World")
</Script>

</body>
</html>

Then Save it as JavaScript.html. Remember you have to save the program with .html extension

Animated Flash Tag Cloud For Blogger

2009-06-11T00:29:00.002+06:00

Flash Tag Cloud is a cool widget. It changes the look of your Blog. It is generally known as "Blogumus"and "Blogumus" is an Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. There are several Difficult methods, you will find, to add it in blog. Here is how I add this in my blog.
To add Blogumus or flash Tag Cloud, follow this steps.

Go to your Dashboard >>Layout >> Edit HTML

Check Expand Widget Templates From the right corner of HTML code textarea

Find out<b:section class='sidebar' id='sidebar' preferred='yes'>

Important notes:
The above code you may not find in your template code as I did not find out the exact code. Actually it is the code of column of your template. You have to find out where you want to see your Tag Cloud. If you want to see your Tag Cloud in the right column in your blog template then you have to find out the code of Right column. Column code code is not same for all template because each template designer named his template's column differently. The common Code is <div class='sidebar' id='sidebar-left'><b:section class='side' id='sidebar1' preferred='yes'> It is my template code. So please find out something like: <b:section class='...' id='.....' preferred='...'>.

Just after the code copy and paste the following code:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Preview your Template and then Save Template

If you want to change the Height and Width then change this parameter:

Width is set to 240px

Height is set to 300px;

Background color is white

Test color is Grey

Font size is "12"

Again:

If you face any trouble, Then I'm interested to hear you friends.

You will not see the Tag Cloud if you have not installed the Flash Player. You can see the Tag Cloud in the Top Right Corner of my blog.

Add a "Site Search" option in your Blog

2009-06-08T01:37:00.003+06:00

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:

Go to Dashboard

Then Layout >> Page Elements And then Add a Gadget

Click HTML/JavaScript

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>

Save it

You Have Finished

How to add Reaction widget in your blog?

2009-06-06T03:17:00.005+06:00

To add a reaction widget follow these steps:

Go to Layout

Then Edit HTML

Check Expand Widget Templates

Find out this code: <data:post.body/>

Just after this code paste the following codes:

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

You have finished.

It will look like this:

HTML-program 23

2009-05-23T00:19:00.000+06:00

Program 23:

<html>

<head>

<title>Table</title>

</head>

<body>

<a href="http://easy-webpage-design.blogspot.com"> web design</a>

</body>

</html>

Explanation:
- <a href="......"> is used to make hyperlink
- To make a web hyperlink, use http:// before the web address

HTML-program 22

2009-05-23T00:14:00.000+06:00

Program 22:

<html>

<head>

<title>Table</title>

</head>

<body>

<tr>

<td>Rashed</td><td>050620</td><td>3.63</td>

</tr>

</table>

</body>

</html>

HTML-program 21

2009-05-20T01:41:00.000+06:00

Program 21:

<html>

<head>

<title>meta</title>

<meta name="description" content="your site's description. 2-3 sentences are better"/>

<meta name="keywords" content="your keywords, separated by commas"/>

<meta name="distribution" content="global"/>

<meta name="revisit" content="1 day"/>

<meta name="revisit-after" content="1 day"/>

<meta name="resource-type" content="document"/>

<meta name="audience" content="all"/>

<meta name="rating" content="general"/>

<meta name="robots" content="all"/>

<meta name="robots" content="index, follow"/>

<meta name="author" content="your name/company"/>

<meta name="language" content="en"/>

</head>

<body>

Meta tag is used for to describe a website content with only two or three words or sentence. It is very much important for any website because generally after seeing meta description or meta, user generally enter the website. In a search engine, sentences or words between the Title and Url are meta.

</body>

</html>

Note:
- meta is not displayed in website but it is displayed in search engine.

HTML-program 20

2009-05-20T01:40:00.000+06:00

Program 20:

<html>

<head>

<title>meta</title>

<META name="keywords" content="META TAG,SEO,Process of adding meta tag etc"/>

</head>

<body>

Meta tag is used for to describe a website content with only two or three words or sentence. It is very much important for any website because generally after seeing meta description or meta, user generally enter the website. In a search engine, sentences or words between the Title and Url are meta.

</body>

</html>

Note:
- meta is not displayed in website but it is displayed in search engine.
- <META name="Description" content="Add meta tag in your site and it will
  
  increase your traffic, here you will get the process of adding meta tag"/> (another meta attributes). Use one type, not both type.

HTML-program 19

2009-05-20T01:36:00.001+06:00

Program 19:

<html>

<head>

<title>marquee</title>

</head>

<body>

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

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

<hr><p>

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

</p>

<hr><p>

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

</p><hr><p>

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

</p><hr><p>

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

</p><hr><p>

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

</p><hr><p>

<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><br>

</p><hr><p>

<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><br>

</body>

</html>

Note:
- To make the text scroll, <marquee> tag is used. It has many attributes. See the attributes carefully and its effects.

It will look like:

code to simple scrolling text

code to simple scrolling text

code to simple scrolling text

Blogging

short memory

Make Money Online

Blogging

short memory

make money online

HTML-program 18

2009-05-20T01:35:00.000+06:00

Program 18:

<html>

<head>

<title>margin</title>

</head>

<body background="rashed01.jpg" text="yellow" bgproperties="fixed" topmargin="60" leftmargin="60">

<dl> 

<h1><dt>Computer</h1>

<dd>Computer is a computing machine.

<h1><dt>school</h1>

<dd>School is an organisation where different branches of knowledge are taught.

</dl>

</body>

</html>

Note:
- We can fix Top margin, Bottom margin, Left margin, Right margin of the page as we like.

HTML-program 17

2009-05-20T01:34:00.000+06:00

Program 17:

<html>

<head>

<title>background</title>

</head>

<body background="rashed01.jpg" text="yellow" bgproperties="fixed">

<dl> 

<h1><dt>Computer</h1>

<dd>Computer is a computing machine.

<h1><dt>school</h1>

<dd>School is an organisation where different branches of knowledge are taught.

</dl>

</body>

</html>

IMPORTANT NOTES:
- Image is also used in body background. To use image as the body background, you have to keep the image in the same folder where you are working.
- Image URL can be also used as background. Just paste the URL instead of rashedo1.jpg.

HTML-program 16

2009-05-20T01:33:00.000+06:00

Program 16:

<html>

<head>

<title>background</title>

</head>

<body bgcolor="red" text="yellow">

<dl>

<h1><dt>Computer</h1>

<dd>Computer is a computing machine.

<h1><dt>school</h1>

<dd>School is an organisation where different branches of knowledge are taught.

</dl>

</body>

</html>

Explanation:
- <body> itself has some attributes as bgcolor (background color), text (body text color) etc.

HTML-program 15

2009-05-20T01:31:00.001+06:00

Program 15:

<html>

<head>

<title>Definition

</title>

</head>

<body>

<dl> 

<h1><dt>Computer</h1>

<dd>Computer is a computing machine.

<h1><dt>school</h1>

<dd>School is an organisation where different branches of knowledge are taught.

</dl>

</body>

</html>

Explanation:
- To define different words or terms <dl> is used. dl means definition list. It contains two attributes <dt> and <dd>. dt for definition term and dd for definition description.

It will look like:

Computer: Computer is a computing machine.
school
school: School is an organisation where different branches of knowledge are taught.

HTML-program 14

2009-05-20T01:29:00.001+06:00

Program 14:

<html>

<head>

<title>This is my first webpage</title>

</head>

<body>

<ol>

<li>book</li>

<li>khata</li>

<li>pen</li>

<li>pencil</li>

</ol>

<ul>

<li>book</li>

<li>khata</li>

<li>pen</li>

<li>pencil</li>

</ul>

<ol start="6">

<li>book</li>

<li>khata</li>

<li>pen</li>

<li>pencil</li>

</ol>

<ol type="a">

<li>book</li>

<li>khata</li>

<li>pen</li>

<li>pencil</li>

</ol>

<ol type="1">

<li>book</li>

<li>khata</li>

<li>pen</li>

<li>pencil</li>

</ol>

<ol type="a">

<li>book</li>

<ol type="1"><li>Bangla</li>

<li>English</li>

<li>Math</li></ol>

<li>khata</li>

<li>pen</li>

<li>pencil</li>

</ol>

<ul>

<li>Book</li>

<ol><li>Bangla</li>

<li>English</li>

<li>Math</li>

</ol>

<li>Khata</li>

<li>pen</li>

<li>pencil</li>

</ul>

</body>

</html>

Explanation:
- To create order list <ol> is used. For each list <li> is used. List is closed with </li>. To close Order list </ol> is used.
- For Unorder list <ul> is used. For each list <li> is used. List is closed with </li>. To close Unorder list </ul> is used.
- Order list may be embeded within unorder list and vice versa.
- To make unorder list some other tag may be used as:
<menu>

<li>...</li>

<li>...</li>

</menu>
- or
<dir>

<li>.....</li>

<li>.......</li>

</dir>

It will look like:

book

khata

pencil

book

khata

pencil

book

khata

pencil

book

khata

pencil

book

khata

pencil

book

Bangla

English

Math

khata

pencil

Book

Bangla

English

Math

Khata

pencil

HTML-program 13

2009-05-20T01:27:00.000+06:00

Program 13:

<html>

<head>

<title>This is my first webpage</title>

</head>

<body>

<h1 align="center">S.M. Rasheduzzaman</h1><br>

<p align="center">Khulna University</p>

<p align="center"> FMRT Discipline</p>

<hr align="center" width="50%">

<br><p> 

<div align="center">

<h1>S.M. Rasheduzzaman</h1><br>

Khulna University<br>

FMRT Discipline

<hr width="50%">

</div>

</body>

</html>

Explanation:
- <div> tag is used for division. We can divide the whole text into some divisions and fixed them with some attributes to avoid repeating of attributes and tag.

It will look like:

S.M. Rasheduzzaman

Khulna University

FMRT Discipline

S.M. Rasheduzzaman

Khulna University

FMRT Discipline

HTML-program 12

2009-05-20T01:26:00.000+06:00

Program 12:

<html>

<head>

<title>This is my first webpage</title>

</head>

<body>

<p>This is paragraph</p>

This is paragraph.<p>

<p align="center">This is paragraph.

<p align="right="This is paragraph.</p> 

<p align="justify">

Whenever you are a seasoned HTML user or a first time, this

tutorial ments at your current level and helps you grow from there.

</body>

</html>

Explanation:
- <p> tag is used for Paragraph. To start a paragraph <p> is used and to end </p> is used. Some attributes are used with it.

HTML-program 11

2009-05-20T01:21:00.002+06:00

Program 11:

<html>

<head>

<title>This is my first webpage</title>

</head>

<body>

This is my first webpage. It is made with HTML.<br><hr></br>

<address>S.M. Rasheduzzaman.</br>

FMRT Discipline</br>

Khulna University<br>

Khulna, Bangladesh.</address>

<hr width="50%" color="red" align="left">

<hr width="20%" color="red" align="center">

<hr width="full" color="red" align="left">

</body>

</html>

Explanation:
- <hr> is used for horizontal line. It has different attributes as height, width, color, align etc.
- <address> is used for writing address.

It will look like:

This is my first webpage. It is made with HTML.

S.M. Rasheduzzaman.

FMRT Discipline

Khulna University

Khulna, Bangladesh.

(center align is not showing here correctly)

WEB DESIGN

How to make Hyperlink in Joomla

How to change "Example of Category Blog layout (FAQs/General category)" from joomla

Add a FeedCount in your blog

Add an Headline Animator in Your Blog

Add an Email Subscription in your Blog

Add a Chat Box in Your Blogsite

JavaScript-program 2

JavaScript-program 1

JavaScript

Animated Flash Tag Cloud For Blogger

Important notes:

Again:

You will not see the Tag Cloud if you have not installed the Flash Player. You can see the Tag Cloud in the Top Right Corner of my blog.

Add a "Site Search" option in your Blog

How to add Reaction widget in your blog?

HTML-program 23

HTML-program 22

HTML-program 21

HTML-program 20

HTML-program 19

HTML-program 18

HTML-program 17

HTML-program 16

HTML-program 15

Computer

school

HTML-program 14

HTML-program 13

S.M. Rasheduzzaman

S.M. Rasheduzzaman

HTML-program 12

HTML-program 11