A Heart in Love with Beauty Never Grows Old...!




News Update :
Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Hide no comment in blogger

- Open blogger template html
- Search this code
   
         <div class='comments' id='comments'>
        <a name='comments'/>
        <b:if cond='data:post.allowComments'>

- After that next line is
         <h4><data:commentLabel/>:</h4>

- Remove red colored text
- Save template
.

Embed pls file



Since last long time I want to keep my favorite radios at one place.
But don't know ABC of server scripts.
So listen radios on shoutcast.

Today I try to embed pls file in flash.

- Download pls file by shoutcast.com
- Open it by notepad
- Copy url
- Use online music player available at
                 http://www.flash-mp3-player.net/players/multi/generator/
- Include /; after port number of url
- Generate code

Its working example is above...!

I have try to add more stream links in single pls file, also working because pls file is playlist not mp3...!
.

Tabbed content widget for Blogger

Add easily tabbed widget to blogger blog.

I find below code by search

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(7($){$.q.r=7(b){4 c={g:3};4 b=$.s(c,b);4 d=$(8).h().h(\'.5\');d.6(\'t\');u($(\'a[v^="w://x.y.z"]\').A(\'#i a\')){d.B(\'.5\').C(0,b.g).6(\'1\')}D{}$(\'.1\').9();$(\'.1:e\').j($(\'.1 2\'));$(\'.1:e\').k();$(\'.1\').E($(\'#i p\').F({\'G\':\'H 0 0\',\'I\':\'0\',\'J-K\':\'L\'}));$(\'.1 2:e\').6(\'f\');$(\'.1 2\').M(7(){$(\'.1 2\').N(\'f\');$(8).6(\'f\');4 n=$(\'.1 2\').O($(8));4 a=$(\'.1:P(\'+n+\')\');a.j($(\'.1 2\'));$(\'.1\').9();a.k();a.l(\'.5-m\').o().9();a.l(\'.5-m\').o().Q(R);S T})}})(U);',57,57,'|tabber|h2||var|widget|addClass|function|this|hide|||||first|active|tabCount|parent|codeholder|prepend|show|find|content||contents||fn|bloggerTabber|extend|codewidget|if|href|http|www|bloggersentral|com|is|nextAll|slice|else|append|css|margin|5px|padding|font|size|10px|click|removeClass|index|eq|fadeIn|700|return|false|jQuery'.split('|'),0,{}))
</script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

- Copy above code
- Add html widget & paste
- Now add 3 widgets below it
- Change tabcount to change number of tabs


.

HTML Comment Box

Add commentbox widget to blog or website.

Code is as below:

<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
 <link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" />
 <script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={  };} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&opts=470&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>

Credit: http://www.htmlcommentbox.com/
.

SWF as background in html

Below is code to use swf file as back ground in html...

<table style="width:480;height:125;position:relative;"> <tbody> <tr> <td style="position:absolute; z-index:1;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="480" height="125"> <param name="movie" value="http://www.aleosoft.com/res/flashtutorial_transparent.swf" /> <param name="quality" value="high" />
<param name="wmode" value="transparent" /> <embed src="http://www.aleosoft.com/res/flashtutorial_transparent.swf" quality="high" type="application/x-shockwave-flash" width="480" height="125" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed> </object></td> </tr><tr> <td style="position:relative; z-index:2;">

HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content
</td</tr> </tbody> </table>


 
HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content

I use table because want to use in forum but can use by using div tag.

Originally posted @ http://www.aleosoft.com/flashtutorial_flashbackground.html
.

Get facebook user link by image

Just know how to get facebook user profile, group or page link by image on facebook... 

Below is image url of facebook...



https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash4/1455014_540410212714171_251548845_n.jpg

The latter in red color is photo id & now get new url by photo id as below...

http://www.facebook.com/photo.php?fbid=540410212714171

Now easily get photo, photo album, user/group/page link by this...
.

Special Characters in HTML

Special Characters in HTML

left single quote &lsquo;
right single quote &rsquo;
single low-9 quote &sbquo;
left double quote &ldquo;
right double quote &rdquo;
double low-9 quote &bdquo;
dagger &dagger;
double dagger &Dagger;
per mill sign &permil;
single left-pointing angle quote &lsaquo;
single right-pointing angle quote &rsaquo;
black spade suit &spades;
black club suit &clubs;
black heart suit &hearts;
black diamond suit &diams;
overline, = spacing overscore &oline;
leftward arrow &larr;
upward arrow &uarr;
rightward arrow &rarr;
downward arrow &darr;
trademark sign&#x2122;&trade;
unused&#00;-
&#08;
  
horizontal tab&#09;  
line feed&#10;  
unused&#11;  
space&#32;  
exclamation mark&#33; !
double quotation mark&#34;&quot;"
number sign&#35; #
dollar sign&#36; $
percent sign&#37; %
ampersand&#38;&amp;&
apostrophe&#39; '
left parenthesis&#40; (
right parenthesis&#41; )
asterisk&#42; *
plus sign&#43; +
comma&#44; ,
hyphen&#45; -
period&#46; .
slash&#47;&frasl;/
digits 0-9&#48;-
&#57;
  
colon&#58; :
semicolon&#59; ;
less-than sign&#60;&lt;<
equals sign&#61; =
greater-than sign&#62;&gt;>
question mark&#63; ?
at sign&#64; @
uppercase letters A-Z&#65;-
&#90;
  
left square bracket&#91; [
backslash&#92; \
right square bracket&#93; ]
caret&#94; ^
horizontal bar (underscore)&#95; _
grave accent&#96; `
lowercase letters a-z&#97;-
&#122;
  
left curly brace&#123; {
vertical bar&#124; |
right curly brace&#125; }
tilde&#126; ~
ellipses&#133;&hellip;
en dash&#150;&ndash;
em dash&#151;&mdash;
unused&#152;-
&#159;
  
nonbreaking space&#160;&nbsp; 
inverted exclamation&#161;&iexcl;¡
cent sign&#162;&cent;¢
pound sterling&#163;&pound;£
general currency sign&#164;&curren;¤
yen sign&#165;&yen;¥
broken vertical bar&#166;&brvbar; or &brkbar;¦
section sign&#167;&sect;§
umlaut&#168;&uml; or &die;¨
copyright&#169;&copy;©
feminine ordinal&#170;&ordf;ª
left angle quote&#171;&laquo;«
not sign&#172;&not;¬
soft hyphen&#173;&shy;
registered trademark&#174;&reg;®
macron accent&#175;&macr; or &hibar;¯
degree sign&#176;&deg;°
plus or minus&#177;&plusmn;±
superscript two&#178;&sup2;²
superscript three&#179;&sup3;³
acute accent&#180;&acute;´
micro sign&#181;&micro;µ
paragraph sign&#182;&para;
middle dot&#183;&middot;·
cedilla&#184;&cedil;¸
superscript one&#185;&sup1;¹
masculine ordinal&#186;&ordm;º
right angle quote&#187;&raquo;»
one-fourth&#188;&frac14;¼
one-half&#189;&frac12;½
three-fourths&#190;&frac34;¾
inverted question mark&#191;&iquest;¿
uppercase A, grave accent&#192;&Agrave;À
uppercase A, acute accent&#193;&Aacute;Á
uppercase A, circumflex accent&#194;&Acirc;Â
uppercase A, tilde&#195;&Atilde;Ã
uppercase A, umlaut&#196;&Auml;Ä
uppercase A, ring&#197;&Aring;Å
uppercase AE&#198;&AElig;Æ
uppercase C, cedilla&#199;&Ccedil;Ç
uppercase E, grave accent&#200;&Egrave;È
uppercase E, acute accent&#201;&Eacute;É
uppercase E, circumflex accent&#202;&Ecirc;Ê
uppercase E, umlaut&#203;&Euml;Ë
uppercase I, grave accent&#204;&Igrave;Ì
uppercase I, acute accent&#205;&Iacute;Í
uppercase I, circumflex accent&#206;&Icirc;Î
uppercase I, umlaut&#207;&Iuml;Ï
uppercase Eth, Icelandic&#208;&ETH;Ð
uppercase N, tilde&#209;&Ntilde;Ñ
uppercase O, grave accent&#210;&Ograve;Ò
uppercase O, acute accent&#211;&Oacute;Ó
uppercase O, circumflex accent&#212;&Ocirc;Ô
uppercase O, tilde&#213;&Otilde;Õ
uppercase O, umlaut&#214;&Ouml;Ö
multiplication sign&#215;&times;×
uppercase O, slash&#216;&Oslash;Ø
uppercase U, grave accent&#217;&Ugrave;Ù
uppercase U, acute accent&#218;&Uacute;Ú
uppercase U, circumflex accent&#219;&Ucirc;Û
uppercase U, umlaut&#220;&Uuml;Ü
uppercase Y, acute accent&#221;&Yacute;Ý
uppercase THORN, Icelandic&#222;&THORN;Þ
lowercase sharps, German&#223;&szlig;ß
lowercase a, grave accent&#224;&agrave;à
lowercase a, acute accent&#225;&aacute;á
lowercase a, circumflex accent&#226;&acirc;â
lowercase a, tilde&#227;&atilde;ã
lowercase a, umlaut&#228;&auml;ä
lowercase a, ring&#229;&aring;å
lowercase ae&#230;&aelig;æ
lowercase c, cedilla&#231;&ccedil;ç
lowercase e, grave accent&#232;&egrave;è
lowercase e, acute accent&#233;&eacute;é
lowercase e, circumflex accent&#234;&ecirc;ê
lowercase e, umlaut&#235;&euml;ë
lowercase i, grave accent&#236;&igrave;ì
lowercase i, acute accent&#237;&iacute;í
lowercase i, circumflex accent&#238;&icirc;î
lowercase i, umlaut&#239;&iuml;ï
lowercase eth, Icelandic&#240;&eth;ð
lowercase n, tilde&#241;&ntilde;ñ
lowercase o, grave accent&#242;&ograve;ò
lowercase o, acute accent&#243;&oacute;ó
lowercase o, circumflex accent&#244;&ocirc;ô
lowercase o, tilde&#245;&otilde;õ
lowercase o, umlaut&#246;&ouml;ö
division sign&#247;&divide;÷
lowercase o, slash&#248;&oslash;ø
lowercase u, grave accent&#249;&ugrave;ù
lowercase u, acute accent&#250;&uacute;ú
lowercase u, circumflex accent&#251;&ucirc;û
lowercase u, umlaut&#252;&uuml;ü
lowercase y, acute accent&#253;&yacute;ý
lowercase thorn, Icelandic&#254;&thorn;þ
lowercase y, umlaut&#255;&yuml;ÿ
Alpha&Alpha;Α
alpha&alpha;α
Beta&Beta;Β
beta&beta;β
Gamma&Gamma;Γ
gamma&gamma;γ
Delta&Delta;Δ
delta&delta;δ
Epsilon&Epsilon;Ε
epsilon&epsilon;ε
Zeta&Zeta;Ζ
zeta&zeta;ζ
Eta&Eta;Η
eta&eta;η
Theta&Theta;Θ
theta&theta;θ
Iota&Iota;Ι
iota&iota;ι
Kappa&Kappa;Κ
kappa&kappa;κ
Lambda&Lambda;Λ
lambda&lambda;λ
Mu&Mu;Μ
mu&mu;μ
Nu&Nu;Ν
nu&nu;ν
Xi&Xi;Ξ
xi&xi;ξ
Omicron&Omicron;Ο
omicron&omicron;ο
Pi&Pi;Π
pi&pi;π
Rho&Rho;Ρ
rho&rho;ρ
Sigma&Sigma;Σ
sigma&sigma;σ
Tau&Tau;Τ
tau&tau;τ
Upsilon&Upsilon;Υ
upsilon&upsilon;υ
Phi&Phi;Φ
phi&phi;φ
Chi&Chi;Χ
chi&chi;χ
Psi&Psi;Ψ
psi&psi;ψ
Omega&Omega;Ω
omega&omega;ω
password dot&#9679;
bullet&#8226;

.

Show Hide Table Code

Show Hide Table Code:


<script>
function showTable(){
document.getElementById('table').style.visibility = "visible";
}
function hideTable(){
document.getElementById('table').style.visibility = "hidden";
}
</script>
<body onload="javascript:showTable()">
<input type='button' onClick='javascript:showTable();' value='show'>
<input type='button' onClick='javascript:hideTable();' value='hide'>
<table id='table' border="1">
<tr><th>
<tr><th>SNO</th><th>NAME</th><th>ADDRESS</th></tr>
<tr><td> 1</td><td> Angelina</td><td> Delhi </td></tr>
<tr><td> 2</td><td> Simran </td><td> Mumbai </td></tr>
<tr><td> 3</td><td> Sania </td><td> Chennai </td></tr>
<tr><td> 4</td><td> Martina </td><td> Kolkata </td></tr>
</table>
.

Shtyle.fm Profile Layout

<style type="text/css"> html {  background-color: #0561AC; cursor: url("http://www.shtyle.fm/fserve.do?id=60044510"), auto; background-color:  #0561AC; !important } #body { background-color: #0561AC; padding-left: 10px; margin-top: 1px; margin-left: 0px; margin-right: auto; width: 1000px; max-height: 4880px; overflow: hidden; padding: 0 0 5px; display: block; font-family: georgia ; color:#FFFFFF; text-align: left; !important } a:hover, a.redlink:hover {background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif); text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif); filter:alpha(finishopacity=0, style=2); } #peopleAdsContainer, #links, #links li, #header {max-height: 1px; width: 1px; visibility: hidden; margin-top: -1px; margin-left: -5000px;}
#notificationinfo, #suggestions {max-height: 1px; width: 1px; visibility: hidden; margin-top: -1px; margin-right: -5000px;} #profilebar {margin-top: -1; margin-left: 5px; !important }
#profilebar, #more-info-div, #ptools, #network, #profile #friends {max-width:192px; overflow: hidden; ! important } #profile #friends {position: absolute; top: 6px;  min-height: 350px; max-height: 350px; overflow: hidden; right: 10px; background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/gtbx.gif) !important }#profile #friends h2 {color: #ffffff; font-size: 12px; text-align: center; padding: 4px;  margin-top: -4px; background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/gtbx.gif) !important}  #blurb, #miniroom, #miniroom img {max-width: 1px; max-height: 1px; margin-top: -1; margin-left: -690px; visibility: hidden; !important } #footer {  padding-top: -1px; padding-bottom: 0px; text-align: center; display: block;
   max-height: 1px; max-width:1px; margin-left: -2000px;  margin-top: -10000px; !important width: 1px; !important } #actionbox { float:left; margin-top: 400px;  margin-left: -189px; border: 0px #ccc solid;  !important }  #actionbox a, #actionbox img, #actionbox div {background-color: black !important; } #profile #commentFormId {min-height: 170px; background-color: transparent !important; background: url(http://fs4.shtyle.fm/dynimg/usrphoto/2E/32/75575854_aaaaa11111111111.gif);  !important;} textarea, #profile #commentform textarea, #profile .sidebar
{border: 0 solid; background-color: transparent !important;
background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/shtylebg.png) !important;} #profile #visitors {float:right; max-width: 1px; max-height: 1px; visibility:hidden; overflow: hidden; margin-left: -1000px; margin-top: -2045px; border: 0px #ccc solid;  !important }#profile #giftbox {float:left; margin-top: -1945px; margin-left: -1000px; max-width: 1px; max-height: 1px overflow: hidden; border: 0px #ccc solid; !important }#comments {max-width: 555px; min-width: 555px; max-height: 600px; overflow: auto; !important }#profile #comments { background: url(http://fs4.shtyle.fm/dynimg/usrphoto/C0/4F/75911104_bg.jpg) !important;}#profile #comments:hover {min-width: 555px; background-color: transparent !important;
background: url(http://fs4.shtyle.fm/dynimg/usrphoto/C2/4F/75911106_bgh.jpg) !important;} #profile #comments h2 {position: absolute; width: 536px; color: #00ffff; font-size: 18px; text-align: center; padding: 4px; margin: -6px; background-color: #0000ff; }#profile #commentform span, .sidebar input {background-color: #FF00FC !important; }
#profile #comments  { text-decoration: none!important; font-family: 'georgia' !important; color:#ffffff;  !important;  font-size: 22px;  !important;  font-weight:bold;  !important; }
#profile #comments a:link, #profile #comments a:visited, #profile #comments a:hover { color: #ffffff; text-decoration: none; font-weight:bold; !important; }#body *, #body a:link, #body a:visited, #body a: hover {color: #000FFF; text-decoration: none; font-weight:normal; font-size: 14px;  !important;  }
</style>


.

Show Hide Onclick in HTML Table Cell


click me to show next column I want this hidden until text in column before is clicked click me to show column 4 this is column 4
visible column hidden column visible column hidden column


code:

<style type="text/css">
.visible {
display: block; /* for older browsers */
display: table-cell;
}

.hidden {
display: none;
}
</style>

<table border="1" id="table">
<tr>
  <td>click me to show next column</td>
  <td class="dynamic">I want this hidden until text in column before is clicked</td>
  <td>click me to show column 4</td>
  <td class="dynamic">this is column 4</td>
</tr>
<tr>
  <td>visible column</td>
  <td class="dynamic">hidden column</td>
  <td>visible column</td>
  <td class="dynamic">hidden column</td>
</tr>
</table>

<script type="text/javascript">
var table=document.getElementById('table');
var tr=table.getElementsByTagName('tr');
var qs=location.search;

function show_col(clicked_col)
{
    for(var i=0; i<tr.length; i++)
    {
        var td=tr[i].getElementsByTagName('td');
        td[clicked_col+1].className='visible';
    }

    // add opened col to querystring if not already there
    if(qs.indexOf('?')==-1)
    {
        qs='?';
    }
    if(qs.indexOf('column'+1*(clicked_col+2)+'=open;')==-1)
    {
        qs+='column'+1*(clicked_col+2)+'=open;';
    }
}

for(var i=0; i<tr.length; i++)
{
    var td=tr[i].getElementsByTagName('td');
    for(var j=0; j<td.length; j++)
    {
        // hidden cols
        if(td[j].className=='dynamic')
        {
            // display cols indicated in the querystring
            if(document.location.search.indexOf('column'+1*(j+1)+'=open')!=-1)
            {
                td[j].className='visible';
            }
            else
            {
                td[j].className='hidden';
            }
        }

        // clickable cols
        else
        {
            td[j].col_index=j;
            td[j].onclick=function()
            {
                show_col(this.col_index);
            }
        }
    }
}

// update url
var new_url=window.location.href;
if(location.search)
{
    new_url=new_url.replace(location.search,'');
}
setTimeout("window.location.replace(new_url+qs);", 30000); // delay in milliseconds




function show_col(clicked_col)
{
    var col_state;

    for(var i=0; i<tr.length; i++)
    {
        var td=tr[i].getElementsByTagName('td');

        if(td[clicked_col+1].className=='visible')
        {
            td[clicked_col+1].className='hidden';
            col_state='closed';
        }

        else if(
        td[clicked_col+1].className=='dynamic' ||
        td[clicked_col+1].className=='hidden'
        )
        {
            td[clicked_col+1].className='visible';
            col_state='opened';
        }
    }

    // add opened col to querystring if not already there
    if(col_state=='opened')
    {
        if(qs.indexOf('?')==-1)
        {
            qs='?';
        }
        if(qs.indexOf('column'+1*(clicked_col+2)+'=open;')==-1)
        {
            qs+='column'+1*(clicked_col+2)+'=open;';
        }
    }

    // remove closed col from querystring
    else if(col_state=='closed')
    {
        if(qs.indexOf('column'+1*(clicked_col+2)+'=open;')!=-1)
        {
            qs=qs.replace('column'+1*(clicked_col+2)+'=open;','');
        }

        // just to clean up
        if(qs=='?')
        {
            qs='';
        }
    }

}
</script>
.

Shtyle.FM Profile Layout

<style type="text/css">

#body {
margin-top: 1px;
margin-left: 10px;
margin-right: auto;
width: 1000px;
        max-height: 4880px;
        overflow: hidden;
    padding: 0 0 5px;
    display: block;
    font-family: georgia ;
    color:#FFFFFF;
    text-align: left;
   !important }

