"About Me" Author Box Gadgets With Different Styles For Blogger

"About Me" Author Box Gadgets With Different Styles For Blogger - Hallo sahabat Information About Blogger, Pada Artikel yang anda baca kali ini dengan judul "About Me" Author Box Gadgets With Different Styles For Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger Widgets And Gadgets, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : "About Me" Author Box Gadgets With Different Styles For Blogger
link : "About Me" Author Box Gadgets With Different Styles For Blogger

Baca juga


"About Me" Author Box Gadgets With Different Styles For Blogger

"About me" gadgets with different styles for blogger | 101helper

"About-me" gadget in blogger shows the profile pic, name and description about author of a blog. The simple about-me gadget shows only an image with a Google+ follow button and a link to Google+ profile. So I have created 4 stylish "about-me" gadgets which are easy to use, good looking and follow buttons of 4 different social networks are also added. I hope you like these gadgets. To add this gadget in your blog follow below steps.


Step 1: Go to blogger dashboard > Layout > add a gadget > Html/javascript.

Step 2: Copy the code of desired "about-me" gadget and paste it into Html/javascript window.


Style 1


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

<div class="box">
   <div class="ribbon"><span>Admin</span></div>
<div id="about-me"> 
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Fahim Raza</p><p></p><h5>My name is Fahim Raza. I am a professional blogger. I have created many blogs. My recent one is 101Helper....</h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/pages/101Helper/623626157780837" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div></div>
<style>
#about-me{
  color:#444;
    width: 300px;
    padding: 20px 10px 110px;
    border: 2px solid #555;
  background-color:#eee;
 font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 2px solid #666;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 16px;
  border-radius: 2px;
  left: 8px;
}
#about-me p{
position:absolute;
bottom:84px;
  font-size:17px;
font-weight:bold;
  left:119px;
color: rgb(58, 148, 227);
}
#about-me h5{
  width:200px;
  position:absolute;
  left:119px;
  top:9px;
  color:#555;
font-size:14px;
}
#my-link {
position:absolute;
top: 94px;
  left: 119px;
}
.ribbon {
  position: absolute;
  left: -3px; top: -3px;
  z-index: 5;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#359BED 0%, #5467A7 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #5467A7;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #5467A7;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
</style>

Style 2

Stylish About me gadget for blogger style 2 | 101helper

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

<div id="about-me"> 
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Fahim Raza</p><p></p><h5>My name is Fahim Raza. I am a professional blogger and owner of 101helper.blogspot.com. I like music, playing football,car race and blogging...</h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/pages/101Helper/623626157780837" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 314px;
  padding: 40px 22px 114px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 6px double #A0A0A0;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 23px;
  border-radius: 12px;
  left: 18px;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(-17deg);
  z-index: 5;
}
#about-me p {
  position: absolute;
  bottom: 102px;
  font-size: 18px;
  font-weight: bold;
  left: 146px;
  color: rgb(58, 148, 227);
}
#about-me h5 {
  width: 185px;
  position: absolute;
  left: 146px;
  top: 15px;
  color: #747272;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-align: left;
}
#my-link {
  position: absolute;
  top: 20px;
  left: 332px;
}
#my-link img{
border-radius:70px;
padding:2px;
}
</style>


Style 3

Stylish About me gadget for blogger style 3 | 101helper
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me"> 
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Fahim Raza</p><h5>Hi there! my name is Fahim Raza. I am a professional blogger. I like music(Linkin Park), playing games(football) and blogging...</h5>
</div>
<div id="my-link">
<a href="https://www.facebook.com/pages/101Helper/623626157780837" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 225px;
  padding: 20px 10px 110px;
  border: 2px solid #B0AEAE;
