Smooth Scrolling "Back To Top" Button Using jQuery for Blogger

A

dd “Go to Top Button” with CSS and Jquery. It is a Shortcut to come to top when you are at Bottom of page.

<--------View Demo at Left Corner Of this page

How to Install Go To Top Button To Blogger?

Use the Following code and Put it before </body> tag on your Template and Save.

<style type="text/css">
#MD-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr("href");
    if ($(window).scrollTop() != "0") {
        $(this).fadeIn("slow")
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == "0") {
        $(scrollDiv).fadeOut("slow")
        } else {
        $(scrollDiv).fadeIn("slow")
        }
    });
    $(this).click(function() {
        $("html, body").animate({
        scrollTop: 0
        }, "slow")
    })
    }
});
$(function() {
    $("#MD-StoTop").scrollToTop();
});
</script>
<a href='#' id='MD-StoTop' style='display:none;'>Scroll to Top </a>

You can Customize the CSS for Your Own Declarations and you can replace the text with Image also.

You Are Done!

How To Show Date and Time in Title Bar

T

his tutorial will help you to show date and time to visitors who come to your site. Time and date is displayed in their browsers title bars.To add this feature to your site simply follow the steps below.

How To Show Date and Time in Title Bar

• Login to blogger--->Layout--->Add a gadget
• Choose HTML/Javascript from list
• Copy and paste javascript below into it and save

<Script Language="JavaScript" Type="Text/JavaScript">

var mytime1=24;
function mytime2() {
mytime3=mytime1+6;
mytime4=mytime1+mytime3;
timexx=mytime1+mytime3+mytime4;
timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;
timexxxx=mytime1+mytime3/timexxx-16*timexx;
timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;
timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;
mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;
mytime6=Math.floor(mytime5);
mytime8=mytime6*mytime3/2+100;
mytime7 = window.setTimeout("mytime2()", mytime8);
var mytime9 = new Date();
var mytime10= mytime9.toLocaleString();
document.title = mytime10;}
function op(){mytime2()}
window.onload=op;

</script>

Now you are done.Now refresh your site and look at your browser status bar.

How To Add Facebook Messenger for Windows

F

acebook Messenger is a new app that brings Facebook to your desktop. While you surf the web or use other applications on your computer, you can chat and message with your friends on Facebook, See the latest updates from your friends in ticker, Get quick notifications about what’s going on.

Messenger lets you use Facebook without being on www.facebook.com. You will now be able to stay in touch anytime, no matter what you're doing. You can set up the app if you use Windows 7 on your computer. Facebook Messenger does not currently support Windows Vista and Windows XP.

By default, the this app is undocked. So you can easily move it around your computer screen (just click the top of the sidebar and drag it with your mouse). When it's undocked you can also close the sidebar by clicking the 'x' and still get notifications and chats. When you dock the window, it stays on the right side of your screen.

First log in to your Facebook account. To Add Facebook Messenger to your computer, visit here:

https://www.facebook.com/about/messenger

Click on "Install Now".

Save "Facebook Messenger" setup file to your computer.

When finish download, open the setup file and wait. Facebook Messenger will automatically install to your computer with in few seconds. When you installed and open Messenger for the first time, you will be logged in automatically. From then on, you'll need to log in from the app and not from your browser.

Flash Animated Label Cloud Widget For Blogger

F

lash Animated Label Cloud Widget(Blogumus) for blogger was awesome widget to show blogger labels in alternatively.With this widget we access label tags randomly by your mouse over the Flash object to see the animation begin, the labels are animated around Sphere. I am giving highly customized options for this widget.
I think Using & installing this widget very easily for You.

How To Add This Widget To Blogger?  

• Customize the Settings as you need
• Click on "Generate" button 
• Finally click on "Add to Blogger" button to add widget to your Blog... :)

Drop Your Comments and Questions Below.... :)

Add Spinny Leaf Menu To Blogger/Blog

Add beautiful Spinny leaf menu to blogger....

Demo

HTML

<nav>
<ul class="top-menu">
<li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
<li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
<li><a href=#>Price</a><div class="menu-item" id="price"></div></li>
<li><a href=#>About</a><div class="menu-item" id="about"></div></li>
<li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
</ul>
</nav>

CSS

