Author Profil Box After Tittle

Hi Iswan,

You could add HTML of the author bio box to the header element which assigned to Blog.

Do you have idea what kind of author bio box you prefer? Maybe a reference site?

Let me know :)

I have no idea, i dont understend about html and etc. Usualy i search tutorial in here and copy the code.

I suggest, the author bio have a avatar, name and little bio description.

For example, you could add this html in to the Blog Page Header. You can find it at Appeared > elements.

<div class="author-bio">
	<div class="author-gravatar">
		<a href="your-custom-link-for-the-author-gravatar"><img src="your-custom-image-url" width="200px" height="200px"> </a>
	</div>
        <div class="author-info">
		<h2>
			<a href="your-custom-link-for-the-author-name-text">Author Name</a>
		</h2>
		<p>About the author sample text About the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample textAbout the author sample text
		</p>
	</div>
</div>

Let me know :)

Hai....

Thanks for your effort

I mind, i wanna make author bio like this site mastahseodotcom

This is the plugin we usually recommend for author box:
https://en-ca.wordpress.org/plugins/simple-author-box/

Hai Leo I was use the plugin...

But the plugin do not have stye i want...

Hi Iswan,

Can you link us to your page that the bio layout has been created? So that we could offer some CSS help based on that? Thanks!

Actually i don't understand about coding, the example of display in bio like mastahseo(dot)com, could you sugguset me the code or some css... And I can copy & paste that

Hi there,

the Simple Author Box plugins provides social icons and other meta that is not available in a default WordPress install.

Add the plugin, and set it to display where you want it - and we'll take a look - we may be able to help with some CSS to style it.

Thanks david for your support, i have use simple author box, i want to put it on the top before article... How to make it.

Please give me some css to syle the it, actually i like to centre position the profile.

Thanks David

Hai David, I use simple author plugin shortcode in header, but the padding not ideal. Lets cek my site.

try this CSS:

.saboxplugin-wrap {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.saboxplugin-wrap .saboxplugin-authorname,
.saboxplugin-wrap .saboxplugin-desc,
.saboxplugin-wrap .saboxplugin-socials {
  text-align: left;
}

.saboxplugin-wrap .clearfix {
  display: none;
}

.saboxplugin-wrap .saboxplugin-socials {
  background-color: transparent !important;
}

@media(max-width: 768px) {
  .saboxplugin-wrap .saboxplugin-socials {
    text-align: center;
  }

  .saboxplugin-wrap .saboxplugin-gravatar {
    padding-bottom: 0;
  }
}

Hai david, could you check my site, gramphy.com.

I use stream template, i use the simple author shortcode in Global Post Headers, and there are padding between profil picture and description. its not ideal.

Hi there,

Do you want it to display like this? https://share.getcloudapp.com/6quQ2QoE

If so, try this CSS:

.saboxplugin-wrap {
    width: fit-content;
    margin: 0 auto;
}

Optional: If you want to remove the background color of the social media button area, you can add this css:

.saboxplugin-wrap .saboxplugin-socials.sabox-colored {
    background: transparent;
}