Stylish Blogger Profile Widget With CSS

To set it up is very easy, just follow the following steps

1. log in to your blogger account
2. in the select a dashboard Layout » add HTML/JavaScript Gadget »
3. Enter the following code

<style> #aboutme {   background-color:#fff;   -moz-box-shadow:0 0 3px #e0e0e0;   -webkit-box-shadow:0 0 3px #e0e0e0;   box-shadow:0 0 3px #e0e0e0;   border:1px solid #666;   padding:3px;   -moz-border-radius:2px;   -webkit-border-radius:2px;   border-radius:2px;   margin:0 auto;   margin-top:15px;   padding:10px;   width:400px;   height:auto; } .name-author {   margin:0 0 7px;   display:block;   width:100%; } .name-author h3 {   position:relative;   display:inline;   background-color:#0097BD;   color:#FFF;   font-family:Segoe UI;   font-size:15px;   font-weight:bold;   margin:0 0 0 -3px;   padding:3px 5px 3px 10px;   width:100%;   -moz-text-shadow:0 1px 0 black;   -webkit-text-shadow:0 1px 0 black;   text-shadow:0 1px 0 black; } .name-author h3:after {   content:" ";   width:0;   height:0;   position:absolute;   left:100%;   top:0;   border-width:13px;   border-style:solid;   border-color:transparent transparent transparent #0097BD; } @-webkit-keyframes name-author {   0% {color:white}   20% {color:Orange}   40% {color:pink}   60% {color:Orchid}   80% {color:gold}   100% {color:white} } @-moz-keyframes name-author {   0% {color:white}   20% {color:Orange}   40% {color:pink}   60% {color:Orchid}   80% {color:gold}   100% {color:white} } @-keyframes name-author {   0% {color:white}  20% {color:Orange}  40% {color:pink}  60% {color:Orchid}  80% {color:gold}  100% {color:white} } /* Penerapan efek pada element yang akan diberi efek*/ .name-author h3 { /* Waktu 10 detik */   animation:10s infinite name-author linear;   -webkit-animation:10s infinite name-author linear; } .aboutme-text {   font-size:12px;   text-align:left;   margin:0; } .aboutme-image-container {   float:left;   width:70px;   height:70px;   margin-right:75px;         z-index:1; } .aboutme-image-container {   margin:-20px 0 5px 0;   padding:9px;   position:relative;   -webkit-border-bottom-right-radius:10px;   -webkit-border-bottom-left-radius:100%;   -moz-border-radius-bottomright:100%;   -moz-border-radius-bottomleft:100%;   border-bottom-right-radius:100%;   border-bottom-left-radius:100%;   -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;   -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;   box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;   background-color:#59B52E; } .aboutme-image-container:before {   content:' ';   position:absolute;   top:0;   left:-10px;   width:0;   height:0;   border-style:solid;   border-width:0 0 10px 10px;   border-color:transparent transparent #333 transparent; } .aboutme-image-container:after {   content:' ';   position:absolute;   top:0;   right:-10px;   width:0;   height:0;   border-style:solid;   border-width:10px 0 0 10px;   border-color:transparent transparent transparent #333; } .aboutme-image-container img {   width:100%;   height:100%;   border:2px solid yellow;   border-radius:100%;   -webkit-transition:all 0.3s ease;   -moz-transition:all 0.3s ease;   transition:all 0.3s ease;   -moz-box-shadow:1px 1px 4px #000;   -webkit-box-shadow:1px 1px 4px #000;   box-shadow:1px 1px 4px #000; } .aboutme-image-container img:hover {   border:2px solid GOld;   cursor:pointer;   margin-left:0;   -moz-transform:scale(1.2) rotate(360deg);   -webkit-transform:scale(1.2) rotate(360deg);   -o-transform:scale(1.2) rotate(360deg);   -ms-transform:scale(1) rotate(-360deg);   transform:scale(1.2) rotate(360deg);   -moz-box-shadow:1px 1px 4px #000;   -webkit-box-shadow:1px 1px 4px #000;   box-shadow:1px 1px 4px #000; } </style><div id='aboutme'> <div class='aboutme-image-container'> <img src="http://lh4.googleusercontent.com/-eR6Q7G1DJXs/AAAAAAAAAAI/AAAAAAAABk4/ULGS6C8ILMc/s512-c/photo.jpg" /> </div> <div class='name-author'> <h3>Abdul Rohman</h3></div> <div class='aboutme-text'>Hidup itu seperti CSS, live it like ccs, we can make it more colorful and give a beutiful background. make your life it.. <a href="YOUR LINK BLOGGER PROFIL/G+" style="color: #666;">...Read More</a> </div></div>

       4. If it has been direct, Save

       5. then save the settings and see the result

Tweet