<style type="text/css">
nav {
        width: 960px;
        height: 100px;
        margin: 120px auto;
        text-align: center;
}
.top-menu li {
        display: inline-block;
        text-align: center;
        margin: 30px 5px;
        position: relative;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
}
.top-menu li:hover {
        margin: 30px 20px;
}
.top-menu li:active {
        margin: 30px 33px;
}
.top-menu li a  {
        width: 100px;
        height: 100px;
        z-index: 9999;
        position: absolute;
        top: 35px;
        font-weight: bold;
        display: block;
        text-decoration: none;
        font-size: 20px;
        color: #fff;
        text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
}
.top-menu li:active a {
        font-size: 26px;
        top: 30px;
        text-shadow: none;
}
.top-menu li div.menu-item {
        width: 100px;
        height: 100px;
        display: block;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -webkit-border-top-left-radius: 100px;
        -webkit-border-bottom-right-radius: 100px;
        -moz-border-radius-topleft: 100px;
        -moz-border-radius-bottomright: 100px;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
        -webkit-border-top-left-radius: 80px;
        -webkit-border-bottom-right-radius: 80px;
        -moz-border-radius-topleft: 80px;
        -moz-border-radius-bottomright: 80px;
        border-top-left-radius: 80px;
        border-bottom-right-radius: 80px;
                -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
        -webkit-border-top-left-radius: 50px;
        -webkit-border-bottom-right-radius: 50px;
        -moz-border-radius-topleft: 50px;
        -moz-border-radius-bottomright: 50px;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#cataloge { background: #E42B2B;}
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }
</style>

How to Add Facebook Share Count Buttons to Blogger Blogs

T

oday i going to teach you how to add different types Facebook share count buttons to blogger blog. i think all you know about share count buttons. I am not added any tutorial about Facebook and i will give you some more cool widget for promote Facebook.

How To Add Facebook Share Count Button To Blogger?

here, i am giving a code generator form.
You just add it in simple 4 easy Steps.

• Generate widget code using Generator below
• Go to Blogger  > Template > Edit HTML
• Click on Expand Widgets Template checkbox and Search for <data:post.body/>
• Place the Copied Widget code Before or After it!

- if you put the code Before <data:post.body/> tag then it will appear at the top of the post

- if you put the code After <data:post.body/> tag then it will appear at the Bottom of the post



If you have any doubt while adding to your blog, then leave a Comment here!

Create a pointer trails with Jquery

H

ope you all know how to set mouse pointer trails with your operation system. Windows user can set it from Control panel-->Printer and other Hardware-->Mouse settings-->Check the pointer trail checkbox.
I am here to demonstrate how you can set a pointer trail on your web-page with the help of Jquery

Its simple - create some img elements having pointer-image in src, and let them follow pointer-position whenever mouse move. And don't forget to fade them out slowly.

 The Javascript

<script src="https://making-different.googlecode.com/svn/trunk/jquery.js" type="text/javascript">
</script>
<script>
$(document).ready(function() {
 $(document).mousemove(function(e) {
    pointer = $('<img>').attr({'src':'http://4.bp.blogspot.com/-0TW2w2GgWQY/T7oOUVAPdfI/AAAAAAAADSE/MsNTA7Hwxco/s1600/pointer.png'});
    $(document.body).append(pointer);
    pointer.css({
            'position':'absolute',
      top: e.pageY +2 , //offsets
      left: e.pageX +2   //offsets
     }).animate({  opacity: 0 }, 1500, function(){ $(this).remove(); });;
 });
});
</script>

Note :- Change Cursor Image by Changing Above Red Colored Image URL

Drop Your Comments And Questions Below... :)

Cool Fixed Position Slide Open Egg Social Bookmarking Gadget For Blogger

A

few weeks ago i published "Add An Awesome Fixed Position Slide Open Heart Bookmarking Gadget To Blogger".In this post we have the same social bookmarking gadget but this time it will not be shaped as a heart but instead an ovel egg shape.The share egg sits in the bottom corner of your blog and remains fixed as the reader scrolls the page.On hover the egg slides open to reveal bookmarking buttons for your readers to share posts on Facebook, Twitter, Google +, Blogger, LinkedIn, Stumble Upon, Email and the Share This Icon Offers hundreds more bookmarking choices.This is a great gadget to get the attention of your readers and have them bookmarking your posts.I have the tutorial to add the gadget to your Blogger blog below but first check out the screenshot and live demo.

