How To Add Together Iv Inwards I Box Social Media Widget Inwards Blogger

Hello folks, today inward this article nosotros are going to explicate How to add together four inward ane boxed means social media widget inward blogger template.This widget is real useful for the whatever website or blog.In box social media profile gadget nosotros bring added three social media Facebook , twitter in addition to google plus in addition to additionally nosotros bring added department for bring together our site plugin to follow the blogspot website.Box four inward one social media is real light weight widget amongst the integration of the font awesome icons on it.We bring used CSS for styling in addition to html for the box.Box social media widget volition sure enough going to heighten the hold off of whatever website.In guild to larn the four inward ane boxed social media widget follow the steps mentioned below.

DEMO

See the Pen BOXED means social media widget for blogger template past times (@bloggersstand) on CodePen.

How to Install four inward ane box social media widget inward blogger template

Installation Steps:

Step 1. Log inward to your Blogger work concern human relationship in addition to Go to your Blogger Dashboard.

Step 2. Now Click on  Template -> Edit HTML.

Step 3. Now Search for </head> tag past times Pressing Ctrl+F keys.

Step 4. Copy the below Fontawesome CSS stylesheed in addition to glue it simply earlier the </head> tag.( If you lot already added fontawesome stylesheet thus skip fourth step.)

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Step 5. Now Search for ]]></b:skin> or </style> past times Pressing Ctrl+F keys.
Step 6. Copy the below CSS code in addition to glue it simply earlier the ]]></b:skin> or </style> tag.

 #HTML20 .bsdbox-info h4 {   background: transparent;   position: relative;   padding: 0;   margin: 0;   border: 0;   text-align: center;   font-size: 110% }  .bsdbox-img {   position: relative;   max-height: 135px;   overflow: hidden }  .bsdbox-img img {   max-width: 100%;   width: 100%;   transition: all .6s; }  .bsdbox-img:hover img {   transform: scale(1.2) rotate(-9deg) }  .bsdbox-img:before {   content: '';   background: rgba(0, 0, 0, 0.2);   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   z-index: 2;   transition: all .3s }  .bsdbox-img:hover:before {   background: rgba(0, 0, 0, 0.5); }  .joinfloat-img {   width: 56%;   position: absolute;   top: 36%;   bottom: 36%;   left: 22.6%;   z-index: four }  .bsdbox-float {   text-align: center;   display: table;   width: 100%;   height: 100% }  .bsdbox-float a {   background: transparent;   color: #37B185;   padding: 8px 14px;   z-index: 2;   display: table-cell;   width: 100%;   font-size: 90%;   text-transform: uppercase;   vertical-align: middle;   border: 1px enterprise #37B185;   border-radius: 4px;   transition: all .3s }  .bsdbox-float:hover a {   background: #37B185;   color: #fefefe;   border-color: transparent; }  .bsdbox-float a i {   font-weight: normal;   margin: 0 6px 0 0 }  .bsdbox-wrap {   display: block;   margin: 14px auto;   position: relative; }  .bsdbox-wrap .bsdextend {   width: 100%;   display: block; }  .bsdextend {   text-align: center;   font-size: 17px }  .bsdextend .bsdbox-icon {   display: inline-block;   border: 0;   margin: 0;   padding: 0;   width: 32%; }  .bsdextend .bsdbox-icon a {   background: #768187;   display: inline-block;   font-weight: 410;   color: #fefefe;   padding: 0 12px;   line-height: 32px;   border-radius: 4px;   font-size: 11px;   width: 100%; }  .bsdextend .bsdbox-icon i {   font-family: fontawesome;   margin: 0 4px 0 0 }  .bsdbox-icon.facebook a {   background: #3b5998 }  .bsdbox-icon.twitter a {   background: #19bfe5 }  .bsdbox-icon.circle a {   background: #d64136 }  .bsdbox-icon.facebook a:hover, .bsdbox-icon.twitter a:hover, .bsdbox-icon.circle a:hover {   background: #415471 }  .bsdextend .bsdbox-icon:hover a, .bsdextend .bsdbox-icon a:hover {   color: #fefefe; }  .bsdbox-info {   margin: 11px 0 0 0;   font-size: 12px;   text-align: center; }  .bsdbox-info p {   margin: 6px 0 }  .bsdbox-info h4 {   position: relative;   margin-bottom: 11px;   font-size: 15px;   text-transform: uppercase;   color: #37B185;   font-weight: 600 }  .bsdbox-info h4 bridge {   position: relative;   display: inline-block;   padding: 0 11px;   margin: 0 auto; }  .bsdbox-info h4:before, .bsdbox-info h4:after {   position: absolute;   top: 52%;   overflow: hidden;   width: 50%;   height: 1px;   content: '\a0';   background-color: rgba(0, 0, 0, 0.07); }  .bsdbox-info h4:before {   margin-left: -50%;   text-align: right; } 

Step 7. Now re-create the below HTML code in addition to glue it betwixt <body> - </body> tag.

<b:widget id='HTML20' locked='false' title='Join us' type='HTML' visible='true'>         <b:includable id='main'>   <!-- alone display championship if it's non-empty -->   <b:if cond='data:title != &quot;&quot;'>     <h2 class='title'><data:title/></h2>   </b:if>  <div class="widget-content">   <div class="author-sidebar">     <div class='inner_wrapper'>       <div class='bsdbox-img'>         <img alt='Bloggersstand' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidAsKkSMMzxO3bYNins-k5QmEPqd72ByoiyRRK_6RmIIKatNcpoiOAQkM-IMQ21JS61yeVpdpkZbzz02oboZmuc5j87cohdlUo930EbL0yDQt5pXZMj0xsAV-Vd-hJnDb9nHEPpRGkrYE/s1600/subscribe+to+bloggersstand+feed.jpg' title='Bloggersstand' width='300' ></img>         <div class='joinfloat-img'><span class='bsdbox-float'><a href='https://www.blogger.com/follow-blog.g?blogID=8771880403313863692' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-laptop'></i> Join Our Site</a></span></div>       </div>     </div>     <div class='bsdbox-info'>       <h4><span>Bloggersstand.com</span></h4>       <p>Micro Blogging + SEO Tips + Make Money</p>     </div>     <div class='bsdbox-wrap'>       <ul class='bsdextend'>         <li class='bsdbox-icon facebook'>           <a href='https://www.facebook.com/bloggersstand' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook fa-fw'></i>Follow Us</a>         </li>         <li class='bsdbox-icon twitter'>           <a href='https://twitter.com/bloggersstand' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter fa-fw'></i>Follow Us</a>         </li>         <li class='bsdbox-icon circle'>           <a href='https://plus.google.com/+Bloggersstand' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus fa-fw'></i>Circle Us</a>         </li>       </ul>     </div>   </div> </div> </b:includable> </b:widget> 

Customization:
Remove social media profile yell bloggersstand amongst your username.
To alter within championship of the widget, delight supercede bloggersstand.com amongst your title.
To alter the description or text within the widget, supercede blogging + ...</p> amongst your text.
To alter the background picture of the box means widget ,replace the picture url.

Step 8. Now Save your template..Done !