--> Customize Author Profile In Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Customize Author Profile In Blogger

Thanks to Blogger you can easily customize your templates and widgets fully. While designing the Cute Box template I came across the codin...

Customize-Author-Profile-In Blogger Thanks to Blogger you can easily customize your templates and widgets fully. While designing the Cute Box template I came across the coding for “Author Profile Widget”. The widget was using official Blogger Styles by default and I thought why not try editing them with our own customized fonts and colors. Fortunately with a simple use of CSS, the entire look was changed to something that may be of interest to most of you. I added some mouse hover effects to Author Profile image and author name and also added a small image of admin that appears when you hover your mouse cursor on it.

Have a look at it first (Remember to hover you mouse on it),

 

Live Demo

 

 

How To Customize Author/Admin Profile Using Simple CSS

To add this effect to your personal profile follow these steps,

  1. Go To Blogger > Layout
  2. Click Add a Page element or Add a gadget
  3. Select Author Profile Widget
  4. Now Go to Edit HTML
  5. Backup your template
  6. Search For ]]></b:skin>
  7. Just above ]]></b:skin> paste this code

.profile-img {
  float: left;
  margin: 0 5px 5px 0;
  padding: 4px;
  border:3px solid #289728;
}
.profile-img:hover {
  border:3px dotted #3B3A3B;
}
.profile-data {
  margin:0 10px 20px 10px;
  padding:0;
  font: bold 10pt "ms sans serif", verdana,Arial;
  color:#289728;
  line-height: 1.6em;
  text-align:left;
  text-transform:lowercase;
}
.profile-data:hover {
  color:#3B3A3B;
}
.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-datablock:hover {
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjieT126HsXoYY3cyHMwW4O-3aWi8IMRlobf3OjMu4_WVbuChXoWGh9AsXSDDQldoYGOd-I1IlOYxgkB9nL_WT-zG11I0nHvp9MmkUP1W1BqiAb1DNg5PQ3OIJ307dQMnCRsMjEaQz9sO4/s320/admin.png) no-repeat bottom right ;
}

.profile-textblock {
  color:#333;
  margin: 0.5em 0;
  line-height: 1.6em;
  padding:5px 0 5px 0;
  border-top:2px solid #289728;
  border-bottom:2px solid #289728;
}

.profile-link {
display:none;
}

 

     8.    Save your template and Done!

Preview your blog to see your profile standing out!

 

Customization Guide

Each bolded text in the code above is described below,

(1)  Customize Image Border

border:3px solid #289728;

This code defines the image border width, style and colour in active mode. To change the width change this value –>3px and to change style change solid to dotted, dashed or outset etc. and to change colour of border change  #289728 to a different colour of your choice. Use our Colour Chart

(2)  Customize Image Border Which Appears On Mouse Hover

border:3px dotted #3B3A3B;

This code can be customized in a similar way as for part (1)

(3)  Customize The Author Name

color:#289728;

text-transform:lowercase;

color:#3B3A3B;

To change the colour of Author Name in active mode, change  #289728

To change the colour of Author Name on mouse hover, change  #3B3A3B

To Change all letters to capital then change lowercase to uppercase or if you want to make the first letter of each word capital then change lowercase to capitalize

(4) Customize The Author Introduction Text

color:#333

border-top:2px solid #289728;
  border-bottom:2px solid #289728;

To change the colour of the introduction text change #333 

To change the the width, style and colour of the two borders that appear below and above the text then change 2px, solid and #289728 respectively

How to show or hide the link in Author Profile

By default I have removed the link that says “View My Complete Profile”  If you want to show this link then simply delete the following code from the above code,

.profile-link {
display:none;
}

If you want to hide the link then leave the above code as it is.

That’s All!

I hope you will find it easy and interesting. Any question is welcomed :>

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Customize Author Profile In Blogger
Customize Author Profile In Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRp0Jfcu995NMx0OQL3OE0CdwLbONP6bMiw_Z1ECCIWiXj1uXluhlXPixlVuLLXl2vubziH7S_C6Wgi2x54jcfhcYyRH-oNPgfMyZmDfqzWiGE3Qy7kirBSjykPjCL_xihGviCBk8TI8/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRp0Jfcu995NMx0OQL3OE0CdwLbONP6bMiw_Z1ECCIWiXj1uXluhlXPixlVuLLXl2vubziH7S_C6Wgi2x54jcfhcYyRH-oNPgfMyZmDfqzWiGE3Qy7kirBSjykPjCL_xihGviCBk8TI8/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2009/12/customize-author-profile-in-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2009/12/customize-author-profile-in-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy