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




News Update :
Showing posts with label Template. Show all posts
Showing posts with label Template. 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
.

Creating own blogger template from scratch

I always try to make my own blogger template. I try many times by searching but failed.

Here is basic code of my template. I save it & see my blog homepage is blank.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin>
  </b:skin>
</head>

<body>

  <b:section id='header' class='header' maxwidgets='' showaddelement='yes'>
  </b:section>

</body>
</html>




Now I decide look up of homepage. I like 2 columns.  I copy two column html layout from dynamic drive & make some changes for blogger.
css paste between <b:skin>  </b:skin>

Now I try to add some widgets to my template but get error message: widget must be in section. I can't understand but try again as below:


  <b:section id='Right1' class='sidebar' maxwidgets='' showaddelement='yes'>
 <b:widget id='HTML1' locked='false' title='Test HTML widget' type='HTML' />
  </b:section>

save & check. It works...!
I want to make a different type of home page, in which many columns, different layout of home & post.
I add css after </b:skin> code as below

This is for to show on homepage only:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Code here...
</b:if>
</style>

This is for to hide on homepage only:

<style type='text/css'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
Code here...
</b:if>
</style>

Posts is main feature in any blog. I add it by below code..

 <b:section id='main' class="main" maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
  </b:section>

Make some changes...
I want to add many things in small space so add tabs in sidebar...

Below is the code for adding tabs in blogger...


<script type='text/javascript'>
//<![CDATA[
function haakblog_oom(NBTID, id)
{
  var haakblog = document.getElementById(NBTID);
  var NBTs = haakblog.firstChild;
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
  var NBT = NBTs.firstChild;
  var i   = 0;
  do
  {
    if (NBT.tagName == "A")
    {
      i++;
      NBT.href      = "javascript:haakblog_ubah('"+NBTID+"', "+i+");";
      NBT.className = (i == id) ? "Active" : "";
      NBT.blur();
    }
  }
  while (NBT = NBT.nextSibling);
  var Halamans = haakblog.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function haakblog_ubah(NBTID, id) { haakblog_oom(NBTID, id);
}
function haakblog_inisial(NBTID) { haakblog_oom(NBTID,  1);
document.write('');}
//]]>
</script>
<style>
div.haakblog div.NBTs {
height: 24px;
overflow: hidden;
}
div.haakblog div.NBTs a:hover, div.haakblog div.NBTs a.Active {
background-color: #eee;
}
div.haakblog div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.haakblog div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.haakblog div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.haakblog div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
<form action="haakblog.html" method="get">
<div id="haakblog" class="haakblog">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2  Title</a> <a>Tab 3  Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
</div>
</div></form>

I want to add one feature in comments. Enable youtube videos, images, smiley, html...


Add below code just before </head>


<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://yourjavascript.com/30014513125/youtubevideoinbloggercomment.js' type='text/javascript'/>

Now search for
<div class='post-footer-line post-footer-line-3'>

Add below code below it...


<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons <a href="http://pjoshi235.blogspot.com">@</div></a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold; font-color:#000000;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/>:)
<img src='http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif'/>:(
<img src='http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif'/>:))
<img src='http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif'/>:((
<img src='http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif'/>=))
<img src='http://1.bp.blogspot.com/-8C5UH12mxf0/UTIzmsxczDI/AAAAAAAABDA/2seHdqLVQ6Q/s1600/suicide.gif'/>=D&gt;
<img src='http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif'/>:D
<img src='http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif'/>:P
<img src='http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif'/>:-O
<img src='http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif'/>:-?
<img src='http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif'/>:-SS
<img src='http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif'/>:-f
<img src='http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif'/>d(
<img src='http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif'/>:-*
<img src='http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif'/>b-(
<img src='http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif'/>h-(
<img src='http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif'/>g-)
<img src='http://2.bp.blogspot.com/--o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif'/>5-p
<img src='http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif'/>y-)
<img src='http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif'/>c-)
<img src='http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif'/>s-)
<img src='http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif'/>d-)
<img src='http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif'/>w-)
<img src='http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif'/>:-h
<img src='http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/></div></a></span>
</div></b:if>

I can add more images as smiley...

Now go to bottom.
Add below code just before  </body>



<script src='http://yourjavascript.com/3544111646/youtubevideos.js' type='text/javascript'/>
<script src='http://yourjavascript.com/5611007145/pics-comments.js' type='text/javascript'/>
<script src='http://yourjavascript.com/0516141543/kolobok-threaded.js' type='text/javascript'/>
<script src='http://yourjavascript.com/4755111456/helplogger-blogspot-com-smileys.js' type='text/javascript'/> <noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>.</span></a></noscript>
<script src='http://yourjavascript.com/1465951181/nccode.js' type='text/javascript'/>


Add below code to change style of avatar image in comments...


.comments .avatar-image-container {
width: 40px;
height: 40px;
max-height: 40px;
margin:0px 10px 0 5px;
padding: 0px;
border: 4px solid #4D90F0;
border-radius:40px;
}

.comments .avatar-image-container img {
overflow:hidden;
width: 40px;
height: 40px;
max-width: 40px;
border:0 !important;
border-radius:40;
}

