Note before starting

Before amendments to any code/files  to the blog engine, please remember to backup the files/existing codes.

Blogger/Blogspot

Takeover page.

Graphic1.jpg
  1. Login to blogger/blogspot account by navigation to www.blogger.com or www.blogspot.com
  2. Navigate to Layout  > Edit HTML.
  3. To disable the scroll bar, Insert the following code under the style section

html {overflow-y:hidden; }
body {overflow: hidden;}

 

Below is the sample screenshot.

4. Under the Edit template inser t the code below between the <body></body> tag

Sample code:

<div id='overlay' style='position: absolute; center; width:100%; height:1000px; z-index:7; left: 0px; top: 0px; background-image: url(http://www.avantworks.com/lightboxload/bgtrans.png); layer-background-image: url(http://www.avantworks.com/lightboxload/bgtrans.png); border: 1px none #000000;'>
<div align='center'>
<object height='550' width='675'>
<param name='movie' value='http://www.avantworks.com/hpbtakeover/takeover.swf'/>
<param name='wmode' value='transparent'/>
<embed height='550' movie='http://www.avantworks.com/hpbtakeover/takeover.swf' src='http://www.avantworks.com/hpbtakeover/takeover.swf' width='675' wmode='transparent'/>
</object>
</div>
</div>

 

Wordpress Blog Engine

Takeover page (Edit using wordpress CMS)

  1. Login to wordpress admin page.
  2. Navigate to Appearance  > Editor
  3. Choose the style.css Insert the following code under the style section


Code:

html {overflow-y:hidden; }
body {overflow: hidden;}

  1. Choose the Header file and  insert the code below between the <body></body> tag

wordpressstep2.jpg

Code:

<div id='overlay' style='position: absolute; center; width:100%; height:1000px; z-index:7; left: 0px; top: 0px; background-image: url(http://www.avantworks.com/lightboxload/bgtrans.png); layer-background-image: url(http://www.avantworks.com/lightboxload/bgtrans.png); border: 1px none #000000;'>
<div align='center'>
<object height='550' width='675'>
<param name='movie' value='http://www.avantworks.com/hpbtakeover/takeover.swf'/>
<param name='wmode' value='transparent'/>
<embed height='550' movie='http://www.avantworks.com/hpbtakeover/takeover.swf' src='http://www.avantworks.com/hpbtakeover/takeover.swf' width='675' wmode='transparent'/>
</object>
</div>
</div>

Takeover page (Edit using FTP)

  1. Some blog user might prefer editing the wordpress template by replacing template files via ftp. Login to the server ftp and navigate to wp-content/themes/themename.   The “themename” name  is depend on the theme that used by the user.
  2. Download the style.css and edit the file using any preferred text editor (eg. notepad). 
  3. Insert the code below

Sample code:


html {overflow-y:hidden; }
body {overflow: hidden;}

 

  1. Download the header.php file and edit the file using any preferred text editor (eg. notepad). 
  2. Insert the code below between the <body></body> tag

Sample code:


<div id='overlay' style='position: absolute; center; width:100%; height:1000px; z-index:7; left: 0px; top: 0px; background-image: url(http://www.avantworks.com/lightboxload/bgtrans.png); layer-background-image: url(http://www.avantworks.com/lightboxload/bgtrans.png); border: 1px none #000000;'>
<div align='center'>
<object height='550' width='675'>
<param name='movie' value='http://www.avantworks.com/hpbtakeover/takeover.swf'/>
<param name='wmode' value='transparent'/>
<embed height='550' movie='http://www.avantworks.com/hpbtakeover/takeover.swf' src='http://www.avantworks.com/hpbtakeover/takeover.swf' width='675' wmode='transparent'/>
</object>
</div>
</div>

Upload and replace the file in the ftp.