#peopleAdsContainer, #links, #links li, #header {max-height: 1px; width: 1px; visibility: hidden; margin-top: -1px; margin-left: -5000px;}

#notificationinfo, #suggestions {max-height: 1px; width: 1px; visibility: hidden; margin-top: -1px; margin-right: -5000px;}

#profilebar {margin-top: -1; margin-left: 5px;  !important }

#profilebar, #more-info-div, #ptools, #network, #profile #friends {max-width:192px; overflow: hidden; ! important }

#profile #friends {position: absolute; top: 6px;  max-height: 150px; overflow: hidden; right: 5px; !important }

#profile-status, #profile-url, #profile-url span, #blurb, #miniroom, #miniroom img {max-width: 1px; max-height: 1px; margin-top: -1; margin-left: -690px; visibility: hidden; !important }

#footer {
padding-top: -1px;
    padding-bottom: 0px;
    text-align: center;
display: block;
   max-height: 1px; max-width:1px; margin-left: -2000px;  margin-top: -10000px; !important
    width: 1px;
    !important }

#profile #friends {max-height: 350px; overflow: hidden; !important }

#actionbox {float:left; margin-top: 370px;  margin-left: -189px; border: 0px #ccc solid; !important }

#profile #visitors {float:right; max-width: 1px; max-height: 1px; visibility:hidden; overflow: hidden; margin-left: -1000px; margin-top: -245px; border: 0px #ccc solid;  !important }

