• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Dynamic Views Button with jquery Effect for Blogger Blog

Posted by Mohsin On 2/20/2012 12:09:00 AM No comments

Here is a Simple Tip to Set a Button for Changing the Blog View to Dynamic Views.I added Smooth jquery Hover Effect to Button.You can set any template to your Blogger Blog.If you add this Button to your Blog.It lets your Blog visitors to View Blog in Dynamic Views when they Click this Button.








Add Dynamic Views Button to Blog

Make sure you had Backed up your Template before editing Template.(How to Backup Template)

  • Go to Design -> Edit HTML
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 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="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.
      • That's all,you are done..
      I hope you enjoyed this article,if so please share n like us.

      0 comments:

      Post a Comment

      All types of Comments are welcome