Jeetu Alex - IT Software Professional specialized in developing high-end, customized business solutions using Coldfusion and Java.

Coldfusion
Java
JQuery

An online resource for latest web technologies like Coldfusion, JRun, Pro*C, JQuery, HTML5, PHP, W3C, Java, J2EE, C, C++, ORACLE, PL/SQL, MySql, Ajax, Coldbox, Fusebox, UNIX, JavaScript, NodeJS and much more...

Monday, May 23, 2011

JavaScript inside your Blogger Code

Pleas do the following:

 

<script type='text/javascript'> //<![CDATA[ <--Paste your js code here --> //]]> </script>

Saturday, May 21, 2011

Friday, May 20, 2011

Online META Tags Generator

Check out this cool SEO Tool

JQuery Popup Example

Example:
<style type="text/css">   
    
    div.menudivInactive { margin:0; padding:0;}    
    div.menudivInactive div.tt { width:140px; margin-left:320px; }    
    div.menudivInactive div.tl { background:none; }    
    div.menudivInactive div.tr { background:none; }    
    div.menudivInactive div.tm { background:url(images/img-request-tab-active-topmiddle.png) top left repeat-x; margin-right:7px; height:1px; line-height:1px; }    
    
    div.menudivInactive div.ml { border-left:#a4acb4 solid 1px; }    
    div.menudivInactive div.mr { background:none; }    
    div.menudivInactive div.mm { margin:0px; margin-right:7px; border-right:#a4acb4 solid 1px; border-bottom:none; padding:5px; padding-top:11px; cursor:pointer; background:url(images/img-request-tab-inactive-bg-gradient.png) #efefef top left repeat-x; }    
    
    div.menudiv { margin:0; padding:0; }    
    div.menudiv div.tt { width:140px; margin-left:320px; }    
    div.menudiv div.tl { background:url(images/img-request-tab-active-topleft.png) top left no-repeat; }    
    div.menudiv div.tr { background:url(images/img-request-tab-active-topright.png) top right no-repeat; }    
    div.menudiv div.tm { background:url(images/img-request-tab-active-topmiddle.png) top left repeat-x; height:7px; line-height:7px; margin-right:8px; margin-left:2px; }    
    
    div.menudiv div.ml { border-left:#a4acb4 solid 1px; }    
    div.menudiv div.mr { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudiv div.mm { margin-right:8px; background:none; background-color:#efefef; padding:5px; border:none; cursor:pointer; }    
    
    div.menudivContent { margin:0; padding:0;}    
    div.menudivContent div.tt { width:460px; }    
    div.menudivContent div.tl { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudivContent div.tr { margin-right:8px; background-color:#efefef; }    
    div.menudivContent div.tm { border: solid 1px #a4acb4; border-right:none; border-bottom:none; margin-right:131px; height:1px; line-height:1px; }    
    
    div.menudivContent div.ml { border: solid 1px #a4acb4; border-top:none; border-right:none; border-bottom:none; width:459px; }    
    div.menudivContent div.mr { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudivContent div.mm { background:url(images/img-request-box-active-bg-gradient.png) #FFFFFF top left repeat-x; margin-right:8px; padding:5px; padding-left:10px; padding-right:10px; height:300px; }    
    
    div.menudivContent div.bl { background: url(images/img-request-box-active-bottomleft.png) top left no-repeat; width:460px; }    
    div.menudivContent div.br { background:url(images/img-request-box-active-bottomright.png) top right no-repeat; }    
    div.menudivContent div.bm { background: url(images/img-request-box-active-bottommid.png)top left repeat-x; height:9px; line-height:9px; margin-right:8px; margin-left:7px; }    
    
    .gone { display:none; }    
</style>    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">   
    $(document).ready(function(){    
        $(".menudivContent").toggleClass("gone");    
        $(".menudivInactive .mm").click(function() {         
            openPouup();    
        })  
        
        //openPouup();    
    });    
    
    function openPouup(){    
        var menudivContent = $(".menudivContent").is(":hidden");    
        /*Pop In Effect    
        $(".menudivInactive").toggleClass("menudiv");    
        $(".menudivContent").toggleClass("gone");*/    
        
        /*Slide Down Effect*/    
        if(menudivContent) {    
            $(".menudivInactive").toggleClass("menudiv");    
            $(".menudivContent").slideDown("fast",function(){});    
        }    
        else    
            $(".menudivContent").slideUp("fast",function(){$(".menudivInactive").toggleClass("menudiv");});    
    }    
    
    /*function closePouup(){    
        var menudivContent = $(".menudivContent").is(":hidden");    
        if(!menudivContent)    
            $(".menudivContent").slideUp("fast",function(){$(".menudivInactive").toggleClass("menudiv");});    
    }*/    
</script>

<div class="menudivInactive">   
    <div class="tt">    
        <div class="tl">    
            <div class="tr">    
                <div class="tm"> </div>    
            </div>    
        </div>    
        <div class="ml">    
            <div class="mr">    
                <div class="mm" align="center"> Lorem IPSUM </div>    
            </div>    
        </div>    
    </div>    
</div>    
<div class="menudivContent">    
    <div class="tt">    
        <div class="tl">    
            <div class="tr">    
                <div class="tm"></div>    
            </div>    
        </div>    
    </div>    
    <div class="ml">    
        <div class="mr">    
            <div class="mm">    
                <p>Lorem Ipsum dolor ami aset fetrs psum dolor ami aset fetr psum dolor ami aset fetr aset fetrs psum dolor ami aset fetr psum d.</p>    
            </div>    
        </div>    
    </div>    
    <div class="bl">    
        <div class="br">    
            <div class="bm"> </div>    
        </div>    
    </div>    
</div>

Sunday, May 15, 2011

Adding JQuery Widgets to Blogspot

You can add HTML/Javascript widgets to blogspot panels and trigger JQuery on load scripts like the following:
<script type="text/javascript">   
$(document).ready(function(){  
    $("div.date-outer div.date-posts div.post-outer:odd").toggleClass("post-outer-alternate");  
    $("div.sidebar div.widget:odd").toggleClass("widget-alternate");  
});    
</script>

Saturday, May 14, 2011

How to create blogspot template css

See the following example:

<b:skin>   
<![CDATA[    

/*DATE*/   
div.date-outer h2 {    
    margin:10px;    
    font-size:13px;    
    background-color:#ffffff;    
}
/*MAIN POSTS*/   
div.date-outer div.date-posts div.post-outer {     
    margin-top:10px;    
    padding:0px;    
    border:solid 1px #b9b7a2;    
    border-top:solid 5px #b9b7a2;    
}    
div.date-outer div.date-posts div.post-outer div h3 {    
    background-color:#c4c1b2;    
    padding:10px;     
    padding-top:5px;    
    margin:0px;    
}    
div.date-outer div.date-posts div.post-outer div h3 a {    
    color:#ffffff;    
    text-decoration:none;    
}    
div.date-outer div.date-posts div.post-outer div h3 a:hover {    
    color:#fafafa;    
}    
div.date-outer div.date-posts div.post-outer div {    
    background-color:#fafafa;     
}    
div.date-outer div.date-posts div.post-outer div div.post-body {    
    padding:5px;    
}    
div.date-outer div.date-posts div.post-outer div div.post-header, div.post-outer div div.post-footer {    
    padding:0px;    
    padding-left:10px;    
    padding-right:10px;    
}
div.date-outer div.date-posts div.post-outer-alternate {    
    border:solid 1px #ffa904;    
    border-top:solid 5px #ffa904;    
}    
div.date-outer div.date-posts div.post-outer-alternate div h3 {    
    background-color:#ffd83b;    
}    
div.date-outer div.date-posts div.post-outer-alternate div {    
    background-color:#ffffff;     
}    
/*COMMENTS*/    
div.date-outer div.date-posts div.post-outer div.comments{    
    padding:10px;     
    padding-top:0;    
}
div.date-outer div.date-posts div.post-outer div h4 {   
    background-color:#ffffff;    
    border:solid 1px #b9b7a2;    
    padding:10px;     
    padding-top:10px;    
    padding-left:5px;    
    padding-right:5px;    
    margin:0px;    
    font-size:12px;    
}    
div.date-outer div.date-posts div.post-outer div div#Blog1_comments-block-wrapper {    
    padding:10px;     
}

/*WIDGETS*/    
div.sidebar div.widget {    
    margin-bottom:10px;    
    padding:0px;    
    border:solid 1px #aba281;    
    border-top:solid 5px #aba281;    
}    
div.sidebar div.widget h2 {    
    background-color:#b9b496;    
    padding:10px;     
    padding-top:5px;    
    margin:0px;    
    font-size:12px;    
    color:#ffffff;    
}    
div.sidebar div.widget div.widget-content {    
    padding:10px;    
    background-color:#fafbed;     
}
div.sidebar div.widget-alternate {   
    border:solid 1px #4d453a;    
    border-top:solid 5px #4d453a;    
}    
div.sidebar div.widget-alternate h2 {    
    background-color:#5b5147;    
}    
div.sidebar div.widget-alternate div.widget-content {    
    background-color:#8d8777;     
}    
div.sidebar div.widget-alternate div.widget-content a {    
    color:#ffffff;     
    text-decoration:none;    
}    
div.sidebar div.widget-alternate div.widget-content a:hover {    
    color:#fafafa;     
    text-decoration:underline;    
}    
div.sidebar div.widget-alternate div.widget-content ul {    
    color:#ffffff;     
}
/*PROFILE IMAGE*/   
img.profile-img {    
    border:solid 5px #ffffff;    
    margin:10px;    
}    
/*POST IMGs*/    
.profile-datablock {    
    color:#ffffff;     
    text-transform:capitalize;    
}    
.profile-name-link, .profile-link {    
    font-weight:bold;    
}    
.title a {    
    color:#262626;    
    text-decoration:none;    
}
.text-counter-wrapper {   
    color:#ffffff;     
}
/*FOCUS OUTLINE*/   
* {    
    outline: none;    
    outline-width: 0;    
} 
button::-moz-focus-inner,    
input[type="reset"]::-moz-focus-inner,    
input[type="button"]::-moz-focus-inner,    
input[type="submit"]::-moz-focus-inner,    
input[type="file"] > input[type="button"]::-moz-focus-inner {    
    border: none;    
} 
/*remove outline from clicked links*/   
*|*:-moz-any-link:focus{outline-width:0!important}    
/*remove outline inputs*/    
input:focus::-moz-focus-inner{border-color:transparent!important}    
]]>    
</b:skin>

How to create a blogspot template html

See the following example:

<table border='0' cellpadding='0' cellspacing='0' class='tbl_outer'>    
  <tr>     
    <td><table border='0' cellpadding='0' cellspacing='0' width='100%'>     
        <tr>     
          <td height='100' valign='middle' width='84'><a href="/profile/01452037561218879386"><img alt='Jeetu Alex - Blogger Profile' src=images/top-logo-1.jpg' title='Jeetu Alex - Blogger Profile' border="0"/></a></td>     
          <td><!--<h1>Cold<span class="orange">F</span>usion Rocks</h1>-->     
            <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>     
              <b:widget id='Header1' locked='true' title='ColdFusion Rocks (Header)' type='Header'/>     
            </b:section>     
          </td>     
          <td align='right' valign='middle'><p style='margin-right:15px;'> … </p></td>     
        </tr>     
      </table>     
      <table border='0' cellpadding='0' cellspacing='0' class='tbl_menu' width='100%'>     
        <tr>     
          <td class='selected' height='44'><a href='http://jeetualex.blogspot.com' id='Home'>Home</a> </td>     
          <td><a href=/search?updated-min=2008-01-01T00:00:00-08:00 
&amp;updated-max=2009-01-01T00:00:00-08:00' id='Archive2008'>Archive 2008</a> </td>           <td><a href='…' id='Archive2009'>Archive 2009</a> </td>           <td><a href='…' id='Archive2010'>Archive 2010</a> </td>            …
</tr>       </table>       <table border='0' cellpadding='0' cellspacing='0' class='tbl_banner' width='100%'>         <tr>           <td><h2>Developer&#39;s blog <br/>               <!--Intelligence drives Knowledge-->               www. knowledge base</h2></td>           <td class='tbl_banner_1' height='159' width='567'/>         </tr>       </table>       <table border='0' cellpadding='0' cellspacing='10' width='100%'>         <tr>           <td id='left_col' valign='top' width='70%'><table border='0' cellpadding='0' cellspacing='5' class='tbl_box_1' width='100%'>               <tr>                 <td nowrap='nowrap' width="25%"><h2> Coldfusion 9<br/>                     JRun 4<br/>                     JQuery</h2></td>                 <td valign='top'><b:section class='js' id='js' showaddelement='no'>                     <b:widget id='HTML15' locked='false' title='' type='HTML'/>                   </b:section>                 </td>               </tr>             </table>             <b:section class='main' id='main' showaddelement='no'>               <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>             </b:section>           </td>           <td id='right_col' valign='top'><b:section class='sidebar' id='sidebar' preferred='yes'>               <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>               <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>               <b:widget id='LinkList1' locked='false' title='Follow Me' type='LinkList'/>               <b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'/>               <b:widget id='Feed8' locked='false' title='Project JAdmin on Google Code' type='Feed'/>               <b:widget id='Feed21' locked='false' title='Adobe Developer Connection RSS Feed' type='Feed'/>               <b:widget id='Feed19' locked='false' title='ColdFusion News' type='Feed'/>               <b:widget id='Feed1' locked='false' title='Latest Adobe News' type='Feed'/>               <b:widget id='Feed6' locked='false' title='Sun Bloggers' type='Feed'/>               <b:widget id='Feed12' locked='false' title='The Blog of Ben Nadel' type='Feed'/>               <b:widget id='Feed2' locked='false' title='Fusebox-Community Mailing List' type='Feed'/>               <b:widget id='Feed3' locked='false' title='Mach-II Mailing List' type='Feed'/>               <b:widget id='Subscribe1' locked='false' title='Site RSS Feeds' type='Subscribe'/>               <b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'/>               <b:widget id='HTML9' locked='false' title='Site Subscriptions' type='HTML'/>             </b:section>           </td>         </tr>       </table>       <table border='0' cellpadding='0' cellspacing='0' class='tbl_menu' width='100%'>         <tr>           <td height='30'><b:section class='footer' id='footer'>               <b:widget id='HTML1' locked='false' title='' type='HTML'/>             </b:section>           </td>         </tr>       </table></td>   </tr> </table>