CSS3 Spin On Hover Image Effect On Blogger

Spin image on hover effect is cool and it's also easy to do..........so this time i'll show you how to give spin on hover CSS3 effect to your pics in blogger.....

• Go To Blogger > Template > Edit HTML

• Just Above ]]></b:skin> post the script given below

.rotate{
 -webkit-transition-duration: 1s;
 -moz-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
 }
.rotate:hover
{
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}

• Now save your template.

• Now on pics you want to spin add class="rotate" tag

Like this : -

<img class="rotate" src="Image URL" />

• You can also add this only in one post by adding code given below on your post

<style>
.rotate{
 -webkit-transition-duration: 1s;
 -moz-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
}
.rotate:hover
{
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}
</style>

That's It.....Enjoy!!

CSS3 Spinning Image Effect On Blogger

Spinning image effect is cool and it's also easy to do..........so this time i'll show you how to give spinning CSS3 effect to your pics in blogger.....

• Go To Blogger > Template > Edit HTML

• Just Above ]]></b:skin> post the script given below

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}

• Now save your template.

• Now on pics you want to spin add id="spin" tag

Like this : -

<img id="spin" src="Image URL" />

• You can also add this only in one post by adding code given below on your post

<style>
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}
}
</style>

That's It.....Enjoy!!

CSS Sticky Footer For Blogger

Stick Footer gives our blog a cool professional touch because it's cool stylish and also in trend and today i'am gonna tell you how to add this professional touch on your blogger blog.....

• Go To Blogger > Template > Edit HTML

• Find </b:skin>  and paste the code given below just above </b:skin>

#stickey_footer { /* This will make your footer stay where it is */
 background: none repeat scroll 0 0 #1D1D1D;
 border: 1px solid rgba(0, 0, 0, 0.3);
 bottom: 0;
 font-family: Arial, Helvetica, sans-serif;
 height: 40px;
 left: 50%;
 margin: 0 auto 0 -490px;
 padding: 0 10px;
 position: fixed;
 text-shadow: 1px 1px 1px #000000;
 width: 960px;
}
/* border curves */
#stickey_footer {
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#stickey_footer:hover {
 background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
 -moz-box-shadow:0px 0px 11px #191919;
 -webkit-box-shadow:0px 0px 11px #191919;
 box-shadow:0px 0px 11px #191919;
}
#footer_menu {
 margin: 0;
 padding: 0;
 width:auto;
}
#footer_menu li {
 list-style: none;
 float: left;
 font-size:12px;
 padding: 12px 14px 14px 14px;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
 padding:5px 8px 3px 14px;
 float:left;
 background:url("“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisRjfy6foHkiGY2VGZK5SHFzBG4OZTDZipmIN1tQCSzjOsvBo0La6RUSCbZAP8X0nwyyKg-hUqyL6U2FVPaIeYk2olqUTF3V-irw1vzTff-eVNT6X6rl-sJ1xYOsEHLvM4Gxda6QzmDC0/s1600/home.png") 13px 5px no-repeat;
 width:36px;
 height:30px;
 border:none;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 cursor:pointer;
}
#footer_menu li:hover {
 background:#202020; /* Fallback color for old browsers */
 background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPNV_4OUHSvQ0__ZrO9hXpKkIBoMtssRc-4a8d-pLEDIIF3UkFpDfhsP05Pn2-h7QgcUOcSD7B1OFa00ZLl7roL6-NdexM3Saez9H46Y5xSDaY7uj_8AxgBbJRXFmWugI40WLoQq3SS9E/s1600/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
 display: block;
 color: #cccccc;
 text-decoration: none;
}
#footer_menu li a:hover {
 color: #ffffff;
}
#footer_menu li span {
 display:none;
}
#stickey_footer #social_icons {
 float:right; /* social icons positions */
 width:auto;
 margin:5px 15px 0px;
 padding:0px;
 overflow:hidden;
}
#stickey_footer #social_icons li {
 margin-right:12px; /* 12px is the space between each one of them */
 float:left;
 width:24px;
 padding:0px;
 height:32px;
 list-style:none;
 _margin-right:0px; /* this is for IE6 only */
}

• Save Your Template

• Not Go To Layout > Add A Gadget > HTML/JavaScript

• And paste the code given below:

<div id="stickey_footer">
 <!– Begin Footer Menu –>
