Home » Blogger Tutorials, Tricks and Hacks » How to Add the Ultra Blogger Post Footer Widget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Add the Ultra Blogger Post Footer Widget

How to Add the Ultra Blogger Post Footer Widget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


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='http://3.bp.blogspot.com/-ZcgHH0G8KtU/UIGwVe1u9yI/AAAAAAAAC2I/jbVnSMs715k/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.

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

Liked It ? Please Share


7 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Freek says:

    Wow! Great Widget dude

  2. Freek says:

    Wajahat you did a great job

  3. Samehadaku says:

    nice article.. i like it

  4. salemsh says:

    Can I use your code box in my blog posts?

  5. Mohd says:

    there is no “” in my HTML

  6. When someone writes an article he/she maintains the idea
    of a user in his/her mind that how a user can understand it.
    Therefore that’s why this piece of writing is great. Thanks!

    Also visit my web blog – carpet dry cleaning in sydney; http://www.kandlesbykc.com.au,

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here