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>

Read More

Add Awesome CSS3 Social Sharing Widget Into Blogger Blog

After sharing several blogger template with you today I am going to share social sharing widget using the CSS3. This social sharing widget will attract your reader to share your post in the facebook , twitter etc. Just follow the simple steps to install social sharing widget into your blogger blog.
Installing Social Sharing Widget into blogger blog

1. login into your blogger blog. 
2. Go to template 
3. Click on EDIT HTML 
4. Now Check Expand Widget Templates 

5. Now search for </head> and paste the bellow code above it

<style type="text/css">

/* Beautiful Social Bookmarking Widget By ASHISH ROX @ 

http://akroxblog.blogspot.in

/ */

ul.theoriginalbloggertricks-social { list-style:none; margin:15px auto;display:inline-block; }

ul.theoriginalbloggertricks-social li { display:inline; float:left; background-repeat:no-repeat; }

ul.theoriginalbloggertricks-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }

ul.theoriginalbloggertricks-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}

ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZHhWOIUAPQJKSkNIQ_mndRImk-hlWHhZEaqdK5UMUlBa0jpxfQRCBlNxLb2ZwTXQt8UIuRo0YoywF9xLr3TvRjsfj9hlC3HOz4xsuUAzXdyl9eviQTUQ2VUQfNPITHLPUighjmX0tpIes/s1600/theoriginalbloggertricks-facebook.png"); }

ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdvZ_fDxQSx1oNU0PY1m_H0838eaPveihy3Ks4xaNzkwIAroExN6W8U0mgefSXDRcAH5zpSY4vZ1Ua6ugeuVXYQKYccEWcM3_WjVFhhKFe5tzdAwk-iBENsx42KO9kIWIzjvg29dVyNLT/s1600/theoriginalbloggertricks-twitter.png"); }

ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGmEIyJDYm-ol4qhZGbv8kYpsOqegaCAxIVwL_DtscmLjw3R_a-_q_nkc5M3ludtTcligxpB5leftRyg81n7iVV3mjSEn1Kmh76-QR_BIZ79Ub25UsgfzObmvbCmUCJ1A6J0HOSb-KYCT/s1600/theoriginalbloggertricks-googlebuzz.png"); }

ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTDxYasjk4jDQ_cfR3CoXMf7OpHzVrkpFgmtY62WTOONcvEMWBdvjMZWhMhWgj73_aTtTmU5-zrA5MvjosYChgL7cQ578nF_HHfsGTqJGry1HRc1EXSf-kdhBx8a-vjxeo9q65McffUKbG/s1600/theoriginalbloggertricks-stumbleupon.png"); }

ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOILtoJVPyKracw9BAfNgfeM0c5pWigWI7TMjoKWZzIreWm7rUAnxf7WmeezVy_dVF4-JZfjCEZoD7aHaI4eBo6mRhHHuYWxEt8jhbTny1ZIGjbsKwdBGRrDcGgJwrcwd1v1Qvhn9470L/s1600/theoriginalbloggertricks-digg.png"); }

ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwIg1Dd5FvZg7zx8DimztUs4P_xPJ4drvbhESKBbwSuP_4gDXo49uGcIQMvZY63GwJ_h4pWd-DVIC3wICC6bXaYgnmHlm6q7CuQMgf0qBw2y6hIQ9YH6t584DZyqdUFgY0w3pT1R7DEvLy/s1600/theoriginalbloggertricks-delicious.png"); }

ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ZDKvrbfo5QSXi_F5U8Wuk3VSc1M1TFQJRBS6H33wM-KPfaCCWP93jxbeN-d8TDYfg6E5e52i5WuG8zp6JKsVX3jD58my5-fxedW7ouU0Va4rQqka6XVOicBB_saTU5UlQWw8eJMsfHKS/s1600/theoriginalbloggertricks-linkedin.png"); }

ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHg2nFP-4eW7aoYIPfv202p-CWLAPRmDzhJND3G-ZoX4Zr-PPcL1S3ijfyfTzRD81XvVsacM1-ujnzud-kIJJrgepkyA3vOlj1cwSiK9sTSciAOQ5u6ohUYC3p9-wyJ3nVQR0CNSQ6Nm1r/s1600/theoriginalbloggertricks-reddit.png"); }

ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtbyB-tRfTDIOycLyTh82NBOeguSqNH_-lS2G2r_YSshka34VpbN6PK1eP4bMzKWQ2b7_XwBRE8rek7PhJkZ4Cs3KnDHrNmLYRCTNpnccopGdSOXxUjAs4RCBXPYJrOedn2HFuW8l1XJg1/s1600/theoriginalbloggertricks-technorati.png"); }

#theoriginalbloggertricks-cssanime:hover li { opacity:0.2; }

#theoriginalbloggertricks-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }

#theoriginalbloggertricks-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

#theoriginalbloggertricks-cssanime li:hover { opacity:1; }

#theoriginalbloggertricks-cssanime li:hover a strong { opacity:1; top:-10px; }

/* Beautiful Social Bookmarking Widget By ashish ROX - http://akroxblog.blogspot.in */

</style>

6. Now search for <data:post.body/> and paste the bellow code after it. (if you are using magazine type blogger template then you might found more then 1 post.body so find the working one.)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<ul class='theoriginalbloggertricks-social' id='theoriginalbloggertricks-cssanime'>

<li class='theoriginalbloggertricks-facebook'>

<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>

</li>

<li class='theoriginalbloggertricks-twitter'>

<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>

</li>

<li class='theoriginalbloggertricks-googlebuzz'>

<a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>

</li>

<li class='theoriginalbloggertricks-stumbleupon'>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>

</li>

<li class='theoriginalbloggertricks-digg'>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>

</li>

<li class='theoriginalbloggertricks-delicious'>

<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>

</li>

<li class='theoriginalbloggertricks-linkedin'>

<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>

</li>

<li class='theoriginalbloggertricks-reddit'>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>

</li>

<li class='theoriginalbloggertricks-technorati'>

<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>

</li>

</ul>

</b:if>

7. Now just save your blogger template and you have done !

If you have any query then feel free to make a comment :)  

 

Read More