Adding Floating top bar


Adding Floating top bar
  • Adding to Blogger
    1. Go to Design > Page Elements.
    2. Click Add A Gadget.
    3. In Add A Gadget window, select HTML/Javascript .
    4. Copy the code below and paste it inside the content box.
    5. Save the gadget.
    6. Drag the gadget and reposition it under Blog Posts gadget.
    7. Click Save button (top right hand corner).
  • Adding to WordPress
    1. Go to Dashboard > Appearance > Widgets > Available Widgets.
    2. Drag Text widget into a sidebar.
    3. Paste in the code.
    4. Save.



<style type="text/css">


#topbar10{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightblue;
width: 450px;
visibility: hidden;
z-index: 100;
}


</style>


<script type="text/javascript">
***********************************************
* Floating Top Bar script- © ebookmaterials.blogspot.com
* Visit http://topsites100.blogspot.com/ for full source code
***********************************************/


var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 1 //set x offset of bar in pixels
var startY = 60 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"


function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}


function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar10").style.visibility="hidden"
}


function staticbar(){
barheight=document.getElementById("topbar10").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar10");
stayTopLeft();
}


if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>


<div id="topbar10">
<a href="" onclick="closebar(); return false"><img align="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghZ4vjeI7nBkH5YUn6XOyuB6ppJ9aE5QIyMfGF3gF3by-o06vNLx_FGneynhoMoS14Zxb1Hk0ARGFIJ5uPOwsr6ciDUy2EtJ5fC8SR0-qsAAaDMIwEtYHDdkrl_gTwlmtt56iKJRltO8c/s1600/close.gif" border="0" /></a>
<font color="Red" size=5>Search any Content</font>
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
  <div>
    <input type="hidden" name="cx" value="partner-pub-8023282607660344:otbkwvm32ff" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <input type="text" name="q" size="51" />
<input type="submit" name="sa" value="Search" />
        <br/>
    <input id="custom" type="radio" name="cx" value="partner-pub-8023282607660344:otbkwvm32ff" / checked /><label for=custom> ebookmaterials </label> <input id="www" type="radio" name="cx" value="!partner-pub-8023282607660344:otbkwvm32ff"  /><label for=www> Web Search </label>
    &nbsp:&nbsp;&nbsp;
<a href="http://topsites100.blogspot.com"><font color="Red" size=4>Get This</font> </a>
  </div>
</form>
<script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>


</div>

Adding floating Social media share bars


Adding  floating Social media share bars

I. Adding the buttons

  • Adding to Blogger
    1. Go to Design > Page Elements.
    2. Click Add A Gadget.
    3. In Add A Gadget window, select HTML/Javascript .
    4. Copy the code below and paste it inside the content box.
    5. Save the gadget.
    6. Drag the gadget and reposition it under Blog Posts gadget.
    7. Click Save button (top right hand corner).
  • Adding to WordPress
    1. Go to Dashboard > Appearance > Widgets > Available Widgets.
    2. Drag Text widget into a sidebar.
    3. Paste in the code.
    4. Save.


<!-- floating share bar Start ebookmaterials.blogspot.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' >
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="https://accounts.google.com/Login?continue=http://labs.google.co.in/smschannels/channel/ebookmaterials" alt="Free sms alert"><image src="http://aux.iconpedia.net/uploads/20456545441469173030.png"></image></a>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://topsites100.blogspot.com"><font color="Red" size=3>Get This</font></a>
</div>

<!-- floating share bar End --></div>

Vertical alignment II. Customizing

  1. Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
  2. Horizontal alignment 
    Change the value of margin-left in code line 3. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. 
    To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as inright:10px;) respectively.
  3. Replacing and removing buttons 
    You can replace existing buttons with your own. Each button is represented by this code: 
    1<div class='sbutton'>
    2BUTTON CODE
    3</div>
    To replace the button, simply replace the button code with the new code. 
    To remove the button, delete the whole div.
Update (for Blogger): If somehow your Google +1 button doesn’t appear despite other buttons appear successfully, try this workaround:
  1. Go to Design > Edit HTML and find this line:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    or 
    <body>
  2. Copy the share bar code and paste it right below the line.
  3. Replace the margin-left:-71px; in code line 3 with left:10px;.
  4. Preview before saving.

one Time Pop Up Java Script code


A one Time Pop Up Java script code


BOOST YOUR AUDIENCES WITH YOUR EXITING READERS HELP

When the Facebook Like box or +1 button placed in your blogs sidebar, It'll not be a attractive place to force the readers to click them. But When a +1 button or Like box popes Up (without annoying them) The readers will surely  click on buttons.
Also you can add Email subscription box in the pop up too. 

Enough Talks  I know you have a creative mind. So I do not need to explain the advantages 

INSTALL THE JAVA SCRIPT

First log in to your Blogger account, Then Go to.. Template tab and then BackUp your template in case if you accidentally delete or add a wrong code.

Then Click Edit HTML and search for </head> tag ( Ctrl+F ) . Add the following code just before it.


<!--One Time Pop Up by Blogtrickstream.com -->
<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){
$(&quot;#backgroundPopup&quot;).css({
&quot;opacity&quot;: &quot;0.7&quot;
});
$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
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 = $(&quot;#popupContact&quot;).height();
var popupWidth = $(&quot;#popupContact&quot;).width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$(&quot;#popupContact&quot;).css({
&quot;position&quot;: &quot;absolute&quot;,
&quot;top&quot;: toppos,
&quot;left&quot;: leftpos
});
//only need force for IE6

$(&quot;#backgroundPopup&quot;).css({
&quot;height&quot;: windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie(&quot;anewsletter&quot;) != 1) {

//load popup
setTimeout(&quot;loadPopup()&quot;,5000);
}
//CLOSING POPUP
//Click the x event!
$(&quot;#popupContactClose&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Click out event!
$(&quot;#backgroundPopup&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;&amp; popupStatus==1){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
}
});

});
</script>
<!--End One Time Pop Up by Blogtrickstream.com -->
If you are familiar with Java Scripts, The comments marked with Red color is for you.


Credits: The Java script is taken from simplex blog

CSS CODE

After the Java script, Search for this code   ]]></b:skin>  Just before it add the following code.



#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{
        border-top:5px solid #53A9FE;
        border-left:5px solid #53A9FE;
        border-bottom:5px solid #53A9FE;
       border-right:5px solid #53A9FE;
border-radius:30px;
       -moz-border-radius:30px;
       -webkit-border-radius:30px;
      
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:center;
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#A30101;
font-weight:700;
display:block;
}


THE GADGETS TO APPEAR

You can add anything that fit with the popup box. Such as a feedburner subscription box, Like box, Share buttons or anything. Just with the above format.
And this code should be apear Just before  </body> tag.



<div id='popupContact'>
<a id='popupContactClose'>
<img alt='x' height='20' src='https://lh5.googleusercontent.com/-wrS4yypmVzU/Tvxl7B-kIfI/AAAAAAAAAVE/fzga9_tj4aM/s800/Button-Close-icon.png' width='20'/>
</a>
<h1>PopUp Title</h1>
Code of the gadget you need
<br/>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://topsites100.blogspot.com/2012/04/one-time-pop-up-java-script-code.html">Get This</a></p>
<p id='contactArea'/>
</div>
<div id='backgroundPopup'/>



Just replace " PopUp Title " with a PopUp title of your choice . Also replace " Code of the gadget you need " with your gadged HTML code, It could be a Like box, +1 button, Subscription box, Welcome message.. or any.

Free Email Alert for New post--Subscribe IT

Enter your email address: