BLOG MAKERS ZONE: HTML

Showing posts with label HTML. Show all posts

Monday, 7 November 2011

01:01 Naveen No comments

When inserting codes into the Blogger template, page element, or blog post, you may have seen error messages that the code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly. These errors can be corrected if you understand the rules that must be adhered to in XHTML documents. Blogger templates use the XHTML 1.0 Strict Document Type. In this article, we shall explain some of the XHTML syntax or rules, so that you may troubleshoot and resolve the problems if these error messages should occur.

XML, HTML and XHTML

We shall keep this short. Just so as you understand what we said about document type, view the Page Source or Source of your Blogger blog. You should see this document type declaration at the very top:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The terms – XML, HTML and XHTML - refer to the markup language used to write the web pages. Many of us would have heard of HTML (Hypertext Markup Language), invented by Tim Berners-Lee, and used since the early days of internet. XML (Extensible Markup Language) is a meta-language, used to create other markup languages. The traditional HTML was later recast to use the rules of XML and that resulted in a new XML application, called XHTML (Extensible Hypertext Markup Language). Because XHTML rules are strict and unforgiving, not conforming to them when attempting to modify the template would result in error messages. So, what are these rules that Bloggers like us should take note of?

Basic Rules of XHTML

1. Codes to be in lowercase

Since XML is case sensitive, all the element keywords and attribute names used in XHTML should be in the lowercase. For example, the template code is not this:-

<TITLE>Tips for New Bloggers</TITLE>

but this:-

<title>Tips for New Bloggers</title>

If you have noticed, the elements and attribute names between the lesser than (<) and greater than (>) signs have to be in the lowercase. However, the value, which in this case is “Tips for New Bloggers”, can be in the uppercase, lowercase, or mixed case.

2. Attribute values to be in quotation marks

All the attribute values have to be enclosed either in single or double quotation marks. The following examples are not accepted by XHTML:-

<div id=header-wrapper> <a href=http://tips-for-new-bloggers.blogspot.com>Text Link</a> <img src=photo.jpg/> <table width=200 border=0 cellpadding=2>

Instead, they should be written as such:-

<div id='header-wrapper'> <a href="http://tips-for-new-bloggers.blogspot.com">Text Link</a> <img src="photo.jpg"/> <table width="200" border="0" cellpadding="2">

3. Container elements must have closing tags

This is not correct:-

<p>A paragraph.

In XHTML, there must be a closing tag with a forward slash (/) at the end:-

<p>A paragraph.</p>

Examples of the many non-empty elements that have opening and corresponding closing tags are:-

<ul> ... </ul> <li> ... </li> <table> ... </table> <h2> ... </h2> <div> ... </div> <span> ... </span> <dt> ... </dt> <dd> ... </dd> <a href> ... </a>

4. Standalone elements to be closed

Some of the elements are empty or standalone. They do not have associated closing tags. Common examples are:-

<br> <img> <input> <frame> <hr> <meta> <link>

Nonetheless, in XHTML, these elements must be terminated or closed. There are two ways to do that. One way to terminate the element is to put a forward slash (/) at the end like this:-

<br/> <img/> <input/> <frame/> <hr/> <meta/> <link/>

The second way is to add a corresponding closing tag like this:-

<br> ... </br> <img> ... </img> <input> ... </input> <frame> ... </frame> <hr> ... </hr> <meta> ... </meta> <link> ... </link>

5. Elements to be properly nested

This means that elements must be closed in the reverse order. For example, this code is not accepted in XHTML:-

<form><table> ... </form></table>

It is improperly nested because the form was created first followed by the table. To close them in the proper order, the table must be closed before the form, like this:-

<form><table> ... </table></form>

6. Document to have only one root element

In the XHTML document, you will see that except for the document type declaration, all the codes are nested between <html> and </html>. This is the root element and all other elements or sub elements are in between. The document structure will look like this:-

<html> <head> ... </head> <body> ... </body> </html>

7. Attribute minimization is not allowed

In XHTML, all attributes should be in the form name="value". Even if the value is the same as the name, it cannot be minimized to one word. Hence, in our Add Text Box and Textarea article, the textarea code is not this:-

<textarea readonly>Hyperlink Code</textarea>

but this:-

<textarea readonly="readonly">Hyperlink Code</textarea>

XHTML Character Entities

