How to Add Flipboard Style Social Media Widget to Your Blog?

In this  post  i,m gonna  explain  how to  awesome effect social media  widget for your blog. So,  this include social profiles  icons. You can link with Facebook,Twitter, Google plus ,Pintrest  and RSS Feed.You can Optimize your blog and can make it more fantastic.You can take a look of it As Shown In Upper right sidebar.

Also see:Add "search the blog" widget to blog better than google custom search.

Procedure:

1.Sign in to your Google Account and go to blogger dashboard .

2.Click on Your Blog(in which you want to add this widget).

3.Then Click on "Layout" which is present on left side bar.

4.Then Click on "Add a Gadget".
5.Give gadget a title and leave it keeping it blank.

6.Choose gadget i-e "HTML/JAVA script" from "basics" menu of Gadgets
7.Add the following Bold codes after doing following changes:
*Replace OS-trickz.blogspot.com with your twitter profile
*Replace OS-trickz.blogspot.com with your facebook profile
*Replace OS-trickz.blogspot.com with your feedburner profile
*Replace OS-trickz.blogspot.com with your pinterest  Username
*Replace UserId with your Google Plus User Id

<style type="text/css">

#flipboard_btrix{ width:300px;}

ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; 
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}

ul.flipboard_btrix li{
display: inline-block;
width: 55px; 
height: 50px;
margin-right: -px; 
background: white;
font: bold 36px Arial; 
text-transform: uppercase;
text-align: center;
cursor: pointer;
}

ul.flipboard_btrix li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; 
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}

ul.flipboard_btrix li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px; 
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}

ul.flipboard_btrix li a img{
border-width: 0;
}

ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; 
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}

ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
<div id="flipboard_btrix">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr/OS-trickz.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_e18-MWtl79wq4RmAWvAnBskwWnlP6tOc_KE3uZ4rYKP6ghJFyNzRPko4WoV74CYno-2N7Z9CBkvKnvbDO7xE5bkjPT2r2iCrVigk0xG_74mXYa2n5r0zggYa9dOxHHgxEMAATmtGSKyJ/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/OS-trickz.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ5ur8uEUwaqfjVsxaA_JbOAJiAtGdMSh5uESmZsy0k5YhTmpIHxnGsZl_l37SdRkcTOgSqK70Zch8tp44nbynRlKX2XnRgpTdjyMxZE4OdqPTJZLNNXL9yPfXBF4_4BLEhlsf3FwyNLXH/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl5pnSOLpi9rvsK7OmS3bkkSXuqWTquPHuUZEG98pXyBiyIdkPRnmqNgY3EjEnHoAe-ppF7_n0FXNGcKkRHLzcX6fKqkDOL9w4Z0GSejt_cQnJigum5JMw1oaJJEajAUtHNj2MiKdeS4rK/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/OS-trickz.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvABhosqdDtK-vyl-9ckfVTkeRXQfcYZZPOdvXM0eSY2j-U0bm_eSeRJzts4-aaFsxIdR4-mdMos0UsiI-KTT7YHEaXqN6fDz7djxXXutvKgeKDruHdRsGodTAkiP-TXGnjVRGnZ9uQOWz/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/OS-trickz.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3dx4Tzt60JyuW6MoFaADIyQ74IdKuQOII-7jbWfTt2jqx7M893fpuMvg1FQtyBIq-vfpY2b0tCZIHgqwm35NlahTZq6TPkB6acRvffjGDJ0aEI2NE3lawjVp1XR93epx_ve44pEfmi8DQ/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul><input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
</div>