Fiends,In this tutorial you are going to learn
"how to add professional author box" below every blog
post in blogger. because professional bloggers always prefer to add about author
box at the end of the post on their blog,they know peoples wants to know little about author who has
written the post...
In addition to having the great blog design, you should
have "about the author" box on your blog. it contains
descriptive information about the author. You can add an author box to the below every post
in your Blogger blog by adding CSS + HTML code
in your blogger template and layout..
I know Everyone wants to make his Blog more professional. Therefore, I thought to share
"professional author box" for blogger platform users who want to change the look of his blog author box..
How To Add Professional Author Box In Blogger:
Step 1
Go to your blogger dashboard >> Template >> Edit HTML
Step 2
Search for the following code by pressing Ctrl+F: ]]></b:skin>
Step 3
Now just above this code add the following piece of CSS code:
/*Author Box CSS Code By Baral*/
.about-author {
width : 550px;
overflow : hidden;
margin:10px 0px;
border:0px;
background:
#f2f2ef; margin: 0 0 30p
x 0; padding: 5px;
border: 1px solid
#EAEDEF; overflow: hidden;
color: #333333;
font-size: 14px;
font-family: Georgia, Tahoma, Verdana;
line-height: 24px; }
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 1px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:2px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important; }
.about-author p {
margin:0px;
text-align:justify;
color:#666; }
/*Author Box CSS Code By Baral*/
And now save your Template..
Step 4:
Now go back To your Layout Option..Find the "Sidebar">Add Gadget>HTML/Javascript Code>Paste The below HTML Code.
<div class="about-author">
<h3>About Author:</h3>
<img align="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjADpsKeg_r0w7stfifv6ETsk-lNMm3vRFu_EAz3TopTUJ0J8NXRNqPGE2FB2HJL5bmGd6Su__F-HEfzyh05EQ-cw6C2hXZCXK2p051e20iaJPUnWdj95mTNE_sf20QIp78FLOHRiBIVgY/s320/12.jpg"/><p>Hi friends,
I am Tushar Baral, founder of Help-Koro. Here I write about SEO, Social Media, Make Money Online, and many more ...
You can read more about me at About me page</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/tusharbaral1" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/tushar.baral.568" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/108910446422751307457" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>
Finally, Save and see the result...
Note:
Customization The Links:
Paste Your Image URL Here: Add Your Profile Picture..
Write Something About Yourself..
Replace with your Twitter,Facebook.Google+ page URL...
Final Words!
if you have any questions or confused about the
post then ask me via comments... I would like
to help you out. Happy learning!
keep visiting for more like this post..
0 Komentar