Adding About the Author box below every blog post is fairly easy. It gives a professional look to the blog. You might havecome across such widgets in WordPress blogs, but unfortunately there is non for blogger so we need to add some code in Edit HTML.

After working out this post you will end up something like this :

You might have noticed such " About the Author " section on many of the posts at BLoggingeHow. This isn't meant to give all the information about the authors, instead its totally based on few lines describing authors blogging activity. It can link to other pages as per need.

So lets jump in to learn this beautiful tweak for Blogger.

Step 1:

Go to Design >> Edit HTML
Tick the check box.

Step 2:

Search for the following code : (Press Ctrl + F)

]]></b:skin>

Now just above this code add the following piece of code.

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

By adding this code, we defined the CSS layout for the " About the Author Area ".

Tip : ( Note CSS is always added in the <head> tag.)

Step 3:

Now this is the part where you need to customize you own " About the Author Area " according to your need. Edit the following code as you want.

<b:if cond='data:blog.pageType == "item"'>

<div class='author-box'>

<p><img alt='' class='avatar avatar-70 photo' height='70' src='Your Photo Link' width='70'/><b>About the Author</b><br/>

<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write Something About yourself<br/>

Follow Me on Twitter <a href=' Your Twitter Link '>Your Twitter link Anchor text</a>

<p style='margin:-8px 0'><br/><center>

<a href=' Your Blog link ' style='text-decoration:none;font-size:70%;'>Your Blog Name</a></center>
</p></div></p>

</div>

</b:if>

Change the following things as you wish them to be displayed

Your Picture Link
About the Author text ( In my case its About Zaib Abbasi )
Write Something About yourself
Your Twitter Link
Your Twitter link Anchor text
Your Blog Link
Your Blog Name

Step 4:

Add the above code ( once you are done with editing ) below the following code :

<div class='post-footer-line post-footer-line-1'/>

Step 5:

Chill out ! You have unlocked an achievement

Email Subscription + Social Share Widget For WordPress & Blogger

This is Grat Widget for Blogs, This is Simple Code that you can add Simply in WordPress or Blogger no Need any plugin etc.

its Simple Code you should just change your Social usernames etc.

Features :

No Need any Plugin
Simple Code
Simply can add into widget area.
Get more Traffic from Socials
Easy to Increase Subscriptions
Easy to Customize
Much more….

How to Add Widget?

Simply login into your Dashboard
Go to Widget Area
Click on add new Widget
Choose Tex/html
And Copy the Code frome Below and paste there
And save changes and see the blog

[toggle title_open="Click Here to see the Code" title_closed="Click Here to see the Code" hide="yes" border="yes" style="default" excerpt_length="0" read_more_text="Read More" read_less_text="Read Less" include_excerpt_html="no"]

<style>

.mbtbar{width: 100%; float: left;}

.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}

.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}

.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}

.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBzL4JWzB1d9Q0D8LqTsjzxzMtDWw7u2WHhjxBOcAKcf-6lY7Ht4tpm5yTvkRt8gd0q-AOgx6Xh3h0sjcz76HECc6bXqFv2gMS49eVjQNgnIkForlQVovwQHWeB2focHiQUQhRGJx75c/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65fEU4ywbAzhj0beNKjS2iDVl4wLr2e9pR6qD4oDGDd_QMo_Mdq-Vyq3VmCWM_6gdPrtBh0YnZgvQysMbQW4wL7SxGXOcDXxUX_kA2zrhNviQ7l9Tmx7jcESSJzkVdNA0ztTNP-EOwK4/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbp8wRoN0sVln3_R_PA4dPtokRHMKaPqWYrtmlKdUoywKrtAR1wW-aOCM-_SZXJwdHDaXj6GlfpxNg1RikYMgZKnYGLhlGgp5_KkIQ0anW0sBB57Yav1SqqXt7n37O6_U4UURGLYADOpE/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDjrYXsTywSbiKH9AtIc6HS0am8IM2447pvq0dggxV-Dc6pW5atMY_Ef66rhhBXl34O7Q0IJ4pE2QqUx39h21Bslqq8r3zueEjDFWP_w982tsOAsndGVLAwNCDxkYaKiNaOShkp6ZjtWc/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }

.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid#0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>

<!–[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]–>

<div><div>Join <span>1675+</span> People Following Inspirational Online</div><div><div><a href=”http://www.mybloggertricks.com/feeds/posts/default” target=”_blank”>RSS</a></div><div><a href=”https://www.facebook.com/InspirationalOnline” target=”_blank” rel=”nofollow”>Facebook</a></div><div><a href=”http://twitter.com/abbasizaibi” target=”_blank” rel=”nofollow”>Twitter</a></div></div>
<div>
<div>Stay Updated via Email Newsletter</div>
<div>
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=tntbystc‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><input gtbfieldid=”10″ name=”email” value=”Enter your email…” onblur=”if (this.value == '') {this.value = 'Enter your email…';}” onfocus=”if (this.value == 'Enter your email…') {this.value = '';}” type=”text” /><input value=”tntbystc” name=”uri” type=”hidden” /><input value=”Join” type=”submit” /></form></div></div></div>

[/toggle]

Inspirational Online

Saturday, 1 December 2012

How to Add " About the Author " Box Below Every Blogger Post

Friday, 16 November 2012