- Social Media Subscriptions are the most important part of any blog or website. It helps you to form a community or relation with your blog followers. It lets your visitors to give feedback or ask any question on you blog post in form of comments.
- You may customize the widget according to color scheme of your blog template. So, let's get started.
Step - 1
- Login to your Blogger account, then go to Theme > Edit HTML.
Step - 2
- Click anywhere inside the Theme code, then search for the following code:
</head>
Step - 3
- Paste the below given code just above it
- <linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css">
- Click Save
Step - 4
- First go to "Layout" page of your blog.
- Click on "Add a Gadget" link from sidebar section or other where you want to appear recent comments widget.
- Select "HTML/JavaScript" widget.
STYLE 1
<style>
.rss-mbt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJ4hjpTwsExaVeBFC6slmULohUVXJEadjKUuLHakFzufhlptsR4sJ5iB6SJWaNKlufnkTXaPPKxxw3U1PkG3NJLXH3bn3wUBzYzeWVtQHHNuhVGXxDgkTlPGJ-ckEiu7etUn2Io3lvxM/s800/RSS1.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 20px;
}
.twitter-mbt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZtsQusXiqANr6ewAAIzOwMENZoRTBUz7Jov8y10bFAI2Piwv-4BPAWOeS1Y8o9kK8cbeLGKUOJTvtC8FvYk-NriRmMC4UKt5BK8PmCvMahvBoveX4KWYi5072WBu6LCj9pYuwBp7VWf0/s800/TWITTER1.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 20px;
}
.facebook-mbt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qAzWkGKTDW4gT98hB5bQl-bKQkEeh5F5bWVPg9ncH3R4vj-D_o5jWBWq4DIyZIAdScG8w3GFj7kyNLhoV2U7b4NHL-fytcrTTXXExbF78FeGpGLOBUpLA9NGwvjsXC8H9kL4qAhYZIE/s800/FACEBOOK1.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 20px;
}
.follower-rss, .follower-twitter, .follower-facebook {
font-family: Georgia, sans-serif, Times;
font-size: 1.1em;
font-style:italic;
color:#289728;
}
.follower-rss span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#FFB93C;
}
.follower-twitter span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#6DB6E6;
}
.follower-facebook span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#3889BA;
}
</style>
<div class="rss-mbt">
<div class="follower-rss"> <span>515</span> loyal readers
</div>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=tnpschouters/TMdh" rel="nofollow">RSS feed</a>
| <a href="https://feedburner.google.com/fb/a/mailverify?uri=tnpschouters/TMdh" target="_blank" rel="nofollow">E-mail</a>
</div>
<div class="twitter-mbt"><div class="follower-twitter"><span>1058</span> followers</div>
<a href="http://twitter.com/blogangle" target="_blank" rel="nofollow" title="I definitely follow you back">Follow us on Twitter!</a>
</div>
<div class="facebook-mbt">
<div class="follower-facebook"><span>2600</span> followers </div>
<a href="https://www.facebook.com/100087050014577/" target="_blank" rel="nofollow">Join us on Facebook!</a>
</div>
STYLE 2
<style>
#hbzsub {
background-color: #1E293B;
max-width: 300px;
margin: auto;
}
#hbzsub .hbzsignup-form {
padding: 20px 0;
}
#hbzsub .hbzform-inner {
margin-bottom: 20px;
}
#hbzsub .hbzform-inner h4 {
color: #fff;
text-align: center;
padding: 0;
margin: 0;
font-size: 18px;
font-weight: bold;
}
#hbzsub .hbzemailform {
width: 90%;
margin: auto;
font-size: 90%;
}
#hbzsub #subscribe {
display: flex;
}
#hbzsub .hbzemailbox {
background-color: #FFF;
border: 1px solid #FFF;
border-radius: 7px 0px 0px 7px;
padding: 6px;
display: inline-flex;
width: 60%;
}
#hbzsub .hbzemailbutton {
background-color: #F0553B;
border: 1px solid #F0553B;
color: #FFF;
border-radius: 0px 7px 7px 0px;
padding: 6px;
width: 40%;
display: inline-flex;
}
#hbzsub .hbzemailbutton:hover {
background-color: #1E293B;
border: 1px solid #FFF;
box-shadow: 0 0 5px #ddd;
}
#hbzsub .social-hbz ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#hbzsub .social-hbz ul li {
list-style: none;
width: 33.334%;
display: inline-flex;
padding: 0;
margin: 0;
}
#hbzsub .social-hbz a {
color: #fff;
display: flex;
flex: auto;
padding: 30% 0;
justify-content: center;
font-size: 30px;
text-decoration: none;
}
#hbzsub .social-hbz.norms a {
background: transparent !important;
color: #fff !important;
}
#hbzsub .social-hbz.norms a:hover {
opacity: 0.8;
}
#hbzsub .social-hbz ul li {
width: 16.666666666666668%
}
#hbzsub .social-hbz a.facebook {
background-color: #32528c;
}
#hbzsub .social-hbz a.youtube {
color: #f70000;
background-color: #fff;
}
#hbzsub .social-hbz a.twitter {
background-color: #50abf1;
}
#hbzsub .social-hbz a.instagram {
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
#hbzsub .social-hbz a.pinterest {
background-color: #df0022;
}
#hbzsub .social-hbz a.rss {
background-color: #ef8021;
}
</style>
<div id='hbzsub'>
<div class='hbzsignup-form'>
<div class='hbzform-inner'>
<h4>Get Posts in your inbox</h4>
</div>
<div class='hbzemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value=''/>
<input name='loc' type='hidden' value='en_US'/>
<input class='hbzemailbox' name='email' required='' type='text' placeholder='myname@howbloggerz.com'/>
<input class='hbzemailbutton' type='submit' value='Sign Up'/>
</form>
</div>
</div>
<div class="social-hbz">
<ul>
<li><a class="facebook" href="100087050014577" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="youtube" href="blogangle" target="_blank"><i class="fab fa-youtube"></i></a></li>
<li><a class="twitter" href="blogangle" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a class="instagram" href="blogangle" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a class="pinterest" href="blogangle" target="_blank"><i class="fab fa-pinterest-p"></i></a></li>
<li><a class="rss" href="blogangle" target="_blank"><i class="fas fa-rss"></i></a></li>
</ul>
</div>
</div>
Step - 8
- Make following changes to the above code.
- Replace Ur RSS, Twitter, Instagram, Pinterest, Youtube & Facebook with your URL that highlights in Red Color.
- Save it and you will have Stylish Social Media Widget on your blog.
0 Comments