Animated Social Profile Buttons with Search Box for Blogger

In this tutorial I will tell you how to add an Animated Social Profile Buttons With a beautiful Zoom and Glow Effects on hover Widget for Blogger. We are going to make this Widgets Using CSS3 & HTML. I am putting more emphasis on using CSS more than JavaScript because It will never effect the loading time of you blog or website. Hope you all like it and also thinking to update it using much more effects lately. 

Click the Demo button to see live demo and please make Sure That the Images Loads completely..

How to add this ?

• Go to Blogger and go to your blog
• Now go to Layout in Left side of your Blogger Dashboard
• Now click on Add Gadget and Choose HTML/JavaScript
• Now paste the Below Set of codes in it

<style>
.mok-metro-social
{
width:300px;
}
.mok-metro-social li
{
position:relative;
cursor:pointer;
padding:0;
list-style:none;
}
.mok-metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd
{
z-index:7;
float:left;
margin:2.5px;
position:relative;
display:block;
}
.mok-metro-social .tw
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEBjWSPlrgjL1JR6tfDLYXtN0kztDkMI7h4FI36_wChRbC48QAzX4vg5SYNhVHRlotmHa_yCBKSkIt2zUBPhYRuXc4gOpW4N2kr_X3wxhp-m9Hozz0ZbXZP6trzTNy49YUzM4WNXIAqJI/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social .fb
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZeXAT24hiNoiQns8k4WOAs1YnfPhAfkiE9js58qdjAyhSgzINtTYRLNN7jMizyh3m4GAPj0jLuf94ycuXWG27jxPuX6o9HlGi5eB1Vw7nq6hgKxD8c54JBmIGdVdu1QWmo1tF7jnnm1Q/h120/facebookf.png.png) no-repeat center center #1f69b3;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social .gp
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTq0jejwJaBwdvzqjQs3bnODinN34gsppMJN-Qbz02vmWNyPFIms2dNx-oTAAOqrUoqxzhJCOL7FsRzN4Y40aJ2nvgENQa-sUPzeAMPaisGLmyLi9YnHbgIjo1H2-T9H7bV637QKAMRqE/h120/google+plus.png) no-repeat center center #da4a38;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social .fd
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR3b1BdL4TvJpUrSE5MbDVwknd-wtg8hC_5uhk150m85zpXDg1Cz1CWaO7J7DabO_PE62dES3u0Tti0230UBVEkTn-tNuqHC8orilC_-x2d04UFGe0sFvVk3NY5BKuB5NEwXLQPLHWDPw/h120/feed.png) no-repeat center center #e9a01c;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social li:hover .fb
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdDGzqS50gZA-AwwmIVjKPhH17IA2M6-csjY6zntOB1_F7E7H9jFELxkTM4_GGYrz3ZlCarhonPwK6w74H5BCbbb2IdLsopBRPn-8BtGKf3Z-0G6wOk8W5HPAJo6lVo0cqYY4h4GuA2OQ/h120/facebookfh.png) no-repeat center center #1f69b3;
 box-shadow:0px 0px 6px 3px #217BC0;
-webkit-box-shadow:0px 0px 6px 3px #217BC0;
-moz-box-shadow:0px 0px 6px 3px #217BC0;
-o-box-shadow:0px 0px 6px 3px #217BC0;
-ms-box-shadow:0px 0px 6px 3px #217BC0;
}
.mok-metro-social li:hover .tw
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTrT6TAYlUUZzfm-B7fyLGYnnzz2knD8wNaxEogXRxhRJ8cp7j9nHgP1lwpfS3uGHy1OvPoqO6dibyotBi-41aVRl2ySC1fZ4uNurtx_fjguKUZBXYOv5-MllyDoIY9qrxW5FkwQrKJkc/h120/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;
 box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.mok-metro-social li:hover .gp
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBn2jWkiGVrb0vxkTTo4iLU3_YcoC9KYQzJJO6F8wKOuiDmaudDJIhFSu_Ex7Gf2OR5zKHElFaRL9vSV-ZiWP36qTVHmkVwXh9g6Z_quNtqShNWQ6s5DjiU5Cz8u-4qnOOG7GtaZ_cXc4/h120/google+plush.png) no-repeat center center #da4a38;
 box-shadow:0px 0px 6px 3px #F43431;