How To Add The Share This Egg To Blogger?

• Go to blogger--->Template--->Edit HTML
• Tick Expand Widget Template check box
• Search for </head> in your blogs HTML
• Copy and paste code below just above it.

<!-- Start Egg Bookmarking Gadget Code From http://www.gj37765.blogspot.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Egg Bookmarking Gadget Code From http://www.gj37765.blogspot.com/ -->

• Next search for </body> in your blogs HTML
• Copy and paste code below just above it

<!-- Start Egg Share Code From http://www.gj37765.blogspot.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://www.gj37765.blogspot.com/">Blogger Gadgets</a><!-- End Egg Share Code From http://www.gj37765.blogspot.com/ -->

Important, Move The Position Of The Gadget :

The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In Red above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right.

• Save Your Template.

That's it the gadget has been added to your blog.

Drop your Comments And Questions Below... :)

Author Bio Box Widget For Blogger/Blog

T

oday I am going to teach you how to add author info widget, below every blog post. just follow bellow simple steps...

How To Add Author Bio Box Widget To Blogger?

Step : - 1

• Replace my all links with yours in Generator below 
• Customize colors as you want
• Click on "Generate code" button to get CSS & HTML code
• If you want to show preview of  author bio box widget, after clicking on Generate Code just click on "Preview" button to show Preview 

Step : - 2

• Login to blogger --->Template--->Edit HTML
• Tick on Expand Widget Template check box
• Search for ]]></b:skin> in your blogs HTML
• Copy above CSS code and paste Just Above ]]></b:skin>
• Nest search for <div class='post-footer-line post-footer-line-1'> in your blogs HTML
• Copy above HTML code and paste just after <div class='post-footer-line post-footer-line-1'>
• Finally save your template 
• You have done !!!

Drop Your Comments And Questions Below.. :)

Freely Host HTML, CSS, JS & other static files using Google Code and SubVersion

G

oogle Code, is a free platform to host Open Sources Projects. If you are a web developer then you might have used Google Code before. In many projects, we can just simply upload JavaScript files and hotlink to it. But you should have noticed, that the same trick does not work when hot linking to CSS or Image files.
The reason is that, by default when we upload any file to Google Code, it is served as text-plain mime-type. This works with JavaScript files but not with CSS, Image files or HTML files.
So, we are going to discuss in detail how to host any file using Google Code and Sub Version Client. After reading this tutorial you will know about

• Project Hosting using Google Code;
• Working with SubVersion using Free Clients like TortoiseSVN; Uploading and Downloading files using it;
• Working with mime-type.
• Obviously, successfully hot linking files directly from Google Codes;

So read on to know how…

Step:-1 ~ Registering to Google Codes and Creating a New Project:

If you have not already, then, go to http://code.google.com and register with your Google Account. Now follow these steps: 

• Go to the Project Hosting page and click on the Create a new project; This will take you to a page to create a project from where you will be hosting your static files.
• Now fill in the details as shown in the figure.

Note : - Make sure that you have selected “Subversion” as Version Control system.

• Click on the Create Project button when everything is done.
• Once the project is created, the main Project page will be shown to you. Navigate to the “Source” tab from the project page.
• Here you will find something like this

• Note down the URL of the svn checkout and then click on the googlecode.com password.

 Note down the password. We will need the URL and the password in the upcoming steps. These will be used to login to the repository where from we will be serving the static files. So do not share the password with any one, else other might be able to edit/remove/modify your files! 

Now you are done creating the project and collecting necessary information. Our next step will be to download and configure Subversion clients.

Step:-2 ~ Downloading & Configuring TortoiseSVN

As said before, we are going to use TortoiseSVN as our Subversion client to upload our static files with proper mime-type. Here are the download links…

• Home Page: Click Here; 
• Download Page: Click here and download either 32 or 64 bit version according to your operating system [Mostly 32 bit]

 Note that tortoiseSVN is a shell control client. Which means, you do not actually need to open up a new software. Just Right click where ever you are working on Windows Explorer and you are ready to launch TortoiseSVN. Now just do the following tweaking…

• Right click on any open Windows or desktop and navigate to Tortoise SVN > Settings.

 This will pop up the settings page.

