Awesome CSS3 Widget With Zoom & Shrinking Effect | Tech Blog Guide - The Ultimate Guide To Technology World! Tech Blog Guide - The Ultimate Guide To Technology World!: Awesome CSS3 Widget With Zoom & Shrinking Effect
Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

LiveZilla Live Help

Tamanna

Wednesday, May 15, 2013

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, lets Check below.


LIVE DEMO

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/TechBlogGuide">
<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/AsadReza2006"><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="https://plus.google.com/u/0/
111604591527304843321
"><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=AsadReza2006"><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>


Customization

  • Change Highlighted Name With Your Own Desired URL
  • All Done Save Widget.
Like the Post? Share with your Friends:-

Team SB
Posted By: Team SB
Comment Using

Comment Policy : We’re enthusiastic to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

13 comments:

  1. HelpFul tips . Keep It Up . :)

    ReplyDelete
  2. Thank You So Much Keep Visiting....

    ReplyDelete
  3. Hmm it looks like your blog ate my first comment (it was super long) so I guess I'll just sum it up what I had written and say, I'm thoroughly enjoying your blog.

    I too am an aspiring blog blogger but I'm still new to the whole thing. Do you have any recommendations for rookie blog writers? I'd certainly
    appreciate it.

    Here is my blog :: Weight loss formula

    ReplyDelete
  4. Wow, this piece of writing is nice, my sister is analyzing these things, thus I am going to tell her.


    my website - Garcinia Cambogia Diet

    ReplyDelete
  5. Good day! I could have sworn I've been to this site before but after going through many of the posts I realized it's new
    to me. Anyways, I'm certainly delighted I came across it and I'll be book-marking it and checking back frequently!


    Here is my webpage - Androsolve

    ReplyDelete
  6. Hi there! This is my 1st comment here so I just wanted to give a
    quick shout out and say I really enjoy reading your posts. Can you
    suggest any other blogs/websites/forums that deal with the same subjects?
    Thanks!

    my page; Buy Elevate GF

    ReplyDelete
  7. Hi there to all, as I am actually eager of reading
    this weblog's post to be updated daily. It includes pleasant data.

    my weblog :: Ultra Slim Patch Reviews

    ReplyDelete
  8. Hi colleagues, its impressive piece of writing concerning tutoringand fully explained, keep it up all the
    time.

    my homepage; Green coffee

    ReplyDelete
  9. Excellent goods from you, man. I've understand your stuff previous to and you are just extremely wonderful. I really like what you've acquired here, certainly like what you're stating and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I can not wait to read much more from you. This is really a wonderful website.

    Here is my website - http://100dayloanreviews.com

    ReplyDelete
  10. Quality content is the key to interest the people to go
    to see the web page, that's what this web site is providing.

    My weblog ... garciniacambogia reviews

    ReplyDelete
  11. Amazing blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple adjustements would really make my blog stand
    out. Please let me know where you got your
    design. Many thanks

    Feel free to visit my webpage: way to make money online

    ReplyDelete

Your feedback is always appreciated. We will try to reply to your queries/questions as soon as possible.

1. Feel free to ask
2. Please do not spam, Spam comments will be deleted immediately upon our review.
3. Click on subscribe by email to get replies to your comment
Regards,
Md.Asad Reza

Contact Us

Name

Email *

Message *

 

About Author

Hello! This is Md. Asad Reza, the owner and administrator of this blog, who lives in Janakpur, Nepal.I am Part Time bogger and web designe.I've started blogging in 2012.I learned the important things on blogger.I loves to coding.

About Us

Recent Comment

Copyright © . SkillBlogger. All Rights Reserved.
Designed by :-Way2themes