how to display the gadget sidebar on certain pages

how to display the gadget sidebar on certain pages
Here are the parts of your blog page 
Homepage - Is your blog's main page, the front page. 
Archivepage - is the archive page 
Itempage - Is your post pages 
Indexpage - It is the home page, the page labels, and search page. 
Staticpage-new feature that google page that does not get in on the posts. 


1. Showing Widget Only on Homepage 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</ B: if>


2. Widget displays in addition to the Homepage 

<b:if cond='data:blog.url != data:blog.homepageUrl'>
.....................................
</ B: if>

3. Widget displays only in Archivepages 


<b:if cond='data:blog.pageType == "archive"'>
......................................
</ B: if>


4. Widget displays in addition to the Archivepages 


<b:if cond='data:blog.pageType != "archive"'>
.................................................. ..
</ B: if>

5. Widget displays only in Itempages / Post 


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

6. Displays widgets in addition to the Itempages 


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

7. Displaying widgets only in Staticpages 


<b:if cond='data:blog.pageType == "static_page"'>
..................................
</ B: if>

8. Displays widgets in addition to the staticpages 


<b:if cond='data:blog.pageType != "static_page"'>
............................
</ B: if>

9. Posts widget displays the URL of Certain 


<b:if cond='data:blog.url == "your URL posts "'>
.........................................
</ B: if>

10. Displays widgets in addition to the specific post URL

<b:if cond='data:blog.url != "your URL posts"'>
................................................
</ B: if>

How Uses? 
The following code example my blog widget 
    <b:widget id='HTML2' locked='false' title='stat' article type='HTML'> 
    <b:includable id='main'> 
    .................................................. opening code 
      <! - Only display title if it's a non-empty -> 
      <b:if cond='data:title != ""'> 
        <h2 class='title'> <data:title/> </ h2> 
      </ B: if> 
      <div class='widget-content'> 
        <data:content/> 
      </ Div> 
      <b:include name='quickedit'/> 
    .............................................. cover code 
    </ B: includable> 
    </ B: widget> 


The red is the placement of code for the appearance of the widget on certain pages only. May be useful 

how to add recent comments in IntenseDebate

1. sign in to your account

Click extras

and widgets

2. select the gadget you want 


the red mark your url address

3. Select where you want to display the widget

last look at the results

Add The Pop Up Subscription Box To Blogger

How to Add The Pop Up Subscription Box To Blogger

Remember Always Back Up Your Template Before You Make Changes  

Step 1. In Your Blogger Dashboard Click Design > Edit Html 



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code 

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

Note - This is a scroll box make sure to get all the code.

/*Subscription Pop Up Css*/

#popupContactClose{

cursor: pointer;

text-decoration:none;

}

#backgroundPopup{

display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:100%;

width:100%;

top:0;

left:0;

background:#000000;

border:1px solid #cecece;

z-index:1;

}

#popupContact{

display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:384px;

width:408px;

background:#FFFFFF;

border:2px solid #cecece;

z-index:2;

padding:12px;

font-size:13px;

}

#popupContact h1{

text-align:left;

color:#6FA5FD;

font-size:22px;

font-weight:700;

border-bottom:1px dotted #D3D3D3;

padding-bottom:2px;

margin-bottom:20px;

}

#popupContactClose{

font-size:14px;

line-height:14px;

right:6px;

top:4px;

position:absolute;

color:#6fa5fd;

font-weight:700;

display:block;

}

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code 

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

!--Pop Up Subscription--> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/> <script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/> <script type='text/javascript'> var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ centerPopup(); //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var windowscrolltop = document.documentElement.scrollTop; var windowscrollleft = document.documentElement.scrollLeft; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); var toppos = windowHeight/2-popupHeight/2+windowscrolltop; var leftpos = windowWidth/2-popupWidth/2+windowscrollleft; //centering $("#popupContact").css({ "position": "absolute", "top": toppos, "left": leftpos }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ if ($.cookie("anewsletter") != 1) { //load popup setTimeout("loadPopup()",5000); } //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); } }); }); </script> <!--End Pop Up Subscription @ http://blogtoquick.blogspot.com-->

Step 6. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code

</body>

Step 7. Copy and Paste the following code Directly Above / Before </body>

<div id='popupContact'> <a id='popupContactClose'>x</a> <h1>Get Our Latest Posts Via Email - It&#39;s Free</h1> <p id='contactArea'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogtoquick&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='blogtoquick'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form></p>
</div>
<div id='backgroundPopup'/> </div> <div id='backgroundPopup'/>

Important - You need to change our feedburner username with yours.The username for your feed can be found at the end of your feed URL.For example the our feedburner URL is http://feeds.feedburner.com/blogtoquick , with blogtoquick being the username.

Drop your comments and questions below. 

how to add vertikal slide dancing

how to add vertikal menu slide dancing

DEMO



This menu is perfect slide dancing in place disidebar your blog is fairly easy to install you just follow these steps:


1.Log in to your blogger dashboard
2.Go to --> layout- -> Edit HTML
3.Scroll down to where you see this:
]]></b:skin>
4.Now add below code just before ]]></b:skin> tag .

/**

 * Name: Nice Menu

 * Version: 0.1

 * Author:Hendrytha

**/

