Add Author Box looks like G + Badge in Blogger
Usually author box shown
below the post, now many times we save the author of this box in the sidebar of
the blog for author box below the post is already too mainstream. Author of
this box I created something like the Google+ badge that then I add the social
media profile button, a button to follow Blogger and subscribe button or you
can add other buttons.
If you are interested in
trying author ala G + Badge box in the sidebar of this blog, please follow the
steps below.
1. First Steps
Because auhtor this box
using the Font Awesome to display the social media buttons, so make sure you've
added Font Awesome on your blog, I encourage you to use the latest Font
Awesome.
2. Step Two
Please save this CSS code above the </ head>
<style
type='text/css'>
.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}
.authorbox{width:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8ls_at2nz8R0pFCNUn0cnthfR6Vez6UQRjf83-zIcSyLSOHo-PrcggQWhiUshP_8XserPadVQpDMZkhzaCh1OWsBMzyOwQ-zsM0Gs7Xax4a2V2tvKRuM_YyBHYxtO6isJLYKHHO71q8/s300-fcrop64=1/,00001ad4fffff235)
top center no-repeat #fff;border:1px solid
#dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px
0 0;margin:0 auto;}
h2.author-title{font-weight:bold;text-decoration:none;margin:0
auto 10px;font-size:22px;color:#fff!important}
.authorbox img{margin:55px
auto 0;border-radius:100%;display:block}
a.authorname{margin:10px
auto;font-weight:400;font-size:20px!important;text-decoration:none;}
a.authorname-url{margin:0
auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}
.sosmed-author
li,.sosmed-author ul{list-style:none}
.sosmed-author
ul{margin:0!important;padding:0!important}
.sosmed-author{margin:0
auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}
.sosmed-author
li{display:inline-block;margin-right:10px}
.sosmed-author
li:last-child{margin-right:0}
.sosmed-author li
a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s
ease-out}
.sosmed-author li
a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}
a.button-author{display:block;background:#4d90fe;border:1px
solid
#3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px
10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s
ease-out;text-decoration:none}
a.button-author:hover{background:#357ae8;border:1px
solid #2f5bb7}
</style>
To change the background
image I marked above with background G + profile you, please you go to page G +
profile you then right click on the background G + profile and Copy image
address and then change the URL of the image I marked above with the URL of the
background image G + profiles just now your copy.
3.
Third Step
Please save the HTML code
below in the sidebar gadget HTML / JavaScript in the Layout.
<div
class="authorbox">
<h2 class="author-title">
Author
</h2>
<img alt="author"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="https://lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/s120-c/photo.jpg"
width="120" height="120" />
<a class="authorname"
href="https://plus.google.com/+ProfilUnikAnda" rel="author"
target="_blank" title="Nama Profil G+ Anda">Nama Profil
G+ Anda</a>
<a class="authorname-url"
href="https://plus.google.com/+ProfilUnikAnda" rel="author"
target="_blank"
title="google.com/+ProfilUnikAnda">google.com/+ProfilUnikAnda</a>
<div class="sosmed-author">
<ul>
<li><a
href="https://www.facebook.com/Username" target="_blank"
title="Facebook" rel="nofollow"><i class="fa
fa-facebook-square fa-2x"
aria-hidden="true"></i></a></li>
<li><a
href="https://twitter.com/Username" target="_blank"
title="Twitter" rel="nofollow"><i class="fa
fa-twitter-square fa-2x"
aria-hidden="true"></i></a></li>
<li><a
href="https://www.google.com/+Username" target="_blank"
title="Google+" rel="nofollow"><i class="fa
fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="//www.youtube.com/c/Username"
target="_blank" title="Youtube"
rel="nofollow"><i class="fa fa-youtube-square fa-2x"
aria-hidden="true"></i></a></li>
<li><a
href="https://www.linkedin.com/in/Username" target="_blank"
title="LinkedIn" rel="nofollow"><i class="fa fa-linkedin-square
fa-2x" aria-hidden="true"></i></a></li>
<li><a
href="https://www.instagram.com/Username/" target="_blank"
title="Instagram" rel="nofollow"><i class="fa
fa-instagram fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<a
class="button-author" href="URL HALAMAN STATIS UNTUK FOLLOWER
BLOG" target="_blank" title="Follow This
Blog">Follow This Blog</a>
<a
class="button-author" href="URL FEEDBURNER BLOG ANDA"
rel="nofollow" target="_blank" title="Subscribe This
Blog">Subscribe This Blog <i aria-hidden="true" class="fa
fa-paper-plane"></i></a>
</div>
</div>
Customization:
•
To replace the photo that I've circled above with a photo G + profile you,
please you go to page G + profile you right click on a photo G + profile and
Copy image address and then change the URL of photo I marked above with the URL
of photo G + profiles just now your copy.
• Please adjust for profile name and url G + profile and other social media profile URL.
4.
Step Four
Please keep the following
javascript code above the </ body>. This code to download the profile
photo defer, if in your existing blog this code, the following code does not
need to be added again.
<script>
//<![CDATA[
var imgDefer =
document.getElementsByTagName("img");
for (var i = 0; i <
imgDefer.length; i++) {
if
(imgDefer[i].getAttribute("data-src")) {
imgDefer[i].setAttribute("src",
imgDefer[i].getAttribute("data-src"));
}
}
//]]>
</script>
Done ... good luck.