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/AVvXsEgJhmiTK5wsKngabSyJ7vMYx_PBKcvHa8lZs15THmn2q15XAUIkUC_4ucCrFWtPl-Z601FO3123cAuMTSRXMzk48IoqTrpGyaB4iXxZ1czl6khl2sIDjCLf4PKMc12e4aC7Mb9bon5-cjs/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 :>

Add Customized PayPal Donate Button Below Blogger Posts

Below every post at “MY Blogger Tricks” you have seen a PayPal donate button customized with some Author description next to it. It’s indeed a wizard tool that helps you tremendously with your Blog’s revenue. Some people are really generous and they do help new bloggers and keep them motivated with their precious donations. Some great people have even donated us $20-$25 just for making them smile. :) I had kept this little PayPal donation code for my premier services but I thought it would be nicer if I share it with all those who wish to go forward. See a screen shot below,

How To Get the PayPal Donate Button Code?

Kindly follow these steps,

1. Log into PayPal
2. Click The Merchant Services Tab and then select Donate Option under Create Button

    3.  Then Fill the form with relevant details as shown below. Leave step-2 and step-3 as default.

     4. Hit Create Button
     5.  Click Remove code protection Link in order to simplify the code. Its completely safe even this way.

       6.  Copy the code and jump to the next part of the tutorial below.

How to add Customized PayPal Donate Button To Blogger?

Note:- Before adding the customized code shared below to blogger if you wish to try it on MBT HTML Editor and customize the look then its not a bad idea. :)
As usual I have tried my best to keep it simple. So here we go,

1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Check the Expand Widget Templates box
4. Search for data:post.body
5. Just below it paste the code below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <table border='0' cellpadding='2' cellspacing='0' width='590'><tbody>
      <tr>
        <td><div style='border:5px solid #37BD07; padding:5px 10px; margin-right:5px;'>  <br/> PASTE PAYPAL DONATE BUTTON CODE RIGHT HERE </div> </td>
        <td>
          <p align='justify'><font color='#2FAA2F'><em><strong>Respected Readers:</strong></em></font>
                  <br/><em>WRITE YOUR SHORT REQUEST MESSAGE HERE</em></p>
       </td>
      </tr>
    </tbody></table>
</b:if>

Replace PASTE PAYPAL DONATE BUTTON CODE RIGHT HERE with your PayPal code that you got earlier. And replace WRITE YOUR SHORT REQUEST MESSAGE HERE with something that may catch reader’s attention. You can get an idea from my request message.
  6. Save your template and visit your blog and see it hanging in action :)

How To Customize The Code?

• To Change the width of the widget change the value width='590'
• To Change the border size and colour change border:5px solid #37BD07

That’s it!

Please not that if PayPal is not available in your countries then you can use Donate button of any Online account that you may have. If you needed any help just let me know. If this tutorial helped you a little then kindly consider contributing a small donation. :)

Tips for New Bloggers

Editor’s Note: Rebecca is one of the bloggers we’ve featured on Blogs of Note. After she was Noted, Rebecca received many new followers and emails asking her about her tips for blogging, so she’s graciously written up this blog post for anyone looking for tips on how to get started. 

Hi everyone! I'm Rebecca Brown, a blogger and personal stylist in the Seattle area. When I started my blog nearly 2 years ago, it was to document my attempt to wear a different dress for every day of December (sounds super interesting, right? It proves you can write a blog about anything).

I had no idea that a blog about my clothing choices would grow and become such a fun hobby! And even though I’ve been blogging for a little while, I still feel like I have so much to learn, which is what keeps blogging interesting! So, while I'm definitely far from being an expert, here are a few things that have worked for me:

1) Find a community of bloggers with similar interests. Do you like to write about video games, fashion, cooking? There are lots of great blogs on those topics already. A quick Google search for “fashion blogs” helped me round out my reading list. I always check out the blog rolls of people whose blogs I enjoy, and I also visit the blogs of folks who comment on my blog. Bottom line: interact with bloggers whose blogs you enjoy. You'll learn so much, I promise. This leads me to my next point...

2) Leave insightful comments on blogs that you enjoy - especially blogs that are in the same niche as you. Instead of just saying, "hey, nice blog, follow me please”, call out something specific that you liked about the post. Pure "followback" requests don’t really make people want to follow you.

3) Don't underestimate the importance of good pictures on your posts. The basics: Use a tripod or get a friend to photograph you if the pictures are of you. Take pictures outdoors if possible because natural light always makes pictures look better. Use post-processing (I use Picnik) to adjust the exposure, add effects, and crop to keep the focus on what you want. You don’t need a fancy camera - I use my cell phone most of the time! I wrote about this in more depth here.

4) Think about quality, rather than quantity of posts. Readers would rather see an insightful (and spell-checked!) post with original content and good pictures 2-4 times a week than hastily-written thoughts on a daily basis. Most avid blog readers follow so many blogs that if you post too often, and especially if your posts aren't high quality, you'll get passed over in favor of the other blogs on their blogroll. Plus, a great, high-quality post can continue to get you traffic for a few days - don't truncate its effectiveness by posting again the very next day.

5) Schedule your posts. I typically have a chunk of time on the weekend where I can plan out and write my 2-4 posts for the week, or at least get a rough draft in place. Blogger allows you to schedule your posts and they will automatically publish at the date/time you specify. I typically set my posts to publish around 2am to capture folks in other time zones.

6) Lastly, don't apologize for not posting more often. A blog is a fun hobby - but once you start feeling beholden to it, it stops being fun! Plus, your readers will likely not notice if you don't post for a week unless you write a post about how sorry you are for not posting!

There are so many great resources out there for bloggers looking to hone their craft. Here are a few of my favorites: - 10 Things About Your Blog That Drive Me Crazy (via B at Beautifully Invisible) - Don't Be A Savage Blogger (Jamillah via Beautifully Invisible): - Build a Better Blog (via Vahni at Grit and Glamour).

I hope these tips are helpful! Blogging has been such a great part of my life - allowing me to express myself, build a community and make lifelong friends. And the great thing about it is that nearly anyone can do it. So have fun with it, don’t take yourself too seriously, and you’ll be a great blogger in no time!