Another method of playing with text is by using it to capture reader’s attention. It could be done in many ways both simple and complicated. Today, we will use a simple one which serves as an introduction to later complicated codes.
This effect is like a banner but editable text with color change as the main ingredient. It stays into the head part like an announcement with two available options of showing it, either by once per browser session or permanent.
Ok we begin.
1. Download the topmsg.js file by going to this LINK , just right click it and choose “save link as”.
2. Open the file with notepad and make necessary changes with the highlighted lines:
//enter the message you wish to be shown, including html tags
var message='<b><span style="color: black; font-size: large;">Help us spread the word. Please <a href="https://www.blogger.com/link.htm">link to us</a>!</span></b>'
//enter a color name or hex to be used as the background color of the message
var backgroundcolor="#FFFF8A"
//enter 1 for always display, 2 for ONCE per browser session
var displaymode=1
//Set duration message should appear on screen, in seconds (10000=10 sec, 0=perpetual)
var displayduration=0
//enter 0 for non-flashing message, 1 for flashing
var flashmode=1
//if above is set to flashing, enter the flash-to color below
var flashtocolor="lightyellow"
</div>
var message='<b><span style="color: black; font-size: large;">Help us spread the word. Please <a href="https://www.blogger.com/link.htm">link to us</a>!</span></b>'
//enter a color name or hex to be used as the background color of the message
var backgroundcolor="#FFFF8A"
//enter 1 for always display, 2 for ONCE per browser session
var displaymode=1
//Set duration message should appear on screen, in seconds (10000=10 sec, 0=perpetual)
var displayduration=0
//enter 0 for non-flashing message, 1 for flashing
var flashmode=1
//if above is set to flashing, enter the flash-to color below
var flashtocolor="lightyellow"
</div>
Blue highlights - this will be your message which you can include link to it.
Bold text - they have their own definition above them, just read it.
3. Upload the file you just edited by going to Weebly > Design > Edit CSS/HTML > Add new files.
4. Now select the Page lay out you want this “Always on Top Text” to be included. The page lay out are the no header, tall header etc as you can see on the top left on your screen. Search for the <body> and paste the code below: (Note: If you cannot find the <body > it just paste below the code something like this
<body class='no-header-page wsite-theme-light'>
where in the “no-header” differs from lay out to lay out) Ok here is the code:
<script src="http://theweeblytricks.weebly.com/files/theme/topmsg.js">
//Always-on-top message Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, and Terms Of use, visit dynamicdrive.com
//This credit MUST stay intact for use
</script>
//Always-on-top message Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, and Terms Of use, visit dynamicdrive.com
//This credit MUST stay intact for use
</script>
5. Just change the bold text with your website address. You are done!
0 comments: