Blogokay.com come back for sharing about Widget Author Profile For Blogger. Author Profile is very important widget should be added on a website or blog. Sometime, visitors need to know who is as admin about the blog is being read. They can be easy to call the author for something is necessary. This widget is very simple and clean. You can add author image and social media profile in this widget. It will make the visitors more attractive to follow your social media profile like Twitter, Facebook, Google+, Youtube, Linkedin and also your feedBurner id. In this post, I just share two style of Author Profile widget. You can choose which one is better for adding on your site.For adding this widget on your blog is very easy, please follow the tutorial below. Important point of this widget is font awesome, if you have not been added font awesome script on your HTML template. I suggest you to read my article about How To Add and Use Font Awesome For Blogger.
- You only have to add a HTML/Javascript Gadget.
- Copy the code below.
- Paste on your HTML/Javascript box.
- Finally, click save and see the result.
#Style 1, it is very nice by adding social media icons with author image.
<style type="text/css">.title-sosmed{font-size:1.8em;text-transform:uppercase;line-height:2.2em;padding:0 10px;color:#fff;margin:0;background:#888;}.box-sosmed{background:#fff;text-align:left;display:block;width:100%;height:300px;margin:0 auto;float:none;}.box-sosmed span{color:#fff}.wrap-box-sosmed{width:100%;height:100%;display:inline-block;float:left;}.wide-sosmed{width:100%;display:inline-block;height:150px;line-height:150px;float:left;font-size:4em;margin:0;padding:0;text-align:center;cursor:pointer;}.large-sosmed{width:50%;height:150px;line-height:150px;display:inline-block;float:left;overflow:hidden;cursor:pointer;}.medium-sosmed{width:100%;line-height:75px;display:inline-block;float:left;cursor:pointer;}.small-sosmed{display:inline-block;line-height:75px;float:left;width:50%;height:75px;cursor:pointer;}.text-facebook{font-family:Arial;}.fesbuk-sosmed:hover{background:#2980b9;}.twitter-sosmed:hover{background:#69d2e7;}.google-sosmed:hover{background:#DE9090;}.feed-sosmed:hover{background:#E19E4C;}.fesbuk-sosmed:hover,.twitter-sosmed:hover,.google-sosmed:hover,.feed-sosmed:hover{transform:rotateY(360deg);-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);}.about-sosmed:hover img{-webkit-filter:saturate(0.01);-moz-filter:saturate(0.0);filter:saturate(0.0);}.about-sosmed img{width:100%;-webkit-filter:saturate(1.1);-moz-filter:saturate(1.1);filter:saturate(1.1);}.about-sosmed{background:#7f8c8d;}.fesbuk-sosmed{background:#34495e;}.twitter-sosmed{background: #49A7F0;}.google-sosmed{background:#c0392b;}.feed-sosmed{background:#d35400;}.fesbuk-sosmed,.google-sosmed,.twitter-sosmed,.feed-sosmed{transition:all .5s;-webkit-transition:all .5s;cursor:pointer;}</style>
<div class="box-sosmed">
<div class="wrap-box-sosmed">
<div class="wide-sosmed wrap-wid-sosmed">
<a class="large-sosmed about-sosmed" target='_blank' rel='nofollow' title='Description' href="http://blogokay.com/p/about-me.html"><img alt="profil-Blogokay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyHySybJR-iL6z96qMwTfCsY6LxdjqS_nzQbuB7TtB-ODfYF09GQAyjQvLbvRIS7hQVLWJL3ho9zulDbjny5Rnkk8norFEAU2IVGU-c_m-K0rlM8Z60uauZfEdJej9uiQMxGa4X-W8M8C3/s1600-r/blogokayLogo.png" /></a>
<div class="large-sosmed wrap-lar-sosmed">
<div class="medium-sosmed wrap-med-sosmed">
<a class="small-sosmed twitter-sosmed" target='_blank' rel='nofollow' title='Follow @BloggerOkay' href="https://twitter.com/BloggerOkay"><span class="fa fa-twitter"></span></a>
<a class="small-sosmed google-sosmed" target='_blank' rel='nofollow' title='Circle Paja Tapuih' href="https://plus.google.com/+Blogokay"><span class="fa fa-google-plus"></span></a>
</div>
<a class="medium-sosmed feed-sosmed" target='_blank' rel='nofollow' title='Bookmark RSS Feed' href="https://Blogokay.com/feeds/posts/default"><span class="fa fa-rss"></span></a>
</div>
</div>
<a class="wide-sosmed fesbuk-sosmed" target='_blank' rel='nofollow' title='Like Fanspage Blog Okay' href="https://www.facebook.com/BlogOkay"><span class='fa fa-facebook'></span><span class='text-facebook'>acebook</span></a>
</div>
</div>#Style 2, it is very simple and cool by adding social profil icons only.
<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/BlogOkay"></a></li>
<li><a class="tw" href="http://twitter.com/BloggerOkay"></a></li>
<li><a class="gp" href="https://plus.google.com/+BlogOkay"></a></li>
<li><a class="pi" href="http://pinterest.com/BlogOkay"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/BlogOkay"></a></li>
<li><a class="yt" href="http://www.youtube.com/BlogOkay"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/Blogokay"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v3.0 by BlogOkay Labs
Web link to gadget code: http://www.BlogOkay.com/social-profile-widget-for-blogger-metro-ui-v3-0
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>Note : Please change the following highlighted link with your social media profile or id. Don't forget to change the color, size and also the other items to make your widget more awesome.
That is simple explanation about How To Add Widget Author Profile For Blogger. Hopefully this tutorial will be useful for you to get best result. Thanks for reading and don't forget to subscribe my blog for getting the other tutorials.
Advertisement
EmoticonEmoticon