Quite a number of readers had asked why they were unable to display HTML codes in their blog posts or why their codes were not well-parsed when inserted into the template. If you have noticed by now, the codes are wrapped in the lesser than (<) and greater than (>) signs. The moment these are posted, they will be interpreted as codes and will trigger an action by the browser. Should you want to display these as part of the text, use their character entities instead.

"	"
&	&
<	<
>	>

The next time you see an error message to the effect that the code is not well formed, not well parsed, not properly closed, etc., take a look at this guide, troubleshoot the problem and try out the possible solutions.

Adding label (category) tabs to navigation bar

04:28 Naveen No comments

How do you add a tab (on horizontal navigation bar) that shows all the posts that fall under a subject or category in Blogger?

tab display all posts that fall under a particular label category

Before I give a correct answer, let’s first see a popular-but-wrong DIY method (using Music category as an example):

Create a page with “Music” as the title. “Music” tab will be added to the bar automatically. So far so good.
Attempt to add music posts to the page. This is where it gets stuck, because posts can’t be added to pages.
Mission failed.

Well, that’s the end of that.

The correct way of doing this is by adding a tab with a label URL used as the target link. A label URL is a link that points to a label-search page. This page lists out all posts labeled with a particular label.

Here are the steps:

1. Label your posts

Label your posts according to subjects or categories (if you haven’t already done so). This is pretty basic, but if you don’t have the slightest idea what a label is or don’t know how to apply it, read How do I label my posts?.

You can also apply a label to multiple posts at once.

2. Get the label URL

You can get the URL to a label-search page by right-clicking on the hyper-linked label. In Firefox you select “Copy Link Location”, in Chrome select “Copy link address”, and if you are using Internet Explorer, select “Properties” and copy the link from there.

You can usually find the labels at the bottom of your post and in Labels gadget if you have a Labels gadget installed. If you don’t see any label, you can always construct the URL yourself.

A URL follows the format below:
http://YOURBLOGNAME.blogspot.com/search/label/YOURLABEL

For a multiple word label such as "YOUR LABEL", you need to replace the space between words with %20, like so: YOUR%20LABEL. Labels are case sensitive, make sure you enter the correct letter case.

Example:

This is the URL for BloggerSentral’s “SEO and traffic” label. Clicking it will take you to a page showing all posts that fall under that label (opens in new tab/window):

http://www.bloggersentral.com/search/label/SEO%20and%20traffic

3. Add the tab with the label URL

The method of adding the tab is different depending on the type of widget used for the horizontal navigation bar.

To add the tab to the Pages gadget, follow this tutorial: Adding non-page links to Pages/PageList gadget.
If your tabs uses a LinkList gadget, enter the URL into “New Site URL” text box.
For tabs that are made of list items or anchor tags, just add the label URL as a target link like so: <a href="PUT LABEL URL HERE" >Link Text</a>

Interesting web sharing trends

03:42 Naveen No comments

What is the best time to publish your posts? What is the most popular method of sharing content? Well if you are looking for the answers, read further.
AddThis recently highlighted some interesting findings on web sharing trends, by analyzing its five years’ (2006-2010) worth of data. While the data may not give the complete sharing picture, it’s still worth checking out considering AddThis claims to be the largest content sharing platform on the web, used by 10 million websites and reaches 1.2 billion users each month.
Maybe we can learn something from those findings, like how do people share content on the web? When do they share it? What are the most popular social media sharing sites? etc.
Below are some of the findings:

Top sharing times

Peak hour: Peak sharing occurs at 9:30am EST (14:30 GMT) every day.
Peak Day: Wednesdays are the peak days for sharing.

When do people click?

Most users click 2 minutes after the content is shared.
75% of clicks occur within the first day of a share.

Top shares growth all time

Twitter: 35,356%
Facebook & Like: 5,809%
LinkedIn: 3,226%
StumbleUpon: 2,912%
Tumblr: 1,142%

Past year (2010) growth

Trending Up	Trending Down
Facebook Send: 756%	iGoogle: -68%
Tumblr: 532%	AOL Lifestream: -63%
Google +1: 418%	MySpace: -53%
PingFM: 272%	Delicious: -46%
LinkedIn: 243%	Digg: -46%

Most sharing happens via URL copy-paste

Still most sharing is done by copying URLs directly from the address bar to emails, IMs and other social channels. This method is used up to 10 times more than sharing tools.

