Showing posts with label Blogger Widgets. Show all posts
Showing posts with label Blogger Widgets. Show all posts

How to add responsive search box for Blogger?

How to add responsive search box for Blogger?

Here, I am going to show you that how to add a responsive and good looking search box for your blogger website. This search box is totally based on HTML and CSS language. This responsive search box is suitable for Blogspot website.

Add responsive custom search box for Blogger

Code link of search box for Blogger

http://codepad.org/npegLX7n
After watching this video. You can easily setup a custom CSS search box for your Blogspot website. Hope, you will like this video. Thank you!

How to add responsive custom contact form on Blogger?

Custom contact form for blogger blogspot. How to add responsive custom contact form on Blogger? Awesome contact form for Blogger / Blogspot. Useful Blogspot widgets.

Responsive and stylish custom contact form for Blogger (Blogpsot)

Hello! bloggers, what's going on. Today I am going to share a stylish and responsive contact form for your blog website. As we know that contact form plays very important role to engage with your visitors on your blog. Because whenever any visitor visits on your blog and if any kind of problem occurs. Then he/she can write his/her problem on contact form. It is a very useful and recommended for all bloggers.

How to setup this contact form on your blog?

  • Go to "Theme" section on your blog.
  • Click on "Edit HTML".
  • Press CTRL + F key.
  • Find this line ]]></b:skin>
  • Paste this code #ContactForm1{display: none !important;} above the ]]></b:skin>
  • Now go to "Pages" section on your blog.
  • Create a new page with name of contact us.
  • Click on HTML tab.
  • Copy the below codes and paste inside the HTML box.
1
2
3
4
5
<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;}
</style>

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><hr><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

  • After pasting above code. Click on publish button.
  • You are done! 
If any kind of problem related with contact form setup on your blog. Please comment below. Thank you!

Colorful responsive email subscription box for Blogger

How to add colorful responsive email subscription box on Blogger?

How to add colorful responsive email subscription box on Blogger? Colorful responsive email subscription box for Blogger.
Hello, Bloggers! Here I am going to share a simple responsive Blogger Email subscription box widget/gadget with name and email form section. Through which people can subscribe your blog to get your latest updates of your blog post through Email notifications. This widget/gadget is quite responsive and is also great in appearance. You should use this widget/gadget.

Script codes to setup Email subscription box on your blog


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<style>
#twist-blogger-sbox {
  padding: 0;
  margin: 0;
  width: 100%; /*---- Change width here - You can use pixels or in percentage -----*/
  height: 355px;
  border-radius: 1px;
  border: 0;
  background: #3A3939; /*------ Change background color of widget here--------*/
}
#twist-blogger-sbox .tagline {
  padding: 5px 0px 0px 0px;
  line-height: 35px;
  height: 45px;
  font-size: 25px; /*----- Change the Font Size of Main Tagline here -----*/
  font-weight: normal;
  font-family: "Oswald",sans-serif;
  text-shadow: 0px -1px 0px #999;
  color: #FFF;
  text-align: center;
  background: #FF7400; /*---- Change background color of Tagline here -----*/
  border: 5px solid #FD6A00;
  border-bottom: 7px solid transparent;
  border-bottom-left-radius: 50px;
}
#twist-blogger-sbox .sub-tagline {
  font-family: "Oswald", sans-serif;
  font-size: 19px;      /*--Sub Tagline Font Size - Change here ---*/
  color: #FFF;
  text-shadow: 0px -1px 0px #000;
  line-height: 30px;
  padding: 0px 10px 0px 10px;
  text-align: center;
  margin: 0;
}
#twist-blogger-sbox .item-list {
  margin: 10px 0px 0px 0px !important;
}
#twist-blogger-sbox .item-list > ul {
  padding: 0px 0px 0px 50px !Important;
  margin: 0 !important;
}
#twist-blogger-sbox .item-list > ul > li {
  font-family: "Oswald", sans-serif;
  font-size: 15px; /*----- Change Font Size of List here ------*/
  margin-left: 10px;
  color: #E8E8E8; /*------ Change font color of List here ----*/
  line-height: 24px;
  text-align: left;
  text-shadow: 0px -1px 0px #000;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0px !important;
  padding: 0px !important;
  border: 0 !important;
}
#twist-blogger-sbox .rssform {
  padding: 0px 20px;
  margin: 16px 0px 16px 0px;
}
#twist-blogger-sbox .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: "Oswald", sans-serif;
  font-weight: normal;
  width: 100%;
  text-transform: uppercase;
  outline: none !important;
  border: none;
  border-radius: 1px;
  box-sizing: border-box !important;
  -moz-box-sizing:border-box;
}
#twist-blogger-sbox .rssform .button:hover {
  background: #ED6D00; /*----- Change Subscribe button hover color here -----*/
}
#twist-blogger-sbox .rssform .button {
  background: #FF7400; /*----- Change Subscribe button background color here -----*/
  color: #FFF!important; /*------ Change Font color here ------*/
  border: 0;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  width: 100%;
  padding: 6px !important;
  float: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox .lock-policy a {
  color:#818181;
  text-decoration:none !Important;
}
#twist-blogger-sbox .lock-policy {
  font-family: "Oswald",sans-serif;
  background: url(http://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/s1600/Lock-twistblogger.png) no-repeat 10px -2px; /*--- image URL of Lock appears in footer ---*/
  color: #818181;
  text-align: center;
  font-size: 12px; /*--- Font size of footer line ----*/
  margin-left: 10px;
  padding: 0px;
  line-height: 30px;
  margin-top: -5px;
}
</style>
<div id='twist-blogger-sbox'>
            <div class='tagline'>
            Wait! Did You Know?
            </div>
                <div class='sub-tagline'>Why should you subscribe?</div>
    <div class="item-list">
    <ul>
    <li><div style='color: #FF5700; display: inline-block; font-size:17px; letter-spacing: 4px;'>&#10004;</div> Free Photoshop .PSD Templates</li>
    <li><div style='color: #FFE800; display: inline-block; font-size:18px; letter-spacing: 4px;'>&#10004;</div> Adobe Illustrator Tutorials</li>
    <li><div style='color: #FF5700; display: inline-block; font-size:19px; letter-spacing: 4px;'>&#10004;</div> 3D Animation Tutorials</li>
    <li><div style='color: #FFE800; display: inline-block; font-size:20px; letter-spacing: 4px; letter-spacing: 4px;'>&#10004;</div> Straight into your &#8594; INBOX</li>
    </ul>
    </div>
            <div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtolearnblogcom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' name='email' placeholder='Enter your email address...' />
            <input type="hidden" value="howtolearnblogcom" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Subscribe Now" class="button" type="submit" />
            </form>
            </div>
   <div class="lock-policy">
     Powered by <a href='http://www.howtolearnblog.com' rel='dofollow' target='_blank'>How To Learn Blogging</a>
   </div>
            </div>

