The Knowledge Adda

There are different ways to display author/blogger name with every post in blogger. Blogger also provide default properties to show Author Name. As shown in figure.

But sometimes due to applied template in blogger, it’s unable to show author name.  In this post, I tell you how we can display customized author name with every post in blogger. You can also set the position of author name where you want.  Making some changes in CSS you can find your desired Author Name as you want including font, background color, text color etc. Author Name will be shown below the Post title. You have to copy and paste some given code and you have done.

/* Content

---------------------Author Name--------------------- */

.jump-link a {

font-size:14 px;

padding:10px;

border:  0px solid #000;

background-color:#ffffff;

color:#000000;

 }

.swt-author {

background-color: #ffffff;

 overflow: auto;

}

.swt-author name {

display: inline-block;

font-size: 15px;

float: left;

text-align: center;

margin: 5px;

white-space: nowrap;

}

.swt-author name a {

color: #000;

background-color: #ffffff;

padding: 12px;

padding-top: 1px;

padding-bottom: 2px;

/* Content

---------------------Author Name--------------------- */

In above given code you can customize your font, text color, background color and alignment also by making some changes and providing such value as you want to display author name.

Now again search for <div class='post-header-line-1'/>. 

You need not to be worry if you find more than one <div class='post-header-line-1'/>  because one is for mobile and other one is for desktop. Copy and paste the given code below this line on the both places.

&lt;!&#8212;Custom Author Name by www.pradipyadav.com --&gt;

    <div class='swt-author'><name> Written by @

    <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><span itemprop='name'><data:post.author/>

    </span></a>

    </name></div>

Now your post will be look a like this.

You have to paste at both position to show in mobile application as well as Desktop. After pasting the code, save the template. Now you have done and now enjoying blogging with me. For any query drop a message through comment. If you like my post then feel free to share it.