100% Working Tips And Tricks Updated EveryDay
Resizes images to fill browser while maintaining image dimension ratio.Cycles backgrounds via slideshow with transitions and dynamic preloading.Core version is available for those that just want background resizing.Navigation controls with keyboard support.Integration with Flickr – pull photos by user, set, or group.
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.
]]></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/AVvXsEiJUjBoa0Id2Qb1u4um4LD3i0v_OthjNE2u_VUs1W-7NBZ9VQGl8YzIHvdiuS6laKIqVwDDj2xBuaK2Smuc8QF2CYjP3oOqd_miUmLQ9SjcrN7NKgZUTqZxsQnMDNf78YvSimSOCkVTWXk/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUjBoa0Id2Qb1u4um4LD3i0v_OthjNE2u_VUs1W-7NBZ9VQGl8YzIHvdiuS6laKIqVwDDj2xBuaK2Smuc8QF2CYjP3oOqd_miUmLQ9SjcrN7NKgZUTqZxsQnMDNf78YvSimSOCkVTWXk/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;
}
</head>
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/><script src='http://spiceupyourblogextras.googlecode.com/files/easing.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
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.
]]></b:skin>
</head>
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/><script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the "X" button
$("#field").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#field").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", delete input field value and hide "X"
$("#x").click(function() {
$("#field").val("");
$(this).hide();
});
});
</script>
<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>
I had sometime in evening so designed some Feedback PNG buttons which is an important tool to receive advices and suggestions from your readers. You have seen a floating feedback button on almost all major websites and its time that you add one too. The set below consists of 10 PNG buttons along with the PSD file if in case you wanted a color of your choice. <a style="display:scroll;position:fixed;bottom:50%;left:0px;" href="URL OF CONTACT PAGE" title="Feedback Please, Can't go further without your help"><img src="FEEDBACK BUTTON IMAGE LINK" /></a>Make these changes:
]]></b:skin>and just above it paste the Opacity code below,
/*------------ MBT Image Opacity--------------*/5. Next search for this code,
.Fadein img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
<data:post.body/>and just below it paste the following code,
6. Save your template and you are done!
<b:if cond='data:blog.pageType == "item"'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Thanks For Making This Possible! Kindly Bookmark and Share it.</b></span><br/><br/>
<a class='Fadein' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCHf-yT1tQrK5JsH9cdxUMtgrcYZAOAKchd5Ycy9fjBK0JR0LKfUVA8Q-yaXd26WcMEd7C7NJDB3Nr1GDucayBbG2oxWqZKLIiVl60U9hFKL3FVQBH3VoT7M4qo7MaGV6qcgOfczqzwMQ/s400/TECHNORATI1.png ' width='64px'/></a>
<!--DIGG-->
<a class='Fadein' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0UgRBBdCgCC6KSVXnFDMJsIOKXjBd_5tje8GwXNXRaclcgfa8gLN9CB_8AqP2PJUObiA1cmJhG4033umPOl-089QdgCLdJw398SfvGLKOsb7aTxak09Sp2OMtdv-cfcDdz8-TY1H8PYw/s400/DIGG1.png ' width='80px'/></a>
<!--Stumble-->
<a class='Fadein' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZ01zf-Ds3xqFE3agA9cz6alpzg4Vgj3rUwubwHPmmch6epL_W7WCnOdlGTA_2o9pwX9Huf8B6PQRDiWpgYsojQ-lWurpWZXY3IxdrVRhzzISj79raUrZS_6fwbs21mR5e5-aAuYBfUo/s400/stumble1.png' width='100px'/></a>
<!--Reddit-->
<a class='Fadein' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1zYN8BQ3Yq2kpfvgDl4f8-lbhzUr0Z8W4DD-QiIvCgstqPNKSX9o3AftkW4zidgm1fmVN4Dtr82TEex8Xr54_iCvF5NfYIygI-59R0bZBp_Ki5Xgo3Uu4fM85IyQzRcUByB0WQc-l7YM/s400/REDDIT1.png' width='100px'/></a>
<!--Facebook-->
<a class='Fadein' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL0J8zWwrGlxaZtGmpY-5jLXqTxPiD7ckvziEcrKCjZUV4DoV9aAVTDk94TJ0coYFsvkdFZlAnMyAjabkdCH138po5b184SNTNaRQeNuQsdr2ilOJ3jHoycXqC1uOLP66XNRLgyfW_8HU/s400/FACEBOOK1.png ' width='80px'/></a>
<!-- Twitter -->
<a class='Fadein' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-dgkTI4qaTJipqZxPnpGxiYEAOayPJIOnXi6GEbSLtuepWyg9bba078N8rnSFitkcsZ_Pl4TbPbgCnV_yQMb1ra2EoTixU4TQ4n3pEO4MmlI_nTVbQ0Jixc40UB8Wjzj0xQtUxtgDASo/s400/TWITTER1.png' width='64px'/></a></center>
</b:if>
100% Working Tips And Tricks Updated EveryDay