Listing post titles in alphabetical or chronological order

03:36 Naveen 1 comment

In this tutorial I will show you how to list the titles of your blog’s 1000 most recent posts. If you are looking for an alternative to Blogger’s Archive gadget, then this might be it. This list can also be used as a Table Of Contents. This list is made possible with the use of Yahoo! Pipe.
See the demo in Blogger Sentral Widget Showcase.
The list comes with several options:

List them inside a widget or inside a ~~post~~ page.
Arrange the titles in alphabetical or chronological order. If you use your blog as an online serial novel, then chronological order is just what you need.
Append (or not) a comment count at the end of each title.
Choose numbered or bulleted list style.

Let’s get started,

1) The code

<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
 document.write('<ul style="font-weight:bold">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ul>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.bloggersentral.com
 &Order=alphabet
 &_id=401e43055731c1a29f1e1d3eb5e8e13f
 &_callback=getYpipeTL
 &_render=json" 
type="text/javascript"></script>
<span style="font-size: 80%; float:right;">Get this <a href="http://www.bloggersentral.com/2009/12/list-post-titles-in-alphabetical-order.html" target="_blank">widget</a></span>
<!-- Alphabetical Post Title Listing End -->

2) Put the list in a (dedicated) post page

Use this option if you want to put the list on a separate page. (You can then access it via a tab.)

Create a new page by going to Posting > Edit Pages and clicking the New Page button.
Click Edit HTML tab to switch to HTML mode.
Copy and paste the code into the editor.
Click Post Options at the bottom of the editor. Under the Edit HTML Settings heading, select Ignore newlines.
Publish and view your post . The list should appear inside the page.
Then add a link to the page from your homepage. This can be done by adding navigation tabs. If you have the page gadget installed, this is added automatically by Blogger.
If you want to remove the extras (sidebars, footer etc.) from the page, read Apply different layout/styling to static pages.

3) Put the list in a gadget

Use this option if you want to put the list on a sidebar, making it visible at all times.

Go to Design > Page Elements.
Click Add A Gadget link.
Select HTML/Javascript gadget.
Enter the title of your widget e.g. All Posts List.
Copy and paste the code inside the content box. Replace http://www.bloggersentral.com (the value of YourBlogUrl) in code line 20 with your own blog URL. Do not include the trailing slash (as in .com/). Refer to step 4 for options/customizations.
Reminder: In the process of editing your code, never switch to Rich Text mode. Doing so will add line breaks (<br/>) in your code, rendering the code useless.
Save and view your blog.

4) Customizing the list

Below are a few available customizations/options:

Listing order -the default order is alphabetical. To change to chronological order, just change the word alphabet in code line 21 to chrono.
Comment count - comment count is displayed by default. To remove comment count, delete code line 13.
List style -the default is bulleted list. To change to numbered list, replace ul (in line 4 and 16) with ol.
Style the list with the inline style attribute in line 4.
If your list becomes too long, you might want to put it in a scroll box

5) Editing the pipe (optional)

If you want further customize the widget output, you need to edit the (Yahoo) pipe itself. Follow the steps below:

Go to the Yahoo! pipe.
Log in to your Yahoo! account.
Create a clone by clicking the Clone button.
Click edit source to edit it in anyway you like.
When you’re done editing and saving, test run it by clicking Run Pipe button to confirm the output of the pipe.
To use your edited pipe, copy the pipe id and paste it to replace the existing id in line 22. (To get the id, look in your browser’s address bar. The id is the end part the URL when you are viewing or editing the pipe.)

This post explains you how to add marquee to your blog sidebars & blog posts

05:24 Naveen No comments

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

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

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,

<marquee bgcolor="#99CCFF">code to simple scrolling text</marquee>

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:

<marquee direction="right" bgcolor="#99CCFF">code to simple scrolling text</marquee>

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

behavior="alternate"

Here is the code to do this:

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

Example 6:

code to simple scrolling text

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

scrollamount="2"

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

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

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

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

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)

<span style="#FFFFFF">

So, the code looks like this

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

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:

