Showing posts with label Blogger Optimizations. Show all posts
Showing posts with label Blogger Optimizations. Show all posts

Sunday, 27 November 2011

›› Css3 : Link Nudging [New Style]

Hello Friends,
After My Previous Post BonBon Buttons For Blogger, i'm here back with a cool new post.
This post will help you to add the cool, new, and stylish Link Nudging widget to your BLOGGER blog.
To add it to your Blog you need to follow these simple and easy steps which will let you to optimize your old nudging style to a new one..


Launch Demo : Click Here

Why To Choose this Over The Old ?


  • It's Totally Stylish..
  • Shows Background effect with nudging.
  • And The Biggest : It is made By CSS3

How To Install ?

It is Very easy to integrate in your Blog and use..
Just you need to follow these nice and easy steps..

Step 1 :

Login to Blogger » Design » Edit Html
Now you need to backup your template first before trying anything. So first Backup your template.

Step 2 :

Now Find The Following Piece of Code [By Pressing Ctrl+F] :
]]></b:skin>

Now Paste the bellow code just before it. 
.nudge ul { list-style:none; }
.nudge ul li a { background-color: #fff; color: #afafaf; padding: 10px 0 10px 25px; display:block; text-decoration:none; border-top:1px solid #eee; }
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left;
-webkit-transition-duration: 500ms, 500ms, 500ms;
}

.css3_nudge ul li a:hover {
background-color: #efefef;
color: #333;
padding-left: 50px;
}

Now Hit Preview, If Everything is fine save the template lest comment here..

Step 3 :

After Saving The Template, Go To Page Elements and click on Add a Gadget.
Now Select HTML/JAVASCRIPT and then add the bellow piece of code in it.
<div class="css3_nudge nudge">
<ul >
<li><a href="#" target="_blank" >Name 1</a></li>
<li><a href="#" target="_blank" >Name 2</a></li>
</ul>
</div>

Replace The Links and Names With yours and see the Stylish Widget On Your Blog.
Happy Blogging !!

Thursday, 10 November 2011

›› BonBon Buttons For Blogger

Hello Friends,
After my previous Post Stylish Page Loader Effect using CSS, i'm here Back with a nice cool stuff for all the Bloggers.You must have heard about BonBon buttons which are also called as sweet CSS3 Buttons.
Have A Look On Them :

After Working for a long time. I Got This ready for Bloggers To Implement these all Buttons in your Blog. See The Live demo over here [How It Works]

Now Let's Implement these buttons in your Blog. We Can do so by following some easy steps.


Step 1:
Backup your template before making any changes.. It is the Safest way to implement any changes..



Step 2:
Now press (Ctrl+f) to find the Following piece of code
]]></b:skin>

Now Paste The Bellow Code Just Before it.
.button {

/* text */
text-decoration: none;
font: 24px/1em 'Droid Sans', sans-serif;
font-weight: bold;
text-shadow: rgba(255,255,255,.5) 0 1px 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;


/* layout */
padding: .5em .6em .4em .6em;
margin: .5em;
display: inline-block;
position: relative;

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

/* effects */
border-top: 1px solid rgba(255,255,255,0.8);
border-bottom: 1px solid rgba(0,0,0,0.1);

background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);

-webkit-transition: background .2s ease-in-out;
-moz-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;

/* color */
color: hsl(0, 0%, 40%) !important;
background-color: hsl(0, 0%, 75%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}

/* -------------- button (tag) -------------- */

button.button {
border-left: none;
border-right: none;
}
button.button:hover {
cursor: pointer;
}


/* -------------- icon -------------- */
.button:before {
font: 1.2em/0 'Pictos', sans-serif;
content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */
margin-right: 0.4em;


}
/* icon only */
.icon {
font-weight: normal;
font-style: normal;
text-indent: -999em;
}
.icon:before {
margin-right: 0;
display: block;
height: 0;
text-indent: 0px;
}



/* -------------- colours -------------- */

