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




News Update :
Showing posts with label Website Builder. Show all posts
Showing posts with label Website Builder. Show all posts

Show Hide Widget on Blogger Home Page

To hide content only in homepage of blogger...

<b:if cond='data:blog.pageType != &quot;item&quot;'>
----Widget Code-----
</b:if>

To show content only in homepage of blogger...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
----Widget Code-----
</b:if>
.

Mysql column value in select option

Below is an example of php code to use mysql column value in select option dropdown...

<?php
  $con = mysql_connect("localhost","root","password");
  $db = mysql_select_db("database",$con);
  $get=mysql_query("SELECT id, url, name FROM table");
  ?>
 <html>
     <head>
     <style type="text/css">
html, body {
background: #97C8FF 
}
body {
margin: 0 0 0 0 ;
}
#right {
width:150px;
float: left;
}
</style>
     </head>
 <body>
    <form>
        <select onChange="window.open(this.options[this.selectedIndex].value,'frameid')"  onclick="Size(this,4);" class="select" style="width:150px;"> 
         <?php
             while($row = mysql_fetch_assoc($get)){?>
                <option value = "<?php echo($row['url'])?>" ><?php echo($row['name'])?></option>
                <?php } ?>
        </select>
    </form>
    </body>
 </html>
.

Chained Select Option Dropdown

I don't know much about javascpript, so make many pages to make many pages & create chained select option for my radio widget...

- Main

<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,2);" 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">c</option>
</select>
</form>
</div>

<div id="right" align="right">
<iframe id="wid" name="wid" frameborder="0" height="70px" scrolling="no" width="150" src=""></iframe>
</div>

<center>
<iframe id="wid2" name="wid2"  frameborder="0" height="80" width="230" scrolling="no" src="asdfghjkl.html"></iframe>
</center>
</div>
</body>
</html>


- a.html

<body>
<div id="right" align="left">
<form action="../">
<select onChange="window.open(this.options[this.selectedIndex].value,'wid2')" onclick="Size(this,2);" class="select" style="width:150px;">
<option value="">Select</option>
<option value="1.html">1</option>
<option value="2.html">2</option>
<option value="3.html">3</option>
</select>
</form>
</div>

</body>


This is working in my Radio Widget for my blog....!
.

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

XML Banner Rotator

I search too long for good xml flash banner rotator.
At last I find good flash banner rotator at

http://www.flabell.com/flash/XML-Banner-Rotator-233/

After getting it, I see it is using swfobject & I can put it to my social network.
But confidence in my mind can change it to embed code.
I try too much to get help from owner of that component & on internet.
But though I don't know basic of flash I can't understand their technical language.
At last today I inspired by one comment on that component & change it to simple embed code.
My embed code is as:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.124" id="FlabellComponent" name="FlabellComponent" width="650" height="434">
<param name="movie" value="preview.swf?t=1259971935000&xmlPath=banner.xml" />
<param name="wmode" value="opaque" />
<param name="scale" value="noScale" />
<param name="allowScriptAccess" value="always" />
<param name="allowfullscreen" value="true" />
<param name="menu" value="false" />
<param name="bgcolor" value="#ffffff" />

<embed  id="FlabellComponent" name="FlabellComponent" src="preview.swf?t=1259971935000&xmlPath=banner.xml" type="application/x-shockwave-flash"width="650" height="434" wmode="transparent" bgcolor="#ffffff" menu="false" scale="noScale" wmode="opaque" allowfullscreen="true" allowScriptAccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Look as below:

.

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




.

XML SWF Slideshow

As too new about flash, I cant make flash slideshow.

But today I find this tutorial & sure it help me.

XML/SWF Slideshow > Introduction

http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm
.

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

Social network as webhost

Since long time I was thinking "How to host my website free with unlimited size..."

- I registered on one social network http://www.shtyle.fm It give me 200mb space for uploading files... (on opera community I got 2gb space)

- I made some changes in stylesheet & hide all stuff of website and made table...