Credit:
- http://www.w3schools.com
- http://postoneeighth.blogspot.com
- http://www.dynamicdrive.com
- http://helplogger.blogspot.com
- http://www.haakblog.com
.

Scrollbar in Select option

Below is code to add scrollbar in option select dropdown...
I use it for html pages to show them in a frame...


<html>
<head>
<title>Dreamland</title>
<style type="text/css">
html,body{background:#97C8FF;

}#left{width:115px;float:left;height:75px;overflow:hidden;}

#right{width:150px;float:right;height:75px;overflow:hidden;}
</style>

<script language="JavaScript" type="text/javascript">
<!--
function Size(obj,s){

Obj=obj;
obj.size=s;
setTimeout('document.onclick=function(){ Obj.size=1; document.onclick=null; }',1000);
}
//-->
</script>
</head>
<body>

<div style="width:270px; height:185px; overflow: hidden;">
<div id="left">
<form action="../">
<select onChange="window.open(this.options[this.selectedIndex].value,'wid')" onclick="Size(this,4);" class="select" style="width:115px;">
<option value="">Select</option>
<option value="http://a.html">a</option>
<option value="http://b.html">b</option>
<option value="http://c.html">c</option>
<option value="http://d.html">d</option>
<option value="http://e.html">e</option>
<option value="http://f.html">f</option>
<option value="http://g.html">g</option>
<option value="http://h.html">h</option>
<option value="http://i.html">i</option>
</select>
</form>
</div>

<center>
<iframe id="wid" frameborder="0" height="100" width="230" scrolling="no" src="asdfghjkl.html"></iframe>
</center>
.

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/
.

Full html code of shtyle profile

<style type="text/css">
#nav {
background-color:  transparent;
    font-family: georgia;
    font-weight: bold;
    font-size: 110%;
    width: 125px;
     margin-top: 5px;
}
  #nav td a:link, #nav a:visited {
    color: #ffffff;
    text-decoration: none;
}
#nav td a:hover {
    color: #000000;
    text-decoration: none;
}
#nav th a {
    color: #ffffff;
    text-decoration: none;
}
  #nav a {
    display: block;
    padding: 0 10px;
}
  #nav td {
    background-color:  #2175bc;
    margin: 0;
    position: relative;
    width: 125px;
    padding: 2px;
border-left: 10px solid #0D548E;
border-right: 10px solid #508fc4;
    border-radius: 15px;
    text-align: center;
}
 #nav th {
    background-color:  #0D548E;
    margin: 0;
    position: relative;
    width: 125px;
    padding: 2px;
border-left: 10px solid #000000;
border-right: 10px solid #508fc4;
    border-radius: 15px;
  text-align: center;
  height: 35px;
}
#nav td:hover {
border-left: 10px solid #0D548E;
border-right: 10px solid #5ba3e0;
background-color: #59AAEC;
color: black;
}

html {background-color: #0561AC; background-color:  #0561AC; !important }

#body {
       background-color: #0561AC;
       padding-left: 10px;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
        max-height: 1000px;
        overflow-y: scroll;
        padding: 0 0 5px;
    display: block;
   font-family: georgia;
   font-size: 12px;
    color:#FFFFFF;
    text-align: left;
   cursor: url(http://fs4.shtyle.fm/dynimg/usrphoto/5B/07/76351323_mukti.png),  progress !important; }

#links, #links li, #notif-root-div, frame, #footer, #profile, #peopleAdsContainer,#header,  #notificationinfo   {margin-top: -10000px; margin-left: -10000px;}

#friendlinessLevel, #notif-root-div, #notif-root, #notif-root-div span, #notif  {max-height: 1px; width: 1px;  ; margin-top: -1px; margin-right: -10000px; !important}

#borderradius {
border-radius: 25px; -o-border-radius: 25px; -moz-border-radius: 25px; -icab-border-radius: 25px; -khtml-border-radius: 25px; -webkit-border-radius: 25px; border-radius:25px;
}

#actionbox { float: right; position: absolute; top: 380px; left: 480px; border: 0px #ccc solid; font-family: georgia; font-size: 12px; color: #ffffff;  !important }
 #actionbox a, #actionbox img, #actionbox div, #commentform table {background-color: black !important; }

#commentform  {max-height: 370px; min-height: 370px; float:right; position: absolute; top: 400px; left: 480px;  max-width:555px; background:  url(http://fs4.shtyle.fm/dynimg/usrphoto/2E/32/75575854_aaaaa11111111111.gif);  !important; }

#profile #commentform textarea {color: #ffffff !important; font-size:18px !important;}
textarea {min-height: 130px; !important; background: transparent;}

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

#profile .sidebar, textarea, #profile #commentform textarea
{ border: 0 solid; background-color: black !important;
background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/shtylebg.png) !important;}

#profile #comments {max-width: 555px; min-width: 555px; max-height: 555px; position: absolute; top: 680px; left: 480px;  padding-top: 10px; overflow-y: scroll; overflow-x: hidden; cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur),progress; text-decoration: none!important; font-family: 'georgia' !important; color:#ffffff;  !important;  font-size: 22px;  !important;  font-weight:bold; max-width: 555px;  line-height:20px; overflow-y: scroll; background-image: url(http://fs4.shtyle.fm/dynimg/usrphoto/C0/4F/75911104_bg.jpg) !important;}

