HTML codes for Styling Widgets in Blogger Website – Creative Blogger

Here are some HTML Codes you can use in your blogger website to make your blog look stylish. Create Styling Widgets in Blogger easily

Creative Home Button In Blogger 

This HTML code place a home Image as you are seeing in Yellow color.

Paste To get Home button like this In your blogger –

” <i class="fa fa-home" style="color:#ffe11b;"></i> Home “

How to Make Scroll down Menu in Navigation Bar – Blogger Nav-Bar Organiser

It’s so easy- 
Insert ” _ ” to the word to get a Side down option and ” __ ” to get one more right sider option for Sub-Option.

Make Instagram Account post Widget on Blogger Website

Paste this HTML Code into a Widget of Html Code Box

<div id=’instafeed’/>
<script type=’text/javascript’>//<![CDATA[
var feed = new Instafeed({
 get: ‘user’,
accessToken: ‘7321654061.1677ed0.48c9c28ca625449fb990300197a5993f’,
template: ‘<li><a href=”{{link}}” target=”_blank”><img src=”{{image}}” /><div class=”insta-likes”><div style=”display: table; vertical-align: middle; height: 100%; width: 100%;”><span style=”display: table-cell; vertical-align: middle; height: 100%; width: 100%;”>{{likes}} <i class=”fa fa-heart”></i><br/>{{comments}} <i class=”fa fa-comment”></i></span></div></div></a></li>’,
 resolution: ‘standard_resolution’

After that, you need to change User Id and access token for your Instagram Account.

First Make Account on Instagram Developers:

Instagram Developers Website 

Now uncheck the Manage Client > Manage > Security > Disable implicit OAuth option.

Find your Instagram User-Id Click on this link:

To get access token of Instagram Account:

Instagram.PixelUnion (click here) 


Make Stylish “Connect With Us” in Blogger 

As you are seeing ‘Connect With Us’ Section in the image, we will gonna make this with HTML codes. Copy and paste these HTML Codes to make this kind of stylish “Connect with us” tab. 

HTML Code For Styling Connect With Us in Blogger

Start Copy From Here 

<p style=”
margin-bottom: 10px;
“>Over 600,000+ Readers Get fresh content from FastBlog</p>
<ul class=”social-icons icon-circle list-unstyled list-inline”>

<li> <a href=”htts://”><i class=”fa fa-facebook”></i></a></li>

<li> <a href=”″><i class=”fa fa-google-plus”></i></a></li>

<li> <a href=””><i class=”fa fa-instagram”></i></a></li>

<li> <a href=””><i class=”fa fa-pinterest”></i></a></li>
<li> <a href=””><i class=”fa fa-twitter”></i></a></li>

<li> <a href=””><i class=”fa fa-youtube-play”></i></a></li>
.list-unstyled {
padding-left: 0;
list-style: none;
.list-inline li {
display: inline-block;
padding-right: 1px;
padding-left: 1px;
margin-bottom: 5px;
/*—- Genral classes end ——-*/

/*Change icons size here*/
.social-icons .fa {
font-size: 1.8em;
/*Change icons circle size and color here*/
.social-icons .fa {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

.social-icons.icon-circle .fa{
border-radius: 50%;
.social-icons.icon-rounded .fa{
.social-icons.icon-flat .fa{
border-radius: 0;
.social-icons .fa-adn{background-color:#504e54;}
.social-icons .fa-apple{background-color:#aeb5c5;}
.social-icons .fa-android{background-color:#A5C63B;}
.social-icons .fa-bitbucket,.social-icons .fa-bitbucket-square{background-color:#003366;}
.social-icons .fa-bitcoin,.social-icons .fa-btc{background-color:#F7931A;}
.social-icons .fa-css3{background-color:#1572B7;}
.social-icons .fa-dribbble{background-color:#F46899;}
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}
.social-icons .fa-flickr{background-color:#FF0084;}
.social-icons .fa-foursquare{background-color:#0086BE;}
.social-icons .fa-github,.social-icons .fa-github-alt,.social-icons .fa-github-square{background-color:#070709;}
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;}
.social-icons .fa-html5{background-color:#E54D26;}
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;}
.social-icons .fa-linux{background-color:#FBC002;color:#333;}
.social-icons .fa-maxcdn{background-color:#F6AE1C;}
.social-icons .fa-pagelines{background-color:#241E20;color:#3984EA;}
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;}
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-stack-exchange{background-color:#245590;}
.social-icons .fa-stack-overflow{background-color:#FF7300;}
.social-icons .fa-trello{background-color:#265A7F;}
.social-icons .fa-tumblr,.social-icons .fa-tumblr-square{background-color:#314E6C;}
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;}
.social-icons .fa-vimeo-square{background-color:#229ACC;}
.social-icons .fa-vk{background-color:#375474;}
.social-icons .fa-weibo{background-color:#D72B2B;}
.social-icons .fa-windows{background-color:#12B6F3;}
.social-icons .fa-xing,.social-icons .fa-xing-square{background-color:#00555C;}
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}

You Can Stop Copy Now.

Edit it According To you. Use It on your own risk.

[Total: 0    Average: 0/5]

Leave a Reply

%d bloggers like this: