Step 1. Open Weebly's HTML/CSS Editor

Click on "Design" at the top of the page, and then click on "Edit HTML/CSS" on the right side of the page.

---

Step 2. Select your site's layout

Select the page layout your site uses on the left.

Note: If you use multiple page layouts for your site, you will need to perform this process for each individual page layout that you use. The ad will only appear on the page layouts you customize.

---

Step 3. Add HTML Code

Add the following HTML code right after "<div id="header-top">", but before "<table id="header">":

<div id="ad" align="center"></div>

---

Step 4. Add your ad's code

Add your ad's code to the HTML code you just added from the previous step as indicated below:

<div id="ad" align="center">Add Your Ad's Code Here</div>

---

Step 5. Add CSS Code

Click on "main-style.css" on the left, and scroll all the way to the bottom. Add the following CSS code so there is a little space between your ad and the top of your site:

​#ad {
    padding-top:10px;
}

Click save.

---

You're done! Publish your site to see how your ad looks!

---

Tips & Additional Information

If you don't know what page layout your site is using, go to "Pages" at the top. Here you'll be able to see the page layout for each individual page on your Weebly site.

---

comments powered by Disqus