jQuery Fade In Scroll To Top Button With Smooth Scroll For Blogger

In October last year i wrote a post with a Floating back to top button.Since then i have wanted to cover a more up to date back to top modern button.The popular option when it comes to scroll top buttons is to use jQuery for two reasons.Firstly with jQuery you can have the button hidden until the page is scrolled, secondly when clicked the page scrolls smoothly to the top instead of the direct jump a regular link would have.So that's exactly what i have in this tutorial.We will add a button that will only be visible when the reader starts scrolling and then when they click it the page slowly scrolls up easing into position at the top.For the button itself we us a sprite to create a hover effect sprites also keep the page load time down.

I recently started a blog in which i want to list the Best Design and Blogging posts, codes, tutorials and resources.On that blog i have the back to top button we cover in this post so we will use that as the demo.When you land on the page start to scroll and you will see the button in the bottom right corner.



Looks and Works great lets add it to your blog.Credits to Matt Verone, Wordpress users can use the plugin here.

Smooth Scroll jQuery Back To Top Button

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

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 - How To Find Code In Blogger Template Template)

]]></b:skin>

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

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;

right:10px;

overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPr-2UcQNdKzw_ulTlQ_AOMRQn3KzK4LgizHXGjiq82vAdsMykiNOZW8Iq5JTha2lHDAOVky5tTHBHgU8N2ykY7ZpHEPCMrwb3-4M2KA111CBWW1PcUEZg3eSW_m5MXSsWddZu-z0CQoc/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPr-2UcQNdKzw_ulTlQ_AOMRQn3KzK4LgizHXGjiq82vAdsMykiNOZW8Iq5JTha2lHDAOVky5tTHBHgU8N2ykY7ZpHEPCMrwb3-4M2KA111CBWW1PcUEZg3eSW_m5MXSsWddZu-z0CQoc/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

Note - To move the button to the left of your blog change right:10px; to left:10px; .

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 - How To Find Code In Blogger Template Template)

</head>

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

Note - If you have previously added jQuery script to your template you can leave out the line in green.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/

$().UItoTop({ easingType: &#39;easeOutQuart&#39; });

});
</script>

Step 6. Save your template.

That's it, You can check out your new back to top button after you Comment on and Share this post ! Make sure to check out more of our jQuery Tutorials and Blogger Tips.

Drop Your Comments And Questions Below.

How To Edit Template Html And Add Gadgets In The New Blogger Dashboard

Blogger have been introducing the new Dashboard or Interface via Blogger In Draft over the last few months.This is a complete re-design and a post yesterday on the Blogger in draft blog told us all users can now use the new interface.To check it out go to www.draft.blogger.com.I think it could be another few months before the new design is default on the main Blogger site and maybe then you will still be able to switch to and use the current dashboard.But if you like the new interface and are going to use Blogger In Draft as your default following the tutorials on Spice Up Your Blog will be a little different.So i have made a video to show you how to Edit your template html, Add gadgets, Use the template designer and more.This will allow you to follow all our tutorials while in the new dashboard.
Click Here To View Full Post >>

Google To Rename Blogger Google Blogs Picasa Also To Become Google Photos ?

Social Media Blog Mashable today broke the story that Google are planning to Re-Brand Blogger over the next few weeks.According to Mashable Blogger is to be re-named Google Blogs.Google will also Re-Name their image hosting site Picasa, it will become Google Photos(All images upload to Blogger are hosted on Picasa).This has not been confirmed by Google but the source would need to be reliable for Mashable to publish the story, they said


The transition from Picasa and Blogger to Google Photos and Google Blogs will occur “in a month to a month and a half,” we’ve been told. The date aligns with the likely public launch of Google+.
Click Here To View Full Post >>

A Strange Fix For Missing Google Plus One Buttons

It's been a few weeks since the launch of Google Plus One and the Plus One Button.I'm sure many of you like me jumped on board and added the Plus One sharing or recommendation button to your blogs.I had it in a few positions and all my posts were been plus one'd (Thanks) then bang it's gone ? The script is in the head section of the template, the button code is were it should be but no sign of the button.I searched online for a solution and just found more similar questions "Were is the plus one button ?", "My plus one button is gone how can i fix it ?".

I think Plus One can be an important factor in which links people click in search results so i really wanted it back.I presume something in the template was in conflict with the button code but couldn't see what.Then i found a fix in a quiet unorthodox way.

I remember reading Google had partnered with Add This the social bookmarking service so i thought i would try the Add This version of the button, worth a go.When i added the code for the Add This version of the plus one button strangely all the plus one buttons worked again! Now you would think it is the script from Add This that is getting it to work but if i add just the script they don't work the actual button needs to be added also.