<ul id="footer_menu">
 <li><a href="#"><span>Home</span></a></li>
 <li><a href="#">Label</a>
 <li><a href="#">Widgets</a>
 <li><a href="#">Friends</a>
 <li><a href="#">Blog</a>
 <li><a href="#">Contact</a>
 </ul>
 <ul id="social_icons">
 <!–Social Icons –>
 <li><a href="http://twitter.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZRqXg0YZgPy8l1OwMn7Cgcj8yBFLub7ZCyBDVTn4zXQFg0YwoNBzgeDTaHrApZhlKUkw_mYUAd0YHnQFC6ygPWHvYE3OFOw4ZMPrJB-_bpt5Pj8ywZZQ2wrveqMgDLihQAk-_RZO1124/s1600/twitter.png' alt="" /><span>Twitter</span></a></li>
 <li><a href="http://digg.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioQDbhV06OkarooIkYgeCJX7lXIBficAF90RqalcthEo3zdH2OTL6x1s4AHVgEquzSHSFgSfYH5a9Z73p3URWfxd0vOBveeUDIlnwjxlTuyZGRtU88Cf2BVio6XjLoNDEBiUdzW0fFy4M/s1600/digg.png' alt="" /><span>Digg</span></a></li>
 <li><a href="http://flickr.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0SHyOyXKyr02bPkKEtRPlq4PG8ONHfD-ehIehRMUztUssKcusaxOrahBimrjwfOcleI-JKo4h6FTxiQyQn5vQHtEBrLAd6JUGMBvKerCotEKJnVro4xywlhVrvNIlbKuwTQ4bBz1Rzs/s1600/flickr.png' alt="" /><span>Flickr</span></a></li>
 <li><a href="http://fb.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Dsn4U5h3JsIkRWH3mH7wckXup-akooAlVi4PJomTw78hcQ4wlNg-4zYz2W53Jhcm62A2NgUKKQHhyphenhyphenkiMrxIgY8g9ujSwbVuHVRSEFZa9taMK8_U77ia_5V5iDUW1sUuM583KqwYlNrk/s1600/facebook.png' alt="" /><span>Facebook</span></a></li>
 </ul>
</div>

• Now replace username with your usernames.

That's It.....For any help/request or anything please comment and i'll contact you as soon as possible.....

Stop Blogger Redirecting To Country Specific Domains

As a blogger i really hate when blogger redirect me to my country specific domain .in . Because of this redirection i can't add a Facebook Login Button so today i'am show you how to stop this redirection on your blogger blog,

• Go To Blogger > Template > Edit HTML

• Find :

<b:include data='blog' name='all-head-content'/>

• And Just Below It Paste :

<script type="text/javascript">
var str= window.location.href.toString();
if ((str.indexOf('.com/'))=='-1') {
var str1=str.substring(str.lastIndexOf(".blogspot."));
if (str1.indexOf('/')=='-1') {
var str2=str1;
}
else {
var str2=str1.substring(0,str1.indexOf('/')+1);
}
window.location.href =window.location.href.toString().replace(str2,'.blogspot.com/ncr/');
}
</script>

• Save Template And You're Done ......Now Check It By Visiting.....

Advance CSS Menu For Blogger

We all know that CSS menus are in trend over blogger so i got this menu.....i found this menu in a blog but it was not working so i downloaded pics and put'em here and now it's working and still it's looking damn awesome......

• Go To Blogger > Template > Edit HTML

• Find ]]></b:skin>  and just above it paste the below CSS code

