How To Customize Avatar in Blogger
Here we going to show how to customize avatar in blogger, where ever you want to change your avatar style can change it, HOVER Avatar for free,how to put code into your Blogger/Blog Click Here. Below the HTML and CSS Code are available.
HTML Code :
<ul class="rp-grid">
<li>
<div class="rp-item
rp-img-1">
<div
class="rp-info">
<h3>kalyan</h3>
<p>kalyan chakravarthi<a href="https://twitter.com/hdwalle">Follow on
Twitter</a></p>
</div>
</div>
</li>
<li>
<div class="rp-item
rp-img-2">
<div
class="rp-info">
<h3>kalyan</h3>
<p>kalyan chakravarthi<a href="https://twitter.com/hdwalle">Follow on
Twitter</a></p>
</div>
</div>
</li>
<li>
<div class="rp-item
rp-img-3">
<div
class="rp-info">
<h3>kalyan</h3>
<p>kalya chakravarthi<a href="https://twitter.com/hdwalle">Follow on
Twitter</a></p>
</div>
</div>
</li>
</ul>
Change Your Name in RED Color
Change Your Link in Yellow Color
CSS Code :
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
.rp-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 4px rgba(0,0,0,.3),
inset 0 0 0 2px rgba(255,255,255,.6),
inset 600px 600px 0 -750px
rgba(255,255,255,.2),
0 0 0 16px rgba(0,0,0,.7),
0 0 0 17px rgba(255,255,255,.8),
0 1px 2px rgba(0,0,0,0.1);
-webkit-transition:
all 0.4s ease-in-out;
-moz-transition: all
0.4s ease-in-out;
-ms-transition: all
0.4s ease-in-out;
-o-transition: all
0.4s ease-in-out;
transition: all 0.4s
ease-in-out;
}
.rp-img-1 { background-image: url(https://lh5.googleusercontent.com/-bfHVsahLj8c/T2Tabrz68LI/AAAAAAAACGw/PQC5ZVqrMRk/s512/Picture%2520377.jpg) }
.rp-img-2 { background-image: url(https://lh5.googleusercontent.com/-bfHVsahLj8c/T2Tabrz68LI/AAAAAAAACGw/PQC5ZVqrMRk/s512/Picture%2520377.jpg) }
.rp-img-3 { background-image: url(https://lh5.googleusercontent.com/-bfHVsahLj8c/T2Tabrz68LI/AAAAAAAACGw/PQC5ZVqrMRk/s512/Picture%2520377.jpg) }
.rp-info {
position: absolute;
background:
rgba(12,180,247, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition:
all 0.4s ease-in-out;
-moz-transition: all
0.4s ease-in-out;
-ms-transition: all
0.4s ease-in-out;
-o-transition: all
0.4s ease-in-out;
transition: all 0.4s
ease-in-out;
-webkit-transform:
scale();
-moz-transform:
scale();
-ms-transform:
scale();
-o-transform: scale();
transform: scale();
-webkit-backface-visibility:
hidden;
}
.rp-info h3 {
color: #fff;
text-transform:
uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
font-family: 'Open
Sans', Arial, sans-serif;
text-shadow: 0 0 1px
#fff, 0 1px 2px rgba(0,0,0,0.3);
}
.rp-info p {
color: #fff;
padding: 10px 5px;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid
rgba(255,255,255,0.5);
opacity: 0;
-webkit-transition:
all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
}
.rp-info p a {
display: block;
color: #fff;
color:
rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform:
uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open
Sans', Arial, sans-serif;
}
.rp-info p a:hover {
color: #fff;
color:
rgba(255,255,255, 0.2);
}
.rp-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px
2px rgba(0,0,0,0.1) }
.rp-item:hover .rp-info {
opacity: 1;
-webkit-transform:
scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.rp-item:hover .rp-info p { opacity: 1 }
body {
font-family: 'Open
Sans', Arial, sans-serif;
background: #f9f9f9
url();
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing:
antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.clr {
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.main {
width: 90%;
margin: 0 auto;
position: relative;
}
.container > header {
margin: 10px;
padding: 20px 10px
10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px
1px rgba(0,0,0,0.2);
text-align: center;
}
.container > header h1 {
font-size: 32px;
line-height: 32px;
margin: 0;
position: relative;
font-weight: 300;
color: #777;
text-shadow: 1px 1px
1px rgba(255,255,255,0.7);
}
.container > header h2 {
font-size: 14px;
font-weight: 300;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
text-shadow: 1px 1px
1px rgba(255,255,255,0.9);
}
.support-note span {
color: #fff;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions { display: block }
.rp-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.rp-grid:after,
.ch-item:before {
content: '';
display: table;
}
.rp-grid:after { clear: both }
.rp-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
* {
-webkit-box-sizing:
border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Remove Image : Replace the yellow color link with your image link
Change the sizes to
Thank you guys i think this will helpful
Comments
Post a Comment