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

2,292 views

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

Comments

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:

    nice:)
    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