Rapture - Social Profiles Widget With Flapping And Hover Effect

Every Blogger should be social . Most of the bloggers have social profiles , but the readers might not know this . Suppose , if the reader likes your content , then they might want to subscribe to your social profiles to get updates about your blog activities . If , he couldn't find any social profiles , he will just leave without subscribing your site . So , you should always highlight your social profiles to get a maximum fan base . You should understand the value of a good fan base . It not only gives you traffic , but also a lot of fame . Without a good amount of fan base on the social profiles , your blog will not reach its highest potential . Even  in BuySellAds Marketplace , it highlights your social fans on Sites like Facebook and Twitter . They also highlight your RSS Feed Subscriber which can be increased by placing an E-mail Subscription Widget at the end of each post . Read This - Social Sharing Widget Under Post Title

You should add this widget to your blog if you have a small amount of fans on social networking websites . Nowadays , Nobody can spot  a website without links or icons to their social profiles . This widget is very large in size . So it would look good when you place it in the center of the footer .

STEPS 

1 . Go  TO Blogger - Layout - Add A Gadget

2 . Now Select HTML/Javascript .
3 . Copy The Coding Below and paste it . 

4 . Dont Forget to Change Links in THe Highlighted color to your links .

Source Codes

<style> .envy-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; } .envy-flapwid a { color:#555; text-decoration:none; } .envy-bdy { width:600px; position:relative; margin:1px; } .clr { clear:both; height:0; margin:0; padding:0; } .envy-fgt { list-style:none; display:block; text-align:center; width:100%; margin:5px 0 0; padding:0; } .envy-fgt:after,.envy-itm:before { content; display:table; } .envy-fgt:after { clear:both; } .envy-fgt li { width:170px; height:170px; display:inline-block; margin:10px; } .envy-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; } .envy-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; } .envy-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; } .envy-tgf .envy-tgf-front { box-shadow:inset 0 0 0 10px rgba(0,0,0,0.3); } .envy-tgf .envy-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/AVvXsEg_Yi9cCoq_9bLNF7hDBQCbJFEP7t2WBW8amPqI7K0KDOP1FM0mw4Eok_mscPbqeLUsM4tTTQQLvHF-0ULuJsS6YPMTY898gRhRfEYWLhyphenhyphenPQouj5sEaCYPGzV58kh7PHuf3obuP5hc5bafR/s200/widget-generatorsdotcom.png); opacity:0; } .envy-tgf .envy-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/AVvXsEg_Yi9cCoq_9bLNF7hDBQCbJFEP7t2WBW8amPqI7K0KDOP1FM0mw4Eok_mscPbqeLUsM4tTTQQLvHF-0ULuJsS6YPMTY898gRhRfEYWLhyphenhyphenPQouj5sEaCYPGzV58kh7PHuf3obuP5hc5bafR/s200/widget-generatorsdotcom.png); opacity:0; } .envy-tgf .envy-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/AVvXsEg_Yi9cCoq_9bLNF7hDBQCbJFEP7t2WBW8amPqI7K0KDOP1FM0mw4Eok_mscPbqeLUsM4tTTQQLvHF-0ULuJsS6YPMTY898gRhRfEYWLhyphenhyphenPQouj5sEaCYPGzV58kh7PHuf3obuP5hc5bafR/s200/widget-generatorsdotcom.png); opacity:0; } .envy-img-1 { background:#4668af url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz5oCpQ54h2PPI8XfGj2wZd_PzYBsqT2hnd38qLBpq3vZ5kY67nd6zgAD3UcCw7sn-NkCISLxjvOiQiKdRFGPME9lM-DZPk-TMEPFCiteEDUfD-C8gEjT2UPV6ZktcI0t2NgvmsXm1xYuB/s66/widgetgen-facebook.png) center no-repeat; } .envy-img-2 { background:#de3a26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXUy4LFn8_pshUwfAhsGiVf3-Fq2iiPZ8AlsUZCmvFSch3-SP-yvwD2O2aAHHJ4JcBLCGoPaJa5Z0qZDYiVKr4HsR2LIbmXOuOH3MhLdf59AyJTyhpnvo3Ia6sXM7ZEFF-YT_EtM7aglaO/s60/widgen-googleplus.png) center no-repeat; } .envy-img-3 { background:#0dace1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2Taq3-x2syNSHpLNE-qZ2yUW-MwVGUGfE58GtNfGosEoM4pIRWmHzmkwttwjG11U95tJHu9o5GbZtdQesEo107hHEgd_6tIcof5sc3TqNCPTWpMbNWQRprnD3RYtaRl2GliXwtcDc3Pn/s60/widgetgen-twitter.png) center no-repeat; } .envy-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; } .envy-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; } .envy-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; } .envy-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; } .envy-itm:hover .envy-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; } .envy-itm:hover .envy-tgf-backfb,.envy-itm:hover .envy-tgf-backgp,.envy-itm:hover .envy-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.envyblogging.blogspot.in'></a> <div class="envy-flapwid"> <div class="envy-bdy"> <section class="main"> <ul class="envy-fgt"> <li> <div class="envy-itm"> <div class="envy-tgf"> <div class="envy-tgf-front envy-img-1"></div> <div class="envy-tgf-backfb"> <h3>Facebook</h3> <p>Like Our Page <a href="http://facebook.com/envyblogging">Like us On Facebook</a></p> </div> </div> </div> </li> <li> <div class="envy-itm"> <div class="envy-tgf"> <div class="envy-tgf-front envy-img-2"></div> <div class="envy-tgf-backgp"> <h3>Google+</h3> <p>Add Us To your Circle<a href="https://plus.google.com/110296375366898753821">Add Us On Google+</a></p> </div> </div> </div> </li> <li> <div class="envy-itm"> <div class="envy-tgf"> <div class="envy-tgf-front envy-img-3"></div> <div class="envy-tgf-backtw"> <h3>Twitter</h3> <p>Join Us on Twitter<a href="http://twitter.com/envyblogging">Follow Us on Twitter</a></p> </div> </div> </div> </li> </ul> </section></div> </div>

Thats All! Now That You have added a great widget to your blog , its time for us to depart . If You loved this Widget please share this widget . Feel Free to comment about any related problems of this widget .