January 13, 2014

Weebly Tricks #8 - Add an "Always on Top Text"

Posted by Domingo Tambasacan at 1/13/2014

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"

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


5. Just change the bold text with your website address. You are done!

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!



Have any question? Feel Free To Post Below:


© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top