Dear friends today i'm sharing a Simple Tip to Set a Button for Changing the Blog View to Dynamic Views.I added Smooth jquery Hover Effect to Button.It lets your Blog visitors to View Blog in Dynamic Views when they Click this Button. So Just Follow this & Add this code in your blog.
Step 1.Add jQuery Plugin( If your Blog already have a jQuery plugin ignore this Step ),
> 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>
Step 2: Add Dynamic view button,
> Go to Design-> Page Elements
> Click upon Add Gadget ,Select HTML/Javascript from it
> Leave Title as blank, Copy the under code inside content section.
- <div class="noopdynamic">
Click this for change the view to Dynamic views</div>
<a href="/view">
<img class="noopdynamicimg" src="http://4.bp.blogspot.com/-a57z3e4UXA4/Tz5E4BaMs7I/AAAAAAAAAIA/KgsXo-mA0hw/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.Ok you have done. Dear readers if you like this post please share this post.
Post a Comment