#profile #comments:hover {min-width: 555px; background-color: black; background-image: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/bgh-1.png) !important;}

#profile #commentform span, .sidebar input {background-color: #FF00FC !important; }

#profile #comments .expandoption img:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);}

#profile #comments a:link, #profile #comments a:visited, #profile #comments a:hover {color: #ffffff; text-decoration: none; font-weight:bold; !important; max-width: 555px; line-height:20px;  overflow-y: scroll;   !important; }

#profile #comments h2 span {position: absolue;  .001em; color: transparent; font-size: 0.001; text-align: center; padding: 0px; left: -5000px; top: -300px; background-color: transparent; ! important}

</style>


<table id="borderradius" style="position: absolute; top: 5px; left: 10px; width:1235px; height: 45px; border: 0px solid transperant; background-color: #000000;" align="center">
<tr >
 <td align="left" valign="middle" style="width:600px; padding-left:10px; text-align:center; font-family:Cursive;font-size:23px;color: #FCFFDB; font-style:italic;font-weight:bold;text-shadow:2px 4px 4px gold;">
A Heart in Love with Beauty  Never Grows Old...!  </td> <td align="right" width="615px">
<table id="nav" align="center" style="margin-right: 10px;">  <tr >
 <td id="nav" valign="middle"> <a href="/home.do">Home</a>   </td> <td><a href="/profile.do">Profile</a></td>
    <td><a href="/comments.do">Comments</a></td>  <td> <a href="/pokeFriends.do">Poke</a> </td>
     <td><a href="/wbrowse.do">Writings</a> </td>
    <td><a href="/quizHome.do">Quiz</a></td>
    <td><a href="/rbrowse.do">Music</a>
 </tr> </table> </tr> </table>

<table id="actheader1" style="position: absolute; top: 380px; left: 415px; width:55px; height: 290px; border: 0px solid transperant; border-radius:25px; background-color: black; font-size: 22px; font-weight: bold;" align="center"> <tr> <td align="left" style="text-align:center;" valign="top" > <br /><img src="http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Forward%20Arrow.png" width="55px" /> <br /> F<br />o<br />r<br />m </td></tr></table>

<table id="cmtheader1" style="position: absolute; top: 680px; left: 415px; width:55px; height: 575px; border: 0px solid transperant; border-radius:25px; background-color: black; font-size: 32px; font-weight: bold;" align="center"> <tr> <td align="left" style="text-align:center;" valign="top" > <br /><img src="http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Forward%20Arrow.png" width="55px" /> <br /> <br /> <br />U<br /><br />P<br /><br />D<br /><br />A<br /><br />T<br /><br />E<br /><br />S </td></tr></table>


<table id="borderradius" style="position: absolute; top: 55px; left: 10px; width:350px; height: 320px; border: 0px solid transperant; background-color: #033863; cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur),progress;" align="center"  class="borderradius">
<tr >
<td align="left" valign="top" style="padding-left: 10px" rowspan="2">
<table id="nav">
<tr><td colspan="3" height="235px"> <img alt="" src="http://fs4.shtyle.fm/dynimg/usrphoto/49/7D/77299017_z1.gif" height="110" align="top"> <br /> <br />
<marquee align="bottom" direction="up" width="300" height="90" style="font-size: 110%; text-align; center;" scrollamount="2">
I am Dr.Pankaj Joshi <br /> from:  Gujarat, India.<br /><br /> I am interested in everything <br />but mainly Arts & Music.<br /> I like to do different, <br /> you can see my profile layout is different. <br />  I learn all these by my shtyle friends...!<br />  <br /> You may join with me <br /> on my other networks also <br /> <br /> Just search <br /> <br /> <br /> pjoshi235 <br /> <br />  It is my user name on most popular websites... <br /> <br /><a href="http://pjoshi235.blogspot.com><img src="http://i1193.photobucket.com/albums/aa342/pjoshi2351/logo/dream-1.gif" width="275"></a>
</marquee></td> </tr> <tr> <td><a href="/editProfile.do">Edit</a></td><td><a href="/files.do">Files</a></td> <td><a href="/editAvatar.do">Avatar</a></td> </tr>
<tr> <td><a href="/mailInbox.do">Mail</a></td>  <td><a href="/games.do">Games</a></td> <td><a href="/friends.do">Friends</a> </td>
</tr>
   <tr>   <td colspan="3"><a href="/uploadPhotos.do?aid=22179736" target="_blank">Upload Photos</a></td> </tr>
</table>
</td> </tr> </table>

<table id="borderradius" style="position: absolute; top: 55px; left: 415px; width:350px; height: 320px; border: 0px solid transperant; background-color: #033863; cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur),progress;" align="center"  class="borderradius">
<tr >
<td align="center" valign="bottom" style="margin-right:30px;">  <br />
<font size="4" face="georgia" color="white"><i> <b>Online FM Radio </b></i></font>  <br />  <br />  <audio width="300" height="25" controls="controls" autoplay="autoplay" loop="loop"><source src="http://5303.live.streamtheworld.com/ARNCITY_SC" type="audio/mpeg"/><source src="http://5303.live.streamtheworld.com/ARNCITY_SC" type="audio/webm"/>Your browser does not support HTML5 audio. Please update your browser to view this media content.</audio>  <br /> <font size="3"  face="georgia" color="white">  Online Hindi Music from Dubai... 24*7 </font>
</td>
</tr>
 <tr>
