How to Add the Ultra Blogger Post Footer Widget

Here’s another featured awesome widget by Wajahat Ahmed of Bluekut, who  shows us how to add his Ultra Blogger post footer widget.

• Go to Blogger Dashboard,  then Design.

• Create a backup copy of your template first.

• Go to Edit HTML.

• Hit Expand widget, then locate ]]></b:skin> using Ctrl+F.

• Copy and paste this code above ]]></b:skin>

#Bluekut_Box{  width:585px;  height:126px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ_oPFWXX6EoAooDi14s1V6kZnsLSh_8YNKU_-VIXsEt9IR7TqnUkFcCu52Gr0mQmCrRymE4Z2zgGVmet2kzcsZpHkGABHLRgaPRK09LoF6yqxK2a7TtUDnwqhus2lp5qfbHnZak-VKELL/s1600/share-bgnew.png) no-repeat;  margin: 10px 0 0 0;  padding:0; } #share-with-friends{  width:195px;  height:126px;  padding-top:19px;  float:left;  text-align:center; } #respond-to-writer{  width:195px;  height:126px;  padding-top:10px;  float:left;  text-align:center; } #like-us{  width:195px;  height:126px;  padding-top:19px;  float:left;  text-align:center; } .share-icons{  width: 175px;  height:25px;  margin:auto;  margin-top:17px; } .share-icon{  margin-left:3px;  margin-right:3px; } .respond-author{  margin-top:11px; } .more-author{  margin:0;  font-family:Arial;  font-size:12px;  padding-top:10px; } .more-author a{  text-decoration:none;  color:#e1281e; } .more-author a:hover{  text-decoration:underline; } .facebook-like{  position:relative;  left:35px;  top:-15px; } .button {  -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;  -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;  box-shadow:inset 0px 1px 0px 0px #f29c93;  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fc1900), color-stop(1, #302222) );  background:-moz-linear-gradient( center top, #fc1900 5%, #302222 100% );  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc1900', endColorstr='#302222');  background-color:#fc1900;  -moz-border-radius:6px;  -webkit-border-radius:6px;  border-radius:6px;  display:inline-block;  color:#ffffff;  font-family:Arial Black;  font-size:14px;  font-weight:bold;  padding:5px 19px;  text-decoration:none;  text-shadow:-14px -2px 9px #b23e35; }.button:hover {  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #302222), color-stop(1, #fc1900) );  background:-moz-linear-gradient( center top, #302222 5%, #fc1900 100% );  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#302222', endColorstr='#fc1900');  background-color:#302222; }.button:active {  position:relative;  top:1px; } #b_link { width:585px; text-decoration:none; color:#FFF; } #b_link a { text-decoration:none; color:#FFF; } //*Ultra post footer widget End*//

• Save template.

• Search for  </head> tag and paste this code above it:

<script type='text/javascript'>var switchTo5x=false;</script> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'>stLight.options({publisher: &quot;ur-c5221477-ace0-9052-a858-cafca172e7b&quot;});</script>

• Search for <div class =’post footer’> and paste this code below it, replacing the red text with your own info:

<div id='Bluekut_Box'><div id='b_link' align="right"><a href="http://www.bluekut.com/2012/10/ultra-blogger-post-footer-widget.html"><small>Get This widget</small></a></div>  <div id='share-with-friends'>  <img alt='Share This Article with Friends' border='0' class='share-header' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsq2LCnzAyVhG03Nbge2P5OGJqmG4K_8bN5cUP_89E1JYS7WuIP4mC3sEK8HRAhh5AJAgB24OdLQTehCRI6eBQa-JEyx0crqURQDYEbu6chE-93LFcMkyYSde_Xim4psxj_4mDqnlmn8o/s320/share-this-article-with-friends.png'/>  <div class='share-icons'> <span class='st_facebook_large' displayText='Facebook'/> <span class='st_twitter_large' displayText='Tweet'/> <span class='st_email_large' displayText='Email'/> <span class='st_sharethis_large' displayText='ShareThis'/>  </div>  </div>  <div id='respond-to-writer'>  <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BloggerFaqTricks&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>  <img alt='Share This Article with Friends' border='0' class='share-header' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIWH7E9mJgkidgvGAjjbphqYrA3HLAC2iY0XME8fn1GygukA8_nODKNa9z2yw0WCFaA4T396bsyospxDD-BAOs0VhdVAXzn1AphQcKSbmHkO1cuV9F2G5Isxxx-IGKvrOf9p7Ze-GEYD0p/s320/subscribe+Now.png'/><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='BloggerFaqTricks'/><input name='loc' type='hidden' value='en_US'/><input class='button' type='submit' value='Subscribe'/></form>  </div>  <div id='like-us'>  <img alt='Like us on Facebook' border='0' class='share-header' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0M7cNvZu01QVjQrcfr3_TcPegdppv7K3pkHjOynU5o4uxHxsHbiLRN__fj-NBfRN3r-o8CPfHZcVFk40dse1CfcZuDRDEx4-pviDj-M99mwwLnnhB_u3IPbSOxfCunrzuXcp2_5183jO/s320/like-us-on-facebook.png'/>  <iframe allowTransparency='true' class='facebook-like' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ffaqbloggertricks&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=136202409811394' style='border:none; overflow:hidden; width:100px; height:21px;'/>  </div> </div>

• Save template.