Dynamic Views Button with jquery Effect for Blogger
I will teach here how to set a button for Changing Blog view to Dynamic View. Smooth jQuery button is added for this. You can set it easily in any template of blogger. It can help you visitors to View your Blog in Dynamic View.
Thanks for visting this. I will Keep updating my blog so don't go anywhere :)
Add Dynamic Views Button To Blog
- Go to Design -> Edit HTML
- Go to Design->Edit HTML
- Copy and Paste Below code inside <head> section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- Go to Design-> Page Elements
- Click on Add Gadget ,Select HTML/Javascript from it
- Leave Title as blank, Copy the below code inside content section.
<div class="noopdynamic">
Click this for change the view to Dynamic views</div>
<a href="/view">
<img class="noopdynamicimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIsXBReRgt7QDrTDFC_-VJCX_80RF-z39sd1anod0e1XB6vt5WTRCvnn0cjVM3BvhJM-Q3B5E-ylHEOBBTcCp79JuduAnbGYfby_dGULUJzeHjGI-VFFHuUSJTUvhNfYY0_5qFqRHOsOo/s1600/google+dynamic+views.jpg" /></a>
<style type="text/css">
.noopdynamicimg{bottom: 2%;
position: fixed;
right: 1%;}
.noopdynamic {background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background-color:#ABABAB;
border: 2px solid;
border-radius: 6px 6px 6px 6px;
bottom: 13%;
padding: 4px;z-index:999;
position: fixed;
right: 5%;
font:18px Arial;
text-shadow: 1px 1px 0 #FFFFFF;
width: 21%;
box-shadow:0 0 5px;
}
</style>
<script type="text/javascript">
$(function(){
$(".noopdynamic").hide(0);
$(".noopdynamicimg").hover(function(){
$(".noopdynamic").show("slow");
},function(){$(".noopdynamic").hide("medium");
});});
</script>
- Then Save it.
- That's all,you are done..
No comments:
Post a Comment