Check out this link
Friday, June 17, 2011
Thursday, June 16, 2011
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
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>
Subscribe to:
Posts
(
Atom
)