.button.orange {
color: hsl(39, 100%, 30%) !important;
background-color: hsl(39, 100%, 50%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.orange:hover { background-color: hsl(39, 100%, 65%); }


.button.blue {
color: hsl(208, 50%, 40%) !important;
background-color: hsl(208, 100%, 75%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.blue:hover { background-color: hsl(208, 100%, 83%); }

.button.green {
color: hsl(88, 70%, 30%) !important;
background-color: hsl(88, 70%, 60%);
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.green:hover { background-color: hsl(88, 70%, 75%); }

.button.pink {
color: hsl(340, 100%, 30%) !important;
background-color: hsl(340, 100%, 75%);
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.pink:hover { background-color: hsl(340, 100%, 83%); }



.button.transparent {
color: rgba(0,0,0,0.5) !important;
}
.button.transparent, .button.transparent:hover, .button.transparent:active {
background-color: transparent;
background-image: none;
}
.button.transparent:hover {
opacity: .9;
}



/* -------------- States -------------- */

.button:hover {
background-color: hsl(0, 0%, 83%);
}



.button:active {
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
rgba(0,0,0,0.4) 0 .1em 1px, /* border */
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
-moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
rgba(0,0,0,0.4) 0 .1em 1px, /* border */
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
rgba(0,0,0,0.4) 0 .1em 1px, /* border */
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

-webkit-transform: translateY(.2em);
-moz-transform: translateY(.2em);
transform: translateY(.2em);
}

.button:focus {
outline: none;
color: rgba(254,255,255,0.9) !important;
text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
}

.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
opacity: .5;
cursor: default;
color: rgba(0,0,0,0.2) !important;
text-shadow: none !important;
background-color: rgba(0,0,0,0.05);
background-image: none;
border-top: none;

-webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
rgba(0,0,0,0.3) 0 .1em 1px, /* border */
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
-moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
rgba(0,0,0,0.3) 0 .1em 1px, /* border */
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
rgba(0,0,0,0.3) 0 .1em 1px, /* border */
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
transform: translateY(5px);
}

/* -------------- Fonts -------------- */

.serif {
font-family: 'Lobster', serif;
font-weight: normal;
}


/* -------------- Sizes -------------- */

.xs { font-size: 16px; }
.xl { font-size: 32px; }


/* -------------- Materials -------------- */

.button.glossy:after, .button.glass:after {
content: "";
position: absolute;
width: 90%;
height: 60%;
top: 0;
left: 5%;

-webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
-moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;

background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );
background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
}
.button.glossy:active:after,
.button.glass:active:after,
.button.disabled:after,
.button[disabled]:after
{ opacity: .6; }

.button.icon.glossy:after,
.button.icon.glass:after { height: 75% ; }

/* -------------- Glass + Transparent -------------- */
.button.glass {
text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;
}
.button.glass:active {
text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;
}


/* -------------- Shapes -------------- */

/* round */
.round, .round.glossy:after, .round.glass:after {
border-top: none;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}

/* oval */
.oval {
border-top: none;
padding-left: .8em;
padding-right: .8em;
-webkit-border-radius: 5em / 2em;
-moz-border-radius: 5em / 2em;
border-radius: 5em / 2em;
}
.oval.glossy:after, .oval.glass:after {
top: 5%;
-webkit-border-radius: 5em / 2em 2em 1em 1em;
-moz-border-radius: 5em / 2em 2em 1em 1em;
border-radius: 5em / 2em 2em 1em 1em;
}
.oval.icon {
padding-left: .8em;
padding-right: .8em;
-webkit-border-radius: 1.5em / 1em;
-moz-border-radius: 1.5em / 1em;
border-radius: 1.5em / 1em;
}
.oval.icon.glossy:after, .oval.icon.glass:after {
-webkit-border-radius: 1.5em / 1em;
-moz-border-radius: 1.5em / 1em;
border-radius: 1.5em / 1em;
}

/* brackets */
.brackets, .brackets.glossy:after, .brackets.glass:after {
border-top: none;
-webkit-border-radius: .5em / 1em;
-moz-border-radius: .5em / 1em;
border-radius: .5em / 1em;
}

/* skew */
.skew {
border-top: none;
padding-right: 1.2em;
padding-left: 0.8em;
-webkit-border-radius: 5em 1em / 5em 1em;
-moz-border-radius: 5em 1em / 5em 1em;
border-radius: 5em 1em / 5em 1em;
}
.skew.glossy:after, .skew.glass:after {
left: 10%;
-webkit-border-radius: 7em 1em / 5em 1em;
-moz-border-radius: 7em 1em / 5em 1em;
border-radius: 7em 1em / 5em 1em;
}
.skew.icon {
padding-right: .9em;
padding-left: .8em;
}

/* back */
.back, .back.glossy:after, .back.glass:after {
border-top-color: rgba(255,255,255,0.5);
-webkit-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
-moz-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
}
.back.glossy:after, .back.glass:after {
left: 6%;
width: 88%;
}

/* knife */
.knife {
padding-left: 1.5em;
-webkit-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;
-moz-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;
border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;
}
.knife.glossy:after, .knife.glass:after {
left: 3%;
width: 97%;
-webkit-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;
-moz-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;
border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;
}
.knife.glossy.icon:after, .knife.glass.icon:after {
left: 5%;
width: 95%;
-webkit-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;
-moz-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;
border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;
}

/* shield */
.shield, .shield.glossy:after, .shield.glass:after {
-webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
-moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
}
.shield {
padding-left: .8em;
padding-right: .8em;
}
.shield.icon {
padding-left: .6em;
padding-right: .6em;
}

/* drop */
.drop {
border-top: none;
-webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;
-moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;
border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;
}
.drop.glossy:after, .drop.glass:after {
left: 4%;
-webkit-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;
-moz-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;
border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;
}
.drop.icon {
padding-right: .6em;
}


/* morph */
.morph {
border-top: none;
-webkit-border-radius: 5em / 2em;
-moz-border-radius: 5em / 2em;
border-radius: 5em / 2em;
-webkit-transition: -webkit-border-radius .3s ease-in-out;
-moz-transition: -moz-border-radius .3s ease-in-out;
transition: -moz-border-radius .3s ease-in-out;
}
.morph:hover {
-webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
-moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
}
.morph:active {
-webkit-border-radius: .3em;
-moz-border-radius: .3em;
border-radius: .3em;
}
.morph:after {
display: none;
}




/* Some ugly hacks for FF.
Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */
@-moz-document url-prefix() {
.button { text-align: center; }
.icon { padding: .5em 1em; }
.icon:before { margin-left: -.42em; float: left; }

.drop.icon { padding-right: 1.1em; }
.shield.icon { padding-left: 1.1em; padding-right: 1.1em; }
.skew.icon { padding-right: 1.4em; padding-left: 1.3em; }
.oval.icon { padding-left: 1.3em; padding-right: 1.3em; }
.knife { padding-left: 2em; }
}
Step 3:
Hit Preview. If Every thing is working fine, Save the template if got some errors post them in Comments i'll help you out..

For Implementation Read here..

Thursday, 22 September 2011

›› Stylish Page loader Effect using Css

Hello Friends i'm here back with a cool featured post by which you add a new page loading indicator to your blog like my ILibrary. To integrate this style you have to follow these three simple steps... You can customize it in the way it suits you.....

Things to be noted before getting started :

  • Must have a Transparent Loader....  if you don't have then get it from here.
    Remember That you must click on the box beside Transparent background
  • You Must have JQuery Installed in your Blog.
Ready to get started ?
You Need to follow these simple Steps...


Step 1 :
Go To Dashboard » Design » Edit HTML » Click On Expand widgets Templates
Now Press Ctrl+F and find the following piece of the code...
<body>

Now paste the following code bellow it :

<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>

Step 2 :
Now Press Ctrl+F and find the following piece of the code...
]]></b:skin>

Immediately Paste The Bellow Code above it :

#loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #E2E1E1 url(http://imgboot.com/images/cybersidh/ajaxloader_1.gif) no-repeat center; opacity: 0.5;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.v2 #loading { display: none; }

#progress-bar {
position: absolute;
top: 0; left: 0;
background: #7fb061;
opacity: 0.8;
width: 0;
height: 18px;
}
Customization:
>The highlighted text in the red color indicates the color of the Process Bar... You can change it if needed...
>The Text in red color is the URL of the image which you have created in AjaxLoader. If Not done then Leave it as it is...

Step 3 :
Now Press Ctrl+F and find the following piece of the code...
</head>

Immediately above it Paste The Following Code :
<script>

(function($){

$("html").removeClass("v2");


$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

$("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){ $(this).remove(); });
});

});
})(jQuery);
</script>

