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(http://3.bp.blogspot.com/-

GTNGW6v4Bq8/UIG9AaOyUeI/AAAAAAAAC3I/6dkNn74jPHA/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='http://4.bp.blogspot.com/-

l4N9gVCNVu0/UIGwUaqbO1I/AAAAAAAAC1w/O0uqz5jmErk/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='http://1.bp.blogspot.com/-

EQE2IlcBBig/UIGwT5XiY8I/AAAAAAAAC1k/0pHCDfpdmCI/s320/subscribe%

2BNow.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/AVvXsEi5fnAicHkfbmcVKFuvjAxiwlUB3D73nSDszRlYFg4ZUXE32Z7uuTMVf8AJK_okqDh30HCMcM-9GrEu62NjyLn9TpDu5F2DNNKyvz67UyQZtzmviHr2NtoHSC77fyQLC8J69ZOCw9kgtrsR/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=lig

ht&amp;font&amp;height=21&amp;appId=136202409811394' style='border:none; 

overflow:hidden; width:100px; height:21px;'/>  

</div> </div>

• Save template.

If you have any questions about his widget, feel free to contact him.