#wmenu {
 list-style: none;
 padding: 0;
 margin: 0;
 width: 774px;
 height: 58px;
 position: relative;
}
#wmenu span {
 display: none;
 position: absolute;
}
#wmenu a {
 display: block;
 text-indent: -900%;
 position: absolute;
 outline: none;
}
#wmenu a:hover {
 background-position: left bottom;
}
#wmenu a:hover span{
 display: block;
}
#wmenu .home {
 width: 144px;
 height: 58px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjaweIKRWqPhSBccL-yr9F_eV9McMhe7p_nV8pVBib5AnTqxOtlMc142whY9DlPBmMDtUucV-nkJUQo1qg5fmmr_G8ryWlxWgpGMT8TuG5XZpvqNCXNikwPHnh9ziT3Xf6VnFm4wGnqRU/s1600/home.gif) no-repeat;
 left: 96px;
 top: 20px;
}
#wmenu .home span {
 width: 86px;
 height: 14px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe_WnDelfanJpinTL6DRI-OPOCBFY6UDhD8aNTQYWRo4IKxbWJrJjXbeT_f7Cr0mMQvjG4_wr6tKGbhBC8L6UvUQ28XPc0B5MEjyqFGUHlHGCsmEZ6aYwHM3zLpfCTjEqRVgGj2ix2fU/s1600/home-over.gif) no-repeat;
 left: 28px;
 top: -20px;
}
#wmenu .about {
 width: 131px;
 height: 51px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNMjnZ2khwfg2uliW_vzzucxCH6vtJ7KWmQiP2_SUbj6oKTvc-6UReJYZKDOKakAZlTz5Wt0dZWBu3y28aLUdqrksy-VZhr6wKEdZCUI2_UcK97vPv4cgUla7r-Gjw-xcDwByUp0_v3Y/s1600/about.gif) no-repeat;
 left: 338px;
 top: 20px;
}
#wmenu .about span {
 width: 40px;
 height: 12px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCn41S-WDIbwc72E4GbUna_1dhNANOJbLxtyMMGqnsWB4BE59aIESKt_E_lAWxwVpy9y8b0N-g1koWuevBCJ4hy_de-_jAAQPm42QRVE_mckY-DWyUCJdluzHZaSyojFCGljuDnetvXY/s1600/about-over.gif) no-repeat;
 left: 44px;
 top: 54px;
}
#wmenu .rss {
 width: 112px;
 height: 47px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiInF3OvqjF7VyIb-8mAjw1v0NW_Ko42jMKpcHsZ93Fqshv7fBfEWXQV5u8CZWpN4G2rJbITe2d-gjlGK1VRvieE39pykRbQoVWkWd5xv_NaSLDsezgU4AGl5aSxOqewEB82O25dOnBX7Y/s1600/rss.gif) no-repeat;
 left: 588px;
 top: 20px;
}
#wmenu .rss span {
 width: 92px;
 height: 20px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkGF9_dVc0sj34HVDiRdwyRRGYnTUEXksE0GhzWGzoWqABQK_3-N36xRFGLXYTtAE-gCe4RFcVTIMuk3PbbpgX-4iQ11gpVwytREpC4zDvn65nO0jk-DJhJbHbIrpIQRp9cWy3mtuIC8A/s1600/rss-over.gif) no-repeat;
 left: 26px;
 top: -20px;
}

• Save Template 

•  Go to blogger  >  Layour > Add a gadget  > HTML/JavaScript and place the HTML below and click save.

<ul  id="wmenu">
<li><a href="#" class="home">Home <span></span>
</a></li>  <li><a href="#" class="about">About <span></span>
</a></li>  <li><a href="#" class="rss">RSS <span></span></a>
</li></ul>

• Replace  # with your links....

If any widget/tutorial of this blog is not working then please let me know by commenting..........

"Do You Like This Story?" Widget For Blogger

Attract your viewers with "Do You Like This Story..?" widget ......this widget is used by  so many famous website and blogs and i found this widget on MBT and all credit of this post/code goes to them.....

• Go To Blogger > Template > Edit HTML

• Backup your template

• Check the "Expand Widget Templates" box

• Search for, <data:post.body/>

• Just below it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTBvPzfyqkwVBhh1oyzVe8GHHLR1B6rdy5d1xBlcB0ys9jLTCqFJAkCye1h8jfVYaksWwujcIn54MLVKZkY1uo5vfAOiBp3zfQPnY3mjHuUEcHNNxlA0050787rYoK7xBjAEQx8j8AO0/s1600/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;,
endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Do you Like this story..?</span>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=WWEFAnsNation&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='WWEFansNation'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>
<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p>
<a href='http://feeds.feedburner.com/WWEFansNation' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyopHqj3HMOowxBUJWuE8V4NPDbBPpPAaRl63OybCKOvcboPFtgEt0xFfo6J7EGgRvOchyqOsSyXCY4IubHGddtwochhxOMu_EwbzRVL1wYNQDGGJgj2B1fEt_PK9V5kK1phJOreLv_g/s1600/w2bRSS+.png'/></a>
<a href='http://twitter.com/hardeepasrani' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jxg89L3_dGDEUHo4VgJgnaxganw6Nt_LJoNBJJljh0-VbODiV9cUt0ZTmVQPFmtr9V2ZgAjb6ec4ka9zvyhGRv-cIg4aKTCOeb9cSNeGJNNx-PXxPIgF8L8m-UQtoVyQVVQaug4YaKY/s1600/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/WWEFansNationPage' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWEUpWdrup6ZcnkfgAsyKOXgL7GSZnNEZ5b3VrVo_mMS1oHjkop1kp5LiKVSmFm1nqOUbyTlJCtQ6h_kmCi2bJ_kZ9rHqnZrWnbt2x_vaceAxiEwntImPKIadI9XtJpoM0u8Nh_peoJ8s/s1600/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if> 