Now you are done...
Just hit preview and if every thing is working fine click on Save template....
Feel Free To Share your Opinions Here..
Liked Article ?
Take A Few Minutes to Share it

Saturday, 3 September 2011

›› Add automatic Read more Hack to your blogger blog

Hello friends,
A nice good Morning To you... With my previous post ILibrary with small updates i am back here with a great hack tool for all of you ....It's the great Read more hack..Unlike others it is fully automatic. You need not to worry about it..Only keep on blogging and the rest it will do ..

So to add this on your blog we require to follow three easy steps...

Step 1
Go to your Blogger Dashboard then click on Design Then select Edit Html then click on the Expand Widget Template.

Step 2
Now Search For The Following Code by pressing (Ctrl+F)
</head>
Now Copy the following Code just above it
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Step 3
Now Find the Following Code :
<data:post.body/>

Now replace the Above with The Following Code :
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Now hit preview if everything is Fine then Save the Template :D
Take a moment to share....
Feel free to share you comments over here

Sunday, 28 August 2011

Add 125x125 Ad Sectors To Your Blogger Blog

Hello Friends,
Presently i found that 125x125 ad Slots are famous in the Blogosphere.These are small and Attractive which take   less space and also load faster. Many of the Bloggers use it through css. But in this post i will make you learn how to use it in simple HTML language :D. See The Sample Demo Bellow .
Don't Worry Installing it is very easy. It Just takes 4 Steps.



