Showing posts with label Blogger. Show all posts
Add keyboard Navigation for your blogger
Key board navigation is a much more effective and user friendly way of navigation for your blog.for a demo you can test it with my blog left and right arrow keys can be used to navigate to previous and next posts,'h' can be used to go to home page and 'g' to load guest post page,'s' to share the current page.
- To add kb navigation to your blog,goto your blogger dashboard,then layout.click add a gadget and add "HTML/javascript"
- Now copy the below code and paste it in the content area and save it
<!--keyboard navigation start-->
<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
var thetc = 'enabled';
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 72:
case 104:
window.location.href = 'http://smartifyme.blogspot.in';
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
break;
case 103:
case 71:
window.location.href = 'http://smartifyme.blogspot.in/p/blog-page_17.html';
case 83:
case 115:
var til=window.document.title;
var pg =window.document.location;
window.location.href='http://www.facebook.com/sharer.php?u='+pg.href+'&title='+til.href;
break;
}
};
};
</script>
<!--keyboard navigation end-->
- And don't forget to change the highlighted url to that of your blogs.
- in case 104: goes your blogs address
- And in case 71: goes the url of your guest post.
- those numbers 39,103,71 etc are the ascii codes of keyboard keys.you can easily replicate other required keys of your own by using the key specific ascii codes
Tag :
Blogger
Get Free Domain
- To get a free domain (a sub domain actually ) for your site first visit uni.me
- Now search for your sub domain name,you can choose from the available domains
- Now proceed further and create an account on uni.me
- And don't worry about the phone number,the only verification code you need to enter is that sent to your mail so any random number may suffice ;)
- Once its done and after verifying your Email Address you would be taken to your dashboard,click on options button appearing next to your domain
- Choose url forwarding (or name server if you know how to work your way out )
- The target URL would be that of your site after you enter it click Setup URL Forwarding,and thats it you are done
Animated Page load Effect for blogger
Hello guys may be this is my first post related to blogger.lets see how to get an animated page loading effect in your blog,its pretty simple.
- Goto your blogger dashboard =>Template ( i suggest you take a backup of your template before furthur editing it so even if you mess up with something you can simply restore it back ) click Edit HTML
- Now find the " </body> " tag using cntrl+f
- paste the below code just before the </body> tag
<style>
#sm-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#2B5797 url(' http://s6.postimg.org/bd18fx72l/image_533211.gif ') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="sm-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#sm-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
- Thats it you are done it would give you the same effect as in my blog.but incase you want to really customize it,continue reading further
- First the background color or the masking color which is '#2B5797' a shade of blue for my blog if it doesn't suit you you can replace the color code which is in bold to any hex code you like.you can get the hex codes from hex color code tables.
- Next the loading gif animation which is kind of progress bar like looking gif for mine you can get your own gifs from Chimply ( ya thats a cute name )
- Host them at PostImg,copy the direct link and replace the highlighted url with that of yours
