Blogger Discreet

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

In this article I will share a tutorial on how to create a widget brief profile of the author or admin on a blog that is placed on the sidebar or right side of the blog, this widget is useful so that visitors believe and know the admin a blog so that there arose the term "Because they know there is affection "the friendly and make visitors familiar with the blog admin sedan they visit and any visitors feel confident in the blog that he visited. This widget is the identity of a blog, I think that the visitors will not hesitate in visiting a blog without this widget for your blog is considered illegal.

Author Widget is very useful for blog optimization that will make your blog as trustworthy by visitors assessed the legal blog, amazing is not it?
And yet this widget is also responsive on all devices such as desktop, tablet and mobile. The widget does not use an IFrame that could adversely affect the value of SEO on a website or blog, lightness also has the advantage of interest because it would increase the pace of loading on your website or blog which will also be the SEO for your website or blog. As a blogger, the SEO must be considered because it is the quality of your blog.

Responvive on all devices such as desktop, tablet and mobile. I recommend this widget, let alone this widget author widget can compete with others both in terms of style, design and adaptive globally. The options that can be arranged according to your wishes because of its editing and everyone can compete in designing this widget. I recommend to you to use the widget's author and you will find a unique experience as Blogger Blogger especially beginners in the present. Let's show your identity to the Webmaster and Blogger also to the world by using this widget.

Before we get into the tutorial, it would be nice if you see the results before the result of the following⇩

Result
Click To View

1. Immediately login to Blogger>Template>Edit HTML in your Blogger dashboard then copy and paste the following CSS above / before ]]></b:skin> tags⇩

/***************************************
Author Widget By www.BloggerDiscreet.com
***************************************/
.card{padding-top:20px;margin:10px 0 20px 0;background-color:rgba(214,224,226,0.2);border-top-width:0;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card .card-heading{padding:0 20px;margin:0;}
.card .card-heading.simple{font-size:20px;font-weight:300;color:#777;border-bottom:1px solid #e5e5e5;}
.card .card-heading.image img{display:inline-block;width:46px;height:46px;margin-right:15px;vertical-align:top;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
.card .card-heading.image .card-heading-header{display:inline-block;vertical-align:top;}
.card .card-heading.image .card-heading-header h3{margin:0;font-size:14px;line-height:16px;color:#262626;}
.card .card-heading.image .card-heading-header span{font-size:12px;color:#999999;}
.card .card-body{padding:0 20px;margin-top:20px;}
.card .card-media{padding:0 20px;margin:0 -14px;}
.card .card-media img{max-width:100%;max-height:100%;}
.card .card-actions{min-height:30px;padding:0 20px 20px 20px;margin:20px 0 0 0;}
.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8;}
.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px 20px;}
.card .card-comments .comments-collapse-toggle a,.card .card-comments .comments-collapse-toggle span{padding-right:5px;overflow:hidden;font-size:12px;color:#999;text-overflow:ellipsis;white-space:nowrap;}
.card-comments .media-heading{font-size:13px;font-weight:bold;}
.card.people{position:relative;display:inline-block;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden;vertical-align:top;}
.card.people:first-child{margin-left:0;}
.card.people .card-top{position:absolute;top:0;left:0;display:inline-block;width:170px;height:150px;background-color:#ffffff;}
.card.people .card-top.green{background-color:#53a93f;}
.card.people .card-top.blue{background-color:#427fed;}
.card.people .card-info{position:absolute;top:150px;display:inline-block;width:100%;height:101px;overflow:hidden;background:#ffffff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card.people .card-info .title{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:16px;font-weight:bold;line-height:18px;color:#404040;}
.card.people .card-info .desc{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:12px;line-height:16px;color:#737373;text-overflow:ellipsis;}
.card.people .card-bottom{position:absolute;bottom:0;left:0;display:inline-block;width:100%;padding:10px 20px;line-height:29px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:#fff;}
.card.hovercard .cardheader{background:url("URL LINK BACKGROUND PICTURES YOUR GOOGLE PLUS PROFILE");background-size:cover;height:135px;}
.card.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px;}
.card.hovercard .avatar img{width:100px;height:100px;max-width:100px;max-height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid rgba(255,255,255,0.5);}
.card.hovercard .info{padding:4px 8px 10px;margin-bottom:5px;}
.card.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle;}
.card.hovercard .info .desc{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis;margin:0 25px;}
.card.hovercard .bottom{padding:0 20px;margin-bottom:17px;}
.btn{color:#fff;padding:6px 6px 6px 10px;border-radius:3px;margin-right:5px;}
.card .btn-gplus{background:#dd4b39;}
.card .btn-youtube{background:#ff0000;}
.card .btn-soundcloud{background:#ff6600;}
.card .btn-facebook{background:#3b5998;}
.card .btn-twitter{background:#55acee;padding-right: 10px;}

2. Continue to copy and paste the following HTML widget box JavaScript in your Blogger sidebar layout⇩

<div class='card hovercard'>
<div class='cardheader'>
</div>
<div class='avatar'>
<img alt='display picture' src='URL LINK PHOTO GOOGLE PLUS YOUR PROFILE' title='YOUR NAME'/>
</div>
<div class='info'>
<div class='title'>
<a href='https://plus.google.com/u/0/URL LINK USER YOUR GOOGLE PLUS' rel='author' target='_blank'>YOUR NAME</a>
</div>
<div class='desc'><a href='https://plus.google.com/u/0/URL LINK USER YOU GOOGLE PLUS' rel='author' target='_blank'>plus.google.com/id-google+</a></div>
<div class='desc'>YOUR BRIEF DESCRIPTION</div>
</div>
<div class='bottom'>
<a href='https://plus.google.com/u/0/URL LINK USER YOUR GOOGLE PLUS' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>
</a>
<a href='https://www.youtube.com/channel/URL LINK YOUR YOUTUBE CHANNEL' rel='nofollow' target='_blank'><i class='fa fa-youtube'/>
</a>
<a href='https://soundcloud.com/URL LINK YOUR SOUNDCLOUD CHANNEL' rel='nofollow' target='_blank'><i class='fa fa-soundcloud'/>
</a>
<a href='https://www.facebook.com/URL LINK YOUR FACEBOOK ACCOUNT' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>
</a>
<a href='https://twitter.com/URL LINK YOUR TWITTER ACCOUNT' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>
</a>
</div>
</div>

3. Save the JavaScript widget

4. Alhamdulillaah, tutorial is ready.