How to setup subscribe box for Blogger (Blogspot)?

Follow these steps:
  • Replace all the yellow marked name with your blog feed name.
  • Paste this code on a sidebar of your blog.
  • Go to Theme section on your blog.
  • Click on Add Gadgets on a sidebar. 
  • Select HTML/JAVASCRIPT

  • Modify and Copy the above codes.
  • Put the final code on HTML/Javascript box.

I hope everything is clear. If you have any kind of problem regarding to setup subscribe box on Blogger's blog. Then, Please write your problem below on comment box.

Responsive Email Subscription Box for Blogger

How to add responsive email subscription box on Blogger?

Responsive Simple Email subscription box for blogger.

Hello Bloggers! Here I am going to share a simple responsive Blogger Email subscription box widget/gadget with name and email form section. Through which people can subscribe your blog to get your latest updates of your blog post through Email notifications. This widget/gadget is quite responsive and is also great in appearance. You should use this widget/gadget.

Script codes to setup Email subscription box on your blog

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<style>
#bgt-subscribe-box .header{
background: none ;
color: #a333333;
font-size: 28px;
line-height: 36px;
padding: 15px 25px;
font-weight: 700;
font-family: open sans;
text-align: center;
}
#bgt-subscribe-box {
width:auto;
height:auto;
background:#ffffff;
}
#bgt-subscribe-box p {
font-family:'Open Sans';
font-size:13px;
color:#888;
line-height:20px;
padding:10px 20px 0 20px;
margin:0;
}
#bgt-subscribe-box .bgt-emailfield {
padding:0px 20px 10px;
}
#bgt-subscribe-box .bgt-emailfield input {
background:#fff;
color:#bbb;
padding:10px;
margin-top:10px;
font-size:13px;
font-family:'Open Sans';
width:91%;
border:0;
border:1px solid #ccc;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield input:focus {
outline:none;
border:1px solid #d9d9d9;
color:#888;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton {
background:#0098d3;
color:#fff!important;
text-transform:uppercase;
font-weight:bold;
border:none;
outline:none;
width:100%;
cursor:pointer;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:active {
outline:none;
border:none;
background:#444;
color:#fff;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:hover{
background:#333333;
color:#fff;
}
</style>
<div id='bgt-subscribe-box'>
             <div class='bgt-emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtolearnblogcom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == "") {this.value = "Enter Your Name";}' onfocus='if (this.value == "Enter Your Name") {this.value = "";}' value='Enter Your Name'/>
               <input type='text' name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address";}' onfocus='if (this.value == "Enter Your Email Address") {this.value = "";}' value='Enter Your Email Address'/>
