July 24, 2014

How to Make a Three Column Blog in Javascript

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 : easkme

How to Make a Three Column Blog in Javascript ?
  • Open Notepad and save it as "3 column.HTML".
  • Create Basic design with three div :
<HTML>
<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
<script type=\"text/javascript\">
//<![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 //
}

  • Inside loop create rules for each div
or (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
}

  • This will make each div 300 pixels wide and 700 pixels height, with margin of 20 pixels.
  • Now write all code together :
<html>
<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