Here we Go :

Step 1
Go to blogger Dashboard, now select "Design" and click on "Add a Gadget" then select it as "HTML/JavaScript".

Step 2
Now Copy The Following Code and Paste it there.

<center><table border="0"><tr>
<th width="126" height="126" align="center"><img src="http://imgboot.com/images/cybersidh/125x125ad.gif"/></th>
<th width="126" height="126" align="center"><img src="http://imgboot.com/images/cybersidh/125x125ad.gif"/></th>
</tr><tr>
<td width="126" height="126" align="center"><img src="http://imgboot.com/images/cybersidh/125x125ad.gif"/></td>
<td width="126" height="126" align="center"><img src="http://imgboot.com/images/cybersidh/125x125ad.gif"/></td>
</tr></table></center>

Step 3
Save The Widget.
Key:
Blue : No of Columns
Red : No Of Rows
Brown : Image Link
Step 4
As soon as an advertiser approaches you, replace the links in BROWN in the code above with the new ads.



You Can use any of these :



Monday, 22 August 2011

Table Of Contents

Hello Friends,
Most of you must be aware about the Use Of A Sitemap or Table Of Contents in your site...
In this Post i will make you learn how to use Table Of Contents in you site in very Easy Steps....
So First Of all let me Say the Benefits of a Sitemap (Table of Content)

Benefits Of Having A Sitemap