#profile #giftbox {float:left; margin-top: -145px; margin-left: -1000px; max-width: 1px; max-height: 1px overflow: hidden; border: 0px #ccc solid; !important }

#comments {border: 0px #ccc solid; max-width: 565px; min-width: 565px; margin-top: 400px; overflow: hidden;  background-color: #51AAE9;  !important }

</style>

<table id="centertop" style="position: absolute; top: 6px; left: 195px; width:845px; height: 361px; border:0px solid black; background-color: #5194CA;" align="center"> <tr > <td align="center"> Content will here </td> </tr> </table>


<table id="right2" style="position: absolute; top: 370px; left: 595px; width:652px; height: 4500px; border:0px solid black; background-color:#5194CA;" align="center"> <tr > <td align="center" valign="top"> Content will here </td> </td> </tr> </table>

.

Shtyle.fm Profile Layout

This is my Shtyle.FM Profile Layout (7 Aug 2013)


<style type="text/css">
html {cursor: url("http://www.shtyle.fm/fserve.do?id=60044510"), auto; background-color: #000000 ;  background-image: url('http://files.myopera.com/carolinemy/albums/14216332/nuoc.gif');  background-attachment: scrolling; background-repeat: repeat; !important } #body {
cursor: url("http://www.shtyle.fm/fserve.do?id=60044510"), auto;  margin-top: 1px; margin-left: 10px; margin-right: auto; width: 1000px; overflow: hidden; padding: 0 0 5px; display: block; text-align: left; background-color: #0163b3 ;  background-image: url('http://files.myopera.com/carolinemy/albums/14216332/nuoc.gif');  background-attachment: scrolling; background-repeat: repeat; !important } #header { width: 100%; height: 450px; background-color: #000000 ;
background: url(http://i2.tagstat.com/p1/0/WOCEAcilqCH5Gmh5RH_vVZTOc-cpwh461ESao2htLRk=.gif); background-repeat: repeat; margin-left: 10px; margin-right: 0px; text-align: left; color:gold; font-face: georgia; font-size: 72px; font-weight: bold; ! important } #profile #more-info, #profile #network a, #profile #ptools a,  #miniroom, #miniroom img, #profile-miniroom-container, #profile-miniroom-container a  {filter:alpha(opacity=0);-moz-opacity:0;opacity:0;"  !important; } #avatar { margin-left: 10px; max-height: 205px; color: black; ! important } #profile #avatar { font-size: 0.001em; color: black; ! important } #profile #avatar #ptools { margin-top:0px;clear:left; font-size:0.001em; max-height: 1px; ! important } #profile #avatar #ptools div {
font-size:0.001em; margin-left:4px;float:left;clear:left;margin-bottom:0px; max-height: 1px; ! important }#profile #avatar #network { font-size:0.001em;margin-top:0px; padding-left:0px;   ! important } #profile #avatar #network div { float:left; clear:left; margin-bottom:0px;  max-height: 1px;  ! important }  #blurb {border: 1px solid transparent;} textarea, #profile #commentform textarea, #profile .sidebar, h2, #headermiddle .hbutton {background-color: transparent !important;
background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/shtylebg.png) !important;} a:hover, a.redlink:hover {background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif); text-decoration:none; border:0px solid;}  a:hover img {background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif); filter:alpha(finishopacity=0, style=2); }  #profile #friends {background-color: transparent !important; background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/gtbx.gif) !important;} #profile #visitors {background-color: transparent !important; background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/sbg.gif) !important;}
#profile #gifts {background-color: transparent !important; background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/azazazazazazz.gif) !important;}
#miniroom  {min-height: 380px;} #blurb { min-height: 711px;background-color: transparent !important;
background: url(http://sphotos-e.ak.fbcdn.net/hphotos-ak-ash4/1012713_638909362785841_671611390_n.jpg); background-repeat:no-repeat; !important;}  #profile #avatar, #profile #profilebar {background-color: transparent !important;
background: url(http://fs4.shtyle.fm/dynimg/usrphoto/C0/2E/75574976_a.gif); background-repeat:no-repeat; !important;}
#profile #profilebar img  { filter:alpha(opacity=0);-moz-opacity:0;opacity:0;"  !important; } #profile #commentFormId {min-height: 170px; background-color: transparent !important;
background: url(http://fs4.shtyle.fm/dynimg/usrphoto/2E/32/75575854_aaaaa11111111111.gif);  !important;} #profile #commentform span, .sidebar input {background-color: #FF00FC !important; } #profile #profile-status {background-color: transparent !important; background: url(http://fs4.shtyle.fm/dynimg/usrphoto/4C/3F/75579212_prfstatus.gif); background-repeat:no-repeat;  !important;} #profile #comments .expandoption img:hover, #profile #friends img:hover {
-moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); } #profile #gifts img:hover, #profile #visitors img:hover { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } #profile #comments, #body *  { text-decoration: none!important; font-family: 'georgia' !important; color:#0080FF;  font-weight:bold;  !important; } #profile #comments a:link, #profile #comments a:visited, #profile #comments a:hover { color: #000FFF; text-decoration: none; font-weight:bold; !important; }  #profile #comments {min-width: 555px; background-color: transparent !important; background: url(http://fs4.shtyle.fm/dynimg/usrphoto/C0/4F/75911104_bg.jpg) !important;} #profile #comments:hover {min-width: 555px; background-color: transparent !important; background: url(http://fs4.shtyle.fm/dynimg/usrphoto/C2/4F/75911106_bgh.jpg) !important;}  #links {max-height: 1px; margin-top: -50px; !important } #more-info-div, #more-info, #ptools, #ptools img, #piso, #gold, #piso a, #gold a, #network, #peopleAdsContainer, #peopleAds {max-height: 1px; max-width:1px; margin-left: -1000px;  margin-top: -1px;  background-color: #0163b3 ;  background-image: url('http://files.myopera.com/carolinemy/albums/14216332/nuoc.gif');  background-attachment: scrolling; background-repeat: repeat; !important } #headerright,  #profile div.profileright.sidebar,  #profile #suggestions .psuggest a.afriend, #div.home-right-head, #notificationinfo {max-height: 1px; max-width:1px; margin-right: -10000px;  margin-top: -1px;   background-color: #000000 ;  background-image: url('http://files.myopera.com/carolinemy/albums/14216332/nuoc.gif');  background-attachment: scrolling; background-repeat: repeat; !important } #footer { padding-top: -1px;    padding-bottom: 0px;
    text-align: center; display: block;  max-height: 1px; max-width:1px; margin-left: -2000px;  margin-top: -10000px; !important; width: 1px; background-color: #0163b3 ;  background-image: url('http://files.myopera.com/carolinemy/albums/14216332/nuoc.gif'); background-attachment: scrolling; background-repeat: repeat; !important } #centerbox, #actionbox a, #actionbox img, #actionbox, #actionbox div {background-color: black !important; }
</style>

.

Shtyle.fm Layout

I try to change layout of my one social network http://www.shtyle.fm
My Profile link:  http://www.shtyle.fm/pjoshi235 

Before change layout of my profile I do some rough work mainly by help of
      http://www.shtyle.fm/css/fundoo-light.css?145
      http://w3schools.com/
      http://www.dynamicdrive.com/

Mainly I want to use all the space of my profile. So I do...
         Make cover like other communities...
        At left side many space is useless & blank...
        Space at right side not useful for profile viewer...
So I make changes...
         Create space for cover...
         Move Avatar & Friends to left...
         Hide right sidebar...

Below is my shtyle.fm profile layout code... Anybody can use it... But before to use my code first save your code in text or word document... If any need, leave comment or contact me...

Text in red color is images, change it or save to your photo-hosting site...

<style type="text/css">
      html, body {  cursor: url("http://www.shtyle.fm/fserve.do?id=60044510"), auto; background-color: #0163b3 ; background-image: url('http://i2.tagstat.com/p1/0/WOCEAcilqCH5Gmh5RH_vVZTOc-cpwh461ESao2htLRk=.gif');  background-attachment: scrolling; background-repeat: repeat; ! important }

#body { margin-top: 1px;  margin-left: 10px; margin-right: auto;  width: 1000px; padding: 0 0 5px; display: block; text-align: left; !important }

      #header { width: 100%; height: 450px; background-color: #0163b3 ; background: url(http://fs4.shtyle.fm/dynimg/usrphoto/4E/FA/75627086_headerbg.png); background-repeat: repeat; margin-left: 0px; margin-right: 0px; text-align: left; color:gold; font-face: georgia; font-size: 72px; font-weight: bold; ! important }

 #links, #links ul li a span.notif { visibility: hidden; height: 1px; margin-top: -50px; ! important }

#peopleAdsContainer, #peoplead-add-loading-top, #peoplead-add-link-top, #peoplead-add-link-top span { color: transparent;  max-height:1px; margin-left: -2000px; margin-top: 0px; visibility: hidden; ! important }
 
 #blurb, #profile #notificationinfo, li, #links li.first a, #links li.last a, #links a {border: 1px solid transparent;}

#headermiddle .hbutton, #profile #comments,  #mainbar, #floater, #links, textarea, #profile #comments .updateCommentLink, #notifications.sidebar, #mainbar.sidebar, #profile #slideshow, #profile .sidebar, #profile #mainbar, #profile #suggestions .psuggest a.afriend, #profile div#actionbox div, #links li ul
{border: 1px solid #000;}

 #profile div#actionbox div, #links, .sidebar input, textarea, #profile #commentform textarea, #profile .sidebar, h2, #headermiddle .hbutton, #profile #comments {background-color: transparent !important;
background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/shtylebg.png) !important;}

#profile #comments :hover, #profile #comments .updateCommentLink:hover,  #profile #comments td:hover {background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/shtylebg2.png) !important;}

   #header { width: 100%; height: 450px;  background-color: #0163b3 ;  background: url(http://fs4.shtyle.fm/dynimg/usrphoto/4E/FA/75627086_headerbg.png); background-repeat: repeat;      margin-left: 0px; margin-right: 0px;  text-align: left; color:gold;  font-face: georgia; font-size: 72px; font-weight: bold; ! important }

#headermiddle a.hbutton, .sidebar input, a:hover, * {text-decoration: none!important; font-family: 'georgia'!important; color: #FFF!important; font-weight: bold!important;}

#headermiddle a.hbutton:hover, .sidebar input:hover, a {text-decoration: none!important; text-shadow: 1px 1px 1px #000!important; color: #bfbfbf!important; font-weight: bold!important;}

a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif);}

a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif); text-decoration:none; border:0px solid;}

a:hover img {background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif); filter:alpha(finishopacity=0, style=2); }

 #profile #friends {background-color: transparent !important; background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/gtbx.gif) !important;}

#profile #visitors {background-color: transparent !important; background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/sbg.gif) !important;}

#profile #gifts {background-color: transparent !important; background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/azazazazazazz.gif) !important;}

#profile #commentFormId {min-height: 170px; background-color: transparent !important;
background: url(http://fs4.shtyle.fm/dynimg/usrphoto/2E/32/75575854_aaaaa11111111111.gif);  !important;}

#profile #commentform span {background-color: #FF00FC !important; }

#footer, #notificationinfo, #suggestions, #raise-profile-link, #floater, #profile div.profileright.sidebar, iframe  {max-height: 1px;margin-right: -500px; !important}
</style>

<style type="text/css">
#profile #comments .expandoption img:hover, #profile #friends img:hover {
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg); }

#profile #gifts img:hover, #profile #visitors img:hover {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg); }</style> 
.
You are the essence of essence....
Be sure of what you look for...!
It is you... It is in you...!

Online Radio...!