<td align="center" valign="middle">
<table border="0" align="center">
<style>
.r{}
.pic {
  height: 35px;
  width: 35px;
  overflow: hidden;
  margin: 0px;
  border: 0px solid white;
}

.r{}
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.morph:hover {
  -webkit-transform: rotateY(180deg);
     -moz-transform:rotateY(180deg);
       -o-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
</style>
<tr>
<td align="center" valign="bottom" colspan="8" style="margin-right:20px;">
<font size="4" face="georgia" color="white"><i> <b>My Networks...</b></i></font>  <br />
</td> </tr>
<tr><td align="center" valign="middle" class="morph pic" colspan="8">
<a href="http://pjoshi235.blogspot.com" target="_blank"> <img src="http://i1193.photobucket.com/albums/aa342/pjoshi2351/logo/dream-1.gif" height="65px" border="0"></img> </a> <br /><br /> </td> </tr><tr>
<td  class="morph pic"><a href="http://www.facebook.com/pjoshi235" target="_blank"> <img src="http://fs4.shtyle.fm/dynimg/usrphoto/3E/37/76166974_fblogo.png" height="35" border="0" ></a></td>
<td  class="morph pic"><a href="http://www.twitter.com/pjoshi235" target="_blank"> <img src="http://fs4.shtyle.fm/dynimg/usrphoto/62/37/76167010_twittwer.png" height="35" border="0" > </a></td>
<td  class="morph pic"> <a href="https://plus.google.com/110829494565360035889" target="_blank" border="0" > <img src="http://fs4.shtyle.fm/dynimg/usrphoto/40/37/76166976_google_plus_logo_red_265px.png" height="35" border="0" > </a> </td>
<td  class="morph pic"> <a href="http://www.linkedin.com/in/pjoshi235" target="_blank"><img src="http://fs4.shtyle.fm/dynimg/usrphoto/42/37/76166978_LinkedIn_logo.png" height="35" border="0" ></a></td>
<td  class="morph pic"> <a href="http://www.youtube.com/pjoshi235" target="_blank"><img src="http://fs4.shtyle.fm/dynimg/usrphoto/98/37/76167064_youtube.png" height="35" border="0" > </a> </td>
<td  class="morph pic"><a href="http://feeds.feedburner.com/pjoshi235" target="_blank"><img src="http://fs4.shtyle.fm/dynimg/usrphoto/48/37/76166984_rss_logo.png" height="35" border="0" ></a></td>
<td  class="morph pic"> <a href="http://my.opera.com/pjoshi235" target="_blank"><img src="http://static.myopera.com/community/graphics/dexter/myo-icon.png" height="35" border="0" ></a> </td><td  class="morph pic"> <a href="http://www.shtyle.fm/mailCompose.do?toUserid=23013687" target="_blank"><img src="http://fs4.shtyle.fm/dynimg/usrphoto/DB/38/76167387_email.png" height="35" border="0" ></a> </td>

</tr></table> </td>
</tr> </table>


<table id="borderradius" style="position: absolute; top: 55px; right: 20px; width:350px; height: 320px; border: 0px solid transperant; background-color: #033863; cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur),progress;" align="center"  class="borderradius"> <tr>
<td align="center" id="sshow">
<EMBED src="http://dreamland.co.nf/slideshow/slideshow.swf?xml_source=http://dreamland.co.nf/slideshow/slideshow.xml"
quality="high"
bgcolor="#000000"
WIDTH="320"
HEIGHT="320"
NAME="slideshow"
allowScriptAccess="sameDomain"
swLiveConnect="true"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</td></tr></table>

<table id="borderradius" style="position: absolute; top: 1260px; left: 10px; width:1235px; height: 45px; overflow: auto; border:0px solid black; " align="left">
 <td id="borderradius" style="height:60px; width: 1235px; padding-right:10px;"  align="right" " bgcolor="black"> <font face="georgia" color="white" size="5"> &copy <a href="http://pjoshi235.blogspot.com" target="_blank">DREAMLAND : Dr.Pankaj Joshi</a> </font> <br /></td> </tr>  </table>

<table id="borderradius" style="position: absolute; top: 405px; right: 20px; width:170px; height: 850px; border: 0px solid transperant; background-color: #033863; cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur),progress;" align="center">
<tr >
<td align="left" valign="top"> <br />   <EMBED src="http://7feeds.com/rssinformer.swf?version=1.4&title_format=center/_sans/16/0x000000/b/ni/nu&subtitle_text=Powered%20by&subtitle_format=center/verdana/11/0x000000/b/ni/nu&feed_title_format=left/arial/14/0x6599ff/b/ni/nu&feed_date_format=left/arial/12/0xC8BDBD/b/ni/nu&feed_copy_format=left/arial/12/0xC8BDBD/b/i/nu&feed_text_format=left/arial/12/0x666666/nb/ni/nu&body_bgcolor=0xd1e0ff&title_bgcolor=0xEFEFEF&subtitle_bgcolor=0xE3E3E3&footer_bgcolor=0xd1e0ff&feed_bgcolor=0xffffff&feed_highlight=0xe7f0ff&border_color=0x6599ff&summary_length=300&scroll_speed=50&item_spacing=12&scroll_buttons=1&num_of_entries=20&pause_time=3000&show_publish_time=1&show_entry_summary=1&show_entry_copyright=0&show_footer=1&use_rounded_corners=1&open_new_window=1&data_url=http://7feeds.com/feed.php&feed_url=http%3A%2F%2Fpjoshi235%2Eblogspot%2Ecom&strip_tags=0&footer_powered_format=right/_sans/11/0x666666/nb/ni/nu&footer_feedo_format=left/_sans/11/0x6599ff/nb/ni/nu&x_size=170&y_size=400&feed_back_color=0xf7faff&feeds_num_color=0x6599ff&buttons_onpress_color=0x6599ff&buttons_rollout_color=0x989898&show_body=1&widget_name=Dreamland&used_theme=1&lang1=Loading...&lang2=Powered%20by"
quality="high"
bgcolor="#000000"
WIDTH="170"
HEIGHT="400"
allowScriptAccess="sameDomain"
swLiveConnect="true"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</td> </tr> </table>
<table id="borderradius" style="position: absolute; top: 385px; left: 20px; width:350px; height: 870px; border: 0px solid transperant; background-color: #033863; cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur),progress;" align="center">
<tr >
<td align="left" id="flickr" valign="top"> <br />
<object width="350" height="233"> <param name="flashvars" value="offsite=true&lang=en-us&page_show_url=%2Fphotos%2Fpjoshi235%2Fsets%2F72157636190623853%2Fshow%2Fwith%2F10088955304%2F&page_show_back_url=%2Fphotos%2Fpjoshi235%2Fsets%2F72157636190623853%2Fwith%2F10088955304%2F&set_id=72157636190623853&jump_to=10088955304"></param> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=124984"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=124984" allowFullScreen="true" flashvars="offsite=true&lang=en-us&page_show_url=%2Fphotos%2Fpjoshi235%2Fsets%2F72157636190623853%2Fshow%2Fwith%2F10088955304%2F&page_show_back_url=%2Fphotos%2Fpjoshi235%2Fsets%2F72157636190623853%2Fwith%2F10088955304%2F&set_id=72157636190623853&jump_to=10088955304" width="350" height="233"></embed></object>
</td> </tr> </table>
.

Slideshow of Google Plus Album

Google Plus photos save on picasa.

View albums on picasa by link below.

https://picasaweb.google.com/lh/myphotos?noredirect=1

1 -  Look at right & click on embed.
      Copy code & paste to blog, website, etc.

2 -  Open album & do as above. This is slideshow of album.

Short link to embed album is https://picasaweb.google.com/lh/getEmbed

Below previw of my album...




.

Shtyle.fm Profile Layout

 This is my shtyle profile full code...

Preview...





HTML Code :-

<style type="text/css">

html {background-color: #0561AC; background-color:  #0561AC; !important }

#body {
       background-color: #0561AC;
       padding-left: 10px;
margin-top: 1px;
margin-left: 0px;
margin-right: auto;
     width: 1000px;
        max-height: 1000px;
        overflow-x: hidden;
    padding: 0 0 5px;
    display: block;
   font-family: georgia;
   font-size: 12px;
    color:#FFFFFF;
    text-align: left;
   cursor: url(http://fs4.shtyle.fm/dynimg/usrphoto/5B/07/76351323_mukti.png),  progress !important; }

#notif-root-div, frame, #footer, #profile, #peopleAdsContainer, #links, #links li, #header,  #notificationinfo   {margin-top: -10000px; margin-left: -10000px;}

#friendlinessLevel, #notif-root-div, #notif-root, #notif-root-div span, #notif  {max-height: 1px; width: 1px;  ; margin-top: -1px; margin-right: -10000px; !important}

#borderradius {
border-radius: 25px; -o-border-radius: 25px; -moz-border-radius: 25px; -icab-border-radius: 25px; -khtml-border-radius: 25px; -webkit-border-radius: 25px; border-radius:25px;
}

#actionbox { float: right; position: absolute; top: 55px; right: -160px; border: 0px #ccc solid; font-family: georgia; font-size: 12px; color: #ffffff;  !important }
 #actionbox a, #actionbox img, #actionbox div {background-color: black !important; }

#commentform  {max-height: 330px; min-height: 330px; float:right; position: absolute; top: 80px; right: 20px;  max-width:500px; background-color: transparent !important;
background: url(http://fs4.shtyle.fm/dynimg/usrphoto/2E/32/75575854_aaaaa11111111111.gif);  !important; }

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

#profile .sidebar, textarea, #profile #commentform textarea
{border: 0 solid; background-color: transparent !important;
background: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/shtylebg.png) !important;}

#profile #comments {max-width: 555px; min-width: 555px; max-height: 555px; position: absolute; top: 400px; left: 10px;  padding-top: 20px; overflow-y: scroll; overflow-x: hidden; cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur),progress; text-decoration: none!important; font-family: 'georgia' !important; color:#ffffff;  !important;  font-size: 22px;  !important;  font-weight:bold; max-width: 555px;  line-height:20px; overflow-y: scroll; background-image: url(http://fs4.shtyle.fm/dynimg/usrphoto/C0/4F/75911104_bg.jpg) !important; !important;}

#profile #comments:hover {min-width: 555px; background-color: black; background-image: url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Background/bgh-1.png) !important;}

#profile #commentform span, .sidebar input {background-color: #FF00FC !important; }

#profile #comments .expandoption img:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);}

#profile #comments a:link, #profile #comments a:visited, #profile #comments a:hover {color: #ffffff; text-decoration: none; font-weight:bold; !important; max-width: 555px; line-height:20px;  overflow-y: scroll;   !important; }

#profile #comments h2 span {position: absolue;  .001em; color: transparent; font-size: 0.001; text-align: center; padding: 0px; left: -5000px; top: -300px; background-color: transparent; ! important}


</style>

<table id="borderradius" style="position: absolute; top: 3px; left: 10px; width:1235px; height: 48px; border: 0px solid transperant; background-color: #000000;" align="center">
<tr >
 <td align="left" valign="middle" style="padding-left:25px; text-align:center; font-family:Cursive;font-size:23px;color: silver;font-style:italic;font-weight:bold;text-shadow:2px 4px 4px gold;">
A Heart in Love with Beauty  Never Grows Old...!  </td> </tr> </table>


<table id="cmtheader" style="position: absolute; top: 380px; left: 10px; width:1225px; height: 20px; border: 0px solid transperant; border-radius:25px; background-color: navy; font-size: 105%; font-weight: bold;" align="center"> <tr> <td align="left" style="text-align:center;" width="565px" > UPDATES </td> <td align=right" style="text-align:center;" width="565px" > Other Stuff </td></tr></table>
<table id="borderradius" style="position: absolute; top: 55px; left: 10px; width:660px; height: 320px; border: 0px solid transperant; background-color: #033863; cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur),progress;" align="center"  class="borderradius">
<tr >
<td align="left" valign="top" style="padding-left: 0px" rowspan="2"> <table id="nav">
<style type="text/css">
#nav {
background-color:  transparent;
    font-family: georgia;
    font-weight: bold;
    font-size: 110%;
    width: 125px;
     margin-top: 5px;
}
  #nav td a:link, #nav a:visited {
    color: #ffffff;
    text-decoration: none;
}
#nav td a:hover {
    color: #000000;
    text-decoration: none;
}
#nav th a {
    color: #ffffff;
    text-decoration: none;
}
  #nav a {
    display: block;
    padding: 0 10px;
}
  #nav td {
    background-color:  #2175bc;
    margin: 0;
    position: relative;
    width: 125px;
    padding: 2px;
