T e c h . R o c k s

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

Google Code Prettifier

Check out the documentation for Google Code Highlighter here

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>

Wednesday, May 11, 2011

XHTML-MP and Mobile Development

Check this link for details on XHTML-MP and Mobile Web Development

Chrome OS Installation

Check this link for Google Chrome OS Installation.

HTTP Status Codes

Click Here to find out about HTTP Status Codes

Subscribe to: Posts ( Atom )

T e c h . R o c k s

Coldfusion
Java
JQuery

Monday, May 23, 2011

JavaScript inside your Blogger Code

Saturday, May 21, 2011

Google Code Prettifier

Friday, May 20, 2011

Online META Tags Generator

JQuery Popup Example

Sunday, May 15, 2011

Adding JQuery Widgets to Blogspot

Saturday, May 14, 2011

How to create blogspot template css

How to create a blogspot template html

Wednesday, May 11, 2011

XHTML-MP and Mobile Development

Chrome OS Installation

HTTP Status Codes

Archive

Popular

Coldfusion Java JQuery

Monday, May 23, 2011

Saturday, May 21, 2011

Friday, May 20, 2011

Sunday, May 15, 2011

Saturday, May 14, 2011

Wednesday, May 11, 2011

Archive

Popular

Coldfusion
Java
JQuery