-webkit-box-shadow:0px 0px 6px 3px #F43431;
-moz-box-shadow:0px 0px 6px 3px #F43431;
-o-box-shadow:0px 0px 6px 3px #F43431;
-ms-box-shadow:0px 0px 6px 3px #F43431;
}
.mok-metro-social li:hover .fd
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxqWMV8CusjC5BGv0xhwUxrE4LwcjnmMTX0_nTkmRoioyIZG0wA5nf1cuSAlGAm7awjt8CTVjk-WhjZUYAYofWPXGJuRPpzd7XUy74g-DSwSCvSqd2VtlQC46YopaX28Bm_-vARqtjyg/h120/feedh.png) no-repeat center center #e9a01c;
 box-shadow:0px 0px 6px 3px #e9a01c;
-webkit-box-shadow:0px 0px 6px 3px #e9a01c;
-moz-box-shadow:0px 0px 6px 3px #e9a01c;
-o-box-shadow:0px 0px 6px 3px #e9a01c;
-ms-box-shadow:0px 0px 6px 3px #e9a01c;
}
.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    zoom:1;
}   
/* Form wrapper styling */
.form-wrapper {
    width: 280px;
}
/* Form text input */
.form-wrapper input {
    width: 215px;
    height: 20px;
    padding: 10px 5px;
    float: left;  
    font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
box-shadow: 0 0 6px rgba(0,0,0,.3) inset;
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    border-color: #51a7e8;
   box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}  
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 75px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkw-LC1Ne-Qqt8R42FKjT24EPKw-w_DlYpAjnrb-pTesOZmhpa771j-5zGpgcY7mFrgg91va8ZlCiP73LF5Ejrc5J7RejJqoKyB_9s03GX3P51raj9BcvELRS_5TdgctJ-vb86LaH8_M/h120/1367665345_search.png) no-repeat center center #26B11E;
    border-radius: 0 0 0 0;    
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
} 
.form-wrapper button:hover{   
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkw-LC1Ne-Qqt8R42FKjT24EPKw-w_DlYpAjnrb-pTesOZmhpa771j-5zGpgcY7mFrgg91va8ZlCiP73LF5Ejrc5J7RejJqoKyB_9s03GX3P51raj9BcvELRS_5TdgctJ-vb86LaH8_M/h120/1367665345_search.png) no-repeat center center #26B11E;
box-shadow:0px 0px 6px 3px #44D816;
-webkit-box-shadow:0px 0px 6px 3px #44D816;
-moz-box-shadow:0px 0px 6px 3px #44D816;
-o-box-shadow:0px 0px 6px 3px #44D816;
-ms-box-shadow:0px 0px 6px 3px #44D816;
} 
.form-wrapper button:active,
.form-wrapper button:focus{ 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkw-LC1Ne-Qqt8R42FKjT24EPKw-w_DlYpAjnrb-pTesOZmhpa771j-5zGpgcY7mFrgg91va8ZlCiP73LF5Ejrc5J7RejJqoKyB_9s03GX3P51raj9BcvELRS_5TdgctJ-vb86LaH8_M/h120/1367665345_search.png) no-repeat center center #26B11E;
    outline: 0; 
}
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #26B11E transparent;
    top: 12px;
    left: -6px;
}
.form-wrapper button:hover:before{
    border-right-color: #26B11E;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #26B11E;
}    
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}   
</style>
<div class="mok-metro-social">
<li><a class="fb" href="http://www.facebook.com/Fullcrackfiles"></a></li>
<li><a class="tw" href="http://twitter.com/FCF"></a></li>
<li><a class="gp" href="https://plus.google.com/117234392896295790635"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/119018mok"></a></li>
<form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;">
<input id="form-wrapper input" name="q" placeholder="  Search here.. " required="" type="text" />
<button type="submit"></button>
</form>

Now click save.. and you are Done!! 

Customization : Now Replace Links Text Highlighted in ColorFacebook, Twitter, Google+, RSS with your Link.. In some templates search box may not fit..so to change Height and Width Edit the Text Highlighted in Green Color..