Menu
» » » » HOW TO ADD FAST & CSS3 ENABLED ABOUT ME PAGE TO YOUR BLOG ?

About me page is the first page of your blog you created am i right ? whenever a new blogger comes to your blog he will must want to see the about me page because it is the first source to know about you and your work if you have managed your about me page with color and good fonts and with some of your achievements then you will surely get boast in you blog exposure because of some  useful inbound links to your blog you have placed there and on the other side if you just done it as a formality then you already knows what happens when somebody leaves your blog from that damn page.So keeping that in mind i have merged the hard work of 2 or 3 pages in 1 page with the help of powerful css3 and java script.


How To Create Css3 About Me Page ?

  • Go to >> Pages tab in your blogger account >> New page >>Click on Blank Page >> Html tab and put the following code in it.


 <!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="http://musicpolayer33.googlecode.com/files/modernizr.custom.04022.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<style>
.content{
height: auto;
margin: 0;
}
.content div {
position: relative;
}
</style>
<![endif]-->
    </head>
    <body>
        <div class="container">
<section class="tabs">
           <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
       <label for="tab-1" class="tab-label-1">About</label>
           <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
       <label for="tab-2" class="tab-label-2">Services</label>
           <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
       <label for="tab-3" class="tab-label-3">Work</label>
           <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
       <label for="tab-4" class="tab-label-4">Contact</label>
           
   <div class="clear-shadow"></div>
       <div class="content">
       <div class="content-1">
<h2>About Blogging-Heaven</h2>
                        <p>Blogging-Heaven was founded by  Tayyab Nasir in June 2012.The main purpose of publishing Blogging-Heaven was to provide blogger tips and tricks,Practical seo tips,Technology News and Wordpress taturiols.In a short time of 6 months Blogging-Heaven succeeded to pull 1500+ Subcribers and 1000`s of loyal visitors in it`s community. </p>
