Pimp Your Friendster Blog

Since some are asking me how to change the layout and how to add media in the sidebar, I decided to share something about it... Credits to Forsakenkid of Friendstertalk.

CONTENT:

• How to use premade layouts
• Embedding videos and media in sidebar
• Clickable image/text link
• Embedding videos and media as blog entry
• Putting images without links
• Rainbow effect upon hover (by DynamicDrive)

• How to use premade layouts?

Sample Layout: Shakugan No Shana

Code:
<link rel="stylesheet" type="text/css" href="http://cutieshika.fileave.com/shakugan%20no%20shana/shakugannoshanawid.css">

1. Go to your blog home and select Edit Configuration

2. Paste the codes in the Blog catchphrase/description box

3. Then hit Save... Republish your blog then you're done...

NOTE: Use Beckett style and 2-layout template.... also.. best view in 1024x768..

For more layouts just click the image of the sample layout...

• Embedding videos, images, and media to your sidebar

You can do it through the typelist. What is a typelist.? A TypeList is a tool for adding and managing supplemental important bits of information on your site. There are several types of typelists, but for adding images, videos, clickable buttons, and medias link typelists are the most flexible way to use.

Creating a New Typelist:

1. Go to your blog home and click the typelist tab 

2. Choose the link typelist on the drop down menu on the list type 

3. Then a put a name on the List name (The TypeList name shows as the title for your TypeList in your weblog sidebar) After you put a name, hit the "create new list" 

4. Now, you may something that look like this:

5. Hit "Add a new item" and a new window will open that look like this:

Put the codes for your medias and images on the box for NOTES. You can leave the other boxes empty. And then hit "Save item"

6. Back to that image in step 4.. : Select "Add this list to your blog" and a new window will open that look like this: 

Check the box beside the name of the blog and hit "Save changes" Then on the new pop-up window, just select "Close Window"

7. Back again to the image on step 4..: Hit "Configure" and a new window will open. You will now see this image on the lower part of the new window: 

Select Display notes "As Text" and then hit "Save Changes".. Just leave the other options empty..

8. Now, you've successfully embed your medias in your sidebar.

• Clickable image/text link

This one is really basic but it will help those who doesn't know it.

• For the clickable text links, this is the format:

<a href="URL YOU ARE LINKING TO" target="blank">DESIRED TEXT</a>

For example if I want to advertise my blog I will use this http://bbalonne.blogs.friendster.com/my_gallery/ as the URL and it will look like this:

<a href="http://bbalonne.blogs.friendster.com/my_gallery/" target="blank">MY BLOG</a>

And will turn to: MY BLOG

• For clickable image like the picture in the sample image, this will be the format:

<a href="URL YOU ARE LINKING TO" target="blank"><img src="URL OF THE IMAGE" alt="DESIRED TEXT OF THE HOVERED IMAGE"></a>

For example I will advertise my blog using a button it will be like this:

<a href="http://bbalonne.blogs.friendster.com/my_gallery/" target="blank"><img src="http://i79.photobucket.com/albums/j122/rhyme_413/forblog/jnapril.gif" alt="My BLOG"></a>

And the result will be like this:

• Embedding videos and media as blog entry

Can you see that envelope thing (Mailto link) beside the font properties..?

Just click it and a new window will occur.

Just paste the codes in the box there and click "Ok".

• Putting images without links

This one is also basic, but it may help others..

The format will just look like this: (not necessarily put all the properties. The image will still appear as long as your image source is there).

<img src="URL OF THE IMAGE" align="RIGHT/LEFT/CENTER" width="AMT. OF WIDTH" height="AMT. OF HEIGHT">

• Rainbow effect upon hover

