• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

Pure CSS About Me Widget for Blogger

 Rohitkumar  06:08  2 comments
Tweet
Pure CSS About Me Widget for Blogger
Today we are going to learn how to add Pure CSS Java Enabled "About Me" widget for your blogger blog. This widget is made with Pure CSS and works on the principle of its Javascript. There is no question about it that its awesome. It has many sections like Dribble, Twitter, GitHub [You can also use it as Google Plus] Skype, Email.
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.
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 :)

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In blogger, css, responsive, widget
Subscribe Now

Get Latest Posts Directly Into You Inbox

 2 comments :

  1. sunny30 November 2013 at 08:22

    Demo is not working ..

    ReplyDelete
    Replies
    1. Rohitkumar A2 December 2013 at 21:17

      I'll add Demo soon, there's been server crash for its internal hosting.

      Delete
      Replies
        Reply
    2. Reply
Add comment
Load more...

Newer Post Older Post Home
Do you like my work?

Buy Me a Coffee!

Popular Posts

  • MaterialMix : A Free Material Design Blogger Template
  • How to add Custom Fonts in Blogger or Any Website
  • How to use full ISP bandwidth to speed up downloading
  • Download Materiality Blogger Template
  • Resume Lite - One Page Resume Blogger Template
  • Best Social Media Widget for Blogger | 2017
Email Newsletter

Get Latest Posts Directly Into You Inbox

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • Materiality - Material Design Blogger Template
  • BloggerHero Free Premium Blogger Template
  • MaterialMix : A Free Material Design Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!