<h3>How we work</h3>
<p>I am not a full time blogger i have my studies as well and some family responsibilities so i try to follow the schedule and to enhance my visitors with my blogging experience.I don`t want to tell but I am not alone behind this blog there are many faces behind this blog i will reveal them in future which help me in every kind   .  </p>
   </div>
       <div class="content-2">
<h2>Services</h2>
                        <p>Blogging-Heaven was founded by Tayyab Nasir in June 2012.The main purpose of publishing Blogging-Heaven was to provide blogger tips and tricks,Practical seo tips,Technology News and Wordpress taturiols.In a short time of 6 months Blogging-Heaven succeeded to pull 1500+ Subcribers and 1000`s of loyal visitors in it`s community.</p>
<h3>Excellence</h3>
<p>Blogging-Heaven was founded by Tayyab Nasir in June 2012.The main purpose of publishing Blogging-Heaven was to provide blogger tips and tricks,Practical seo tips,Technology News and Wordpress taturiols.In a short time of 6 months Blogging-Heaven succeeded to pull 1500+ Subcribers and 1000`s of loyal visitors in it`s community. </p>
   </div>
       <div class="content-3">
<h2>Portfolio</h2>
                        <p>Blogging-Heaven was founded by Tayyab Nasir in June 2012.The main purpose of publishing Blogging-Heaven was to provide blogger tips and tricks,Practical seo tips,Technology News and Wordpress taturiols.In a short time of 6 months Blogging-Heaven succeeded to pull 1500+ Subcribers and 1000`s of loyal visitors in it`s community.</p>
<h3>Examples</h3>
<p>Blogging-Heaven was founded by Tayyab Nasir in June 2012.The main purpose of publishing Blogging-Heaven was to provide blogger tips and tricks,Practical seo tips,Technology News and Wordpress taturiols.In a short time of 6 months Blogging-Heaven succeeded to pull 1500+ Subcribers and 1000`s of loyal visitors in it`s community. </p>
   </div>
   <div class="content-4">
<h2>Contact</h2>
                       <p> Feel free to contact me in case of any problem<br />
tayyabnasir@consultant.com<br />
+923456976344<br />
SHEEN 180 PUNJAB,PAKISTAN<br />
Regards : Tayyab Nasir 
   </div>
       </div>
</section>
<div id="ud-footer">
Designed by <a href="http://www.blogging-heaven.com">Tayyab Nasir</a>
        </div>
    </body>
</html>

Customization 

  • Change the Red color with the headings of your own and other colors with the description of your own you can also add html in it .

CSS

  • Go to Templates >> Edit html >>  Ctrl+f Find ]]></b:skin> and paste the following code just abobe it.

Tabs

.tabs {
    position: relative;
margin: 40px auto;
width: 750px;
}
.tabs input {
position: absolute;
z-index: 1000;
width: 120px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
cursor: pointer;
}
.tabs input#tab-2{
left: 120px;
}
.tabs input#tab-3{
left: 240px;
}
.tabs input#tab-4{
left: 360px;
}
.tabs label {
background: #5ba4a4;
background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
    float: left;
display: block;
width: 80px;
color: #385c5b;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
.tabs label:after {
    content: '';
background: #fff;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}
.tabs input:hover + label {
background: #5ba4a4;
}
.tabs label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
.tab-label-2 {
    z-index: 3;
}
.tab-label-3 {
    z-index: 2;
}
.tab-label-4 {
    z-index: 1;
}
.tabs input:checked + label {
    background: #fff;
z-index: 6;
    -webkit-animation: page 0.2s linear;
    -moz-animation: page 0.2s linear;
    -ms-animation: page 0.2s linear;
    -o-animation: page 0.2s linear;
    animation: page 0.2s linear;
}
.clear-shadow {
clear: both;
}
.content {
    background: #fff;
position: relative;
    width: 100%;
height: 370px;
z-index: 5;
overflow: hidden;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}
.content div {
    position: absolute;
top: 0;
padding: 10px 40px;
z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    transition: all linear 0.3s;
}
.content-1, .content-3 {
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-o-transform: translateX(-250px);
-ms-transform: translateX(-250px);
transform: translateX(-250px);
}
.content-2, .content-4 {
    -webkit-transform: translateX(250px);
-moz-transform: translateX(250px);
-o-transform: translateX(250px);
-ms-transform: translateX(250px);
transform: translateX(250px);
}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
    -webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
    -moz-transition: all ease-out 0.2s 0.1s;
    -o-transition: all ease-out 0.2s 0.1s;
    -ms-transition: all ease-out 0.2s 0.1s;
    transition: all ease-out 0.2s 0.1s;
}
.content div h2,
.content div h3{
color: #398080;
}
.content div p {
font-size: 14px;
line-height: 22px;
font-style: italic;
text-align: left;
margin: 0;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(63,148,148, 0.1);
}
@keyframes "page" {
 0% {
    left: 0;
 }
 50% {
    left: 10px;
 }
 100% {
    left: 0;
 }
}
@-moz-keyframes page {
 0% {
   left: 0;
 }
 50% {
   left: 10px;
 }
 100% {
   left: 0;
 }
}
@-webkit-keyframes "page" {
 0% {
   left: 0;
 }
 50% {
   left: 10px;
 }
 100% {
   left: 0;
 }
}
@-ms-keyframes "page" {
 0% {
   left: 0;
 }
 50% {
   left: 10px;
 }
 100% {
   left: 0;
 }
}
@-o-keyframes "page" {
 0% {
   left: 0;
 }
 50% {
   left: 10px;
 }
 100% {
   left: 0;
 }
}
@import url('normalize.css');
/* General Demo Style */
body{
font-family: 'Open Sans Condensed','Arial Narrow', serif;
font-weight: 400;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a{
color: #000000;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.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: 40px;
line-height: 40px;
margin: 0;
position: relative;
font-weight: 300;
color: #128680;
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
.container > header h1 span{
font-weight: 700;
}
.container > header h2{
font-size: 14px;
font-weight: 300;
margin: 0;
padding: 15px 0 5px 0;
color: #7c8e8d;
font-family: Cambria, Georgia, serif;
font-style: italic;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}

 Header

  • And just after that code paste the below coding


/* Header Style */
.codrops-top{
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
z-index: 9999;
position: relative;
font-family: Cambria, Georgia, serif;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover{
background: rgba(255,255,255,0.3);
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos{
    text-align:center;
display: block;
line-height: 30px;
padding: 5px 0px;
}
.codrops-demos a{
    display: inline-block;
margin: 0px 4px;
padding: 0px 6px;
color: #aaa;
line-height: 20px; font-size: 13px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #ddd;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
}
.codrops-demos a:hover{
color: #333;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
}
.codrops-demos a:active{
background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
background: #f6f6f6;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
You Are Done ...!

  • Author`s Desk > > >
There are many benefits of having great and attractive about me page you can either give the url anywhere else where you bio is wanted it can be your fist traffic and exposure source for your blog it will surely enhance your blog beauty,performance and Authority as well so the comment box is all yours if you face any error or problem while i will be always there to reply and help you.Stay blessed :)



Posted by
Labels: , ,
at Saturday, January 26, 2013

2 comments:

  1. Unknown28 January 2013 at 05:11

    I would like to thank you for this excellent information!! I am very interested for this post.This site is so helpful.
    Top 10 SEO Companies

    ReplyDelete
    Replies
    1. CHAUDHRY HOMEOPATHIC STORE & CLINIC28 January 2013 at 08:39

      Thanks for the appreciation you should subscribe by email to be updated :)

      Delete

Subscribe to: Post Comments (Atom)
 
Top