It has the basic constituents which is required for the "About Me" widget for any blogger's blog by which the people can reach to your blog easily. The widget simply contents with impressive quotes to attract the visitor.
The installation process is really easy but before installing this widget on your blog, try our live demo.
Now, you must have seen the Live Demo and willing to add this Awesome Widget to Your Blog Footer or in About Us Page. The main feature of this widget is that you can place it after your post or article [Footer Section] and also in "About Us" page as it's constituent. That's it, lets see how to try this widget.
How To Add About Me Widget to Your Blog ?
Basically there are two parts of this widget.A. To Add this widget below post / article.
B. To Add this widget in Blogger "About Us" / ''About Me" Pages.
A. To Add this widget below post / article.
1. Go to Blogger > Dashboard > Template > Click Edit HTML.2. Find the following code
<data:post.body/>3. After finding this code paste the following code just below it.
<style>
.wrap {
max-width: 1120px;
margin: 0 auto;
}
/* about me widget by http://techethix.blogspot.com */
#about {
padding: 8rem 0 0;
}
#about #location {
text-align: center;
padding:0 2rem;
margin-bottom: 9rem;
}
#about #location h2 {
font-size: 34px;
font-weight: 100;
/*color: #48535A;*/
color: #555;
margin-bottom: 5rem;
}
#about #location h2 > strong {
font-weight: bold;
}
#about #location .map {
background: url('../img/map.png') no-repeat center center;
background-size: 100%;
width: 620px;
height: 418px;
margin: 0 auto;
position: relative;
}
#about #location .map-fallback {
display:none;
}
#about #location .map-fallback > img {
width:100%;
}
#about #location .map-pin {
position: absolute;
right: 100px;
top: 225px;
}
#about .bio {
max-width: 800px;
margin: 0 auto;
margin-top: 4rem;
}
#about .bio > p {
font-size: 20px;
font-weight: 100;
line-height: 36px;
/*color: #758087;*/
color: #555;
}
#about #networks {
padding: 5rem 0;
text-align: center;
background: rgba(0,0,0,0.025);
-webkit-transition: background .5s;
-moz-transition: background .5s;
-ms-transition: background .5s;
-o-transition: background .5s;
transition: background .5s;
}
#about #networks.active p {
color: #fff;
}
#about #networks p {
font-weight: 100;
font-size: 20px;
margin-top: 3rem;
color: #48535A;
}
#about #networks p > span {
font-weight: bold;
}
#about #networks .links {
list-style: none;
}
#about #networks .links > li {
display: inline-block;
margin: 0 15px;
background-image: url('http://codedevelopr.com/screenshots/sprite.png');
opacity: .4;
-webkit-transition: opacity .4s;
-moz-transition: opacity .4s;
-ms-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
}
#about #networks .links > li:hover {
opacity: 1;
}
#about #networks .links > li > a {
display: block;
text-indent: -9999px;
width: 36px;
height: 36px;
}
/* social icon stuff */
#about #networks.dribbble { background-color:#ed6297; }
#about #networks.twitter { background-color:#2094CA; }
#about #networks.github { background-color:#4A535B; }
#about #networks.zerply { background-color:#9DBC7A; }
#about #networks.skype { background-color:#47AED9; }
#about #networks.email { background-color:#e74c3c; }
#about #networks .links > li.dribbble { background-position:0 0; }
#about #networks .links > li.twitter { background-position:0 -36px; }
#about #networks .links > li.github { background-position:0 -72px; }
#about #networks .links > li.zerply { background-position:0 -108px; }
#about #networks .links > li.skype { background-position:0 -144px; }
#about #networks .links > li.email { background-position:0 -180px; }
#about #networks .links > li.dribbble:hover { background-position:-36px 0; }
#about #networks .links > li.twitter:hover { background-position:-36px -36px; }
#about #networks .links > li.github:hover { background-position:-36px -72px; }
#about #networks .links > li.zerply:hover { background-position:-36px -108px; }
#about #networks .links > li.skype:hover { background-position:-36px -144px; }
#about #networks .links > li.email:hover { background-position:-36px -180px; }
</style>
<section id="about" class="clear">
<div id="networks" class="">
<div class="wrap" id="mf5">
<ul class="links" id="mf6">
<li class="service dribbble" data-network="dribbble" data-tip="View my work on Dribbble" id="mf7">
<a href="http://dribbble.com/jason-davis" target="_blank" id="mfa2">View my work on Dribbble</a>
</li>
<li class="service twitter" data-network="twitter" data-tip="Follow me on twitter" id="mf8">
<a href="http://twitter.com/#!/JasonDavisFL" target="_blank" id="mfa3">Follow me on Twitter</a>
</li>
<li class="service github" data-network="github" data-tip="Fork me on Github">
<a href="http://github.com/jasondavis">Fork me on Github</a>
</li>
<li class="service zerply" data-network="zerply" data-tip="Check out my online resume">
<a href="http://zerply.com/jasondavisfl">Check out my online resume</a>
</li>
<li class="service skype" data-network="skype" data-tip="Lets chat on Skype" id="mf9">
<a href="skype:[jason.davis.fl]?[call]" id="mfa4" style="
">Lets chat on Skype</a>
</li>
<li class="service email" data-network="email" data-tip="Shoot me an email, lets talk" id="mf10">
<a href="mailto:jason.davis.fl@gmail.com&su=ATTN: Jason Davis" id="mfa5" target="_blank">Email me, lets talk</a>
</li>
</ul>
<p id="mf11">You can find me all over the web</p>
</div>
</div>
</section>
<script type="text/javascript">
$(function(){
/* Service hovers */
$(".service").hover(
function() {
$("#networks").addClass($(this).data("network")).addClass("active");
$("#networks p").html($(this).data("tip"));
},
function() {
$("#networks").removeClass();
$("#networks p").html("You can find me all over the web");
}
);
});
</script>
4. Now You can edit the links here and also the text you want to appear. Just copy them and find the lines which you want to edit or modify !That's it, now you have installed this widget on your Blog Posts but I suggest you to try this widget in Your Blog Pages !
B. To Add this widget in Blogger "About Us" / ''About Me" Pages.
1. Go to Blogger > Dashboard > Pages.2. Select the above code and paste it in "HTML" section.
That;s it you can add any description or anything you want there. Hit upadate {If you have existing About Me / About Us page}
I hope you would like this Brand New, Unique About Me widget ! Stay connected with Us. If you have any problem just drop your comment here :)
Demo is not working ..
ReplyDeleteI'll add Demo soon, there's been server crash for its internal hosting.
Delete