Tombol Back To Top Dengan Menggunakan Efek Bounce

Efek Bouncing Untuk blog / website yang memiliki banyak informasi pada halamannya, mudah-mudahan bisa mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan fungsi tombol ini. Singkat cerita, beginilah alur kisah bagaimana cara membuatnya.

Catatan: Gunakan Pencarian kode yang dimaksud dengan klik kiri 1x pada kotak template kemudian tekan Ctrl + F, masukan kode yang dicari dan enter.

1. Simpan kode JQuery berikut di atas </head> dibagian head.

JQuery

1<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>

Catatan: Kode ini memiliki banyak versi, saya menggunakan versi 1.7.2, kalo sudah dipasang dengan versi yang lain, lewati langkah ini agar tidak terjadi konflik.

2. Masukan kode CSS berikut diatas ]]></b:skin> atau diatas </style> dibagian head juga.

CSS

12345678910111213#Back-to-top {
    text-align: center;
    z-index: 9999;
    position: fixed;
    bottom: 40px;
    right: 30px;
    cursor: pointer;
    display: none;
    opacity: 0.7; 
    }
#Back-to-top:hover {
    opacity: 1;
    }

3. Masukan beberapa baris kode HTML berikut sebelum </body>.

HTML dan JavaScript

123456789101112131415161718192021<div id='Back-to-top'>
<img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCs1pRTu-iaY8pe8TYwfA30OO4ZbqZr8Nj3EvdDBskF7pMNW0jywj4eCuAoUFAjqG-tshJVezF-d3h5XGjVCtumeZ6rbfv9K0q015FiVFLUGjAG8zHnhrI6pUnDCc0iw3H6PQqVHZc56ra/s128/backtotop.png'/>
</div>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {
    if($(this).scrollTop()>400) {
        $('#Back-to-top').fadeIn();
        }
    else { $('#Back-to-top').fadeOut();}
    });
    $('#Back-to-top').click(function() {
        $('body,html')
        .animate({scrollTop:0},300)
        .animate({scrollTop:40},200)
        .animate({scrollTop:0},130)
        .animate({scrollTop:15},100)
        .animate({scrollTop:0},70);
        });
});
</script>

Catatan: Warna pink adalah link gambar, sebaiknya diganti menggunakan link punya sendiri, di save terus upload ke tempat punya sendiri, sedangkan angka-angka dalam JavaScript adalah pengaturan efeknya.

4. Selesai sudah cara membuatnya, tinggal di Save. Dan Lihat hasilnya

Terima kasih telah berkunjung dan membaca. Mudah-mudahan Bermanfaat.

Animated Bar With Jquery Image Slider For Blogger

Images sliders are common and ton of are available now. But hard to find working versions some times.Because some sliders lost jQuery hosted files and no longer works.Hope this tutorial work for you.However, Photo Slider always helps to make website more attractive.However there have lot of advantages of using it. We can use if for introduce some offers and new products to our audience.We can create awesome images according to our service or product and share with slider.

Today I'm gonna share awesome about how to add Animated Bar With Jquery Image Slider.Its made with jQuery and CSS.Every code are well arranged. I added five photos for this slider. You can customize as your like.However just have a look demo page.You can get a idea about it very well.Let see, how to add this image slider for blogger.

How to add Animated Bar With Jquery Image Slider For Blogger

1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find </head>  and add below code just above it