- The first webpage view as below...



- My code for style is...

<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: 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 div, #peopleAdsContainer, #links, #links li, #header,  #notificationinfo {max-height: 1px; width: 1px;  ; margin-top: -10000px; margin-left: -10000px;}

</style>

- After this I upload my webpages @ http://www.shtyle.fm   my.opera.com   &  http://pastehtml.com

- My images are @ free images hosting sites...

- Look this... http://www.shtyle.fm/profile.do?userid=23247314
.

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;

.

CSS3 Tabs NO JAVASCRIPT


  • One
    In today’s tutorial I am going to share a simple way to make News Ticker and Notification Bar using CSS3, NO JAVASCRIPT. Previously it was very difficult to code it in javascript and make it work with other plugins, but today I decided to make it possible in CSS3 and voila, I succeeded So lets
  • Two
    While reading more about HTML5 & CSS3 I just found an amazing css3 button styling. This time I wanted to do something which I was doing from past 2 years using JQuery. In this tutorial I am going to teach you how to make a toggle slideDown and slideUp function using CSS3 and HTML5. To
  • Three
    Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first Read more...


Code:

<style type="text/css">
*::-moz-selection {
background: none repeat scroll 0 0 #F26D5E;
color: white;
}

#content > p {
font-size: 13px;
line-height: 24px;
text-align: left;
color: #416C80;
}

li div p {
font-size: 13px;
line-height: 24px;
text-align: left;
color: #888888;
}

a {
color: #888888;
text-decoration: none;
outline: none;
}

#tabs-content {
position: relative;
clear: both;
}

li div {
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
border: 1px solid #888888;
float: left;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 0 15px;
position: absolute;
visibility: hidden;
width: 555px;
min-height: 555px;
left: 0;

background: -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
}

#tabs {
     float: left;
margin: 0px auto;
min-height: 555px;
width: 555px;
}

ul {
float: left;
margin: 0;
padding: 0;
position: relative;
}

#tabs li {
float: left;
list-style-type: none;
}

#tabs li a {
background: -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
border: 1px solid #888888;
margin: 0 3px 0 0;
padding: 5px 25px;
position: relative;
z-index: 1;
font-size: 14px;

-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
display: block;
top: 1px;
}

#tabs li a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E3E3E3));
background: -moz-linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
}

#tabs-content div p {
position: relative;
text-align: justify;
}

#One:target a,#Two:target a,#Three:target a {
color: #000000;
border-bottom: none;
top: 1px;

background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E3E3E3));
background: -moz-linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
padding-top: 6px;
}

#One:target div,#Two:target div,#Three:target div {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
visibility: visible;
}

#container {
    float: left;
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);

-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;

-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.09) inset;
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.09) inset;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.09) inset;
color: #416C80;
margin: 5px auto;
padding: 5px 5px;
width: 555px;
}

i {
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}

i:hover {
background: none repeat scroll 0 0 #F26D5E;
color: #FFFFFF;
}
</style>


<div id="container">

<div id="tabs">
<ul>
<li id="One"><a href="#One" id="first">One</a>
<div>
<p>In today’s tutorial I am going to share a simple way to make News Ticker and Notification Bar using CSS3, NO JAVASCRIPT. Previously it was very difficult to code it in javascript and make it work with other plugins, but today I decided to make it possible in CSS3 and voila, I succeeded So lets</p>
</div>
</li>
<li id="Two"><a href="#Two" id="sec">Two</a>
<div>
<p>While reading more about HTML5 & CSS3 I just found an amazing css3 button styling. This time I wanted to do something which I was doing from past 2 years using JQuery. In this tutorial I am going to teach you how to make a toggle slideDown and slideUp function using CSS3 and HTML5. To</p>
</div>
</li>
<li id="Three"><a href="#Three" id="third">Three</a>
<div>
<p>Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first Read more...</p>
</div>
</li>
</ul>
</div>
</div>


Credit:  CSS3 Tabs | NO JAVASCRIPTWebs Tutoria
.

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