Step One: Make the Badge Graphic
Using your preferred graphics program, create the badge graphic you want to use. Common choices are: Adobe Photoshop, Adobe Fireworks, Adobe Illustrator, and GIMP. This tutorial assumes you have the necessary knowledge to create the graphic of your choice. If you need inspiration, consider starting off with your website logo. If you do not have the skills to develop your own badge graphic, consider outsourcing it to a freelancer, or using one of these tutorials here on Bright Hub to help you:
Step Two: Optimizing the Graphic for Web Use
Once you’ve created the graphic, you will want to save it for web use. Common formats that are safe for web use include: JPG, GIF, and PNG. For more information on how to optimize your graphics for web use, check out: Learn More About the Best Image Formats for Web Use . Generally, regardless of the actual program you use to create the graphic, saving for web use will be as simple as: File > Save As.
Step Three: Uploading the Graphic to Photo Sharing
To save bandwidth on your own website, upload the graphic to a photo sharing website such as Photobucket. Create the Photobucket account and follow the steps to upload the image to the account there. Click Upload and Share Images. Browse to where the image is located on your hard drive. Click upload. The file is now on your photobucket account.
Image Credit: https://crave.cnet.co.uk/software/0,39029471,49294273,00.htm
Step Four: Getting the Code for the Site
For those who are not HTML code savvy, you can get the necessary code to put the image on your website. Once the photo is in your account, select it and click “Edit.” A box will pop up with tab options. Select the “Get Link Code” tab. There will be a list of codes to Share for Email and IM, Direct Link for Layouts (Myspace, Facebook, etc.), HTML for Websites and Blogs, IMG for bulletin boards and forums, and Flash for websites & blogs. Select the code under HTML for Websites and Blogs. There are two options: Full Size, and Clickable Thumbnail. We suggest using the code for the Full Size.
Copy the code from Photobucket, and paste it accordingly in your website code, where you want the graphic to appear.
Step Five: Making the Code Visible for Others to Copy
Now that you’ve got your graphic in your website where you want it, you will want to make a box for the code to display so that people can copy it and paste it in their own websites, blogs, and social networking profiles. To do this, you will want to use the textarea tag. Give the ",a.noCloneChecked=!!S.cloneNode(!0).lastChild.defaultValue,S.innerHTML=" ",a.option=!!S.lastChild,l={thead:[1,"
","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function r(e,t){var s;return s="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&d(e,t)?n.merge([e],s):s}function ve(e,t){for(var n=0,o=e.length;n
",""]),nt=/<|&#?\w+;/;function Ze(e,t,s,o,i){for(var a,c,h,m,p,g,d=t.createDocumentFragment(),f=[],u=0,v=e.length;u\s*$/g;function Fe(e,t){return d(e,"table")&&d(11!==t.nodeType?t:t.firstChild,"tr")&&n(e).children("tbody")[0]||e}function Kt(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Ut(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function De(e,t){var o,i,a,r,l,d;if(1===t.nodeType){if(s.hasData(e)&&(a=s.get(e).events))for(i in s.remove(t,"handle events"),a)for(o=0,r=a[i].length;o").attr(e.scriptAttrs||{}).prop({charset:e.scriptCharset,src:e.url}).on("load error",t=function(e){s.remove(),t=null,e&&a("error"===e.type?404:200,e.type)}),i.head.appendChild(s[0])},abort:function(){t&&t()}}}),oe=[],ee=/(=)\?(?=&|$)|\?\?/,n.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=oe.pop()||n.expando+"_"+Oe.guid++;return this[e]=!0,e}}),n.ajaxPrefilter("json jsonp",function(t,s,i){var a,r,c,l=!1!==t.jsonp&&(ee.test(t.url)?"url":"string"==typeof t.data&&0===(t.contentType||"").indexOf("application/x-www-form-urlencoded")&&ee.test(t.data)&&"data");if(l||"jsonp"===t.dataTypes[0])return a=t.jsonpCallback=o(t.jsonpCallback)?t.jsonpCallback():t.jsonpCallback,l?t[l]=t[l].replace(ee,"$1"+a):!1!==t.jsonp&&(t.url+=(de.test(t.url)?"&":"?")+t.jsonp+"="+a),t.converters["script json"]=function(){return c||n.error(a+" was not called"),c[0]},t.dataTypes[0]="json",r=e[a],e[a]=function(){c=arguments},i.always(function(){void 0===r?n(e).removeProp(a):e[a]=r,t[a]&&(t.jsonpCallback=s.jsonpCallback,oe.push(a)),c&&o(r)&&r(c[0]),c=r=void 0}),"script"}),a.createHTMLDocument=((ze=i.implementation.createHTMLDocument("").body).innerHTML="",2===ze.childNodes.length),n.parseHTML=function(e,t,s){return"string"!=typeof e?[]:("boolean"==typeof t&&(s=t,t=!1),t||(a.createHTMLDocument?((c=(t=i.implementation.createHTMLDocument("")).createElement("base")).href=i.location.href,t.head.appendChild(c)):t=i),o=!s&&[],(r=_e.exec(e))?[t.createElement(r[1])]:(r=Ze([e],t,o),o&&o.length&&n(o).remove(),n.merge([],r.childNodes)));var o,r,c},n.fn.load=function(e,t,s){var i,c,l,a=this,r=e.indexOf(" ");return-1").append(n.parseHTML(e)).find(i):e)}).always(s&&function(e,t){a.each(function(){s.apply(this,l||[e.responseText,t,e])})}),this},n.expr.pseudos.animated=function(e){return n.grep(n.timers,function(t){return e===t.elem}).length},n.offset={setOffset:function(e,t,s){var a,r,c,l,d,m,u=n.css(e,"position"),h=n(e),i={};"static"===u&&(e.style.position="relative"),a=h.offset(),c=n.css(e,"top"),d=n.css(e,"left"),("absolute"===u||"fixed"===u)&&-1<(c+d).indexOf("auto")?(l=(m=h.position()).top,r=m.left):(l=parseFloat(c)||0,r=parseFloat(d)||0),o(t)&&(t=t.call(e,s,n.extend({},a))),null!=t.top&&(i.top=t.top-a.top+l),null!=t.left&&(i.left=t.left-a.left+r),"using"in t?t.using.call(e,i):("number"==typeof i.top&&(i.top+="px"),"number"==typeof i.left&&(i.left+="px"),h.css(i))}},n.fn.extend({offset:function(e){if(arguments.length)return void 0===e?this:this.each(function(t){n.offset.setOffset(this,e,t)});var s,o,t=this[0];return t?t.getClientRects().length?(s=t.getBoundingClientRect(),o=t.ownerDocument.defaultView,{top:s.top+o.pageYOffset,left:s.left+o.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,s,o,t=this[0],i={top:0,left:0};if("fixed"===n.css(t,"position"))s=t.getBoundingClientRect();else{for(s=this.offset(),o=t.ownerDocument,e=t.offsetParent||o.documentElement;e&&(e===o.body||e===o.documentElement)&&"static"===n.css(e,"position");)e=e.parentNode;e&&e!==t&&1===e.nodeType&&((i=n(e).offset()).top+=n.css(e,"borderTopWidth",!0),i.left+=n.css(e,"borderLeftWidth",!0))}return{top:s.top-i.top-n.css(t,"marginTop",!0),left:s.left-i.left-n.css(t,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){for(var e=this.offsetParent;e&&"static"===n.css(e,"position");)e=e.offsetParent;return e||w})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,t){var s="pageYOffset"===t;n.fn[e]=function(n){return v(this,function(e,n,o){var i;if(A(e)?i=e:9===e.nodeType&&(i=e.defaultView),void 0===o)return i?i[t]:e[n];i?i.scrollTo(s?i.pageXOffset:o,s?o:i.pageYOffset):e[n]=o},e,n,arguments.length)}}),n.each(["top","left"],function(e,t){n.cssHooks[t]=Ve(a.pixelPosition,function(e,s){if(s)return s=P(e,t),se.test(s)?n(e).position()[t]+"px":s})}),n.each({Height:"height",Width:"width"},function(e,t){n.each({padding:"inner"+e,content:t,"":"outer"+e},function(s,o){n.fn[o]=function(i,a){var r=arguments.length&&(s||"boolean"!=typeof i),c=s||(!0===i||!0===a?"margin":"border");return v(this,function(t,s,i){var a;return A(t)?0===o.indexOf("outer")?t["inner"+e]:t.document.documentElement["client"+e]:9===t.nodeType?(a=t.documentElement,Math.max(t.body["scroll"+e],a["scroll"+e],t.body["offset"+e],a["offset"+e],a["client"+e])):void 0===i?n.css(t,s,c):n.style(t,s,i,c)},t,r?i:void 0,r)}})}),n.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){n.fn[t]=function(e){return this.on(t,e)}}),n.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,s){return this.on(t,e,n,s)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),n.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,t){n.fn[t]=function(e,n){return 0this._items.length-1||e<0))if(this._isSliding)t(this._element).one(r.SLID,function(){return o.to(e)});else{if(n===e)return this.pause(),void this.cycle();s=ndocument.documentElement.clientHeight;!this._isBodyOverflowing&&e&&(this._element.style.paddingLeft=this._scrollbarWidth+"px"),this._isBodyOverflowing&&!e&&(this._element.style.paddingRight=this._scrollbarWidth+"px")},e._resetAdjustments=function(){this._element.style.paddingLeft="",this._element.style.paddingRight=""},e._checkScrollbar=function(){var e=document.body.getBoundingClientRect();this._isBodyOverflowing=e.left+e.right
',trigger:"hover focus",title:"",delay:0,html:!1,selector:!1,placement:"top",offset:0,container:!1,fallbackPlacement:"flip",boundary:"scrollParent",sanitize:!0,sanitizeFn:null,whiteList:xt,popperConfig:null},L="show",Te="out",It={HIDE:"hide"+d,HIDDEN:"hidden"+d,SHOW:"show"+d,SHOWN:"shown"+d,INSERTED:"inserted"+d,CLICK:"click"+d,FOCUSIN:"focusin"+d,FOCUSOUT:"focusout"+d,MOUSEENTER:"mouseenter"+d,MOUSELEAVE:"mouseleave"+d},D="fade",B="show",$t=".tooltip-inner",Wt=".arrow",V="hover",we="focus",qt="click",Yt="manual",w=function(){function o(e,t){if("undefined"==typeof n)throw new TypeError("Bootstrap's tooltips require Popper.js (https://popper.js.org/)");this._isEnabled=!0,this._timeout=0,this._hoverState="",this._activeTrigger={},this._popper=null,this.element=e,this.config=this._getConfig(t),this.tip=null,this._setListeners()}var e=o.prototype;return e.enable=function(){this._isEnabled=!0},e.disable=function(){this._isEnabled=!1},e.toggleEnabled=function(){this._isEnabled=!this._isEnabled},e.toggle=function(e){if(this._isEnabled)if(e){var s=this.constructor.DATA_KEY,n=t(e.currentTarget).data(s);n||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(s,n)),n._activeTrigger.click=!n._activeTrigger.click,n._isWithActiveTrigger()?n._enter(null,n):n._leave(null,n)}else{if(t(this.getTipElement()).hasClass(B))return void this._leave(null,this);this._enter(null,this)}},e.dispose=function(){clearTimeout(this._timeout),t.removeData(this.element,this.constructor.DATA_KEY),t(this.element).off(this.constructor.EVENT_KEY),t(this.element).closest(".modal").off("hide.bs.modal",this._hideModalHandler),this.tip&&t(this.tip).remove(),this._isEnabled=null,this._timeout=null,this._hoverState=null,this._activeTrigger=null,this._popper&&this._popper.destroy(),this._popper=null,this.element=null,this.config=null,this.tip=null},e.show=function(){if(e=this,"none"===t(this.element).css("display"))throw new Error("Please use show on visible elements");if(i=t.Event(this.constructor.Event.SHOW),this.isWithContent()&&this._isEnabled){t(this.element).trigger(i);var e,o,i,a,r,c,d,u,h,l=s.findShadowRoot(this.element),m=t.contains(null!==l?l:this.element.ownerDocument.documentElement,this.element);if(i.isDefaultPrevented()||!m)return;o=this.getTipElement(),a=s.getUID(this.constructor.NAME),o.setAttribute("id",a),this.element.setAttribute("aria-describedby",a),this.setContent(),this.config.animation&&t(o).addClass(D),d="function"==typeof this.config.placement?this.config.placement.call(this,o,this.element):this.config.placement,r=this._getAttachment(d),this.addAttachmentClass(r),u=this._getContainer(),t(o).data(this.constructor.DATA_KEY,this),t.contains(this.element.ownerDocument.documentElement,this.tip)||t(o).appendTo(u),t(this.element).trigger(this.constructor.Event.INSERTED),this._popper=new n(this.element,o,this._getPopperConfig(r)),t(o).addClass(B),"ontouchstart"in document.documentElement&&t(document.body).children().on("mouseover",null,t.noop),c=function(){e.config.animation&&e._fixTransition();var n=e._hoverState;e._hoverState=null,t(e.element).trigger(e.constructor.Event.SHOWN),n===Te&&e._leave(null,e)},t(this.tip).hasClass(D)?(h=s.getTransitionDurationFromElement(this.tip),t(this.tip).one(s.TRANSITION_END,c).emulateTransitionEnd(h)):c()}},e.hide=function(e){function i(){n._hoverState!==L&&o.parentNode&&o.parentNode.removeChild(o),n._cleanTipClass(),n.element.removeAttribute("aria-describedby"),t(n.element).trigger(n.constructor.Event.HIDDEN),null!==n._popper&&n._popper.destroy(),e&&e()}var r,n=this,o=this.getTipElement(),a=t.Event(this.constructor.Event.HIDE);t(this.element).trigger(a),!a.isDefaultPrevented()&&(t(o).removeClass(B),"ontouchstart"in document.documentElement&&t(document.body).children().off("mouseover",null,t.noop),this._activeTrigger[qt]=!1,this._activeTrigger[we]=!1,this._activeTrigger[V]=!1,t(this.tip).hasClass(D)?(r=s.getTransitionDurationFromElement(o),t(o).one(s.TRANSITION_END,i).emulateTransitionEnd(r)):i(),this._hoverState="")},e.update=function(){null!==this._popper&&this._popper.scheduleUpdate()},e.isWithContent=function(){return Boolean(this.getTitle())},e.addAttachmentClass=function(e){t(this.getTipElement()).addClass(Ke+"-"+e)},e.getTipElement=function(){return this.tip=this.tip||t(this.config.template)[0],this.tip},e.setContent=function(){var e=this.getTipElement();this.setElementContent(t(e.querySelectorAll($t)),this.getTitle()),t(e).removeClass(D+" "+B)},e.setElementContent=function(e,n){"object"!=typeof n||!n.nodeType&&!n.jquery?this.config.html?(this.config.sanitize&&(n=Xe(n,this.config.whiteList,this.config.sanitizeFn)),e.html(n)):e.text(n):this.config.html?t(n).parent().is(e)||e.empty().append(n):e.text(t(n).text())},e.getTitle=function(){var e=this.element.getAttribute("data-original-title");return e=e||("function"==typeof this.config.title?this.config.title.call(this.element):this.config.title)},e._getPopperConfig=function(e){var t=this;return i({},{placement:e,modifiers:{offset:this._getOffset(),flip:{behavior:this.config.fallbackPlacement},arrow:{element:Wt},preventOverflow:{boundariesElement:this.config.boundary}},onCreate:function(e){e.originalPlacement!==e.placement&&t._handlePopperPlacementChange(e)},onUpdate:function(e){return t._handlePopperPlacementChange(e)}},{},this.config.popperConfig)},e._getOffset=function(){var t=this,e={};return"function"==typeof this.config.offset?e.fn=function(e){return e.offsets=i({},e.offsets,{},t.config.offset(e.offsets,t.element)||{}),e}:e.offset=this.config.offset,e},e._getContainer=function(){return!1===this.config.container?document.body:s.isElement(this.config.container)?t(this.config.container):t(document).find(this.config.container)},e._getAttachment=function(e){return Lt[e.toUpperCase()]},e._setListeners=function(){var e=this;this.config.trigger.split(" ").forEach(function(n){if("click"===n)t(e.element).on(e.constructor.Event.CLICK,e.config.selector,function(t){return e.toggle(t)});else if(n!==Yt){var s=n===V?e.constructor.Event.MOUSEENTER:e.constructor.Event.FOCUSIN,o=n===V?e.constructor.Event.MOUSELEAVE:e.constructor.Event.FOCUSOUT;t(e.element).on(s,e.config.selector,function(t){return e._enter(t)}).on(o,e.config.selector,function(t){return e._leave(t)})}}),this._hideModalHandler=function(){e.element&&e.hide()},t(this.element).closest(".modal").on("hide.bs.modal",this._hideModalHandler),this.config.selector?this.config=i({},this.config,{trigger:"manual",selector:""}):this._fixTitle()},e._fixTitle=function(){var e=typeof this.element.getAttribute("data-original-title");!this.element.getAttribute("title")&&"string"==e||(this.element.setAttribute("data-original-title",this.element.getAttribute("title")||""),this.element.setAttribute("title",""))},e._enter=function(e,n){var s=this.constructor.DATA_KEY;(n=n||t(e.currentTarget).data(s))||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(s,n)),e&&(n._activeTrigger["focusin"===e.type?we:V]=!0),t(n.getTipElement()).hasClass(B)||n._hoverState===L?n._hoverState=L:(clearTimeout(n._timeout),n._hoverState=L,n.config.delay&&n.config.delay.show?n._timeout=setTimeout(function(){n._hoverState===L&&n.show()},n.config.delay.show):n.show())},e._leave=function(e,n){var s=this.constructor.DATA_KEY;(n=n||t(e.currentTarget).data(s))||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(s,n)),e&&(n._activeTrigger["focusout"===e.type?we:V]=!1),n._isWithActiveTrigger()||(clearTimeout(n._timeout),n._hoverState=Te,n.config.delay&&n.config.delay.hide?n._timeout=setTimeout(function(){n._hoverState===Te&&n.hide()},n.config.delay.hide):n.hide())},e._isWithActiveTrigger=function(){for(var e in this._activeTrigger)if(this._activeTrigger[e])return!0;return!1},e._getConfig=function(e){var n=t(this.element).data();return Object.keys(n).forEach(function(e){-1!==Dt.indexOf(e)&&delete n[e]}),"number"==typeof(e=i({},this.constructor.Default,{},n,{},"object"==typeof e&&e?e:{})).delay&&(e.delay={show:e.delay,hide:e.delay}),"number"==typeof e.title&&(e.title=e.title.toString()),"number"==typeof e.content&&(e.content=e.content.toString()),s.typeCheckConfig(_,e,this.constructor.DefaultType),e.sanitize&&(e.template=Xe(e.template,e.whiteList,e.sanitizeFn)),e},e._getDelegateConfig=function(){var e,t={};if(this.config)for(e in this.config)this.constructor.Default[e]!==this.config[e]&&(t[e]=this.config[e]);return t},e._cleanTipClass=function(){var n=t(this.getTipElement()),e=n.attr("class").match(zt);null!==e&&e.length&&n.removeClass(e.join(""))},e._handlePopperPlacementChange=function(e){var t=e.instance;this.tip=t.popper,this._cleanTipClass(),this.addAttachmentClass(this._getAttachment(e.placement))},e._fixTransition=function(){var e=this.getTipElement(),n=this.config.animation;null===e.getAttribute("x-placement")&&(t(e).removeClass(D),this.config.animation=!1,this.hide(),this.show(),this.config.animation=n)},o._jQueryInterface=function(e){return this.each(function(){var n=t(this).data(ye),s="object"==typeof e&&e;if((n||!/dispose|hide/.test(e))&&(n||(n=new o(this,s),t(this).data(ye,n)),"string"==typeof e)){if("undefined"==typeof n[e])throw new TypeError('No method named "'+e+'"');n[e]()}})},h(o,null,[{key:"VERSION",get:function(){return"4.4.1"}},{key:"Default",get:function(){return Rt}},{key:"NAME",get:function(){return _}},{key:"DATA_KEY",get:function(){return ye}},{key:"Event",get:function(){return It}},{key:"EVENT_KEY",get:function(){return d}},{key:"DefaultType",get:function(){return Nt}}]),o}();t.fn[_]=w._jQueryInterface,t.fn[_].Constructor=w,t.fn[_].noConflict=function(){return t.fn[_]=Ft,w._jQueryInterface};var F="popover",ge="bs.popover",u="."+ge,Jt=t.fn[F],at="bs-popover",tn=new RegExp("(^|\\s)"+at+"\\S+","g"),nn=i({},w.Default,{placement:"right",trigger:"click",content:"",template:'
'}),sn=i({},w.DefaultType,{content:"(string|element|function)"}),on="fade",an="show",rn=".popover-header",cn=".popover-body",ln={HIDE:"hide"+u,HIDDEN:"hidden"+u,SHOW:"show"+u,SHOWN:"shown"+u,INSERTED:"inserted"+u,CLICK:"click"+u,FOCUSIN:"focusin"+u,FOCUSOUT:"focusout"+u,MOUSEENTER:"mouseenter"+u,MOUSELEAVE:"mouseleave"+u},pe=function(e){function n(){return e.apply(this,arguments)||this}!function(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}(n,e);var s=n.prototype;return s.isWithContent=function(){return this.getTitle()||this._getContent()},s.addAttachmentClass=function(e){t(this.getTipElement()).addClass(at+"-"+e)},s.getTipElement=function(){return this.tip=this.tip||t(this.config.template)[0],this.tip},s.setContent=function(){var e,n=t(this.getTipElement());this.setElementContent(n.find(rn),this.getTitle()),e=this._getContent(),"function"==typeof e&&(e=e.call(this.element)),this.setElementContent(n.find(cn),e),n.removeClass(on+" "+an)},s._getContent=function(){return this.element.getAttribute("data-content")||this.config.content},s._cleanTipClass=function(){var n=t(this.getTipElement()),e=n.attr("class").match(tn);null!==e&&0