<marquee behavior="scroll" align="middle" direction="left" bgcolor="#99FFFF" scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()"><br /><br /> <a href=" http://kranthitips.blogspot.com/2007/12/embed-flashflvswf-files-in-blogger.html ">Flash animations in your blog</a> <a href=" http://kranthitips.blogspot.com/2007/12/how-to-embed-youtube-videomovie-in-your.html ">Youtube videos</a> <a href=" http://kranthitips.blogspot.com/2007/12/hexa-decimal-color-chart-for-bloggers.html ">Hexadecimal codes</a><br /><br /> </marquee

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,

How To Create a Multi Level Drop Down Menu In Blogger/BlogSpot Blogs?

06:48 Naveen No comments

One of the important widgets I found missing in some blogs is a top navigation menu (preferably multi-level drop down list).
If you have some important navigation links/labels/categories for your blog, that are popular among your readers, then it will be very easy for them, if you could place a navigation bar in the top region of your blog.

So have a quick look on this live demo: [CSS Horizontal Menu], before you add this to your blog.

Now if you are impressed by the way it looks and works, then without wasting any more time, add this widget quickly to your blog, and make your readers happy !

Here's what you have to do.
STEP1:
Download this file from Dynamic Drive:
slidemenu_hori.css [Click Here],

and this one too:
slidemenu_horiz.js (Copyrighted to Dynamic Drive and modified with pre-added images)

And upload the files to MyDataNest (recommended)
NOTE:Edit and save the properties of the folder at your MyDataNest account as "hidden" and NOT as "Private".
or to SigMirror.com, to get the DIRECT LINKS to these files.

Log in to blogger, go to "Layout", click on "Edit HTML" tab.
Now find (CTRL+F) this in the template:

</head>

Immediately BEFORE it, place this code:

<link rel="stylesheet" type="text/css" href="http://mydatanest.com/............/slidemenu_hori.css" />



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://mydatanest.com/.............../slidemenu_horiz.js"></script>

Replace the links in RED, with the DIRECT LINKS you obtained from hotlinkfiles.com or sigmirror.com
Then save the template.

STEP 2:
Now go to "Page Elements" of "Layout".
Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>

Then save this widget. And drag it just above the posts widget.

How to Create A Sliding Side Menu to your blog ?

06:45 Naveen No comments

Now if you are impressed with the widget and want to add a similar widget to your blog, then simply follow these steps:

1. Download these two javascript files from DynamicDrive:
ssm.js, and
ssmItems.js [LINK to DynamicDrive]

2. Now open the second file (ssmItems.js) with note/text pad, and edit it :

Now change everything in RED, GREEN and BLUE as per your requirements.
The code shown in purple color are comments, you can change them to modify the background colors.

Now after editing, save the file.

3. Now upload these two files to MyDataNest.com (You have to register for free as a member to upload files).
4. Then copy the direct links to these files.

5. Finally change the links (in red color) in the following code with your new links from MyDataNest.com

<STYLE>

</STYLE>

<SCRIPT SRC='http://dsai.588.googlepages.com/ssm.js' language='JavaScript1.2'>

//Dynamic-FX slide in menu v6.5 (By maXimus, maximus@nsimail.com)
//Site: http://maximus.ravecore.com/
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC='http://dsai.588.googlepages.com/ssmItems.js' language='JavaScript1.2'/>

Go to your blog template (Log in to Blogger -> Go to Layout -> Edit HTML), and find (CTRL+F) this code:

</head>

And paste the code (obtained from step 5) just BEFORE/ABOVE it.

Credits: DynamicDrive and MaXimus

Blog Tricks

Blog Designing

This Site Helps You

WHICH "BLOG CONTENTS" YOU ARE LOOKING FOR

Monday, 7 November 2011

Tuesday, 25 October 2011

Adding label (category) tabs to navigation bar

1. Label your posts

2. Get the label URL

3. Add the tab with the label URL

Interesting web sharing trends

Top sharing times

When do people click?

Top shares growth all time

Past year (2010) growth

Most sharing happens via URL copy-paste

Listing post titles in alphabetical or chronological order

1) The code

2) Put the list in a (dedicated) post page

3) Put the list in a gadget

4) Customizing the list

5) Editing the pipe (optional)

Sunday, 18 September 2011

This post explains you how to add marquee to your blog sidebars & blog posts

Sunday, 11 September 2011

How To Create a Multi Level Drop Down Menu In Blogger/BlogSpot Blogs?

How to Create A Sliding Side Menu to your blog ?

Popular Posts

WORLDS TOP BLOGS

Labels

Wed Counter

Blog Archive

Followers

My Blog Directories