June 13, 2016

How to Create / Add a Simple Marquee Widget in Blogger

This is very simple widget. You can always customize the looks of this widget with the power of CSS. Also take note that I have compressed the codes for it to maximize the space. I really hope this will help you. Thanks guys.


Step 1. Paste Code 1.0 on a HTML/Javscript widget.


Code 1.0
- Replace the codes in orange with your paragraph

<style>#wcnot-cont{z-index: 9999999;position: relative;width: 107.3%;background: #222222;color: white;font: 16px Arvo;height: 3em;left: -2.5em;}#wc-movtext{text-align: center;padding: 1em;font-family: OpenSans, sans-serif;font-size: 14px;color: white;font-weight: bold;text-transform: uppercase}#wc-movtext a{color:#FF0066!important;text-decoration:none;font-family: OpenSans, sans-serif;font-size: 14px;color: white;font-weight: bold;text-transform: uppercase}#wc-movtext a:hover{color: Orange;text-decoration:none;}</style><div id='wcnot-cont'><div id="wc-movtext"><marquee direction="left"onmouseover="this.stop();"onmouseout="this.start();">Welcome to The Great Owl | In Behalf of the Team, I'm so happy to see you here | Don't forget to like our <a href="https://www.facebook.com/143TGO">Facebook</a> | Author Jhon Dolor's <a href="http://instagram.com/iamdolor">Instagram</a> | </marquee></div><div>