• To change the colour of the "Do you like this story..?" text then simply change #FF683F  with a hexadecimal color of your choice.

• Now replace http://feedburner.google.com/fb/a/mailverify?uri=WWEFansNation with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.

• Replace tntbystc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=WWEFansNation

• Replace orange link with your Feedburner link

• Replace the blue link with your twitter link

• Replace the purple link with your Facebook Like Page link

Credits : MTB

How To Redirect a Blogger Post to Another URL

• Login to your blogger dashboard > Template -> Edit HTML

• Scroll down to where you see <head> tag .

• Copy below code and paste it just after the <head> tag.

<b:if cond='data:blog.url == "YOUR-BLOG-POST-URL"'>
<meta http-equiv="refresh" content="5; url=REDIRECT-URL" />
</b:if>

• Replace YOUR-BLOG-POST-URL and REDIRECT-URL as your need.Look at the example below.

<b:if cond='data:blog.url == "http://widcraft.blogspot.com/p/facebook.html"'>
<meta http-equiv="refresh" content="5; url=http://facebook.com/hardeepsrani" />
</b:if>

• If I add above code to my template,When someone go to my contact us page/post he will be redirected to my home page after 5 seconds.To redirect without waiting replace 5 with 0.

• Now save your template and you are done.

WordPress Style Social Subscription Widget For Blogger

I added this widget in past but deleted because of some errors but now it's back. This time it's even more easier to add this widget on your Blogger.

Just use our widget generator to generate widget code and after adding it you can also change readers/followers/fans count....

Making Pages Inside Blogger Posts

Finally after so much search on google and other places i found how to make pages inside a blogger posts aka sub posts ....

Tips:
1.First create your post and copy html of your post in notepad application of your computer.

2.After pasting the above code (The ol list) in the Edit HTML Tab, if you go to the Compose Tab and then go back to Edit HTML tab ,you will see the links have changed in the href , if you don't revert them back to only # ones, then this will not work. So either add this code just at the end of writing your Post or don't switch to Compose tab :(

• Create A Post > Choose HTML Option And Paste The Below Script 

<div class="content11" id="page-1">

Content Of Page One

</div>
<div class="content11" id="page-2">


Content Of Page Two


</div>
<div class="content11" id="page-3">

Content Of Page Three

</div>

<ol id="toc">
<li><a href="#page-1">1</a></li>
<li><a href="#page-2">2</a></li>
<li><a href="#page-3">3</a></li>
</ol>

• Replace Content Of Page One/Two/Three with the HTML of your page one/two/three content.

• Now after completing above step just post this script below it

<style>
div.content11 {clear: left;padding: 1em;}
div.content11.inactive {display: none;}
ol#toc {height: 2em;list-style: none;margin: 0;padding: 0;}
ol#toc a {padding: 0px 8px 0px;margin: 1px 4px;text-decoration: none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;}
ol#toc a:hover {background-color: #DBECF8;padding: 0px 8px 0px;border:1px solid #204e73;}
ol#toc a:hover span {background-position: 100% -120px;}
ol#toc li {float: left;margin: 0 6px 0 0;}
ol#toc li a.active {background-color: #48f;background-position: 0 -60px;color: #fff;font-weight: bold;}
ol#toc li a.active span {background-position: 100% -60px;}
ol#toc span {background: url(tabs.gif) 100% 0;display: block;line-height: 2em;padding-right: 10px;}
</style>
 <script src="http://widcraft.googlecode.com/svn/Pages-In-Posts.js" ></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2','page-3' ]);
</script>

•  Now your post in ready to get published.....you can add more pages on your post by editing  activatables('page', ['page-1', 'page-2','page-3' ]); section in last script and by adding more page option on first script.

If you liked this hack then give up credits and comment :D

SuperBox Lightbox For Blogger

Superbox/Lightbox is a cool option for all bloggers to display some pics , external links and iframe in this cool window with close option.....you can add this features on your pics , gallery and iframe .

Now you all are thinking how to add this widget......it's simple just follow some simple steps......

• Go To Your Blog > Template > Edit HTML 

• Just above ]]></b:skin> post css given below