<script type="text/javascript"> /************************************************************************/ /* Rainbow Links Version 1.03 (2003.9.20)                               */ /* Script updated by Dynamicdrive.com for IE6                           */ /* Copyright (C) 1999-2001 TAKANASHI Mizuki                             */ /* takanasi@hamal.freemail.ne.jp                                        */ /*----------------------------------------------------------------------*/ /* Read it somehow even if my English text is a little wrong! ;-)       */ /*                                                                      */ /* Usage:                                                               */ /*  Insert '<script src="rainbow.js"></script>' into the BODY section,  */ /*  right after the BODY tag itself, before anything else.              */ /*  You don't need to add "onMouseover" and "onMouseout" attributes!!   */ /*                                                                      */ /*  If you'd like to add effect to other texts(not link texts), then    */ /*  add 'onmouseover="doRainbow(this);"' and                            */ /*  'onmouseout="stopRainbow();"' to the target tags.                   */ /*                                                                      */ /* This Script works with IE4,Netscape6,Mozilla browser and above only, */ /* but no error occurs on other browsers.                               */ /************************************************************************/ //////////////////////////////////////////////////////////////////// // Setting var rate = 20;  // Increase amount(The degree of the transmutation) //////////////////////////////////////////////////////////////////// // Main routine if (document.getElementById) window.onerror=new Function("return true") var objActive;  // The object which event occured in var act = 0;    // Flag during the action var elmH = 0;   // Hue var elmS = 128; // Saturation var elmV = 255; // Value var clrOrg;     // A color before the change var TimerID;    // Timer ID if (document.all) {     document.onmouseover = doRainbowAnchor;     document.onmouseout = stopRainbowAnchor; } else if (document.getElementById) {     document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);     document.onmouseover = Mozilla_doRainbowAnchor;     document.onmouseout = Mozilla_stopRainbowAnchor; } //============================================================================= // doRainbow //  This function begins to change a color. //============================================================================= function doRainbow(obj) {     if (act == 0) {         act = 1;         if (obj)             objActive = obj;         else             objActive = event.srcElement;         clrOrg = objActive.style.color;         TimerID = setInterval("ChangeColor()",100);     } } //============================================================================= // stopRainbow //  This function stops to change a color. //============================================================================= function stopRainbow() {     if (act) {         objActive.style.color = clrOrg;         clearInterval(TimerID);         act = 0;     } } //============================================================================= // doRainbowAnchor //  This function begins to change a color. (of a anchor, automatically) //============================================================================= function doRainbowAnchor() {     if (act == 0) {         var obj = event.srcElement;         while (obj.tagName != 'A' && obj.tagName != 'BODY') {             obj = obj.parentElement;             if (obj.tagName == 'A' || obj.tagName == 'BODY')                 break;         }         if (obj.tagName == 'A' && obj.href != '') {             objActive = obj;             act = 1;             clrOrg = objActive.style.color;             TimerID = setInterval("ChangeColor()",100);         }     } } //============================================================================= // stopRainbowAnchor //  This function stops to change a color. (of a anchor, automatically) //============================================================================= function stopRainbowAnchor() {     if (act) {         if (objActive.tagName == 'A') {             objActive.style.color = clrOrg;             clearInterval(TimerID);             act = 0;         }     } } //============================================================================= // Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser) //  This function begins to change a color. (of a anchor, automatically) //============================================================================= function Mozilla_doRainbowAnchor(e) {     if (act == 0) {         obj = e.target;         while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {             obj = obj.parentNode;             if (obj.nodeName == 'A' || obj.nodeName == 'BODY')                 break;         }         if (obj.nodeName == 'A' && obj.href != '') {             objActive = obj;             act = 1;             clrOrg = obj.style.color;             TimerID = setInterval("ChangeColor()",100);         }     } } //============================================================================= // Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser) //  This function stops to change a color. (of a anchor, automatically) //============================================================================= function Mozilla_stopRainbowAnchor(e) {     if (act) {         if (objActive.nodeName == 'A') {             objActive.style.color = clrOrg;             clearInterval(TimerID);             act = 0;         }     } } //============================================================================= // Change Color //  This function changes a color actually. //============================================================================= function ChangeColor() {     objActive.style.color = makeColor(); } //============================================================================= // makeColor //  This function makes rainbow colors. //============================================================================= function makeColor() {     // Don't you think Color Gamut to look like Rainbow?     // HSVtoRGB     if (elmS == 0) {         elmR = elmV;    elmG = elmV;    elmB = elmV;     }     else {         t1 = elmV;         t2 = (255 - elmS) * elmV / 255;         t3 = elmH % 60;         t3 = (t1 - t2) * t3 / 60;         if (elmH < 60) {             elmR = t1;  elmB = t2;  elmG = t2 + t3;         }         else if (elmH < 120) {             elmG = t1;  elmB = t2;  elmR = t1 - t3;         }         else if (elmH < 180) {             elmG = t1;  elmR = t2;  elmB = t2 + t3;         }         else if (elmH < 240) {             elmB = t1;  elmR = t2;  elmG = t1 - t3;         }         else if (elmH < 300) {             elmB = t1;  elmG = t2;  elmR = t2 + t3;         }         else if (elmH < 360) {             elmR = t1;  elmG = t2;  elmB = t1 - t3;         }         else {             elmR = 0;   elmG = 0;   elmB = 0;         }     }     elmR = Math.floor(elmR).toString(16);     elmG = Math.floor(elmG).toString(16);     elmB = Math.floor(elmB).toString(16);     if (elmR.length == 1)    elmR = "0" + elmR;     if (elmG.length == 1)    elmG = "0" + elmG;     if (elmB.length == 1)    elmB = "0" + elmB;     elmH = elmH + rate;     if (elmH >= 360)         elmH = 0;     return '#' + elmR + elmG + elmB; } </script>

Just copy the codes and paste in the blog catchphrase/description box. For advance users, compiled with your .js file and remove this: <script type="text/javascript">
</script>

I will share more some other time.. These are only basics, but I hope it will help you. Takecare...