background: -webkit-linear-gradient(#eee, white);
  font-family: 'Open Sans Condensed',sans-serif;
  height: 175px;
}
#about-me img {
  border: 2px solid #666;
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: 184px;
  border-radius: 60px;
  left: 65px;
}
#about-me p {
  position: absolute;
  bottom: 135px;
  font-size: 19px;
  font-weight: bold;
  left: 91px;
  color: rgb(58, 148, 227);
}
#about-me h5 { letter-spacing: 0.3px; width: 200px; position: absolute; left: 30px; top: 140px; color: #555; font-size: 14px; text-align: center; }
#my-link {
  position: absolute;
  top: 260px;
  left: 79px;
}

</style>


Style 4

Stylish About me gadget for blogger style 4 | 101helper

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me"> 
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><h5>My name is Fahim Raza. I am a professional blogger and owner of 101helper.blogspot.com. I like music, playing football,car race and blogging...<br /><br />Email: Fahimraza101@gmail.com<br />Phone: xxx-xxx-xxx-001<br />Skype ID: Fahim Khan</h5>
<h4>Author Name:</h4><p>Fahim Raza</p>
</div>
<div id="my-link"><p>Follow On</p>
<a href="https://www.facebook.com/pages/101Helper/623626157780837" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" title="Facebook" width="35px" height="35px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/danleech/simple/1024/twitter-icon.png" title="Twitter" width="35px" height="35px" /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt="Google+" src="https://developers.google.com/+/images/branding/g+128.png" title="Google" width="35px" height="35px" /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt="Pinterest"  src="http://www.iconarchive.com/download/i54058/danleech/simple/pinterest.ico" title="Pinterest"  width="35px" height="35px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 275px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
  height: 310px;
}
#about-me img {
  border: 2px solid #A0A0A0;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 15px;
  border-radius: 4px;
  left: 186px;
}
#about-me p {
  position: absolute;
  top: -2px;
  font-size: 18px;
  font-weight: bold;
  left: 99px;
  color: rgb(58, 148, 227);
  letter-spacing: .4px;
}
#about-me h5 {
    border-top: 3px double #999;
    width: 165px;
    position: absolute;
    left: 13px;
    padding-top: 5px;
    top: 16px;
    color: #747272;
    font-size: 15px;
    letter-spacing: 0.2px;
    text-align: left;
}
#about-me h4 {
    font-size: 18px;
    position: absolute;
    top: 15px;
    left: 8px;
    border: 0;
    color: #555;
}
#my-link {
  position: absolute;
  top: 268px;
  left: 10px;
}
#my-link p {
position: absolute;
  bottom: 29px;
  color: #444;
  font-size: 16px;
  font-weight: bold;
  left: 3px;
}
#my-link img{
border-radius:5px;
padding:2px;
}

</style>

Customization:


To change pic:


Replace http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg with your profile pic url. 


To change name:


Replace Fahim Raza with your name. Maximum characters allowed are 12.


To change description:


Replace green colored text with your description. don't write too long description, otherwise it may look irregular.


To add your social profiles links:


Replace the yellow colored links with your social profiles links.  


Hope you this post and this gadget is working fine in your blog. If you have any question about any of the above gadgets, ask me in comments or contact me. Follow and subscribe to get instant updates about blogger gadgets. Share this post with others and help my blog grow.


Search Tags: "About me" gadgets with different styles for blogger, Stylish about me gadget for blogger, Author profile gadgets for blogger.


That is the discussion about "About Me" Author Box Gadgets With Different Styles For Blogger

Thank you for visiting the article "About Me" Author Box Gadgets With Different Styles For Blogger hopefully always provide useful information, see you in another article.

the article you are reading is about "About Me" Author Box Gadgets With Different Styles For Blogger with the link as follows https://www.booknagar.com/2015/04/me-author-box-gadgets-with-different.html

0 Response to ""About Me" Author Box Gadgets With Different Styles For Blogger"

Post a Comment


Tag: how to create a free blog, how to create a website, how to create a blog website, how to create a blog for free, how to make a blog, wordpress, how to create a wordpress blog, how to create a blog page, how to start a blog, blogger, how to create a blog in wordpress, how to create a blog account, how to create a blog on wordpress, how to create a blog and make money, how to create a blog in google, how to create a successful blog