Here's how you can add a customised author bio widget in blogger blogs. This widget is a must have for all blogs/websites. On the author bio widget are social media follow buttons that your blog readers can easily connect with your blog and get updates after subscribing. Also, details about the author and image of the author are displayed, allowing your readers to know you a little better. Putting in a little effort in customizing your author bio box widget to make it look better can be quite rewarding.
Also Read: Social Follow and Subscription Widget For Blogger
Facebook Popup Like Box With Timer For Blogger
Add Different Background Image In Specific Blogger Page
Static Facebook Popup Like Box Widget For Blogger
How to Add IP Widget In Blogger Blogs
Note:You can remove the existing 'about me' widget o your blog before adding this one.
Also Read: Social Follow and Subscription Widget For Blogger
Facebook Popup Like Box With Timer For Blogger
Add Different Background Image In Specific Blogger Page
How to Add Cutomised Author Bio Widget In Blogger
- Goto your blog's 'layout'
- Click on 'add a gagdet'
- Select 'HTML/Javascript'
- Copy the Code below and paste in the field.
href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'/>
.wgauthr-widget {
background:#fff;
background-color:#fff;
overflow:hidden;
position:relative;
margin-bottom:30px;
padding:10px 26px;
}
.wg-crnrbckgr:before {
content:"";
position:absolute;
top:0;
right:0;
z-index:40;
background:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
display:block;
width:0;
border-color:#fff #eee #fff #fff;
border-style:solid;
border-width:0 16px 16px 0;
}
.wg-crnrbckgr {
position:relative;
background-color:#47C2DC;
height:90px;
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg
img {
height:80px;
width:80px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo
span {
display:block;
letter-spacing:1px;
text-transform:uppercase;
}
.wg-avtlninfoaa {
font-size:14px;
line-height:21px serif,font-weight:normal,color:#666;
padding:22px 25px 8px;
}
.dwnlin {
margin-top:6px;
text-align:center;
border-top:2px solid #eee;
padding:8px 25px;
}
.wgauthr-widget.wgathrlns {
background:#fff;
margin-bottom:30px;
padding:0;
}
.wg-golblue {
width:100%;
height:50px;
padding:0 0 0 30px;
}
.wg-goliconn {
background:#47C2DC;
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}
.wg-goliconn:hover {
background:#ddd;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.wg-goliconn img {
padding-top:5px;
padding-left:5px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg,.wgavtrg {
position:absolute;
bottom:-20px;
left:30px;
border-radius:50%;
overflow:hidden;
background-color:#fff;
border:5px solid #fff;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo,.wgavtinfo {
padding-left:130px;
padding-top:46px;
color:#fff;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurnaam,.wgurnaam {
font-size:14px;
line-height:16px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurju,.wgurju {
font-size:10px;
}
class="wgauthr-widget wgathrlns"> class="wg-crnrbckgr" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliVVRXRijWwxehZhr6_GHPWaY2SUvr3J21RVHXnG8Wc6OwoUS6B96TTJXWe03907b-Xs1wr_-2xANdXMRmvUZu-ajpCmCGZ0AyeWvJnGb23jN6fnQ7lcR7HhBQVtYuKAf6ArvPiHS_AUv/s1600/authorbck.jpg)">
class="wgavtrg">
alt="YOUR NAME" src="YOUR IMAGE URL" /> class="wgavtinfo"> class="wgurnaam">YOUR NAME
class="wgurju">BRIEF DETAILS ABOUT YOU class="wg-avtlninfoaa">BRIEF DESCRIPTION OF YOUR BLOG. class="dwnlin">
class='wg-golblue'>
- Customise the highlighted text in code above by adding your social media usernames and ID.
- Also add details about you and the URL of your image.
- Save the widget.
Static Facebook Popup Like Box Widget For Blogger
How to Add IP Widget In Blogger Blogs
Note:You can remove the existing 'about me' widget o your blog before adding this one.
Here's how you can add a customised author bio widget in blogger blogs. This widget is a must have for all blogs/websites. On the author bio widget are social media follow buttons that your blog readers can easily connect with your blog and get updates after subscribing. Also, details about the author and image of the author are displayed, allowing your readers to know you a little better. Putting in a little effort in customizing your author bio box widget to make it look better can be quite rewarding.
Also Read: Social Follow and Subscription Widget For Blogger
Facebook Popup Like Box With Timer For Blogger
Add Different Background Image In Specific Blogger Page
Static Facebook Popup Like Box Widget For Blogger
How to Add IP Widget In Blogger Blogs
Note:You can remove the existing 'about me' widget o your blog before adding this one.
Also Read: Social Follow and Subscription Widget For Blogger
Facebook Popup Like Box With Timer For Blogger
Add Different Background Image In Specific Blogger Page
How to Add Cutomised Author Bio Widget In Blogger
- Goto your blog's 'layout'
- Click on 'add a gagdet'
- Select 'HTML/Javascript'
- Copy the Code below and paste in the field.
href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'/>
.wgauthr-widget {
background:#fff;
background-color:#fff;
overflow:hidden;
position:relative;
margin-bottom:30px;
padding:10px 26px;
}
.wg-crnrbckgr:before {
content:"";
position:absolute;
top:0;
right:0;
z-index:40;
background:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
display:block;
width:0;
border-color:#fff #eee #fff #fff;
border-style:solid;
border-width:0 16px 16px 0;
}
.wg-crnrbckgr {
position:relative;
background-color:#47C2DC;
height:90px;
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg
img {
height:80px;
width:80px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo
span {
display:block;
letter-spacing:1px;
text-transform:uppercase;
}
.wg-avtlninfoaa {
font-size:14px;
line-height:21px serif,font-weight:normal,color:#666;
padding:22px 25px 8px;
}
.dwnlin {
margin-top:6px;
text-align:center;
border-top:2px solid #eee;
padding:8px 25px;
}
.wgauthr-widget.wgathrlns {
background:#fff;
margin-bottom:30px;
padding:0;
}
.wg-golblue {
width:100%;
height:50px;
padding:0 0 0 30px;
}
.wg-goliconn {
background:#47C2DC;
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}
.wg-goliconn:hover {
background:#ddd;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.wg-goliconn img {
padding-top:5px;
padding-left:5px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg,.wgavtrg {
position:absolute;
bottom:-20px;
left:30px;
border-radius:50%;
overflow:hidden;
background-color:#fff;
border:5px solid #fff;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo,.wgavtinfo {
padding-left:130px;
padding-top:46px;
color:#fff;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurnaam,.wgurnaam {
font-size:14px;
line-height:16px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurju,.wgurju {
font-size:10px;
}
class="wgauthr-widget wgathrlns"> class="wg-crnrbckgr" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliVVRXRijWwxehZhr6_GHPWaY2SUvr3J21RVHXnG8Wc6OwoUS6B96TTJXWe03907b-Xs1wr_-2xANdXMRmvUZu-ajpCmCGZ0AyeWvJnGb23jN6fnQ7lcR7HhBQVtYuKAf6ArvPiHS_AUv/s1600/authorbck.jpg)">
class="wgavtrg">
alt="YOUR NAME" src="YOUR IMAGE URL" /> class="wgavtinfo"> class="wgurnaam">YOUR NAME
class="wgurju">BRIEF DETAILS ABOUT YOU class="wg-avtlninfoaa">BRIEF DESCRIPTION OF YOUR BLOG. class="dwnlin">
class='wg-golblue'>
- Customise the highlighted text in code above by adding your social media usernames and ID.
- Also add details about you and the URL of your image.
- Save the widget.
Static Facebook Popup Like Box Widget For Blogger
How to Add IP Widget In Blogger Blogs
Note:You can remove the existing 'about me' widget o your blog before adding this one.
No Comment