Tampilkan postingan dengan label Jquery. Tampilkan semua postingan
Tampilkan postingan dengan label Jquery. Tampilkan semua postingan

Sabtu, 19 Januari 2013

jQuery Rotate Effect For Blogger Images

How to add jquery rotate effect for  images. For this post i am using CSS with jquery. You can use this effect on side bar with any image size. Its easy to add to your blog. So i think i don't need to explain more and more so keep this simple and let's start our work.

1. Log in to blogger account
2. Click on Layout







3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.

<script>
    $(function() {
        var tot = $(".img_c").length;
        var stat = deg = 10;
        var rotate = "";
        var frame, mozframe, webkitframe;
        $("img").each(function(index) {
            $(this).css({
                "transform": "rotate("+deg+"deg)",
                "-moz-transform": "rotate("+deg+"deg)",
                "-webkit-transform": "rotate("+deg+"deg)",
                "-o-transform": "rotate("+deg+"deg)"
            });

            rotate = "100% {" +
                "transform: rotate(360deg);" +
                "-moz-transform: rotate(360deg);" +
                "-webkit-transform: rotate(360deg);" +
                "-o-transform: rotate(360deg);" +
                "} ";

            var imgclass = parseInt(index+1);
            frame = " @keyframe anim" + imgclass + " { " +
                rotate + "}";
            mozframe = " @-moz-keyframes anim" + imgclass + " { " +
                rotate + "}";
            webkitframe = " @-webkit-keyframes anim" + imgclass + " { " +
                rotate + "}";
            $('<style> '+ frame + mozframe + webkitframe +
                ' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
                                   '-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
                                   '-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }'
                +'</style>').appendTo('head');

            deg = deg + stat;
        });
    });
    </script>
    <style>
        body {
            background: #fff url('wood_pattern.png') repeat top right;
        }
        .content {
            margin: 0 auto;
            padding: 100px;
        }
        img {
            margin: 10px;
            padding: 20px;
            background: #fff;
            -moz-box-shadow: 0px 0px 3px #d3d3d3;
            -webkit-box-shadow: 0px 0px 3px #d3d3d3;
            box-shadow: 0px 0px 3px #000000;
            position: absolute;
        }
    </style>


    <br />
<div class="content">
<div class="img_c">
<img class="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>
</div>
Replace red color link with your image URL.
7. Now save your HTML/Javascript'.

You are done. If you get any problem then comment us, we will respond you quickly.

Diposting oleh di Tidak ada komentar:
Label: , ,

Kamis, 17 Januari 2013

How to Create Back To Top Button

In this Tutorial, i show you that how to create Floating Back To Top Button in Blogger/Wordpess. If your blog/wordpress (Website) page is long or if you write very lengthy posts then, you must add a Back To Top button to your blog/wordpress, by clicking which, users of your website will be taken straight to the top (Header) of your blog page. You can see my floating back-to-top button at the bottom-right corner of this page OnlineGames2Modo.
To add this button to your blog you will have to need two identical images (.png), one small and one large image. If you don't want different images of your button then use just one image URL for both images.



Create Floating 'Back To Top' Button:

1. Go To Blogger > Design > Page Elements
2. Select a HTML/JavaScript Widget.


3.  Copy and paste the following code in HTML/JavaScript.

<!--BACK-TO-TOP-STARTS-->
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='URL Of Your Larger Button Image'" src="URL Of Your Smaller Button Image" onmouseout="this.src='URL Of Your Smaller Button Image'"/></a>
<!--BACK-TO-TOP-STOPS-->

4. Replace the required detail with specific URLs of your Back-to-top button.
5. Save it and you are done!

Diposting oleh di Tidak ada komentar:
Label: , , ,

Senin, 14 Januari 2013

How To Add Floating Twitter Recent Tweets Widget

In the last Tutorial, i tried to show you that how to add Twitter Floating Fan Box Widget which basically was Twitter Fan Box. You can see that Tutorial here. In this Tutorial, i show you HOW TO ADD FLOATING TWITTER RECENT TWEETS Widget in Wordpress & Blogger. This Twitter Fan Box Is Similar To Facebook Like Box. This is Floating Twitter Recent Tweets Widget For WordPress & Blogger. When you move cursor on it, It pop out with Recent Tweets.



Adding Recent Tweets To Wordpess:
1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save.


Adding Recent Tweets To Blogger:
1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In window, select HTML/Javascript .
3. Copy the code below and paste it inside the box.
4. Click Save button.


<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}

#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}

#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}
#kakinetwork_left{z-index:10003;border:2px solid #303030;background-
color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUYL7PYI0lkRFjJXoA_5pZ9y8D52ACy7IRfkjN1leAbBTZ4irgd9VtYDIl3rYULXc3de6kFY-oPLdY6YXhf09kp4TiOlUnICqjDmAyWRiiD8Jdqz50GEWwuI3v2C_ZoGvAKCNXtx8Zubw/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('crackmodo').start();</script></div></div></div>

