How To Add Quote About Me Sidebar Widget on Blogger or WordPress

About Me Widget is a great way to show the reader of your blog about the Admin. If there are multiple admin you can always add multiple box with different link. Author box is usually shown below every blogger post. But what about in Home page or other page? With this great widget you can add Beautiful Quote About Me Sidebar Widget on Blogger or WordPress. In wordpress there are many plugin to add author box widget below every post. But the less plugin, more faster blog. I have also used my Author box without plugin. Just with some piece of code. For blogger there are  also way to show Author box bio. I will show on another day. Some may find it difficult to add the Author box bio. For those this is a great remedy. Just follow the below simple steps to Add a Quote About Me Sidebar Widget on Blogger or WordPress. It gives a Professional Look to your blog or Website. it Also Explain about yourself to your site Visitors. They may get attracted to your blog and keep visiting. That way you can increase traffic to your site. You can use this on Footer or Sidebar where ever you wish. Some people also called it Professional Footer Quote Author Box Widget. See all my Blogspot Tips here to increase the customize power of your blog. Here is my all WordPress tips, also check this out.

Also, A great tip. Use the image which is selected for your Google Author Image. When People get accustomed to your Face, it will drive traffic from the Search Page.

Live Demo

How to Display Professional Footer Quote Author Box Widget For Blogger

How To Add Quote About Me Sidebar:

1. Go to Blogger > Dashboard.

2. Click Layout.

3. Click Add Gadgets and Select HTML/JavaScript.

4. Copy/Paste the following code.

<style> .quote_box { width:225px; margin-top:12px; background:#fff url( no-repeat 94% 7%;border:1px solid #b6b6b6;position:relative;padding:18px} .quote_box:before{border:15px solid;bottom:-30px;content:'';height:0;right:40px;position:absolute;width:0;border-color:#b6b6b6 transparent transparent #b6b6b6}.quote_box:after{border:14px solid;bottom:-27px;content:'';height:0;position:absolute;right:41px;width:0;border-color:#fff transparent transparent #fff} .quote_content{overflow:hidden} .detail_box{float:left;margin-left:0} .detail_box span{display:block} .detail_box{font-size:17px;line-height:30px} .detail_box span.derole{ color: #666666; font-size: 15px; font-style: italic; line-height: 10px;} .said_box{ font-size: 20px;float:left;margin-top:-130px;margin-left:72px} .said_box span.roleau{ color: #333333; font-size: 16px; font-style: normal; line-height: 20 px;} .custom li.quotes,.custom li.widget.quotes p{margin-bottom:0} </style> <br /> <div class="quote_box"> <div class="quote_content"> <div class="detail_box"> <img alt="Shemul" src="YOUR 125 X 125 IMAGE URL" style="border-radius: 777px 777px 777px 777px;" title="Shemul" /> <span class="derole"></span> <br /> <span class="derole">Man</span> <br /> <span class="derole">Behind</span><br /> <span class="derole">This Blog</span></div> <div style="text-align: right;"> <div class="said_box"> <a href="YOUR GOOGLE + URL" rel="author" target="_blank">YOUR NAME</a> <span class="roleau"></span> <br /> <span class="roleau">WRITE SOMETHING ABOUT YOURSELF....<a href="YOUR ABOUT ME PAGE URL" rel="author" target="_blank">Read More</a> </span> </div> </div> </div> </div> </div>


See the Code, I have made the Changeable text to UPPER CASE.

1. YOUR 125 X 125 IMAGE URL Give here the Image Link.

2. YOUR NAME goes here. Match it with the name in your Google Plus Profile.

3. YOUR GOOGLE + URL goes here.

4. YOUR ABOUT ME PAGE URL write it here. if you dont have a About Me page, then make one wright now !

5. Change the Width according to your needs.

Ok ! Thats it. If you have any problem, let me.

Check Also

Add Visitor Counter Widget In Your Blogspot or WordPress Blog Without Plugin

Visitor Counter is essential to show your reader is that how much popular your blog …

Leave a Reply

Your email address will not be published. Required fields are marked *