A strange Fix For The Google Plus One Button

Here is the code for the Add This version of the plus one button simply add it to your blogs template.On Blogger via a html/javascript gadget in your sidebar on Wordpress a text sidebar gadget would do.As the other buttons were now working i placed the add this version in the footer out of the way.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e13aac8372bd045"></script>
<!-- AddThis Button END -->

You can also go and get the button from AddThis.com.

That's how i fixed my Google plus one button let us know if it works for you.Make sure to check out more of our Social Media Tips and Social Bookmarking Gadgets.

Drop Your Comments And Questions Below.

Awesome New Google Search Style Search Bar For Blogger

I'm sure you will have noticed the new Google design as covered in the post Evolving the Google design and experience on the official Google blog.While the changes have been subtle some stand out like the new sleek search bar on results pages.The new search bar has a more modern minimalist look with rounded corners and hover effect.But one new feature i quiet like is as you type your text into the search field an X appears than can be clicked to remove your text.Yes it's nothing major but still a neat feature none the less.So in this post i will show you how you can re-create the new Google search bar and use it on your blog.

Once on your blog it will look the very same, using jQuery for the X delete button and your blogs default search to generate results.This was covered on the Awesome Queness.Com design blog and with just a few changes i have it ready to go For Blogger.
Click Here To View Full Post >>

Add An Admin Badge Plus Differant Style Colors To Author Comments On Blogger

In the comments here on Spice Up Your Blog when i as the admin or author, post a comment in the bottom corner there is a sparkling animated badge with the word 'Admin'.I have received so many requests to cover this in a tutorial so today i will show you how it's done.OK so back in April i published a post showing how to use different colors on the authors or admin comments on Blogger and we actually use the very same technique here but this time with a background image.While i will give you the URL for the admin badge i have been using and everyone seems to like so much you can use any image.

Now while we are adding the admin badge or image we might as well add some more styles to the author comments so they stand out, it does not require any extra work so why not.To that end i have also included the Css for your comments to have a different background color, Different border color and the border will have rounded corners.Lets look at the demo :
Click Here To View Full Post >>

A Simple jQuery Powered Drop Down Menu For Blogger

I have had a lot of requests for a tutorial on creating a simple easy to use drop down menu for Blogger.There are literally thousands of drop down menus around with different styles and functions.However i want to have something that is easy to implement,add links to and Customizable.The menu i choose has all these features, a clean design with a jQuery powered drop down effect.

In the end i decided to go with a menu first published on Blogger Stop over two years ago.I simply made some small changes so it will work on the newer Template designer templates.I also added a z-index so the drop down will display over content and some Rounded corners that will be visible on browsers that support them such as Firefox, Chrome and Safari, you can see a live demo below :

Add The Simple Drop Down Menu To Blogger

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

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 - How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<!--start drop menu-->
<style type='text/css'>
/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;

background: #0033CC; /*MENU MAIN BACKGROUND COLOR*/

-moz-border-radius: 6px;-webkit-border-radius: 6px;

padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;

color: #EAFFED; /*MENU LINK COLOR*/

white-space: nowrap}

#jsddm li a:hover
{ background: #24313C /*MENU HOVER BACKGROUND COLOR*/; -moz-border-radius: 6px;-webkit-border-radius: 6px;}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
z-index:100;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;

background: #BFCFFE; /*MENU DROP DOWN BACKGROUND COLOR*/

color: #24313C /*MENU DROP DOWN LINK COLOR*/

}

#jsddm li ul li a:hover
{ background: #809FFE /*MENU DROP DOWN HOVER BACKGROUND COLOR*/}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);
$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--end menu code-->

Note - In yellow i have highlighted the colors used, you can change these by using a different color code.You can find the code for the colors you want with our html color code generator.

Note 2. - If the rounded corners are not to your liking remove the two sections highlighted in red and there gone !

Step 4. Save Your Template.

That's the Css and jQuery added next step is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.

Add The Menu Html

In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

<ul id="jsddm">
<li><a href="/">Home</a>
<li><a href="#">Link One</a>
<ul>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
</ul>
</li>
<li><a href="#">Link Two</a>
<ul>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
</ul>
</li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</li></ul>

This is the code that makes up the menu in the demo.Replace the hash tags (#) with your links and the text with ehhh your text :D.If you want to add more links you can do so in the same way, take a few minutes to look at the layout of the code and you will see how it works.

Template Designer Tabs Fix

If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here - Remove Tabs Css.

Thanks again to BloggerStop for the original, Make sure to Check out more of our Design Tips and jQuery Tips.

Drop Your Comments And Questions Below.