Awesome CSS3 Widget With Zoom & Shrinking Effect

Hello, guys today i am gonna to share about awesome CSS3 widget with zoom and shrinking effect for Blogger.In this tutorial by using this widget you can link your social media profile like Facebook, Twitter, Google+, and RSS.This widget is very easy to install on blogger.SO you can check the image it gif ..this is how it will appear.

How To Add It On Blooger Blog?

• Go To Your Blogger Dashboard
• Navigate To Layout And Add A Gadget
• Select HTML/JavaSript
• Paste The Code Below In It.

<style>

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}


/*****************fb*****************/
.ca-menuf{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menuf li{
    width: 100%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #017CD4;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menuf li:last-child{
    margin-bottom: 2px;
    color: #fff;
}
.ca-menuf li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentf{
    color: #fff;
    position: absolute;
    left: 12px;
    width: 100%;
    height: 100%;
    top: 10px;
}
.ca-mainf{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subf{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.ca-menuf li:hover{
    background:  #1f69b3;
    color: #fff;
}
.ca-menuf li:hover .ca-iconf{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menuf li:hover .ca-mainf{
    font-size: 14px;
    color: #fff;
}
.ca-menuf li:hover .ca-subf{
    color: #fff;
    font-size: 30px;
}

/*****************tw*****************/
.ca-menut{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menut li{
    width: 100%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #00BFFF ;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menut li:last-child{
    margin-bottom: 2px;
    color: #fff;
}
.ca-menut li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentt{
    color: #fff;
    position: absolute;
    left: 12px;
    width: 100%;
    height: 100%;
    top: 10px;
}
.ca-maint{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subt{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.ca-menut li:hover{
    background:#0CA8F0; 
    color: #fff;
}
.ca-menut li:hover .ca-icont{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menut li:hover .ca-maint{
    font-size: 14px;
    color: #fff;
}
.ca-menut li:hover .ca-subt{
    color: #fff;
    font-size: 30px;
}
/*****************g+*****************/
.ca-menug{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menug li{
    width: 100%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #da4a38;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menug li:last-child{
    margin-bottom:2px;
    color: #fff;
}
.ca-menug li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentg{
    position: absolute;
    left:12px;
    width: 300px;
    height: 60px;
    top: 10px;
    color: #fff;
}
.ca-maing{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subg{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.ca-menug li:hover{
    background: #DC321E;
    color: #fff;
}
.ca-menug li:hover .ca-icong{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menug li:hover .ca-maing{
    font-size: 14px;
    color: #fff;
}
.ca-menug li:hover .ca-subg{
    color: #fff;
    font-size: 30px;
}
/*****************rss*****************/
.ca-menur{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menur li{
    width: 100%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #FFA500 ;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menur li:last-child{
    margin-bottom: 2px;
    color: #fff;
}
.ca-menur li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentr{
    position: absolute;
    left: 12px;
    width: 300px;
    height: 60px;
    top: 10px;
    color: #fff;
}
.ca-mainr{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subr{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.ca-menur li:hover{
    background: #FF8C00 ;
    color: #fff;
}
.ca-menur li:hover .ca-iconr{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menur li:hover .ca-mainr{
    font-size: 14px;
    color: #fff;
}
.ca-menur li:hover .ca-subr{
    color: #fff;
    font-size: 30px;
}
</style>

<br />
<ul class="ca-menuf">
<li>
<a href="https://facebook.com/cnbctechguru">
<div class="ca-contentf">
<h2 class="ca-mainf">
Facebook</h2>
<h3 class="ca-subf">
Like Us on Facebook</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menut">
<li>
<a href="https://twitter.com/*"><div class="ca-contentt">
<h2 class="ca-maint">
Twitter</h2>
<h3 class="ca-subt">
Follow Us on Twitter</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menug">
<li>
<a href="*"><div class="ca-contentg">
<h2 class="ca-maing">
Google+</h2>
<h3 class="ca-subg">
Add Us on Google+</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menur">
<li>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=*"><div class="ca-contentr">
<h2 class="ca-mainr">
RSS</h2>
<h3 class="ca-subr">
Subscribe  Us on RSS</h3>
</div>
</a>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

SHARE THIS WIDGET WITH YOUR FRIENDS BECAUSE SHARING IS CARING 

Please Give Us Your 1 Minute In Sharing This Post!

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Powered By: BloggerYard.Com