<input name='uri' type='hidden' value='howtolearnblogcom'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='bgt-submitbutton' type='submit' value='Subscribe Now!'/>

              </form>
</div></div>

How to setup subscribe box for Blogger (Blogspot)?

Follow these steps:
  • Replace all the yellow marked name with your blog feed name.
  • Paste this code on sidebar of your blog.
  • Go to Theme section on your blog.
  • Click on Add Gadgets on sidebar. 
  • Select HTML/JAVASCRIPT

  • Modify and copy the above codes.
  • Put the final code on html/javascript box.

I hope everything is clear. If you have any kind of problem regarding to setup subscribe box on Blogger's blog. Then, Please write your problem below on comment box.

Responsive Subscribe Box with Social Icons for Blogger

Add Responsive Subscribe Box with Social Icons for Blogger(Blogspot)


Hello Bloggers! Here I am going to share a simple responsive Blogger subscribe box widget/gadget with social links icons and Email filling box. From which people can subscribe your blog to get your latest updates of your blog post through their Email notifications. This widget/gadget is quite responsive and is also great in appearance. You must use this widget/gadget.

Script and codes to setup subscribe box on your Blogger blog

<style type="text/css">
div.subscribe{width:100%; padding:15px 0; height:80px}
#bor-social{background: #FFFFFF; border: 1px solid #E6E6E6; margin: 0 0 20px;}
.subscribe{border-bottom: 1px solid #E6E6E6;padding:15px 0;}
.subscribe li a{display: block; float: left; line-height: 1.3; margin: 0 2px 0 0; padding: 38px 0 0 2px; width: 64px;  text-align:center; color: #777777; font-size: 11px;}
.subscribe ul{list-style:none;}
.subscribe li {margin: 0 auto 0;padding: 0px;border: none;}
.subscribe a{padding:40px 11px 0px 0px; display: block;}
.subscribe a:hover {opacity:0.8;}
#subscribe-icon li{font-size: 11px; margin: 0 2px 5px 2px; width: 52px; text-align: center;height: 42px;display:inline;float:left;}
.subscribe .sub-google a{background: url(http://1.bp.blogspot.com/-lC9AgvCg208/UxDjlzEVdDI/AAAAAAAACSQ/6VNDJSyNM_Y/s1600/ico-google.png) no-repeat 13px 0;}
.subscribe .sub-twitter a{background: url(http://1.bp.blogspot.com/-NB2cMSawG8o/UxDjn7IaE7I/AAAAAAAACSg/cOC-YMt_Mtg/s1600/ico-twitter.png) no-repeat 15px 0;}
.subscribe .sub-facebook a{background: url(http://3.bp.blogspot.com/-G4_BfjWP96s/UxDjm8r6eRI/AAAAAAAACSY/2rV1MJlKoe0/s1600/ico-facebook.png) no-repeat 15px 0;}
.subscribe .sub-rss a{background: url(http://1.bp.blogspot.com/-2jhfGbPuYho/UxDjlNGxPFI/AAAAAAAACSI/qQy51oqO2g4/s1600/ico-rss.png) no-repeat 16px 0;}
.subscribe .sub-email a{background: url(http://2.bp.blogspot.com/-GcCWYpIpUHc/UXp2e30KdQI/AAAAAAAAA2c/8ilWCLWMWUQ/s1600/icon-email.png) no-repeat 0 0;}
.linked {width:100%; cursor: auto;}
.linked form { margin:0; padding:0;}
.linked p.intro {font-size: 14px; line-height: 1.5; color:#000; padding:10px 20px 0; margin:0 0 5px; font-weight:bold;}
.linked a{ color:#777 !important;}
.linked p.feed { margin:0 10px 0 18px; font-size:12px; color:#777777; }
.form-go{ background: url(http://3.bp.blogspot.com/-wTLtzwr6Z7w/UXpe75Yi78I/AAAAAAAAA1k/TkaF6yr7AWA/s1600/alert-overlay.png); color: #2C2F32; margin-left: 10px; height: 29px; padding: 0px 6px; border: 1px solid #ddd; cursor: pointer; margin-bottom: 9px;moz-border-radius: 5px; width:67px; margin-left:0px;
-webkit-border-radius: 5px; text-shadow: 1px 1px 0 #fff;}
.form-go:hover{opacity: 0.8;}            </style>
      
    <div id='bor-social'>
<div class='subscribe'>
<ul>
<!-- Social Profile Icons -->
<li class='sub-google'><a href='
YOUR-GOOGLE+-URL' rel='nofollow' target='_blank'>Google+</a></li>
<li class='sub-twitter'><a href='
YOUR-TWITTER-URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='sub-facebook'><a href='
YOUR-FACEBOOK-URL' rel='nofollow' target='_blank'>Facebook</a></li>
</ul>
</div><div class='clear'/>
<div class='linked'>
<p class='intro'>E-mail Newsletter</p>
<p class='feed'>Receive Latest Posts from CB Blogger Straight in Your Email Inbox</p>
<!-- Configure Subscribe Form -->
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=howtolearnblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:8px 3px 12px 15px; margin:0 0 0 3px;' target='popupwindow'>
<p><input class='form-subscibe' name='email' placeholder='E-mail' style='width:160px;border-color: #ccc #efefef #efefef #ccc; border-width: 1px; border-style: solid; color: #777; padding: 6px 6px 6px 10px;' type='text'/>
<input name='uri' type='hidden' value='
howtolearnblog'/><input name='loc' type='hidden' value='en_US'/>
<input class='form-go' type='submit' value='Submit'/></p></form>
</div></div>
<div class='clear'/></div></div>

How to setup subscribe box for Blogger (Blogspot)?

Follow these steps:
  • Replace all the yellow marked name and URL with your blog feed name.
  • The paste this code on sidebar of your blog.
  • Go to Theme section on your blog.
  • Click on Add Gadgets on sidebar. 
  • Select HTML/JAVASCRIPT

  • Modify and copy the above codes.
  • Put the final code on html/javascript box.


Watch here video tutorial


I hope everything is clear. If you have any kind of problem regarding to setup subscribe box on Blogger's blog. Then, Please write your problem below on comment box.

Add responsive author box on Blogger post

Add simple light blue author box on Blogger post

How to add simple author box widget below on Blogger's post? Author box widget for Blogger. Blogspot author box widget codes. Best responsive and simple author box widget for Blogger's blog.
Hello Bloggers! Welcome back on HowToLearnBlog. Here, I am going to share a simple light blue author box blogger widget to setup your author box, below to the every post of your blog. As we know that author box plays very important role to promote your identity and your contents on your blog. So let's go to set up a simple and responsive Author box for your blogger blog.

Follow these instructions to setup simple and responsive light blue author box widget below every posts of Blogger

  • Log on www.blogger.com 
  • Click on Layout 
  • Click on "Add a Gadget" just below of post (main) block.

  • Select HTML/JAVASCRIPT

  • Modify the below codes.
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    <style type="text/css">
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
.authorboxwrap{margin:auto;padding:20px;overflow:hidden}
.avatar-container{background:rgba(0,0,0,.03);float:left;padding:7px;margin:0 20px 0 0;border:1px solid rgba(0,0,0,0.05)}
.avatar-container amp-img{width:90px;height:auto;max-width:100%!important;transition:all .3s}
.author_description_container h4{font-size:18px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#30373c}
.author_description_container p{margin:0;font-size:14px;margin-bottom:8px;line-height:22px;font-weight:400}
.author_description_container p a{color:#3498db;}.author_description_container p a:hover{color:#30373c;text-decoration:underline}
.social-links li{list-style:none!important;float:left}
.social-links a{border-bottom:none}
.social-links a:after,.social-links a:before{content:none!important}
.social-links li a{background:#3498db;color:#fff;font-size:12px;text-align:center;display:inline-block;padding:10px 5px;margin:0 10px 0 0;width:32px;border-radius:5px}
.social-links li a:hover{background:#34495e;color:#fff;}</style>

<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img alt='Author Name' class='author_avatar' height='90' src='http://2.bp.blogspot.com/-_0qyTMr2uYI/VIuQL9jbCDI/AAAAAAAAH2U/vPhwdobq9NE/s1600/Userava.png' title='Author Name' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'>Author Name</a>
<i class='fa fa-check-circle' style='color:#3498db;font-size:16px;margin:0 0 0 3px' title='Verified Author'></i></h4>
<p>
Blog ini dibuat atas ketertarikan dan minat kami dengan website dan juga sebagai media sosial berbagi Info Menarik serta Hiburan lainnya.<b></b>
</p>
<span class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'></i></a></li>
</span>
</div>
</div>
</div>
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
  • Replace yellow marked image URL with your image URL.
  • Replace yellow marked Author Name with your name.
  • Replace yellow marked author description details with your details.
  • After replacing codes. Put the final code on html/javascript box.

  • After pasting your codes. Click on Save button.

Final touch for setting Author box on Blogger's blog.

I hope everything is clear. If you have any kind of problem regarding to setup author box on Blogger's blog. Then, Please write your problem below on comment box.