Step 1: Copy bellow code and pas java script gedjet and save and out put as above
<style>
.BSpostauthorbox {
position: relative;
margin: 5px auto;
padding: 15px;
width:auto;
min-height: 160px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
text-shadow:1px 0 0 #000000;
color:#111;
border: 2px solid #0066B3;
border-radius: 5px;
background: #cae0e4;
background: -moz-linear-gradient(top, #cae0e4 0%, #9ad0d8 15%, #62b6c0 36%, #9ad0d8 86%, #9ad0d8 99%, #cae0e4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cae0e4), color-stop(15%,#9ad0d8), color-stop(36%,#62b6c0), color-stop(86%,#9ad0d8), color-stop(99%,#9ad0d8), color-stop(100%,#cae0e4));
background: -webkit-linear-gradient(top, #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
background: -o-linear-gradient(top, #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
background: -ms-linear-gradient(top, #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
background: linear-gradient(to bottom, #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cae0e4', endColorstr='#cae0e4',GradientType=0 );
border-left: 5px solid #333;
border-right: 5px solid #333;
border-top: 5px solid #333;
border-bottom: 5px solid #333;
padding: 10px 15px 10px 15px;
-webkit-box-shadow: inset -5px -9px 100px -18px #333333;
-moz-box-shadow: inset -5px -9px 100px -18px #333333;
-o-box-shadow: inset -5px -9px 100px -18px #333333;
-ms-box-shadow: inset -5px -9px 100px -18px #333333;
box-shadow: inset -5px -9px 100px -18px #333333;
-webkit-border-radius:11.5px;
-moz-border-radius:11.5px;
-o-border-radius:11.5px;
-ms-border-radius:11.5px;
border-radius:11.5px;
background-color: #000000;
color: #000000;
font-size: 14px;
-ms-border-radius:1.0em;
}
.BSpostauthoravatar {
background: #fff;
border: 1px solid #D3D3D3;
float: left;
height: 128px;
width: 128px;
padding: 5px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px 0 #d9d9d9;
-moz-box-shadow: 0 0 4px 0 #d9d9d9;
box-shadow: 0 0 4px 0 #d9d9d9;
}
.BSpostauthoravatar img {
height: 128px;
width: 128px;
border-radius: 5px;
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.BSpostauthoravatar:hover img {
opacity: 1;
}
.BSpostauthorlabel {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsNZsulDCNmP5tSzw4XXZAST4pP3iTMcnNngcNIcuN7ye_Mf_NRTpwXLY1Qyte29wK3X4G19y3XyyBhWgQ_x_tCh51cdE3NBmKwGc0HGwdEBmCahndbKgmSXCWBjf8KPAjq2eQSs1kWLQ/s1600/badge_admin.png") no-repeat center transparent;
display: block;
height: 30px;
position: absolute;
bottom: -30px;
width: 128px;
}
.BSpostauthorcontent {
margin-left: 160px;
}
.BSpostauthorhead {
border-bottom: 1px solid #c4c4c4;
margin-bottom: 5px;
padding: 0 0 10px 0;
position: relative;
}
.BSpostauthorbox h5 {
font-family: Trebuchet MS;
color: #302E29;
font-size: 25px;
font-weight: normal;
line-height: 30px;
margin: 0;
border: none;
text-transform: none;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.BSpostauthorbox h5 a {
color: #302E29 !important;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.BSpostauthorbox h5 a:hover {
color: #E65002 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.BSpostauthorbox p.postAuthorbio {
line-height: 18px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
}
.BSpostauthorbox p a {
color: #E65002;
}
.BSpostauthorbox-footer{
padding:10px 0 10px;
font:bold 12px Trebuchet MS;
}
/* Breadcrumbs
----------------------------------------------- */
.breadcrumbs a:hover, .status_msg a:hover {text-decoration: underline;}
.breadcrumbs a, .status_msg a {color:#5B5B5B;}
.breadcrumbs, .status_msg {
width: 610px;
background: #F7F7F7;
-webkit-box-shadow: 0 0 15px #222;
-moz-box-shadow: 0 0 15px #222;
box-shadow: 0 0 10px #888;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 10px;
margin-top: 2px;
font-size: 10px;
margin-bottom: 25px;
text-transform: uppercase;
color: #666;
}
</style>
<div class='clear'></div>
<div class='BSpostauthorbox'>
<div class='BSpostauthoravatar'>
<img alt='Mohammad Fazle Rabbi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja400hzmgghrjjDvef66BU3eYsWTDuGAE8afjS2O_hYIG_95EFjVyvuhbhoIOxz3sVNAjz3J6eD9bk0IDclYfMvIXyDJaxpJev4TNJufW1uV005ORc5jbZTe996jskSaP854CE4Q4xf2g/s320/gdfgg.png'/>
<div class='BSpostauthorlabel'></div>
</div>
<div class='BSpostauthorcontent'>
<div class='BSpostauthorhead'>
<h5>
Posted By:
<a href='http://www.bmmekwan.tk/p/contact-me.html' title='Makwana Bhavesh'>
Makwana Bhavesh
</a>
</h5>
</div>
<div class='postAuthorbio'>
Makwana Bhavesh is the owner and founder of www.Bmmekwan.tk. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share technical hacking/security tips with you.Thanks for Reading This Article Entitled
<b>
<a href='http://www.bmmekwan.tk/2013/05/css-read-more-button-with-animated.html'>
CSS Read More Button with Animated Bubble effects For Blogger Templates.
</a>
</b>
</div>
<div class='BSpostauthorbox-footer'>
<div style='float:left;text-align:left;'>
Join Me On:
<a href='http://www.twitter.com/BloggerSpice' rel='nofollow'>
</a>
|
<a href='http://www.facebook.com/pages/Hacking-World/183777401707286?ref=hl' rel='nofollow' target='_blank'>
</a>
|
<a href='https://plus.google.com/u/0/110710001747284835325' rel='nofollow' target='_blank'>
Google Plus
</a>
</div>
</div>
</div>
</div>
No comments:
Post a Comment