• Now click on the “Edit” button.

This will open up a notepad with a text document.

• This document holds all the records for the mime-type of the files to be uploaded. We need to add a list of mime-type according to extension on this file.
• Just after the end of the text document, press enter and copy paste all the texts from the box below.

[miscellany]
enable-auto-props = yes

[auto-props]
# Scriptish formats
*.bat        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.bsh        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell
*.cgi        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.cmd        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.js         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript
*.php        = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php
*.pl         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable
*.pm         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl
*.py         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable
*.sh         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable

# Image formats
*.bmp        = svn:mime-type=image/bmp
*.gif        = svn:mime-type=image/gif
*.ico        = svn:mime-type=image/ico
*.jpeg       = svn:mime-type=image/jpeg
*.jpg        = svn:mime-type=image/jpeg
*.png        = svn:mime-type=image/png
*.tif        = svn:mime-type=image/tiff
*.tiff       = svn:mime-type=image/tiff

# Data formats
*.pdf        = svn:mime-type=application/pdf
*.avi        = svn:mime-type=video/avi
*.doc        = svn:mime-type=application/msword
*.eps        = svn:mime-type=application/postscript
*.gz         = svn:mime-type=application/gzip
*.mov        = svn:mime-type=video/quicktime
*.mp3        = svn:mime-type=audio/mpeg
*.ppt        = svn:mime-type=application/vnd.ms-powerpoint
*.ps         = svn:mime-type=application/postscript
*.psd        = svn:mime-type=application/photoshop
*.rtf        = svn:mime-type=text/rtf
*.swf        = svn:mime-type=application/x-shockwave-flash
*.tgz        = svn:mime-type=application/gzip
*.wav        = svn:mime-type=audio/wav
*.xls        = svn:mime-type=application/vnd.ms-excel
*.zip        = svn:mime-type=application/zip

# Text formats
.htaccess    = svn:mime-type=text/plain
*.css        = svn:mime-type=text/css
*.dtd        = svn:mime-type=text/xml
*.html       = svn:mime-type=text/html
*.ini        = svn:mime-type=text/plain
*.sql        = svn:mime-type=text/x-sql
*.txt        = svn:mime-type=text/plain
*.xhtml      = svn:mime-type=text/xhtml+xml
*.xml        = svn:mime-type=text/xml
*.xsd        = svn:mime-type=text/xml
*.xsl        = svn:mime-type=text/xml
*.xslt       = svn:mime-type=text/xml
*.xul        = svn:mime-type=text/xul
*.yml        = svn:mime-type=text/plain
CHANGES      = svn:mime-type=text/plain
COPYING      = svn:mime-type=text/plain
INSTALL      = svn:mime-type=text/plain
Makefile*    = svn:mime-type=text/plain
README       = svn:mime-type=text/plain
TODO         = svn:mime-type=text/plain

# Code formats
*.c          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.cpp        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.h          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.java       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.as         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.mxml       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain

• Save the text document and you are done.

    Now press OK on all the open SVN windows.

Note that you need to append the texts after the existing texts on that document. If you face any problem then do ask through your comments. This step is necessary to host the files properly!

Now that you are done tweaking, lets see how we can actually upload files using the client.

Step:-3 ~ Uploading files using Tortoise SVN client:

• Open the folder where from you want to upload the files. Now Right Click and navigate to TortoiseSVN > Repo Browser.

Enter the https URL you have noted from the step #1.

• A dialogue box will prompt for your username & Password. Enter the your Google account Username and the googlecode.com password you have noted.
• Now the repository browser will open.

     Make folders according to your need [Just Right Click and Create a Folder] and drag and drop the file you want to upload and click Copy Items Here.

• Wait till SVN client uploads the files.

You are done uploading. If you have configured TSVN properly then it will upload with proper mime-type and the file is ready for hot linking. Do the following for getting the URL:

• Left click on the file you want to hot link from the repository browser and select and copy the URL.

     Just replace the https with http and you are done.

Now you have got the URL to hot link. Use it where ever you like.

---

 So, that was a detail discussion on how to hot link files using Google Codes. Using this method, you can easily host your CSS and JS files for your Blogger Blog. I hope you have liked this method. Do give us your feedback on this article. Also if you face any problem or confused about any step feel free to ask through your comments.