People visit your blog to read the posts, Not to see the widgets.
Most of the time they open the post, scroll & read the content and
left. When they are at the bottom of the post your header was out of
their screen. And you don’t get any benefit from it. I know you put many
widgets there!
Installation Procedure
- Go to blogger–>Template—>Edit HTML
- CTRL + F to find </head> tag in your blogs HTML
- Copy and paste below code just above it.
<script>
jQuery(function( $ ) {
var starting_position = $('#header-wrapper').outerHeight( true ) + $('#header-wrapper').outerHeight( true );
$(window).scroll(function() {
var yPos = ( $(window).scrollTop() );
if( yPos > starting_position && window.innerWidth > 400 ) { // show sticky menu after these many (starting_position) pixels have been scrolled down from the top and only when viewport width is greater than 500px.
$(".nav-secondary").fadeIn();
} else {
$(".nav-secondary").fadeOut();
}
});
});
</script>
- Now search for ]]></b:skin> tag,
- Copy and paste below css code just above it.
.nav-secondary {
border-top:1px solid #484848;border-bottom:2px solid #000;background-color:#999;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#343434',endColorstr='#1d1d1d');background:-webkit-gradient(linear,left top,left bottom,from(#343434),to(#1d1d1d));background:-moz-linear-gradient(top,#343434,#1d1d1d);-moz-box-shadow:0 0 3px rgba(0,0,0,0.6);-webkit-box-shadow:0 0 3px rgba(0,0,0,0.6);box-shadow:0 0 3px rgba(0,0,0,0.6);
clear: both;
display: none;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
height:45px;
}
#w2bOldSearch {
display: block;
clear: both;
position: absolute;
right:19%;
top: 14%;
}
#w2bOldSearch #w2bSinput {
background-color:#fff !important;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTpMQR1r_kQoef1C1ml8ZeP7WlLqRMF8-Vq67xAhTMaWejrEP4B2siouHnWM_zYoYkjSf-kL2yzGXp1PqRTDqxcjbYAMESSHy5Yjk_Y6J-F9PunOFTF3JQMfdA2bvTdsktekLDQBgnh82M/s20/Search-icon.png") no-repeat scroll 8px center;
padding: 7px 15px 7px 35px !important;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
- Now search for <body> tag and place this code just for this tag
<div class='nav-secondary'>
<div id='header-fixed-left' style='padding:12px;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxJlSpEh__QqQbHQWAyqmmjNEZXPcu7MGKef5PEe0YfHyevmb6VAThV_WWCLefuIRZCSCXgIntKI8uejRjA0_3S9JdHIigEtR5Q-a6qJTtoz4te8TC48JI7k1NL1saZFZvVR1TQ-rb7CCs/s1600/llol.png' style='float:left;width:187px;height:27px;padding-left:125px;'/>
<div id='w2bOldSearch'>
<form action='/search'>
<input id='w2bSinput' name='q' type='text'/>
<input id='w2bSsubmit' type='submit' value='Search'/>
</form>
</div>
<div class='searchComIcons' style='float: left; margin: -6px 0px 3px 37px;'>
<a href='http://www.facebook.com/#' rel='me' target='_blank'><div class='iFb'/></a>
<a href='http://twitter.com/#' rel='me' target='_blank'><div class='iTw'/></a>
<a href='https://plus.google.com/#'><div class='iGl'/></a>
<a href='#'><div class='iIn'/></a>
<a href='http://pinterest.com/#'><div class='iPinterest'/></a>
<a href='http://feeds.feedburner.com/#'><div class='iRss'/></a>
</div>
<a href='#' rel='nofollow' style='font-size:10px;display:scroll;padding-right: 12%;color: rgb(255, 255, 255);Float:right;' title='Back to Top'> ↑ Back to Top
</a>
</div>
</div>
- Replace the image with your Site logo.
ABOUT THE AUTHOR
Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible
0 comments:
Post a Comment