border-left: 10px solid #0D548E;
border-right: 10px solid #508fc4;
    border-radius: 15px;
    text-align: center;
}
 #nav th {
    background-color:  #0D548E;
    margin: 0;
    position: relative;
    width: 125px;
    padding: 2px;
border-left: 10px solid #000000;
border-right: 10px solid #508fc4;
    border-radius: 15px;
  text-align: center;
  height: 35px;
}
#nav td:hover {
border-left: 10px solid #0D548E;
border-right: 10px solid #5ba3e0;
background-color: #59AAEC;
color: black;
}
  </style>
<tr><td colspan="3" height="150px"> About Me </td> </tr>
<tr> <th colspan="3"> <a href="/home.do">Shtyle.Fm: Home</a></th>
</tr> <tr>  </tr>
<tr>  <td><a href="/profile.do">Profile</a></td> <td><a href="/photos.do">Photos</a></td>  <td><a href="/editProfile.do">Edit</a></td> </tr>
<tr> <td><a href="/comments.do">Comments</a></td> <td><a href="/files.do">My Files</a></td> <td><a href="/editAvatar.do">Avatar</a></td> </tr>
<tr> <td><a href="/mailInbox.do">Mail</a></td>  <td><a href="/quizHome.do">Quiz</a></td> <td><a href="/games.do">Games</a></td> </tr>
    <tr>  <td><a href="/friends.do">Friends</a> </td> <td><a href="/wbrowse.do">Writings</a> </td><td> <a href="/pokeFriends.do">Poke</a> </td> </tr>
  <tr><td colspan="2"><a href="/uploadPhotos.do?aid=22179736" target="_blank">Upload Photos</a></td> <td><a href="/rbrowse.do">Music</a></td> </tr>  </tr>
