---

​Step 1. Open Weebly's HTML/CSS Editor

Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.

---

​Step 2. Create A New Page Layout

​To create a new page layout, on the left, click on "HEADER TYPE>New Header Type", and name this page layout "blog.html".

Now, on the left, click on the "header.html" page layout (or the page layout of your choice), on the right, select and copy all of the HTML code in this file, on the left, click on your new "blog.html" page layout, on the right, select and delete all of the HTML code in this file, and paste the HTML code you copied from the "header.html" page layout (or the page layout you chose to copy).​

Note: By creating a new page layout called "blog.html", we'll ensure that the breadcrumbs only appear on our blog page when this new "Blog" page layout is applied to it.

---

Step 3. Add HTML codes

Click on your new "blog.html" page layout on the left, and on the right, scroll down until you find your main content area's "<div>". Add the HTML code below directly above your main content area's "<div>":

<div id="crumbs">
    <div class="container">
        <p class="blog"><a href="https://breadcrumbstutorial.weebly.com/blog">Blog</a></p>
        <p><a class="crumb"></a></p>
    </div>
</div>

Hint: Your main content area's "<div>" contains the white "{#sections}" mustache codes.

Replace the bold code below with your blog's URL as shown below:

<div id="crumbs">
    <div class="container">
        <p class="blog"><a href="https://breadcrumbstutorial.weebly.com/blog">Blog</a></p>
        <p><a class="crumb"></a></p>
    </div>
</div>

---

Step 4. Add CSS codes

​On the left, under "STYLES", click on your CSS file "main.less" (main-style.css for older Weebly themes). On the right, add the following CSS codes to your CSS file, preferably above your main content area's CSS codes:

​#crumbs .container {
    padding: 2em 2em 0;
}
#crumbs a {
  color:#6cb83a; /* Changes color of breadcrumbs */
}
#crumbs p {
    display:table-cell;
    margin:0 auto;
    text-transform:uppercase;
    padding-right:6px;
    font-size:.8em;
}
.crumb a:before {
    content: "/";
    padding-right:6px;
}

---

Step 5. Add jQuery Codes

​On the left, under "ASSETS", click on your jQuery file "custom.js". On the right, add the following jQuery codes to your jQuery file, directly beneath "jQuery(function($) {":

if($('.wsite-blog-index').length) {
    $('.crumb').hide();
}

if($('.wsite-blog-post').length) {
    var post = $('.blog-title a');
    $(post).clone().appendTo('.crumb');
}

Click save.

---

Step 6. Apply "blog" page layout

Once you're back in the Weebly Editor, go to "Pages" at the top, select your blog page on the left, and under "HEADERTYPE", select the "Blog" page layout.

You should now see your breadcrumbs appear above the first blog post on your blog page.

---

You're done! Publish your site to see your blog's new breadcrumbs!

---

comments powered by Disqus