ul.nice-menu {

  list-style: none;

  margin-top: 30px;

  width: 300px;

}

@-moz-keyframes expand {  

  0% {

    width: 5px;

    padding-left: 0px;

  }

  

  100% {

    width: 200px;

    padding-left: 20px;

  }

}

@-moz-keyframes expand-bounce {

  0% {

    width: 5px;

    padding-left: 0px;

  }

  

  50% {

    width: 200px;

  }

  

  70% {

    width: 170px;

  }

  

  80% {

    width: 200px;

  }

  

  90% {

    width: 190px;

  }

  

  100% {

    width: 200px;

    padding-left: 20px;

  }

}

@-webkit-keyframes expand {  

  0% {

    width: 5px;

    padding-left: 0px;

  }

  

  100% {

    width: 200px;

    padding-left: 20px;

  }

}

@-webkit-keyframes expand-bounce {  

  0% {

    width: 5px;

    padding-left: 0px;

  }

  

  50% {

    width: 200px;

  }

  

  70% {

    width: 170px;

  }

  

  80% {

    width: 200px;

  }

  

  90% {

    width: 190px;

  }

  

  100% {

    width: 200px;

    padding-left: 20px;

  }

}

@-moz-keyframes shrink {

  

  0% {

    width: 200px;

    padding-left: 20px;

  }

  

  100% {

    width: 5px;

    padding-left: 0px;

  }

}

@-moz-keyframes shrink-bounce {

  

  0% {

    width: 200px;

    padding-left: 20px;

  }

  

  50% {

    width: 5px;

  }

  

  70% {

    width: 35px;

  }

  

  80% {

    width: 5px;

  }

  

  90% {

    width: 15px;

  }

  

  100% {

    width: 5px;

    padding-left: 0px;

  }

}

@-webkit-keyframes shrink {

  

  0% {

    width: 200px;

    padding-left: 20px;

  }

  

  100% {

    width: 5px;

    padding-left: 0px;

  }

}

@-webkit-keyframes shrink-bounce {

  

  0% {

    width: 200px;

    padding-left: 20px;

  }

  

  50% {

    width: 5px;

  }

  

  70% {

    width: 35px;

  }

  

  80% {

    width: 5px;

  }

  

  90% {

    width: 15px;

  }

  

  100% {

    width: 5px;

    padding-left: 0px;

  }

}

ul.nice-menu li {

  width: 5px;

  height: 30px;

  line-height: 20px;

  padding: 0px 0px 0px 0px;

  margin-top: 3px;

  background: transparent;

  width: 5px;

}

ul.nice-menu.tight li {

  margin-top: 0 !important;

}

ul.nice-menu li {

  -moz-animation-name: shrink;

  -moz-animation-duration: 0.5s;

  -moz-animation-timing-function: ease-in-out;

  -webkit-animation-name: shrink;

  -webkit-animation-duration: 0.5s;

  -webkit-animation-timing-function: ease-in-out;

}

ul.nice-menu.bounce li {

  -moz-animation-name: shrink-bounce;

  -moz-animation-duration: 0.5s;

  -moz-animation-timing-function: ease-in-out;

  -webkit-animation-name: shrink-bounce;

  -webkit-animation-duration: 0.5s;

  -webkit-animation-timing-function: ease-in-out;

}

ul.nice-menu li:hover {

  width: 200px;

  padding-left: 20px;

  -moz-animation-name: expand;

  -moz-animation-duration: 0.5s;

  -moz-animation-timing-function: ease-in-out;

  -webkit-animation-name: expand;

  -webkit-animation-duration: 0.5s;

  -webkit-animation-timing-function: ease-in-out;

}

ul.nice-menu.bounce li:hover {

  -moz-animation-name: expand-bounce;

  -moz-animation-duration: 0.5s;

  -moz-animation-timing-function: ease-in-out;

  -webkit-animation-name: expand-bounce;

  -webkit-animation-duration: 0.5s;

  -webkit-animation-timing-function: ease-in-out;

}

ul.nice-menu a {

  width: 200px;

  text-decoration: none;

  font-size: 14px;

  color: #FFF;

  text-shadow: 0px 0px 3px #333;

  font-weight: bold;

  position: absolute;

  padding: 5px 0px;

  padding-left: 20px;

}

ul.nice-menu li.green {

  background: rgb(107,186,112);

}

ul.nice-menu li.blue {

  background: rgb(78,92,127);

}

ul.nice-menu li.orange {

  background: rgb(216,121,40);

}

ul.nice-menu li.dark {

  background: rgb(42,32,30);

} 

ul.nice-menu li.red {

  background: rgb(178,59,30);

}

ul.nice-menu li.bright {

  background: rgb(241,249,210);

}

5.Click on "Save Templates" and now you are done.

NEXT STEP

Login to your blogger dashboard and go to Desing --&-- Page Elements.

.Click on 'Add a Gadget' on the sidebar.

Select 'HTML/Javascript' and add the one of code given below



<ul class="nice-menu">
<li class="orange"><a href="">Home</a></li>
<li class="red"><a href="">About</a></li>
<li class="green"><a href="">Portfolio</a></li>
<li class="blue"><a href="">Blog</a></li>
<li class="bright"><a href="">Contact</a></li>
<li class="dark"><a href="">What not?</a></li>
</ul>