How To Put A News Scroll Bar At The Top Of Your Weebly Site
Sunday September 21st, 2014 | Comments
This scroll bar will display the latest posts from one or multiple RSS feeds at the top of your website.
Step 1. Find Your website's width
Right click on the body of your website and click "Inspect Element".
Now hover your mouse over any div on the white window that appears on the bottom. You should see your website's width appear at the top.
Step 2. Create your News Widget
Go to http://www.surfing-waves.com/feed.htm to create your news widget.
In order to blend this news widget seamlessly into your website, you're going to need to edit the following elements on this website.
RSS Feed: Add the feed or feeds you'd like this widget to display
Width: Your website's width (Step 1)
Scroll Step: 4 seconds
Entry Limit: 10 (How many news links you want the widget to display in a cycle)
Feed Title: off
Entry Title Max Length: Your website's width (Step 1)
Entry Title Font Color: Your website's font color (suggestive)
Entry Title Background Color: Your website's background color (suggestive)
Separator Line: off
Posted Time Ago: on
Entry Contents Font Color: Whatever color works best (This is the color of the time of the post)
Step 3. Open Weebly's HTML/CSS Editor
Click on Design at the top and then click on Edit HTML/CSS on the bottom left.
Step 4. Select your website's template
On the left, select the template of your website.
Now depending on where you would like your news widget to appear, will depend on where you place this div. For this example, we are placing the news widget under the header image.
Step 5. Insert Html Code
Add the following div where you'd like the news widget to display. For this example, we want the news widget to display underneath the header image so we are placing the div below under the "banner" div.
Once you've added the div below, copy and paste your news widget code from http://www.surfing-waves.com/feed.htm in lieu of the orange text.
<div class="scroll" >
INSERT NEWS WIDGET CODE HERE
Step 6. Add CSS COding
Go to main-style.css on the left, scroll all the way to the bottom and add the following CSS Code. This code will align your news widget with your other elements.
margin: 0 auto;
NOTE: If you find the widget isn't aligning correctly with your other elements, simply adjust the width in the code above.
You're done! Publish your site
Details of Project
Level of difficulty: Intermediate
Time to complete: 25 Minutes
How To Install Any Font Into Your Weebly Site
Updated on June 20, 2016
How To Create A Sidebar That Will Appear On Every Standard Weebly Page
Updated on June 11, 2016
How To Create An "<h1>" Tag In Your Weebly Site
Updated on July 9, 2016
Weebly Tricks on Facebook
Weebly Tricks on Google+