Tuesday, June 05, 2007

Simple blog modification

A general overview to the current blog template layout. The template can be divided into 4 regions:

Body ( Currently purple and pink shade ) - Referring to the area we generally know as the background.

Header ( Currently pink with the thick purple border ) - Referring to the area within the thick purple border which consists of the blog title, blog description, etc.

Sidebar ( Currently transparent and follows the colour of the Body ) - Refers to the area with the adsense, jukebox, archives, links.

Main ( Currently the white box ) - Refers to the area where the post entries are.



Font and Colour editing with the click of the mouse. Choose according to description and watch your changes in the preview window below.



Scrolling Text Editing



Look for the following code region highlighted in Yellow in the Configure HTML/JavaScript Page Element.



<!-- Scrolling Text Notice -->

<p align="center"><marquee direction="left" width="60%" scrollamount="4">Latest Update: Blog under Construction... More ♀GY♂ for you...</marquee></p>


Replace the text (in italics) with the notice you require.

Scrolling Filmstrip Editing

Look for the following code region in the same Configure HTML/JavaScript Page Element.



<!-- Scrolling Filmstrip -->

<p align="center"><marquee behavior="alternate" width="60%" scrollamount="3"><img width="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJ2ojFm4O-zYe280h8z5E8D9bBonAm01jHdF-FWEE7N0EGkyQ_K__zMtPqlyzjxgQvVGP2fuTKupuqPEQFxjqE7xGXFib5iAkNErc6EWu5_MPGxzOzPDzi79c_4Gl0K3ozl_caw/s400/CLwinners+014.jpg" height="60" /><img width="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLo8coEmr-FO6bFqMksVg5WU8EoX8-KqrJSzs_ucUiBnXvWuODsIvXB_E-mOBq9Ca9nuw4lkRmfeQhT4jQBhxoLqDPvhPD8ABD0yuMx9d6_LOGse8ZWURm4P1NeI4WHGaVfCg/s320/CNY040036.JPG" height="60" /></marquee></p>


Each image is represented by the following code within the filmstrip:

<img width="80" src="url of Image" height="60" />

e.g.
<img width="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJ2ojFm4O-zYe280h8z5E8D9bBonAm01jHdF-FWEE7N0EGkyQ_K__zMtPqlyzjxgQvVGP2fuTKupuqPEQFxjqE7xGXFib5iAkNErc6EWu5_MPGxzOzPDzi79c_4Gl0K3ozl_caw/s400/CLwinners+014.jpg" height="60" />


Add or Remove an image from the filmstrip by inserting or deleting the above code (in italics) with the related URL.

Music for the Blog

Look for the following code region in the Place of Worship Configure HTML/JavaScript Page Element along the sidebar.



<p align="center">
<object width="90%" height="80"><param value="http://media.imeem.com/m/HYZ85lCDBs" name="movie"><param name="wmode" value="transparent"><embed src="http://media.imeem.com/m/HYZ85lCDBs" width="90%" height="80" type="application/x-shockwave-flash" wmode="transparent"></embed>
</p>


Replace the music code (in italics) with similar embedded object code for your mp3 that can be obtained from imeem website.

Edit HTML to change mouse cursor

Look for the folling code region.



body {
background:$bgcolor;

filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='$bgcolor',
startColorstr='$bgcolor2', gradientType='1');

margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/**/:/**/small;
font-size: /**/small;
text-align: center;

scrollbar-face-color : $sbcolor1;
scrollbar-highlight-color : $sbcolor2;
scrollbar-3dlight-color : $sbcolor2;
scrollbar-shadow-color : $sbcolor1;
scrollbar-darkshadow-color : $sbcolor1;
scrollbar-track-color : transparent;
scrollbar-arrow-color : $sbcolor2;

cursor:url(http://www.myspacecursor.net/hello_kitty/hellokitty.ani);
}


Replace the address (in italics) in the cursor url with the cursor image you want. Simple alternatives would be:


cursor:crosshair;
cursor:hand;

No comments: