How To Add Mirror Flap Social Bookmarking Widget

In previous post, I shared animated twitter flying bird widget, this time i am sharing mirror flap social bookmarking widget. Mirror flap widget is used by some modern technique animation. Flapping effect and large social icons in this widget attracts visitors. Flapping effects itself makes this widget more  interesting and amazing for the users. Its is quite easy to use and quiet easy to add in blog or website.Mirror flap widget represents three major social networking sites like Facebook, Twitter and Google Plus. Follow the below steps to know how to add mirror flap social bookmarking widget.

How To Add Mirror Flap Social Bookmarking Widget

1. Login to Blogger.com

2. Go to Dashboard.
3. Click on "Layout"
4. Click on "HTML/Javascript"
5. Copy the below code

<style>  .Rcbm-flapwid {  font-family:Cambria, Georgia, serif;  font-weight:300;  font-size:15px;  color:#333;  overflow-y:hidden;  overflow-x:hidden;  height:270px;  font-smoothing:antialiased;  -webkit-font-smoothing:antialiased;  -moz-font-smoothing:antialiased;  -o-font-smoothing:antialiased;  -ms-font-smoothing:antialiased;  margin:1px;  }    .Rcbm-flapwid a {  color:#555;  text-decoration:none;  }    .Rcbm-bdy {  width:600px;  position:relative;  margin:1px;  }    .clr {  clear:both;  height:0;  margin:0;  padding:0;  }    .Rcbm-fgt {  list-style:none;  display:block;  text-align:center;  width:100%;  margin:5px 0 0;  padding:0;  }    .Rcbm-fgt:after,.Rcbm-itm:before {  content;  display:table;  }    .Rcbm-fgt:after {  clear:both;  }    .Rcbm-fgt li {  width:170px;  height:170px;  display:inline-block;  margin:10px;  }    .Rcbm-itm {  width:100%;  height:100%;  border-radius:50%;  position:relative;  cursor:default;  -webkit-perspective:900px;  -moz-perspective:900px;  -o-perspective:900px;  -ms-perspective:900px;  perspective:900px;  }    .Rcbm-tgf {  position:absolute;  width:100%;  height:100%;  -webkit-transform-style:preserve-3d;  -moz-transform-style:preserve-3d;  -o-transform-style:preserve-3d;  -ms-transform-style:preserve-3d;  transform-style:preserve-3d;  }    .Rcbm-tgf > div {  display:block;  position:absolute;  width:100%;  height:100%;  border-radius:50%;  background-position:center center;  -webkit-transition:all .4s linear;  -moz-transition:all .4s linear;  -o-transition:all .4s linear;  -ms-transition:all .4s linear;  transition:all .4s linear;  -webkit-transform-origin:50% 0;  -moz-transform-origin:50% 0;  -o-transform-origin:50% 0;  -ms-transform-origin:50% 0;  transform-origin:50% 0;  }    .Rcbm-tgf .Rcbm-tgf-front {  box-shadow:inset 0 0 0 10px rgba(0,0,0,0.3);  }    .Rcbm-tgf .Rcbm-tgf-backfb {  -webkit-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  -moz-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  -o-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  -ms-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  background:#4668af url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wcZn-wx10-9BTGKwwOvh_ZU4GyWsuCi84VrgNkqy9z20b7Wolq5yPMfWwfZRPDeZl2HN3M-gDJ2vSsfJ6WokplHaCx6jBglzp_L6N7k2keErBdZ862L2H0mFsgjGyWUTlfWRCyWdZYpO/s200/widget-generatorsdotcom.png);  opacity:0;  }    .Rcbm-tgf .Rcbm-tgf-backgp {  -webkit-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  -moz-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  -o-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  -ms-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  background:#de3a26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wcZn-wx10-9BTGKwwOvh_ZU4GyWsuCi84VrgNkqy9z20b7Wolq5yPMfWwfZRPDeZl2HN3M-gDJ2vSsfJ6WokplHaCx6jBglzp_L6N7k2keErBdZ862L2H0mFsgjGyWUTlfWRCyWdZYpO/s200/widget-generatorsdotcom.png);  opacity:0;  }    .Rcbm-tgf .Rcbm-tgf-backtw {  -webkit-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  -moz-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  -o-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  -ms-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg);  background:#0dace1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wcZn-wx10-9BTGKwwOvh_ZU4GyWsuCi84VrgNkqy9z20b7Wolq5yPMfWwfZRPDeZl2HN3M-gDJ2vSsfJ6WokplHaCx6jBglzp_L6N7k2keErBdZ862L2H0mFsgjGyWUTlfWRCyWdZYpO/s200/widget-generatorsdotcom.png);  opacity:0;  }    .Rcbm-img-1 {  background:#4668af url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZTgKYuHFwic33O13kDDTlQn4QyHLknihDm6nR1RXlH6JePSeVzvzPg2jQHpk6gHeqcUEBtgpChSOPGcIiYtDJHh-jpPMxhR46lyrk5Mt5Cy5JSI33_ukL_JBcd2YpHd4kbBkCxpKsdxa/s66/widgetgen-facebook.png) center no-repeat;  }    .Rcbm-img-2 {  background:#de3a26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwvKBkJQlPDKYpB9h3UzpJD5jc07a4SNgMpz9re3El_bNUC6mbWhnRFNOvDQFgHu3m5DlOYU_eXRyphSKaj5MO2lkofztdK-Z35wj9nwpjcZUxwJrHz-zEhbnvhR5SA7K6Dqu3hk9QIps5/s60/widgen-googleplus.png) center no-repeat;  }    .Rcbm-img-3 {  background:#0dace1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi02t_jfE-1PIhcPiTXyeOEPfmg3fokXv714y_ok2omXtk8lITN_tVWLa9bCqRhLMx8XCOiLDKi35Wxc99L7D5BSctw3V-cWoYcT87jHLA8fuh25ZPMkmRwYARuyE2R3VaEMtoo5hQhQh8i/s60/widgetgen-twitter.png) center no-repeat;  }    .Rcbm-tgf h3 {  color:#fff;  text-transform:uppercase;  letter-spacing:0;  font-size:24px;  height:40px;  font-family:'Open Sans', Arial, sans-serif;  text-shadow:0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);  margin:0 20px;  padding:40px 0 0;  }    .Rcbm-tgf p {  color:#fff;  font-style:italic;  font-size:12px;  border-top:1px solid rgba(255,255,255,0.5);  margin:10px 0;  padding:0;  }    .Rcbm-tgf p a {  display:block;  width:100px;  height:30px;  background:rgba(0,0,0,0.3);  border-radius:2px;  color:#fff;  font-style:normal;  font-weight:700;  text-transform:uppercase;  text-decoration:none;  font-size:9px;  letter-spacing:1px;  padding-top:3px;  font-family:'Open Sans', Arial, sans-serif;  text-shadow:0 0 0 #fafafa, 0 0 1px rgba(0,0,0,0.3);  -webkit-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  -moz-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  -o-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  -ms-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  transition:transform .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  margin:7px auto 0;  }    .Rcbm-tgf p a:hover {  background:rgba(0,0,0,0.2);  text-shadow:none;  -webkit-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  -moz-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  -o-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  -ms-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  transition:transform .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0;  }    .Rcbm-itm:hover .Rcbm-tgf-front {  -webkit-transform:translate3d(0,230px,0) rotate3d(1,0,0,-90deg);  -moz-transform:translate3d(0,210px,0) rotate3d(1,0,0,-90deg);  -o-transform:translate3d(0,210px,0) rotate3d(1,0,0,-90deg);  -ms-transform:translate3d(0,210px,0) rotate3d(1,0,0,-90deg);  transform:translate3d(0,210px,0) rotate3d(1,0,0,-90deg);  opacity:0;  }    .Rcbm-itm:hover .Rcbm-tgf-backfb,.Rcbm-itm:hover .Rcbm-tgf-backgp,.Rcbm-itm:hover .Rcbm-tgf-backtw {  -webkit-transform:rotate3d(1,0,0,0deg);  -moz-transform:rotate3d(1,0,0,0deg);  -o-transform:rotate3d(1,0,0,0deg);  -ms-transform:rotate3d(1,0,0,0deg);  transform:rotate3d(1,0,0,0deg);  opacity:1;  }  </style>    <br />
<a href="http://www.widgetgenerators.com/"></a>  <br />
<div class="Rcbm-flapwid">
<div class="Rcbm-bdy">
<br />
<section class="main">  <ul class="Rcbm-fgt">
<li>  <div class="Rcbm-itm">
<div class="Rcbm-tgf">
<div class="Rcbm-tgf-front Rcbm-img-1">
</div>
<div class="Rcbm-tgf-backfb">
<h3>
Facebook</h3>
Like Our Page <a href="http://facebook.com/makesomesenseblog">Like us On Facebook</a></div>
</div>
</div>
</li>
<li>   <div class="Rcbm-itm">
<div class="Rcbm-tgf">
<div class="Rcbm-tgf-front Rcbm-img-2">
</div>
<div class="Rcbm-tgf-backgp">
<h3>
Google+</h3>
Add Us To your Circle<a href="https://plus.google.com/+Makesomesense">Add Us On Google+</a></div>
</div>
</div>
</li>
<li>   <div class="Rcbm-itm">
<div class="Rcbm-tgf">
<div class="Rcbm-tgf-front Rcbm-img-3">
</div>
<div class="Rcbm-tgf-backtw">
<h3>
Twitter</h3>
Join Us on Twitter<a href="http://twitter.com/mk2senseweb">Follow Us on Twitter</a></div>
</div>
</div>
</li>
</ul>
</section></div>
</div>

6. Now save it.

Customization

• Replace makesomesenseblog with your Facebook username.
• Replace +Makesomesense with your Google Plus username.
• Replace mk2senseweb with your Twitter username.

Happy Blogging!