How to add go to top and go to bottom buttons Using jQuery in Blogger

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.

Demo

You can see a live demo on my blog, the buttons are located on the right side.

How to put Go Up and Go Down buttons using the jQuery slide effect

Step 1. Go to Template, click on the Edit HTML button

Step 2. Select the "Expand Widget Templates" box

Step 3. Search (using CTRL + F) for the following piece of code:

]]></b:skin>

Step 4. Just above this code, paste this one:

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX-UdG7A6S-fb5OzxpcWQddBU67r5Zrey4yiI1Z6anspv7CywNMGovd7bue7Q3J6MeqDyZRwMilleEW7QKIIB76YPu34Afxil3qCiaO-joWm-qyWevgqizhqZN1ZT6Xn4pnPluWWvDpbc/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxRVXgItwJn_nLPEMlShVH7KQBjq4LaPlIB8kXzk2YO3D4D9kiJO8AuKKt404-XVUSnE51WWfDWyIj0_8fztSYsFRrle4kdE52ZB0VkrGyrRR2knxYuEAOolO4MoYLRRB0vepaYlqt4hQ/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Note:  - in green are some annotations that explains what styles you can modify on their left side.
           - You can change the arrows by changing the URLs in blue.
           - To change the buttons background color of buttons, change the white text with your color

Step 5. Now search (CTRL + F) for this tag:

</body>

Step 6. And just above it, paste the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.

Step 7. Finally, Save your Template. Enjoy!

How to Add a Vintage Style to Images In Blogger using CSS

To get that vintage Instagram effect for your pictures you don't have to use a program, now you can use CSS and get a similar result! We will apply a shadow inside the image, add a border, we will put a color in it, and on top of our image, we will add another semitransparent image with a grunge style that will give a vintage touch.

You can see the example in this picture below, moving the cursor changes to normal but keeps the edge.

Obviously there will be images that will fit better these effects than others, but regardless of that we do, there should be made a few observations:

1. It is made with CSS styles so as some of you might already know, it will not recognize browsers, specifically Internet Explorer, so using IE browser does not show any effect.
2. Hovering around the image will change with a transition effect, but only in Firefox.
3. The images are not centered, you will have to align to left (default), or right.

Having clarified the above, let's start adding the CSS code to our template.

Adding a Vintage Effect to Blogger Images

Step 1. Go to Template > Edit HTML

Step 2. Select the "Expand widget templates" box

 Step 3. Search for the following piece of code:

]]></b:skin>

Step 4. Just above it, add the following CSS code:

/* Vintage Images
----------------------------------------------- */
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px solid #000;
position: relative;
float: left; /* Change to right if you want the images to be aligned to the right */
margin-right: 20px;
margin-bottom: 20px;
}
.vintage:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,102,0, 0.6); /* sepia */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBrhj1thgShXP7LVg3nVpqG1B0LUKmr63RWFnt0VaAK7vYnOAbDCMsXnzgRPRDZTt02MPJs48xDuF4Hx_qKItwnJi0MZr6-nywSUkkh6gf-PgtfAqYl4AiZkgqNi6nPtf-TjqV45JUYDc/s0/grunge.png);
background-size: cover;
box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

Note: In the first code, you see in bold the line that corresponds to the color of the image, you can change it to any other color, these are some examples of traditional vintage:

background-color: rgba(0,0,255, 0.5); /* blue */
background-color: rgba(0,255,0, 0.5); /* green */
background-color: rgba(0,255,255, 0.5); /* cyan */
background-color: rgba(255,0,0, 0.5); /* red */
background-color: rgba(255,0,240, 0.5); /* violet */

If you want the image to not change to its original state on mouse hover, then remove the last code:

.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

Step 5. After you've made your changes, click on Save Template

Step 6. Finally, add this code inside your posts each time you want to apply the vintage effect to an image (switch to HTML tab if you want to use this code inside your post)

<div class="vintage">
<img border="0" src="URL of the image" /></div>
<div style="clear: both;"/>

And add the URL of the image to where is the text in blue.

And that's it, with this little experiment you can have your vintage-style images using CSS only. Enjoy!