A website's ranking with the search engines is one of the most important elements of business success. It is important to get your pages indexed so that you can show up in the results of searches done using the search engines.
Indexing is a process by which search engines, such as Google, send their robots to process and categorize the pages on your website. Some search engines might find it difficult to find all of your pages, especially the pages that are deeply buried.
There are some things you can do to help the search engines find all of your pages. These techniques will also help the people who visit your site to find the pages and move through your website with ease. These tips are primarily for Google, because of Google's present dominance over the Internet search industry. Google has the potential to bring more visitors to your site than all of the other popular directories and search engines, such as Yahoo and MSN, put together.

Preview


Indexing Depth

The number of visits that Google's robot will make to your site pages is determined by how often your site is updated. If you update your site every day, Google will most likely visit your site everyday. The depth of the indexing done by Google depends on the layering of levels of your site's tree. Your homepage will be considered a first level page. Any page that is linked to from your homepage will be considered a part of the second level. Any pages that are linked to from these second level pages, but not from the homepage, are considered third level pages.
The depth that Google will travel while indexing your pages will depend on the page ranking of each page. The indexing will follow a pattern. For example, if your homepage has a ranking of at least one then your second level pages will get indexed. If the second level pages do not have a good ranking then your third level pages and any pages at a level beyond that will not be indexed. Google will not index these extended page levels.


So Here Are the Steps :

  • Create a Page
  • Now Copy the Following Code and Paste in the page (HTML Tab)


NOTE: Replace www.ilibrary.co.in with your site address.


<script src="http://sidharth12.googlecode.com/files/Tabel%20Of%20Content.js">
</script>
<script src="http://www.ilibrary.co.in/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Thursday, 30 June 2011

Blogger - Remove NavBar




Hello Friends,
Nice to meet you again....
I Know that it is very annoying to see the NavBar in your Blog...
I too recommended you to remove the NavBar in your Blog...

Now it is possible to remove the bar..
You just Need to Follow my Simple instructions....

So Be Careful Here We Go...

  • Go to your Dashboard
  • Now click on the Design tab.
  • Now you need to click on the "Edit Html" tab.
  • Now Press (Ctrl+f) in the Box which appears type "</head>"
  • Copy the Bellow code and paste immediately just above the "</head>"
<style type="text/css"> #navbar-iframe { height:0px; visibility:hidden; display:none; } #navbar { height:0px; visibility:hidden; display:none; } </style>


Now Save the template and say goodbye to NavBar...


Update Yourself !!!

For Discussions Related To This Topic Click Here

Thursday, 16 June 2011

Dancing effect (For Bloggers)

Hi Flocks,
Today i got a cool nice widget for all of you...
Have you ever imagined how it would look if your text or images bounce to left when you hover your mouse on them ????


Demo:-


Go To ILibrary
Sidharth Is Cool


Don't think so much just add this to your blog..
But be care full Don't change anything or else it will stop working !!!!


Steps are summarized bellow :-


  • Sign in to blogger then click on design then on the edit html tab..
  • Now find "</head>" without ("") by pressing "Ctrl+F"
  • Now paste the following code just above or before it ("</head>"):-

<!--DANCING-NUDGE-LINKS-STARTS-->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
 $(document).ready(function() { $('a.nudge').hover(function() { //mouse in $(this).animate({ paddingLeft: '20px' },400); }, function() { //mouse out $(this).animate({ paddingLeft: 0 }, 400); }); });
</script>
<!--DANCING-NUDGE-LINKS-STOPS-http://ilibrary.tk-->





  • Now Save the template by clicking on "Save template"











    • Now whenever you want to add this dancing effect to any of your links/images (either in widgets/posts), add this code (class="nudge") to the HTML "a" tag, like this:-

    <a href="http://ilibrary.co.in" class="nudge">Link-Text</a>
    • And to use images instead of text, use this code:
    <a href="http://ilibrary.co.in" class="nudge"><img src="http://i41.tinypic.com/5wf6h5.jpg"/></a>





    For Discussions Related To This Topic Please Click here

    Subscribe to: Posts (Atom)
    All Rights Reserved ILibrary |