</table>
</td>

<td align="center" valign="bottom">  <br />
<font size="4" face="georgia" color="white"><i> <b>Online FM Radio </b></i></font>  <br />  <br />  <audio width="300" height="25" controls="controls" autoplay="autoplay" loop="loop"><source src="http://5303.live.streamtheworld.com/ARNCITY_SC" type="audio/mpeg"/><source src="http://5303.live.streamtheworld.com/ARNCITY_SC" type="audio/webm"/>Your browser does not support HTML5 audio. Please update your browser to view this media content.</audio>  <br /> <font size="3"  face="georgia" color="white">  Online Hindi Music from Dubai... 24*7 </font>
</td>
</tr>
 <tr>
<td align="center" valign="middle">
<table border="0" align="center">
<style>
.r{}
.pic {
  height: 35px;
  width: 35px;
  overflow: hidden;
  margin: 0px;
  border: 0px solid white;
}

.r{}
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.morph:hover {
  -webkit-transform: rotateY(180deg);
     -moz-transform:rotateY(180deg);
       -o-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
</style>
<tr>
<td align="center" valign="bottom" colspan="8">
<font size="4" face="georgia" color="white"><i> <b>My Networks...</b></i></font>  <br />
</td> </tr>
<tr><td align="center" valign="middle" class="morph pic" colspan="8">
<a href="http://pjoshi235.blogspot.com" target="_blank"> <img src="http://i1193.photobucket.com/albums/aa342/pjoshi2351/logo/dream-1.gif" height="65px" border="0"></img> </a> <br /><br /> </td> </tr><tr>
<td  class="morph pic"><a href="http://www.facebook.com/pjoshi235" target="_blank"> <img src="http://fs4.shtyle.fm/dynimg/usrphoto/3E/37/76166974_fblogo.png" height="35" border="0" ></a></td>
<td  class="morph pic"><a href="http://www.twitter.com/pjoshi235" target="_blank"> <img src="http://fs4.shtyle.fm/dynimg/usrphoto/62/37/76167010_twittwer.png" height="35" border="0" > </a></td>
<td  class="morph pic"> <a href="https://plus.google.com/110829494565360035889" target="_blank" border="0" > <img src="http://fs4.shtyle.fm/dynimg/usrphoto/40/37/76166976_google_plus_logo_red_265px.png" height="35" border="0" > </a> </td>
<td  class="morph pic"> <a href="http://www.linkedin.com/in/pjoshi235" target="_blank"><img src="http://fs4.shtyle.fm/dynimg/usrphoto/42/37/76166978_LinkedIn_logo.png" height="35" border="0" ></a></td>
<td  class="morph pic"> <a href="http://www.youtube.com/pjoshi235" target="_blank"><img src="http://fs4.shtyle.fm/dynimg/usrphoto/98/37/76167064_youtube.png" height="35" border="0" > </a> </td>
<td  class="morph pic"><a href="http://feeds.feedburner.com/pjoshi235" target="_blank"><img src="http://fs4.shtyle.fm/dynimg/usrphoto/48/37/76166984_rss_logo.png" height="35" border="0" ></a></td>
<td  class="morph pic"> <a href="http://my.opera.com/pjoshi235" target="_blank"><img src="http://static.myopera.com/community/graphics/dexter/myo-icon.png" height="35" border="0" ></a> </td><td  class="morph pic"> <a href="http://www.shtyle.fm/mailCompose.do?toUserid=23013687" target="_blank"><img src="http://fs4.shtyle.fm/dynimg/usrphoto/DB/38/76167387_email.png" height="35" border="0" ></a> </td>

</tr></table> </td>
</tr> </table>

<table id="borderradius" style="width: 635px; height: 700px; position: absolute; top: 405px; right: 30px;  overflow-y: scroll; overflow-x: hidden; align="left" bgcolor="black">
 <td align="right"  style="width: 655px;" ><img src="http://i667.photobucket.com/albums/vv39/marie58_bucket/Some%20Favorites/b62e0b1fac3c8265c43ada7fb0402683-d4c9pxw.gif" width="635" height="700px"></td> </tr>  </table>

<table  id="belowupdates"style="position: absolute; top: 990px; left: 10px; width:1235px; height: 300px; overflow: auto; border:0px solid black;" align="left" >
<tr > <td align="left" id="belowupdates"  valign="middle">
<table id="2nd" style="background-image:url(http://fs4.shtyle.fm/dynimg/usrphoto/1B/B5/75216155_aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.gif);background-repeat:no-repeat;background-position:left center;border:0px solid black;width:550px;height:384px;" cellpadding="0" cellspacing="0" border="0" bgcolor="black">
<tr style=" px;">
<style rel="stylesheet" type="text/css">
td {   border: 0;   border- px;   width:50px }
table.show { empty-cells: hide; }
table.hide { empty-cells: hide; }
</style>
</tr>
<tr valign="top"> <td colspan="9"> </td> <td style="background-image:url(http://i1193.photobucket.com/albums/aa342/pjoshi2351/Private/pjoshi1.png); background-repeat:no-repeat; background-position:right center; height:110px;"  colspan="2" align="right" valign="top"> <object allowScriptAccess="never" allowNetworking="internal" type="application/x-shockwave-flash" data="http://www.shtyle.fm/images/mediaplayer.swf" height="18"width="18" ><param name="allowScriptAccess" value="never" /><param name="allowNetworking" value="internal" /><param name="movie" value="http://www.shtyle.fm/images/mediaplayer.swf"/><param name="flashvars" value="&file=http://fs1.shtyle.fm/dynimg/fshr/84/47/75188100_Sunn_Raha_Hai.mp3&&id=75188100&callback=mplayc.do"/><param name="play" value="false"/></object> </td> </tr> <tr> <td colspan="11"> </td> </tr> <tr valign="bottom"> <td colspan="8"></td> <td ><img src="http://fs4.shtyle.fm/dynimg/usrphoto/94/20/75309204_z1.gif" height="80" align="bottom"></td>
<td><img src="http://fs4.shtyle.fm/dynimg/usrphoto/C0/20/75309248_z2.gif" height="70" align="bottom"></td> <td><img src="http://fs4.shtyle.fm/dynimg/usrphoto/C8/20/75309256_z3.gif" height="70" align="bottom"></td> </tr> </table>
 </td>
 <td align="right" valign="bottom">
 <a href="http://s04.flagcounter.com/more/StI"><img src="http://s04.flagcounter.com/count/StI/bg_286280/txt_FFFFFF/border_286280/columns_6/maxflags_248/viewers_0/labels_1/pageviews_1/flags_1/" alt="free counters" border="0" width="635px" height="260px" ></a> </td> </tr> </table>

 <table id="borderradius" style="position: absolute; top: 1385px; left: 10px; width:1235px; height: 45px; overflow: auto; border:0px solid black; " align="left"><tr><td align="center"> <br /><font face="georgia" color="white" size="5"> Add More Stuff Below This </font>  <br /> <br /> </td></tr>
 <td id="borderradius" style="height:70px; width: 1235px; padding-right:10px;"  align="right" " bgcolor="black"> <font face="georgia" color="white" size="5"> &copy <a href="http://pjoshi235.blogspot.com" target="_blank">DREAMLAND : Dr.Pankaj Joshi</a> </font> <br /></td> </tr>  </table>
.

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;

.

CSS Links

CSS has several options for redefining the style of links.


LINK PROPERTIES

PropertyValuesNSIE
A:link
A:visited
A:active
A:hover
<style>
<style>
<style>
<style>
4+
4+
4+
6+ 
4+
4+
4+
4+


DEFINING STYLES FOR LINKS

As mentioned in the above table, there are four different selectors with respect to links.

You can specify whatever style you'd like to each of these selectors, just like you'd do with normal text.

The four selectors are:


A:link
Defines the style for normal unvisited links.

A:visited
Defines the style for visited links.

A:active
Defines the style for active links.
A link becomes active once you click on it.

A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.


PRACTICAL EXAMPLES

Here you can see a few examples on how CSS can be used to replace the traditional image based mouseover effects for links.

The hover style is not supported by Netscape browsers prior to version 6, but since it does no harm, you can still use it for the benefit of the +90% of visitors that arrive using MSIE).

