Sunday, 28 July 2013

Add a flap social media buttons widget to blogger

Add a flap social media buttons widget to blogger

بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ
Start with the name of Allah the most merciful and the most beneficent. Flapping social media buttons is a very beautiful widget. When you hover your mouse on this social media buttons it will flap and link will display, you can also see in image that Facebook and Twitter button are simply displaying, but when you hover your mouse on it, it will look like Google plus button. Are you still not understand that what is flap social media buttons widget? So don't worry I have demo of  flap social media buttons widget in my lab just click to demo button and you will know flap social media buttons widget.
Understood what is flap social media buttons widget? Want to add this widget to your blog? So don't worry just follow below steps.
  • also read: 

Adding a flap social media buttons widget to blogger.

  • Go to blogger dashboard,
  • go to layout >> add a gadget >> HTML/JavaScript,
  • now paste the below code in the HTML area of gadget:
          <div id="fb-root"></div>
         
         <style>  .obt-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;  }    .obt-flapwid a {  color:#555;  text-decoration:none;  }    .obt-bdy {  width:600px;  position:relative;  margin:1px;  }    .clr {  clear:both;  height:0;  margin:0;  padding:0;  }    .obt-fgt {  list-style:none;  display:block;  text-align:center;  width:100%;  margin:5px 0 0;  padding:0;  }    .obt-fgt:after,.obt-itm:before {  content;  display:table;  }    .obt-fgt:after {  clear:both;  }    .obt-fgt span {  width:170px;  height:170px;  display:inline-block;  margin:10px;  }    .obt-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;  }    .obt-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;  }    .obt-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;  }    .obt-tgf .obt-tgf-front {  box-shadow:inset 0 0 0 10px rgba(0,0,0,0.3);  }    .obt-tgf .obt-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(http://2.bp.blogspot.com/-9WIzxDVRQIA/UfUPgZq7ZlI/AAAAAAAAAZQ/r5kSktfK7B4/s1600/widget-obt.png);  opacity:0;  }    .obt-tgf .obt-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(http://2.bp.blogspot.com/-9WIzxDVRQIA/UfUPgZq7ZlI/AAAAAAAAAZQ/r5kSktfK7B4/s1600/widget-obt.png);  opacity:0;  }    .obt-tgf .obt-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(http://2.bp.blogspot.com/-9WIzxDVRQIA/UfUPgZq7ZlI/AAAAAAAAAZQ/r5kSktfK7B4/s1600/widget-obt.png);  opacity:0;  }    .obt-img-1 {  background:#4668af url(http://3.bp.blogspot.com/-7f0yXh4Gar0/UfUPf40Y3aI/AAAAAAAAAZA/7XqRR_o_fTA/s1600/obt-facebook.png) center no-repeat;  }    .obt-img-2 {  background:#de3a26 url(http://4.bp.blogspot.com/-gEh3kiJFKBE/UfUPf0DidaI/AAAAAAAAAZE/ab4zdG7vH-0/s1600/obt-googleplus.png) center no-repeat;  }    .obt-img-3 {  background:#0dace1 url(http://2.bp.blogspot.com/--aJap5Da_N8/UfUPf-20ePI/AAAAAAAAAZU/UJoimpbAdd0/s1600/obt-twitter.png) center no-repeat;  }    .mytitle{  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;  }    .obt-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;  }    .obt-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;  }    .obt-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;  }    .obt-itm:hover .obt-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;  }    .obt-itm:hover .obt-tgf-backfb,.obt-itm:hover .obt-tgf-backgp,.obt-itm:hover .obt-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.onlinebloggertricks.blogspot.com/'></a>  <div class="obt-flapwid">  <div class="obt-bdy">  <section class="main">  <ul class="obt-fgt">  <span>  <div class="obt-itm">  <div class="obt-tgf">  <div class="obt-tgf-front obt-img-1"></div>  <div class="obt-tgf-backfb">  <div class="mytitle">Facebook</div>  <p><a href="http://facebook.com/onlineloggertricks">Like us On Facebook</a></p>  </div>  </div>  </div>  </span>  <span>   <div class="obt-itm">  <div class="obt-tgf">  <div class="obt-tgf-front obt-img-2"></div>  <div class="obt-tgf-backgp">   <div class="mytitle">Google+</div>  <p><a href="https://plus.google.com/104207330518745395146">Add me on Google+</a></p>  </div>  </div>  </div>  </span>  <span>   <div class="obt-itm">  <div class="obt-tgf">  <div class="obt-tgf-front obt-img-3"></div>  <div class="obt-tgf-backtw">  <div class="mytitle">Twitter</div>  <p><a href="http://twitter.com/OnlineBTricks">Follow Us on Twitter</a></p>  </div>  </div>  </div>  </span>  </ul>  </section></div>  </div>   

Customization:

  • Now find OnlineloggerTricks and replace with your Facebook page.
  • Now find OnlineBTricks and replace with your Twitter account.
  • Now find 104207330518745395146 and replace it with your Google plus id.

Last words:

This widget credit goes to Widget Generators. and if you having any trouble in adding this widget so kindly tell me by your comments.

Do you Like this Article?

rss twitter facebook
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.

No comments:

Post a Comment

Subscribe this blog and get daily this blog articles to your email.