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)
Height: 50px
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
Contents: 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 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
</div>

---

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. 

.scroll {
margin: 0 auto;
width: 930px;
height:50px;
}

Note: If you find the widget isn't aligning correctly with your other elements, simply adjust the width in the code above.

Click save.

---

You're done! Publish your site to see your news widget in action!

---

comments powered by Disqus