<link href='https://bloggertrixcode.googlecode.com/files/animate.css' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='https://bloggertrixcode.googlecode.com/files/border-slider.js'/>
<script>/****/
            jQuery(document).ready(function(){
            jQuery(&#39;#bloggertrix_slider&#39;).animatedSlider({
                &#39;loader&#39;:true,
                &#39;width&#39;:900,
                &#39;height&#39;:300,
                &#39;slide_animation_data&#39; :
                    [//slides
                        //slide1 BEGIN
                        [
                            {
                            &#39;target_element&#39;:&#39;.txt1&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;tada&#39;
                            },{
                            &#39;target_element&#39;:&#39;.txt2&#39;,
                            &#39;animation_frame&#39;:0.8,
                            &#39;animation_type&#39;:&#39;tada&#39;
                            }
                            ],//slide1 END
                        
                         //slide2 BEGIN
                         [{
                            &#39;target_element&#39;:&#39;img&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            },{
                            &#39;target_element&#39;:&#39;p&#39;,
                            &#39;animation_frame&#39;:0.7,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            }],//slide2 END
                           //slide3 BEGIN
                         [{
                            &#39;target_element&#39;:&#39;img&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            },{
                            &#39;target_element&#39;:&#39;p&#39;,
                            &#39;animation_frame&#39;:0.6,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            }],//slide3 END

                          //slide4 BEGIN
                         [{
                            &#39;target_element&#39;:&#39;img&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            },{
                            &#39;target_element&#39;:&#39;p&#39;,
                            &#39;animation_frame&#39;:0.5,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            }],//slide4 END
                        //slide5 BEGIN   
                         [{
                            &#39;target_element&#39;:&#39;img&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            },{
                            &#39;target_element&#39;:&#39;p&#39;,
                            &#39;animation_frame&#39;:0.4,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            }],//slide5 END

                        //slide BEGIN   
                         [{
                            &#39;target_element&#39;:&#39;h1&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            },{
                            &#39;target_element&#39;:&#39;p&#39;,
                            &#39;animation_frame&#39;:0.3,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            }
                         ]//slide END

                    ]});});
        </script>
    <link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'/>

5. Again Find  ]]></b:skin>   and add below code just above it

/* The CSS Code for the slider starts here bloggertrix.com
#bloggertrix_slider {margin:0 auto;}
#bloggertrix_slider .slider-contents {overflow:hidden;border:8px solid #DDDDDD;box-shadow:0 0 3px rgba(3,3,3,0.5);}
#bloggertrix_slider .slide-nav {float:left;padding: 0 8px;height: 26px;background: #3a3a3a;}
#bloggertrix_slider .slide-nav a {width: 14px;height: 14px;text-indent: -999px;float: left;list-style: none;display: block;background: #dddddd;margin: 5px 4px;cursor: pointer;}
#bloggertrix_slider .slide-nav a:hover {
 background: #27BAFF !important;}
#bloggertrix_slider .progress-bar {width:0px;background-color:#AAAAAA;height:2px;top: -2px;overflow:visible !important;display:block !important;position: relative;}
#bloggertrix_slider .controls {height: 26px;margin: 4px auto 0;display: table;}
#bloggertrix_sliderr .pause-play-control {width: 46px;height: 26px;float: left;background: #3A3A3A;color: #fff;}
#bloggertrix_slider .pause-play-control a {width:9px;height: 19px;display:block;overflow:hidden;text-indent: -9999px;background:url('http://img837.imageshack.us/img837/7647/fqnu.png');cursor: pointer;margin:3px auto 0;}
#bloggertrix_slider .pause-play-control a.play-slide {background-position:-5px -3px;}
#bloggertrix_slider .pause-play-control a.pause-slide {background-position:-29px -3px;}
#bloggertrix_slider .slider-next,#bloggertrix_slider .slider-prev {
width: 46px;height: 46px;background: #3a3a3a;display: block;font-size: 41px;color: #FFF;font-weight: bold;text-align: center;position: absolute;cursor: pointer;text-indent: -999px;overflow: hidden;}
#bloggertrix_slider .slider-next:before,#bloggertrix_slider .slider-prev:before {background: #3a3a3a url('http://img837.imageshack.us/img837/7647/fqnu.png');width:32px;height:32px;position:relative;top:7px;left:7px;content:'';display:block;}
/*#bloggertrix_slider .slider-next {margin: -220px 0 0 681px;}
#bloggertrix_slider .slider-prev {margin: -220px 0 0 4px;}*/
#bloggertrix_slider .slider-next:before {background-position:-5px -31px;}
#bloggertrix_slider .slider-prev:before {background-position:-5px -70px;}
.slide1 img {position:relative;}
.img-logo {margin-left: 150px;}
.img-mobile {margin-top: 45px;}
.img-tablet {margin: -168px 0 0 139px;}
.img-laptop {margin: -186px 0 0 349px;}
.slide1 {background-color: #67b608}
.slide2 {background-color: #03bbd3}
.slide3 {background-color: #cf6b30}
.slide4 {background-color: #f2a87b}
.slide5 {background-color: #388efd}

6. Now Click Save Template and Go to blogger Layout
7. Click Add Gadget and select 'HTML/Javascript'
8. Paste below code.

<div id="bloggertrix_slider">
            <div class="slide1">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaMoMafCA0Ky7s-aMPAldLbB_8eFe-W95q7frluf_kIg8-OffYzqtBK6_srREJVjSZjnpZk4puYnD9ZFFgfiLa3tWqLdNnbjbWTI9SEqzH_IWpuUvr58oeGr0fa0VkisI3lVAr61fgsrc/s1600/bloggertrix1.jpg" />
            </div>
            <div class="slide2">
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6kDdW3xkQPQtYiGmBLdAObdvDjambBGGzFHdOFAJgq10qDvarWj2Vh5w2kHJwcxKEr-VlMeNaL1eyaTe1Dqe8joGwnOuLXjEbxFEhqCjdMAWEglOlkE46JtU4j8dwgg_hSUQMJFDHMA/s1600/bloggertrix2.jpg" />
            </div>
            <div class="slide3">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc3CbvwBRn_msqKWPn5gztGGmMcYkQiq1JXBpcLNx06_wH1HgLvD-Nt_5Ui8UNCmaNBZFRGfCh7r6ySC5GIzxiSRxxYzyBQLOLFJdVCycjnD4uzUwsmB0KOt_5x1JxFHnNORx6QpLFvGc/s1600/bloggertrix3.jpg" />
            </div>
            <div class="slide4">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvhJX9iJ7eJMVqEqM-8kt-kqWGvgBer2G8XfggG_E47B1PDP2EYAvH0wP3VCbLfhRD3R0uCCjLvwaApl0542DSHq0xaUDkj-3JRY9Mm1pv7RjnjMVeqo8RkGWWom9cTvRKFwPXwggrC_g/s1600/bloggertrix4.jpg" />
            </div>
            <div class="slide5">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGRBArFiW-IoKE-zb71Lxs0iW0lUDZ2MVAUObGBpqJiB3ZdlTwPsFkFWNTCTwi_XslK87GtmW5ntaQ0fAA8rZIagQPcXceWStXg0YIYHV84Dc814cLjhfn132lZhUCJKqUR83BSJqp3Ys/s1600/bloggertrix5.jpg" />    
            </div>
        </div>

Replace Red color URL with your image links

9. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Animated Bar With Jquery Image Slider. Just leave a comment.I will help to you.

Add Expanding Photo Stack Effect for Blogger

Today im gonna explain simple tutorial about How to add Add Expanding Photo Stack Effect for Blogger Images. Every modern browsers support with this effect. You can add this to blogger side bar by re-size images.Im just using CSS3 for this animation effect.Hope you can understand it.if you have any problem regarding to this tutorial let me know. Use below button for demo.

          

How to Add Add Expanding Photo Stack Effect for Blogger

1. Go to Blogger Dashboard > Layout
2. Click Add Gadget and select 'HTML/Javascript'
3. Paste below code.

/* The CSS Code for the image starts here bloggertrix.com
<style>
#btrix_imgstack{
  width:300px;margin:0 auto;margin-top:2%;
}

#btrix_imgstack a{
  width:288px;
  height:200px;
  position:absolute;
  display:block;
  border:6px solid #f0f0f0;
  border-radius:2px;
  box-shadow:0 0 10px rgba(0,0,0,.3);
  transition:margin .5s;
  -webkit-transition:margin .5s;
}

#btrix_imgstack img{
  width:288px;
  max-height:100%;
}

#btrix_imgstack a:first-of-type{
  margin-top:-5px;
  margin-left:-20px;
  transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
}

#btrix_imgstack a:nth-of-type(2){
  margin-top:-5px;
  margin-left:-10px;
  z-index:-1;}

#btrix_imgstack a:last-of-type{
  transform:rotate(3deg);
  -webkit-transform:rotate(3deg);
  z-index:-2;}

#btrix_imgstack:hover a:first-of-type{
  margin-left:-310px;
  margin-top:5px;}

#btrix_imgstack:hover a:nth-of-type(2){
  margin-top:-5px;}

#btrix_imgstack:hover a:last-of-type{
  margin-left:290px;
  margin-top:5px;}

#btrix_imgstack a:first-of-type:hover,#btrix_imgstack a:last-of-type:hover{margin-top:-5px;}
#btrix_imgstack a:nth-of-type(2):hover{margin-top:-10px;}
</style>
<div id="btrix_imgstack">
 
  <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquL-jMYq__Kfr9IxQY9aMDVj-J3CGp4WWZXT2kaxmN5dT0twp3fQfG7BHZULDav0H0tTlBRtIXnz1gFFEWn4uJDX2htz4Wjjz1u3B5uD2QxI6B_jHK7-T4wk9X8gGuKS-eCpBlID4IY4/s1600/btrix_image1.jpg" alt />
  </a>
 
  <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ibqlDt2XtsofRj4VC-U7xHKshXXCKgvJVLZp2NvSDqWH6lBdfFwO1W4wZElmdVUbGgALsX-cmBj7px5pgzq-TjdVDntjVDSMhKYkpFGCd03U93P4pld8ddEVf_D_2N0ZgleCoU8yFg8/s1600/btrix_image2.jpg" alt />
  </a>
 
  <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilZsIxoGpiacQ8O1H_52luBu0_ai-WWTeWCmk5c6IeoY68tM9w9QomJaThmQWzgOgVGu8oNhou7xiH_qFLjSEQAbZrSXaemqX5UEstYo0onH99y5BK3xV6dndtY8YMYWDaUUfeJxGlRIA/s1600/btrix_image3.jpg" alt />
  </a>
 
</div>

Replace # with your links.
Replace Blue color text With your image description
Replace Red color Link with your Image link.

4. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Expanding Photo Stack Effect for Blogger. Just leave a comment.I will help to you.

Animated Caption and Description Hover Effect for Blogger Images

Today im gonna explain simple tutorial about How to add Animated Caption and description Hover effect for blogger Images. Every modern browsers support with this effect. You can add this to blogger side bar by re-size images.Im just using CSS3 for this animation effect.Hope you can understand it.if you have any problem regarding to this tutorial let me know. Use below button for demo.

How to Add Animated Caption and description Hover effect for Blogger Images

1. Go to Blogger Dashboard > Layout
2. Click Add Gadget and select 'HTML/Javascript'
3. Paste below code.

/* The CSS Code for the image starts here bloggertrix.com
<style>
#bt_imageeffect {
   margin: 20px auto;
  width: 100%;min-height: 300px; padding: 20px 0;
  text-align: center;
 }
.galleryItem {
 display: inline-block;;
 position: relative;
 width: 250px; height: 250px;
 padding: 0;margin: 0 20px;
 border: solid 10px #fff;

 -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);
 box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.galleryItem img {
 width: 250px;height: 250px;
}
.caption {
 position: relative;
 display: inline-block;
 width: 250px; height: 250px;
 z-index: 10;
}
.caption::before {
 content: attr(data-title);
 position: absolute;top: 0; left: 0;
 width: 250px; height: 0;
  font-family: 'Croissant One', cursive;
 font-size: 1.8em;font-weight: 600;
 line-height: 1.4em;color: #086FA1;
 background: #fff;
 overflow: hidden;
 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 transition: all 0.9s ease;
}
.caption::after {
 content: attr(data-description);
 position: absolute;
 bottom: -0;left: 0;
 width: 250px;height: 0;
  font-family: 'Poiret One', cursive;
 font-size: 1.1em;
 font-weight: 400;
 line-height: 1.4em;color: #fff;
 background: #222;
 overflow: hidden;

 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 transition: all 0.9s ease;
}
.caption:hover::before {
 height: 125px;
}
.caption:hover::after {
 bottom: 0;height: 125px;
}
</style>

<div id="bt_imageeffect">
<li class="galleryItem">
  <a class="caption" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sapien condimentum, sagittis erat rhoncus, bibendum nisi." data-title="Nature Scene" href="#">
  <img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizp-SBbGyIhkBn69dWhWCQzBQhXVM85CN8G-qUEnJ7JptDDnraBdIp0mT80ycsnEY7Z3NcpSLoR1_Af9GntsgqYCr1qdpf8qp7P9hW61fW_Vimm77u1sy5_nsu5qRsuI_JSTB2EHTNQAs/s1600/Green+Nature+Wallpapers.jpg"/>
  </a></li>
<li class="galleryItem">
  <a class="caption" data-description="Vivamus ut sem id magna consequat porta vitae ut sem. Proin eget commodo risus, vitae blandit velit. " data-title="SunFlower" href="#">
  <img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ759l4NWywn-vbvfNXsJc-CJ2kZPS5kZJZ3MCpUm-b74BCCbbAeHlqq_XWHHpJCk0UW6L2H-ouB_62B5cvvBUm8GDpYp4WolpR1yIScluTcOEzZ22FcD2RSXxTFkrIKZx2EEJt6nEO8/s1600/nature_3.png" />
  </a></li></div>

Replace # with your links.
Replace Blue color text With your image description
Replace Red color Link with your Image link.

4. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Animated Caption and description Hover effect. Just leave a comment.I will help to you.

Stylish Jquery Animated Tabs Widget for Blogger

Tab widgets always help to save website space.In this tutorial im gonna explain how to add Unique juery tab widget for blogger.We can use add few pages for tab widgets.jQuery tabs are very stylish and very popular for blogging.This is a simple jquery tab widget.I used Css and jQuery to make this widget.This tab widget work with every modern web browsers.However its not work with IE. you can take a look at in demo page to get idea how it works. 

How to add Jquery Animated Tabs Widget to Blogger

1. Go to Blogger Dashboard > Template

2. Find ]]></b:skin>
3. Paste below code just below it.

<style>
.b, .c{ display:none;}
.buttons{
    border-bottom:solid #d1c8b8 4px;
    display:block;
    padding:8px;
    width:80px;-moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;
    text-align:center;
    margin:1px;
    background:#4b7975;
    text-decoration:none; color:#FFFFFF;
    float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
#multitab {
    background:#919b9d;
    text-align:justify;
    overflow:hidden;
    color:#fff;
    padding:20px;
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;    height:200px;
    width:272px;
}
#multwrap{
    text-align:left;
    overflow:hidden;
    width:350px;
    height:380px;
}
  </style>

<script type='text/javascript'>
// <![CDATA[
$(document).ready(function() {
    $("#first-tab").addClass('buttonHover');
});
function navigate_tabs(container, tab)
{  
    $(".b").css('display' , 'none');
    $(".c").css('display' , 'none');
    $(".a").css('display' , 'none');
  
    $("#first-tab").removeClass('buttonHover');
    $("#second-tab").removeClass('buttonHover');
    $("#third-tab").removeClass('buttonHover');
  
    $("#"+tab).addClass('buttonHover');
    $("."+container).show('slow');
}
// ]]>
</script>
<script charset='utf-8' src='https://bloggertrixcode.googlecode.com/files/jquery1.2.6.js' type='text/javascript'/> 

4. Now go to blogger Layout
5. Click Add Gadget and select 'HTML/Javascript'
6. Paste below code.

<div id="multwrap">
 <a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Tab 1</a>
<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Tab 2</a>
<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Tab 3</a>
   <br clear="all" />
      <div id="multitab" align="center">
          <div class="a">
                <em>B</em>logger is a blog-publishing service that allows private or multi-user blogs with time-stamped entries. It was developed by Pyra Labs, which was bought by Google in 2003. Generally, the blogs are hosted by Google at a subdomain of blogspot.com.  <br />  <br /> Thanks!

                </div>
                <div class="b"><em>L</em>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

                </div>
                <div class="c"><em>S</em>tarting in February 2013 Blogger began integrating user blogs with multiple country specific URL addresses i.e. exampleuserblogname.blogspot.com would be automatically redirected to exampleuserblogname.blogspot.ca in Canada, exampleuserblogname.blogspot.co.uk in the United Kingdom etc. </div>
</div> </div>
</div>

Note:  You can past any text or code  with replacing above 3 different texts.

7. Now save your HTML/Javascript'.
You are done. If you have any problem related to this Jquery Animated Tabs Widget. Just leave a comment.I will help to you.

Metro Style Social Media Widget For blogger

In  this tutorial  im  gonna  explain  how  to add  Metro
Style   social   media  widget   for  blogger.   By  using
this widget  you  can  link  your   social  media  profile
Facebook,   Twitter   Youtube  Rss    and   linkedin IDs

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste  below code.

<style>
.metro-social{width:315px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidjr8ZZMP4dD8VBei3H0rDnpK8WntTDaSI-26QS_HtsISyyg8G-96O8uXfK837GxM2aKQ3NvKJ55JTw2dxXbL6NA_bmZyWNSmB_DDujUtvlAab-XzDLiozIDMdG1WtwXXddcHjMwb-kww/s1600/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikLXr3oI52t10DZE0BTVrEoZn2r8AVCOIRg1lOAVFbpuk70Q8DaZgANBu-KLXgvHO0AoRAGYciGMLlR5Fl9e9lugbwKtXs_nmxmooZJG-2AoxNlGj9djAmeUYy6W0-WIzgWOVM4HXhfC0/s1600/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYn8Go00G6OwGSK17nYs7agtzK6LACn8GM1qi0TdNGKNkazvGMy1dgMqBqk20isyKSGW_Tsbb-v9HyUKD4Ixbokqh37A34Ogr47CNieHjOwivuf612cS-B5AG6_uN0eHJYNSD9QfNtrbw/s1600/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipguw4QA4YRd2LAa_0_A1s-su0wb2412euDlzaxPqlZxhKZGg036RL7qW7aV8EaJufZ7LkvLC2B5SW6GLEYBY_Ci4nVo90ot3S9kSPrhlmYkTSXQLRqFfxGP882mD8WQdMq0kXB0YGMm8/s1600/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBquuFl5zAxptUCmWQwFKfDSG4Z4xy8VmyKbBUy5qSiHVPPqyIwx0AMXfzxUv-Y7BWB2jo4chBGfwovUeok9xYABPQQzVMBsSeWtDvQz8X7UjTjBkRPwEieSj5JCmFKBMJSwII96Ju28w/s1600/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Um-7wsAIcxYuohxpYGCV-UeJG9ae01Us-6fZ31eND1i4xULCvlTxYWrthocS93IFhyphenhyphenr1zP4yujP5G5lB20E9wpOAsvOy87yILYj8vxpgwKfTiKHIG1rtX9nwxCqH-IFnAiZ6lpxoEnA/s1600/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxxOd4urzzSpCsUV5UYyj_y3ZkJgzeV8FrPCTG3WiwVEjDtIJe9j_l3a0bidO1p1WV1qGeRP_n-xHGgr_38viopBjxN99UkzH_Zdy6cKM9Cgbs6sqfy4FxKHeQi6XxRm3eZmS-7Oa7dPA/s1600/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAnAObZz4faFOpCejFoOmnvQS4ER39GDVKllQCFs2MgQBeE4ODJnktJMqWKQVMc2kFBc0pvvVN33m9q2Na7oBqR42aS1mwSBygeHfnhpl3nIwBu50tOnNPJE1K5qWvKeAQlCsv8p4-fw/s1600/bt-facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRxdzf9xWxordRn-0DnXNWOAiGZzw4U7NEYigMdmmW7G4pNHVtLuzgLjOT3TyHPAcxIajzbxl4kYZiwx-0bLPb1eL1iTdfFeTj2iYGBFFrhGd-dXypvdxq_PPWlm3RWDVH9NeVYHrDWK4/s1600/bt-twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip5qbcoxGtZZPlWzQ6iGg3tMdMQWmWBRoMfchxPGkrrfjyH5tJzh0yZ2Z3XR_73P8DUQCnEAjU_T3-QcIqAq_yx8Y2t6L6zPD0k1qrr2uJTuz_wsuj9_rdBYOvAM_2YZ3WLPLYQgegbi8/s1600/bt-google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJU7reVndtl_estQpNjNAP2TWRwmAWmg8Shg6N_aEHXjfaYakUTnxaqODjJFPjzz9v7fNrDCesgtXBWyU7nhoLM7S5INrZBw1sqShIilAdQUP6Bw5JAGNTaAeqsEG5U3Aj3uEq3wT1GkI/s1600/bt-pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPnf7ZpSXbX_z0aVsE9HZ3U7_Es2-Z3LENPm9KSQak0Yoz5PFhyphenhyphen_PXaRFdZCMnVT9sgQ3Yhdq16Vf8dTbIBFzz7PKMkuuKg9Rb16PO6-R0VhLq1veuM5KsElZT006Z3SPScUG2BKC7Ac/s1600/bt-linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MVslnVbRBKyQLfo3D2lhdHWk0ElhXuF4hnwRrH2YEAEeNbZH-8G0ezyDSXjDnFgqzgzJajSye2Z9wHQEz0MREcqRkODS2OpkiiNuq5HlZEsYV2cH2c19NeRYZ1-ODqIGsxNo9Hmk2EU/s1600/bt-youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZ-4ClVHFub3J8PU311a8F6luusBJzK_ClZ4CDyjFcSVHejOIKafLdZ1Z5wDvicqHylpMUa6w-9oMABT72mcUcWckCEVQv3w7ObjxGS5Fjl0_3dTV3vLiPo4D1mx7KUlwuA8Q8zc7jcc/s1600/bt-feed.png) no-repeat center center #e9a01c}
</style>

<div class="metro-social">
<br />
<li><a class="facebookbt" href="http://www.facebook.com/bloggertrix"></a></li>
<li><a class="twitterbt" href="http://twitter.com/bloggertrix"></a></li>
<li><a class="googleplusbt" href="https://plus.google.com/107955298793879607964"></a></li>
<li><a class="pinterestbt" href="http://pinterest.com/bloggertrix"></a></li>
<li><a class="linkedinbt" href="https://www.linkedin.com/username"></a></li>
<li><a class="youtubebt" href="http://www.youtube.com/username"></a></li>
<li><a class="rssbt" href="http://feeds.feedburner.com/bloggertrix"></a></li>
</div>

Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace 107955298793879607964 With Google plus profile ID
Replace bloggertrix with your Pinterest ID
Replace Username with your LinkedIn ID
Replace bloggertrix with your Youtube ID
Replace bloggertrix with your Feedburner ID

5. Now save your HTML/Javascript'.
    You are done...

Css3 Peel Image Effect For Blogger

In  this  article  im  gonna  explain  how to add Css3
Peel Image Effect For Blogger for  blogger. You can
add  this  widget to  your  sidebar. If  you  want, you
can  add  a link  to image. Im using CSS and HTML
for  this  widget. you  can  use  your  own  image  by
changing  links  i mentioned  end of the code.Follow 
these  step to  add to  your blog.

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<style type="text/css">

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; 
height: 434px; 
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease; 
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}


a.nowandthen img:nth-of-type(2){ 
z-index: 1;
}


a.nowandthen:hover img:nth-of-type(1){ 
clip: rect(0,0,434px,0); 
opacity: 0;
}

</style>

<a class="nowandthen" href="http://www.blogger.com/null">
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH8s2fRzrxvp7x-oHGfAKeW84jmGFmiJ9JRE32YzdLAjSbkplyzFiPWW5zLFP3UTHTcw_HoOTniJ4HnNyVDuk5gud6GnudX7q-iMeltYcAGP24ydtGZmYEXBDe-pWd-rig80ZQPI_-QMY/s1600/sunset-sunrise-btrix+(1).jpg" />
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEaA-dzov9qSW7W_v9KcKKAr4C6fv3pcqVG5mLI2wR2cli37OgZKbmj0s3m3-rjNmQ77e4nkGs-aizMoLyj2wO6-RUg5csTeeabNXAAhxAl1E6rssI1PPCjtGQrOzsPFwdoEf5v4hhJl0/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

5. Now save your HTML/Javascript'.

    You are done...

Cara Buat Tombol Share Dengan Efek jQuery Nudging

Cara Membuat Tombol Share Dengan Efek jQuery Nudging, cara memasang social bookmarking share button widget ini , nah kebetulan sekarang saya sempat mengulasnya dan akan saya bagikan kepada anda semua

Tombol Share widget menggunakan jQuery nudging ini sebenarnya penerapan dari apa yang saya jelaskan pada artikel saya yang sebelumnya yaitu cara membuat link bergerak - link nudging, tetapi disini saya menggunakan gambar/ikon sehingga terlihat menarik dan unik. Icon sharing widget  ini terdiri dari beberapa situs social media yang umum dipakai oleh orang untuk membagikan artikel yang bermanfaat bagi kerabat mereka. Banyak dari para pengunjung bertanya kepada saya apakah script jQuery tidak berat ketika di load? jawabannya adalah TIDAK, script jQuery ini sangat ringan jadi jangan khawatir untuk memasang script jQuery pada blog anda.

Sebelum kita memasang ikon sharing widget ini ada baiknya anda back up template terlebih dahulu untuk jaga-jaga kalau ada kesalahan pemasangan

• Login di Blogger
• Masuk ke Template > Edit Html
• Centang pada Expand Widget Templates
• Cari kode ]]></b:skin>
• Copy kode dibawah ini dan paste tepat dibawah kode  ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge, .#Label2 ul li a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging --><!-- end LinkNudging -->

• Gunakan CTRL+F kemudian cari kode <b:if cond='data:post.hasJumpLink'> setelah ketemu kemudian diatas kode tersebut akan ada kode <div style='clear: both;'/> <!-- clear for photos floats --></div>
• Copy code dibawah ini dan paste tepat diatas kode <div style='clear: both;'/> <!-- clear for photos floats --></div>

<br/>
<b:if cond='data:blog.pageType == "item"'><b>Share it to your friends..!</b><br />
<br />
<table border='0'>
<tr> <td><script type='text/javascript'>
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script><g:plusone size="standard"></g:plusone></td>
<td><div class='bookmarks'>
<a class='nudge' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share to Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio2ipLUSdsOVmK19dIxpl9LsKlHnC1fOx2s4hPFLP_ZAZEvY1EWs0MUOiIv73xTmBWLUOCqVM4C1mcPOKukyOuHFg2Utg39yjcayRscGTx-IsnL71O-n1v16VtsZtI0LXL1UGZ1IdFE-w/s1600/facebook.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Facebook'/></a>
<a class='nudge' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;amp;url=&quot; + data:post.url ' rel='nofollow' target='_blank'><img alt='Share this post on twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0m9xANjpRyBw78Q0iimGQV-O54PjxibqGhINneozyw824hbOUdIIWAaI3rcB4VlGA86TdOWiJrKWjSKJE8w-2lX4UctYQWcxstAeCgDIGIaJ1rClJhdFRfcqpT8CDPWtu4NtE8v-19ww/s1600/twitter.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share this post on twitter'/></a>
<a class='nudge' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Bookmark Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsWNLzbm1Bt4YQV7srUbn7slLnkFDw9ZxcSp0ledqohotV7oQV_a0cVpRYobVdl1a7eACc65WUwl-w22khKXkPhmwoET3oVtBRbXxDE0KA1akTuKujqzPQpljgg4qPbpdhm3SYDD0M14/s1600/delicious.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Bookmark on Delicious'/></a>
<a class='nudge' expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCW4iru1qgkVLZhDjVedwjGjOc2VutgsztU3JwG9fJHr0c1gzonn180f5zuhDbA-JMJb_79fQ6ogOAdZSfOArzV-mW2vbHAFDpMmwC_o8qoT2Jng-O52MpInBBJyW6CplBHLIthmKxlD0/s1600/digg.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Digg This'/></a>
<a class='nudge' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumbleupon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJXY-sW9p_MbUVCdhMXaaDedVhBYlTkqH6oS43jrvLi2W7M7BiHP-JCgahVrER-DLHCtTCjTfCVT3KZxGcdX3sW6DEuRy8hsOxjZHZqn9Kc7B3Rr_MLd_ryrZicDkgmO1j_LLRSP57IMw/s1600/stumbleupon.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Stumble This'/></a>
<a class='nudge' expr:href='&quot; http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeP70sEuecph7CBZhMdyZXyPf0s9JbFOBU_nOO56EyQp1eDuK6Rzn7GYiAFyfkesnXuTdKZy8y5iCfYyy2kY9pJ6ohyphenhyphenrQcdI_TSrMAiH9i0HAFWyDlkcCm1sVahoWDkNDVPETnMiI5T9Y/s1600/reddit.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Reddit'/></a>
<a class='nudge' expr:href='&quot; http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Yahoo Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLQmv8La8KIs_x2sdNyzv2YpQKumQOXUwHySy0-C1KvMig568QC3IPaRFogScb-Z3nV8bmHVt9Gsz9Yhp_GzpGyWUij20kw54ol9n895RY0XTjS3lySaGH5Fgax_JB0Grhzdb5AkbP-o/s1600/yahoo.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Yahoo Bookmark'/></a>
<a class='nudge' expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Furl-Diigo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXLQqCkmQkPWqc33NkTEdpBcVzr8jg-cqANjvQWOzOsdKFdxaLP6wCJkKUxnY-V-5UqD72F38IrtVHXMbE4Wbfx4IKV49uImmsYc8vbN_EvI8muZYmY0p7OCfiW4uo5SXPlULBFpHKrHQ/s1600/furl.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Send to Furl/Diigo'/></a>
<a class='nudge' expr:href='&quot; http://www.google.com/bookmarks/mark?op=edit&amp;amp;output=popup&amp;amp;bkmk=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Google Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpriAm8-kNBIATVlWA8S36JAUXg8kNBiCD3Ma6aEqkn9jo0JdgU-n-i-dWYQobvHzBob8p46L3nqaTRYcD9qsMwoBNtWCWunjkUqRI-r7iHWV41Nfoc_boHVULiPgfYrnTvQknCd3n4I0/s1600/google.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Google Bookmark'/></a>
<a class='nudge' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXjLcoP9hLzPQ-MKU301JWRCepoRzhnlB9ONWGOUkPq-sppOQFdYpBkyw_64C9ZZE4Z6gzJJfkkRVt_2A2Ejx9_slfwJ066wldsj2l4ulu2ed_Kaoo7A_Oy8Pdfk5q_kqKDGu0FCE254A/s1600/technorati.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Technorati'/></a>
<a class='nudge' expr:href='&quot; http://www.newsvine.com/_tools/seed&amp;amp;save?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Newsvine' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaGiCP8EiCcQMCPbHuX7vjFcRAP7G7oCu5PUlecfIYFGfY6uY9rLaIdAEPV6qzjb5bIOTbUluF_gCszxW18GeR-m2vm8y7nEUNvDgsryduulXeBUzBB5y7fwlz8oL6dADfaNZDdR-8dog/s1600/newsvine.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Save to Newsvine'/></a>
<a class='nudge' href='http://bloggerpeer.blogspot.com' target='_blank'><img alt='Tips Triks Blogger, Tutorial SEO, Info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-QkLe3eyCDnf70lo_iMHRWSvlZtA2jJpo4G7zaw42kAvh1LFVXA9uDoG46hTLUEDSvwMJorjQUAh4K_cfQFBS_mc0U4gMZq6i_6ZtO7NvPUllg7-qQG-MhsnbOWzkjeLCJv3mucYZTA/s1600/blogger-peer.gif' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;'/></a></div>
</td></tr>
</table>
</b:if>

• Terakhir simpan template

PENTING: SETELAH KEMARIN GOOGLE CHROME MELAKUKAN UPDATE, TOMBOL SHARE DENGAN EFEK NUDGING INI TIDAK DAPAT BEKERJA DENGAN BAIK KALAU DIBUKA MENGGUNAKAN BROWSER GOOGLE CHROME. SARAN SAYA, LEBIH BAIK GUNAKAN TOMBOL SHARE INI TANPA EFEK NUDGING DEMI KENYAMANAN PEMBACA BLOG ANDA.

CARANYA: Jangan memasang kode script yang dibawah kode ]]></b:skin> atau skip saja kode itu, kemudian lanjutkan dengan kode yang kedua dan terakhir simpan template.