Need help converting HTML into a bookmarklet

I’ve created a toolbar in html that displays a series of icons that act as link to perform a variety of different functions. (the links aren’t fully live yet but they will be!). I need to take this html and turn it into a bookmarklet so upon clicking the bookmark my toolbar will appear at the bottom of any given page on the internet.

I’ve posted the code below, doesn’t anyone know how to convert this so I can run it dynamically like suggested above?

Thanks!

(Toggle Plain Text)

 




 

 


 Visit Us
Facebook Share on Facebook
Twitter Post to Twitter
Like Like this article
Dislike Dislike this article
Add Link Add this Article
Report Report this Article




Hide/Show Hide/Show Toolbar

</p><br /><p>body {<br /><br /> background: 7f7f7f url(background.gif) no-repeat center top;<br /><br /> margin: 0;<br /><br /> padding: 0;<br /><br /> font: 10px normal Verdana, Arial, Helvetica, sans-serif;<br /><br /> height: 100%;<br /><br />}<br /><br />* {margin: 0; padding: 0; outline: none;}<br /><br />img {border: none;}<br /><br />h1 {<br /><br /> font-size: 1.2em;<br /><br /> padding: 5px 10px;<br /><br /> color: ccc;<br /><br /> width: 940px;<br /><br /> margin: 0 auto;<br /><br />}<br /><br />h1 a { color: fff; }<br /><br />h1 span {font-weight: normal;}</p><br /><p>#footpanel {<br /><br /> position: fixed;<br /><br /> bottom: 0;<br /><br /> z-index: 9999; /*–Keeps the panel on top of all other elements–*/<br /><br /> background: e3e2e2;<br /><br /> border: 1px solid c3c3c3;<br /><br /> border-bottom: none;<br /><br /> width: 90%;<br /><br /> margin: 0 3%;<br /><br />}<br /><br />*html #footpanel { /*–IE6 Hack – Fixed Positioning to the Bottom–*/<br /><br /> margin-top: -1px; /*–Prevents IE6 from having an infinity scroll bar – due to 1px border on #footpanel–*/<br /><br /> position: absolute;<br /><br /> top:expression(eval(document.compatMode &&document.compatMode==’CSS1Compat’) ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));<br /><br />}<br /><br />#footpanel ul {<br /><br /> padding: 0; margin: 0;<br /><br /> float: left;<br /><br /> width: 100%;<br /><br /> list-style: none;<br /><br /> border-top: 1px solid fff; /*–Gives the bevel feel on the panel–*/<br /><br /> font-size: 1.1em;<br /><br />}<br /><br />#footpanel ul li{<br /><br /> padding: 0; margin: 0;<br /><br /> float: left;<br /><br />}<br /><br />#footpanel ul li a{<br /><br /> padding: 5px;<br /><br /> float: left;<br /><br /> text-indent: -9999px; /*–For text replacement – Shove text off of the page–*/<br /><br /> height: 16px; width: 16px;<br /><br /> text-decoration: none;<br /><br /> color: 333;<br /><br /> position: relative;</p><br /><p>}<br /><br />html #footpanel ul li a:hover{ background-color: fff; }<br /><br />html #footpanel ul li a.active { /*–Active state when sub-panel is open–*/<br /><br /> background-color: fff;<br /><br /> height: 17px;<br /><br /> margin-top: -2px; /*–Push it up 2px to attach the active button to sub-panel–*/<br /><br /> border: 1px solid 555;<br /><br /> border-top: none;<br /><br /> z-index: 200; /*–Keeps the active link on top of the sub-panel–*/<br /><br /> position: relative;<br /><br />}<br /><br />#footpanel a.home{<br /><br /> background: url(diverse.png) no-repeat 15px center;<br /><br /> width: 50px;</p><br /><p> padding-left: 40px;<br /><br /> border-right: 1px solid bbb;<br /><br /> text-indent: 0; /*–Reset text indent since there will be a combination of both text and image–*/<br /><br />}</p><br /><p>a.home{ background: url(diverse.png) no-repeat left left; }<br /><br />a.Facebook{ background: url(facebook.png) no-repeat center center; }<br /><br />a.twitter{ background: url(twitter.png) no-repeat center center; }<br /><br />a.Like{ background: url(like.png) no-repeat center center; }<br /><br />a.dislike{ background: url(dislike.png) no-repeat center center; }<br /><br />a.add{ background: url(add.png) no-repeat center center; }<br /><br />a.report{ background: url(report.png) no-repeat center center; }<br /><br />a.hide{ background: url(hide.png) no-repeat center center; }</p><br /><p>#footpanel a small {<br /><br /> text-align: center;<br /><br /> width: 70px;<br /><br /> background: url(pop_arrow.gif) no-repeat center bottom;<br /><br /> padding: 5px 5px 11px;<br /><br /> display: none; /*–Hide by default–*/<br /><br /> color: fff;<br /><br /> font-size: 1em;<br /><br /> text-indent: 0;</p><br /><p>}<br /><br />#footpanel a:hover small{<br /><br /> display: block; /*–Show on hover–*/<br /><br /> position: absolute;<br /><br /> top: -35px; /*–Position tooltip 35px above the list item–*/<br /><br /> left: 50%;<br /><br /> margin-left: -40px; /*–Center the tooltip–*/<br /><br /> z-index: 9999;<br /><br />}</p><br /><p>#hide a small {<br /><br /> text-align: center;<br /><br /> width: 70px;<br /><br /> background: url(pop_arrow.gif) no-repeat center bottom;<br /><br /> padding: 5px 5px 11px;<br /><br /> display: none; /*–Hide by default–*/<br /><br /> color: fff;<br /><br /> font-size: 1em;<br /><br /> text-indent: 0;</p><br /><p>}<br /><br />#hide a:hover small{<br /><br /> display: block; /*–Show on hover–*/<br /><br /> position: absolute;<br /><br /> top: -35px; /*–Position tooltip 35px above the list item–*/<br /><br /> left: 50%;<br /><br /> margin-left: -40px; /*–Center the tooltip–*/<br /><br /> z-index: 9999;<br /><br />}</p><br /><p>*html #hide { /*–IE6 Hack – Fixed Positioning to the Bottom–*/<br /><br /> margin-top: -1px; /*–Prevents IE6 from having an infinity scroll bar – due to 1px border on #footpanel–*/<br /><br /> position: absolute;<br /><br /> top:expression(eval(document.compatMode &&document.compatMode==’CSS1Compat’) ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));<br /><br />}<br /><br />#hide ul {<br /><br /> padding: 0; margin: 0;<br /><br /> float: left;<br /><br /> width: 100%;<br /><br /> list-style: none;<br /><br /> border-top: 1px solid fff; /*–Gives the bevel feel on the panel–*/<br /><br /> font-size: 1.1em;<br /><br />}<br /><br />#hide ul li{<br /><br /> padding: 0; margin: 0;<br /><br /> float: left;<br /><br />}<br /><br />#hide ul li a{<br /><br /> padding: 5px;<br /><br /> float: left;<br /><br /> text-indent: -9999px; /*–For text replacement – Shove text off of the page–*/<br /><br /> height: 16px; width: 16px;<br /><br /> text-decoration: none;<br /><br /> color: 333;<br /><br /> position: relative;</p><br /><p>}</p><br /><p>#hide {<br /><br /> position: fixed;<br /><br /> bottom: 0; right: 0;<br /><br /> z-index: 9999; /*–Keeps the panel on top of all other elements–*/<br /><br /> background: e3e2e2;<br /><br /> border: 1px solid c3c3c3;<br /><br /> border-bottom: none;<br /><br /> width: 2%;<br /><br /> margin: 0 3%;</p><br /><p>}</p><br /><p>function toggle() {<br /><br /> var ele = document.getElementById(“footpanel”);<br /><br /> var text = document.getElementById(“displayText”);<br /><br /> if(ele.style.display == “block”) {<br /><br /> ele.style.display = “none”;<br /><br /> text.innerHTML = “show”;<br /><br /> }<br /><br /> else {<br /><br /> ele.style.display = “block”;<br /><br /> text.innerHTML = “hide”;<br /><br /> }<br /><br />} </p><br /><p> Visit Us<br /><br /> Facebook Share on Facebook<br /><br /> Twitter Post to Twitter<br /><br /> Like Like this article<br /><br /> Dislike Dislike this article<br /><br /> Add Link Add this Article<br /><br /> Report Report this Article </p><br /><p> Hide/Show Hide/Show Toolbar </p><br /><p>

http://bit.ly/ngFILz