/* Base Superbox Styles */
#superbox-overlay{position:fixed;top:0;left:0;z-index:9998;width:100%;height:100%;}
#superbox-wrapper{position:fixed;z-index:9999;top:0;display:table;width:100%;height:100%;}
#superbox-container{position:relative;display:table-cell;width:100%;height:100%;margin:0;padding:0;vertical-align:middle;}
#superbox{margin:0 auto;padding:0;}
#superbox-container .loading{margin:0;text-align:center;}
/* IE7 */
*:first-child+html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
*:first-child+html #superbox{position:relative;top:-50%;display:block;}
/* IE6 - Thanks to Thickbox for IE expressions */
* html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
* html #superbox{position:relative;top:-50%;display:block;}
* html #superbox-overlay{position:absolute;height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight + 'px' : document.body.offsetHeight + 'px');}
* html #superbox-wrapper{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
/* Default Theme */
#superbox-overlay{background:#000;}
#superbox-container .loading{text-align:center;font-size:40px;color:#fff;}
#superbox{padding:10px;background:#fff;}
#superbox-innerbox{padding:10px 0;}
#superbox.image{text-align:center;}
#superbox .close,
#superbox .nextprev{overflow:hidden;margin:0;}
/* Container */
#container{position:relative;overflow:hidden;width:820px;margin:0 auto;padding:0 20px 50px;background:#fff;}
pre{overflow:auto;padding:5px;background:#a7dbd8;}
code{background:#a7dbd8;}
pre code{font:12px monospace;}
ul{list-style-type:square;}
img{border:0}
blockquote{margin:50px 40px 0;font-size:30px;quotes:"\201C" "\201D";}
blockquote p:before{content:open-quote;font-weight:bold;}
blockquote p:after{content:close-quote;font-weight:bold;}
cite{float:right;margin-right:40px;display:inline;}
.translations{float:right;margin-right:20px;top:0;margin:0;padding:0;display:inline;}
.translations dt{margin:0;padding:0;text-indent:-9999px;}
.translations dd{margin:0;padding:0;height:19px;}
.translations dd a{float:right;padding-right:20px;line-height:19px;text-align:right;background:url(flags.png) no-repeat 100% 0;}
.translations dd strong a{text-decoration:none;}
.translations dd.en a{background-position:100% -19px;}
.translated-by{position:absolute;top:46px;right:35px;width:150px;padding:10px;text-align:justify;background:#fff;border:1px solid #fa6900;}

• Just above </head> post the below script

<style type="text/css">
/* Custom Theme */
#superbox-overlay{background:#e0e4cc;}
#superbox-container .loading{width:220px;height:90px;margin:0 auto;text-indent:-9999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRqI5dGWfrHV46PyaCYqx4We1McP_p2qtzFPrirZEvZM2ZbI3BcjzvMXtOWT18nv6oaeh9BJD3IpAT9cJDuKaRhP3g7NftKJQVl2artrjjYIZu0OVe1_MIXKcs9dAKDF9JBF5pv4Z2rA/s1600/Loading.gif) no-repeat 0 0;}
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#333;cursor:pointer;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
</style>
<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
</script>
<script src="http://widcraft.googlecode.com/svn/JSuperbox.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$.superbox.settings = {
closeTxt: "Close",
loadTxt: "Loading...",
nextTxt: "Next",
prevTxt: "Previous"
};
$.superbox();
});
</script>

• Click on Save and you're done with this part.

• Now to add superbox effect on your content add these following code on your image/iframe/gallery -

------------------------------------------------------------

On Images
rel="superbox[image]"

For Adding Gallery:
rel="superbox[gallery][GalleryName]" In all the elements of the Gallery

For Adding Links/iFrame:
rel="superbox[iframe]"

For Inline Content:
el="superbox[content]"

For AJAX Content
rel="superbox[ajax]"

------------------------------------------------------------

Some Example Codes -

On Images -

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" rel="superbox[image]">Image Title</a> 

On Gallery -

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" width="75" /></a>&nbsp;&nbsp;<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" width="75" /></a>&nbsp;&nbsp;<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" width="75" /></a>

On Links/iFrame(default dimensions) -

<a href="http://widcraft.blogspot.com" rel="superbox[iframe]">Iframe Superbox (default dimensions)</a>

On Links/iFrame(defined dimensions) -

<a href="http://widcraft.blogspot.com" rel="superbox[iframe] [750x500]"> Iframe Superbox (definded dimensions)</a>

Inline -

<div id="mode-content">
Generates a box containing an element of the page.
The link will be external, and will point to an element of the page using its <code>id</code> attribute.
This element will be copied to appear in Lighbox.
</div>
<a href="#mode-content" rel="superbox[content]">Superboxox element</a>
<a href="#mode-content" rel="superbox[content][500x400]">Superbox element (dimensions)</a>

Ajax -

<a href="http://pierrebertet.net/projects/jquery_superbox/crockford.html" rel="superbox[ajax][crockford-ajax.html]">AJAX SuperBox</a>