Dynamic Views Button with jquery Effect for Blogger

In the Name of Allah who is the most Merciful.
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
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPI0UfyVKRI6bUC652oc2bbvQReldoCgKQM4ri14LbTnZqprxSRaxdlt2FQ_ij2JYgo6bMn0biRCXn8twg7RDOQMNQ05r5REZSqVwhp4PdsNpnmbbJH7Ta45QdSE7rxoDtCvPGfurtPxA/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

       
      Top