Layout of webpage usually created in CSS, but you can do it with Javascritp also. Javascript will give dynamic view to your blog.
How to Make a Three Column Blog in Javascript ?
<head>
<title>Three JavaScript Column Blog</title>
</head>
<body>
<div id=\"left-sidebar\">Left Column for sidebar</div>
<div id=\"middle-bar\">Middle Column for Content</div>
<div id=\"right-sidebar\">Right Column for sidebar</div>
</body>
</HTML>
//<![CDATA[
// JavaScript code here //
//]]>
</script>
How to Make a Three Column Blog in Javascript ?
- Open Notepad and save it as "3 column.HTML".
- Create Basic design with three div :
<head>
<title>Three JavaScript Column Blog</title>
</head>
<body>
<div id=\"left-sidebar\">Left Column for sidebar</div>
<div id=\"middle-bar\">Middle Column for Content</div>
<div id=\"right-sidebar\">Right Column for sidebar</div>
</body>
</HTML>
- Add Javascript code at the end of the page before </body> tag. Set place for this
//<![CDATA[
// JavaScript code here //
//]]>
</script>
- Write and Array including all divs on the page using \"getElementsByTagName\" and name it \"allDivs:\"
- allDivs = document.getElementsByTagName(\"div\");
- Create a loop to run through each div in array
for (var i = 0; i < allDivs.length; i++){
// do something to each div here //
}
// do something to each div here //
}
- Inside loop create rules for each div
allDivs[i].style.width=\"300px\"
GO
allDivs[i].style.height=\"700px\"
GO
allDivs[i].style.border=\"1px solid black\"
GO
allDivs[i].style.cssFloat=\"left\"
GO
allDivs[i].style.margin=\"20px\"
GO
}
- This will make each div 300 pixels wide and 700 pixels height, with margin of 20 pixels.
- Now write all code together :
<head>
<title>Three Column Blog</title>
</head>
<body>
<div id=\"left-sidebar\">Left Column for sidebar</div>
<div id=\"middle-bar\">Middle Column for Content</div>
<div id=\"right-sidebar\">Right Column for sidebar</div>
<script type=\"text/javascript\">
//<![CDATA[
allDivs = document.getElementsByTagName(\"div\")
GO
for (var i = 0; i < allDivs.length; i++){
allDivs[i].style.width=\"300px\"
GO
allDivs[i].style.height=\"700px\"
GO
allDivs[i].style.border=\"1px solid black\"
GO
allDivs[i].style.cssFloat=\"left\"
GO
allDivs[i].style.margin=\"20px\"
GO
}
//]]>
</script>
</body>
</html>
- Save it and see how it shows and than upload to your blog
.jpg)