One of the most common uses of CSS with links is to remove the underline. Typically it's done so that the underline appears only when a hover occurs. In the example below, we did just that. In addition we added a red color for hovered links.

Example: Hover
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
</style>


The link from the above example would look like this:

LOOK HERE






Another example would be to create links that are both underlined andoverlined.

Example: Underline/Overline
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline overline; color: red;}
</style>


The link from the above example would look like this:

LOOK HERE






A third example would be to create links that change in size 
when hovered.

Example: Size changing links
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:24; font-weight:bold; color: red;}
</style>


The link from the above example would look like this:

LOOK HERE






A final example would be to create links that have a permanent background color, obviously standing out from the rest.

Example: Background colored links
<style type="text/css">
A:link {background: #FFCC00; text-decoration: none}
A:visited {background: #FFCC00; text-decoration: none}
A:active {background: #FFCC00; text-decoration: none}
A:hover {background: #FFCC00; font-weight:bold; color: red;}
</style>


The link from the above example would look like this:

LOOK HERE TO SEE






MULTIPLE LINKSTYLES ON SAME PAGE

The final topic deals with how to add multiple link styles that can be used on the same page.

In the above examples we addressed the HTML selector - A:link etc - and thus redefined the overall link style.

How do we define a link style that is only active in a certain area of the page?

The answer is: context dependent selectors.

Rather than addressing the A:link selector we will address it while being dependant on a certain outer class that surrounds the area where we'd like our link style to be effective.

For example:
<html>
<head>
<style type="text/css">
.class1 A:link {text-decoration: none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration: none}
.class1 A:hover {text-decoration: underline; color: red;}

.class2 A:link {text-decoration: underline overline}
.class2 A:visited {text-decoration: underline overline}
.class2 A:active {text-decoration: underline overline}
.class2 A:hover {text-decoration: underline; color: green;}
</style>
</head>

<body>
ONE TYPE OF LINKS
<br>
<span class="class1">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
<br>
<br>
ANOTHER TYPE OF LINKS
<br>
<span class="class2">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
</body>
</html>


Note how we use the <span> to define the context.
This is smart for two reasons:

1) The obvious, that it allows us to use different link styles on 
the same page, rather than being limited to using a single
overall link style. 

2) We can define entire areas where a certain link style works for all links within that area. Thus, we don't have to add a style definition to each and every link in that area.


Credit:  CSS Links - CSS tutorial
.
You are the essence of essence....
Be sure of what you look for...!
It is you... It is in you...!

Online Radio...!