</div>

Replace the crackmodo with your twitter username.

You are done! That's it.




    Diposting oleh di Tidak ada komentar:
    Label: , , , , ,

    How To Add Floating Twitter Fan Box Widget


    In the last Tutorial, i tried to show you that how to add Twitter Floating Follow us Widget which basically was follow us box with image of Twitter bird on tree. You can see that Tutorial here. In this Tutorial, i am going to show you HOW TO ADD FLOATING TWITTER FAN BOX in Blogger. This Twitter Fan Box Is Similar To Facebook Like Box. This Floating Twitter Fan Box show recent 10 followers by default and your readers can follow you without leaving your Blog and that's why this widget is increasingly become popular. There are some steps and you have to follow these steps given below one by one. So lets start.



    1. Log in to your Blogger Account.
    2. Click Blog title > Template < Edit HTML.
    3. Click Proceed Button.
    4. Search following code using CTRL + F.

    </body>

    5. Replace the above code (</body>) with the code given below.

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {jQuery(".tehtbox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-235"}, "medium");}, 400);});
    </script>
    <style>
    .tehtbox{background:url(http://lh5.googleusercontent.com/-q9_zbB_3388/UCOvETdEQpI/AAAAAAAAA4o/F0CfR3hxuk0/s100/Twitter.png) no-repeat scroll left center transparent!important;float:right;height:250px;width:230px;z-index:99999;position:fixed;right:-235px;top:20%;padding:0 5px 0 40px}
    .tehtbox div{margin-right:-8px;border:3px solid #00bef6;background:#fafafa;padding:0}
    .tehtbox a{font-size:10px;margin-left:40px}
    </style>
    <div class="tehtbox">
    <script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>
    <div id="twitterfanbox">
    <script type="text/javascript">fanbox_init("crackmodo");</script>
    <a href='http://www.techehow.com/2012/08/add-twitter-fan-box-to-blogger.html'>Get Twitter Fan Box Widget</a>
    </div> 
    </div>
    </body>

    6. Replace crackmodo With Your Twitter Username and click Save Template Button.

    That's it, you are done!




    Diposting oleh di Tidak ada komentar:
    Label: , , , ,

    How To Add Twitter Floating Widget

    This article contains some simple codes and steps which you have to follow in order to get Twitter Floating Widget. Do you want Twitter floating (Bird With Tree) widget? yes. then follow the following simple 3 steps and get your own Twitter floating widget on a left side of your blog.


    Like us on Facebook and Follow us on Twitter.

    Step 1. Go to Blogger Dashboard > Design > Page Layout.
    Step 2. Choose Add A Gadget > HTML/Javascript.
    Step 3. Paste below code and save it.


    <div style="position: fixed; bottom: 20%; right: 0%;"><a href="http://twitter.com/crackmodo" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNYCYGeU_-YrEgQicYRCm7gGmVR_0IjgPzTPKgwMdvt2nkTPd2SOlq77gAD2hqPkc1nsm2KBcNX2sFxtKTrXkvbBmiX4fSkiqVrFqV85VC20SYR663VYZ4qg2HJadsqnshm3irCtovpug/s1600/btsnts-twitter-float.png"></a></div>


    Now replace crackmodo with your twitter username and save it.

    That's it. You are done.




      Diposting oleh di Tidak ada komentar:
      Label: , , , , ,

      Sabtu, 12 Januari 2013

      Vertical Floating Social Sharing Bar Widget


      You have seen that the trend of floating sharing count buttons on popular blogs websites. As you know the traditional icons are now replaced with auto counter buttons that are updated in seconds. I created totaly different version of this bar, applying both jQuery effects and CSS 3 styles. But this widget is so many times different because it contains custom facebook, google+, twitter, pinterest and an Email button.  Vertical floating social sharing bar is one of the best blogger new widgets, because you can notice the increasing trend of social sharing widgets.This version is the upgraded version than previous versions.So in this widget you will get facebook like button,twitter tweet button, pinterest pin it button, google +1 button, addthis sharing button and print button. The installation of this widget is simple so that you can easily implement it into your blog. 


      The steps are extremely easy to apply to your blog/blogger. All you need is to copy and paste the codes. Follow these friendly steps:


      1. First Go to Blogger Dashboard > Template
      2. Download a copy of your template
      3. Click Edit HTML
      4. Hit Proceed button
      5. Check Expand Widget Templates checkbox
      6. Find for below code in your template,



      <b:includable id='post' var='post'>
      7. Just below it paste the following code:

      <b:if cond='data:blog.pageType == &quot;item&quot;'> 
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
      <style> 
      .mbt_social_floating{ 
          position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px; 
          background-color:#f7f7f7;     padding: 5px 0 0px 0px; 
           border-top:1px solid #ddd; 
      border-left:1px solid #ddd; 
      border-bottom:1px solid #ddd; 
      z-index:9999px !important; 
      border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; 
      } 
      .mbt_social_floating .mbt_side_social_button{ 
          margin-bottom:5px; 
          float:none; 
          height:auto; 
          width:60px; 
      } 
      .mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ 
          margin-left:5px; 
      } 
      .mbt_social_floating .st_fblike_vcount{ 
          margin-left:5px; 
      } 
      .mbt_social_floating .stButton_gradient{ 
          background:none !important; 
          height:21px !important; 
          padding-left:0 !important; 
      } 
      .mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { 
          background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9JHFdbr2RT9MeW3C0Zz5F-34GcwbMV-n4eJOXo06lA71vFN5JFZ_2qOkNtpUgxaVu646Br_hAIqEkaFuZyYHyOSseKr5ALOj7qg_VgXmr2-pKUsKK5r-4p7wXA6zHJ-wyFupDSLs5a_hA/s400/gc_social_sprite.gif&#39;) no-repeat !important; 
          height:19px !important; 
          width:45px !important; 
          padding:0 !important; 
      } 
      .st_email .chicklets{ 
          background-position:0 -77px !important; 
          background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9JHFdbr2RT9MeW3C0Zz5F-34GcwbMV-n4eJOXo06lA71vFN5JFZ_2qOkNtpUgxaVu646Br_hAIqEkaFuZyYHyOSseKr5ALOj7qg_VgXmr2-pKUsKK5r-4p7wXA6zHJ-wyFupDSLs5a_hA/s400/gc_social_sprite.gif&#39;) !important; 
      } 
      .mbt_social_floating .st_twitter_vcount .st-twitter-counter{ 
          background-position:0 -58px !important; 
      } 
      .mbt_social_floating  .stButton_gradient{ 
          border:none !important; 
      } 
      .mbt_social_floating .stBubble_count{ 
          width:44px !important; 
          font-size: 15px !important; 
          font-weight: normal !important; 
          padding-top:7px !important; 
          height:23px !important; 
          background:none !important; 
      } 
      .mbt_social_floating .st_twitter_vcount .stBubble_count{ 
          color:#00a6df; 
          background-color:#f8fbfc !important; 
      } 

      .st_fblike_vcount{ 
          margin-bottom: 0px; 
          display: block; 
      } 
      .st_twitter_vcount{ 
          margin-bottom: 3px; 
          display: block; 
      } 

      .st_email{ 
          margin-bottom: 5px; margin-top: 3px; 
          display: block; 
      } 
      .mbt_social_floating .stBubble{ 
          background-position: 21px 31px !important; 
          height:35px !important; 
      }.mbt_social_floating .st_pinterest_vcount{
          margin-left:5px;
      }
      .mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
          background-position:0 -19px !important;
      }
      .mbt_social_floating .st_pinterest_vcount .stBubble_count{
          color:#FF0505;
          background-color:#fbf8f8 !important; 
      }

      .mbt_social_floating .st_pinterest_vcount .stBubble{
          background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6hvmfXnp29HG4QHSMbfun0iG2XcUUt9G5Zkp9BTdnV2rgN6Yq9cbSotbJY2mvxsP2R2iij3EzGa-d3FzGKduVuVru4egdPDl5UhV8DZt4ohk-lrtktgnClfLoqLuQgce0DwyeT7ZWmhlM/s400/bubble_arrow_pinterest.png') !important;
      }


      .st_pinterest_vcount{
          margin-bottom: 0px;
          display: block;
      }

      </style> 

      <div class='mbt_social_floating'> 
          <script type='text/javascript'>var switchTo5x=true;</script> 
          <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> 
          <script type='text/javascript'>stLight.options({onhover:false});</script> 
          <span class='st_fblike_vcount' displaytext=''/> 
          <span class='st_twitter_vcount' displaytext='' st_via='crackmodo'/> 
      <span class='st_pinterest_vcount' displaytext=''/>
      <div style='margin:0px 0 0 5px;'> 
          <span class='st_plusone_vcount' displaytext=''/> 
      </div> 
          
      <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'> 
      <a class='addthis_counter'/> 
      </div> 
      <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> 
      <script type='text/javascript'> 
      var addthis_config = { 
           ui_cobrand: &quot;MY BLOGGER TRICKS&quot;, 
      ui_header_color: &quot;#ffffff&quot;, 
           ui_header_background: &quot;#0080FF&quot; 
      } 
      </script> 
      <span class='st_email' displaytext=''/> 
      <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://crackmodo.blogspot.com/2013/01/vertical-social-widget.html' style='color:#CAC8C8;'>Widgets</a></p> 
      </div> 
      </b:if></b:if>


      8. Now replace CrackModo with your twitter username.

      Now save the template and you are done.
      Diposting oleh di Tidak ada komentar:
      Label: , , ,
      Langganan: Postingan (Atom)