Breadcrumbs help visitors to your blog navigate your posts by automatically displaying the post their viewing and what page that post can be found under. This tutorial will show you how to install breadcrumbs into a Weebly "Blog" page. Step 1: Add HTML CodeGo to "Theme" at the top and select "Edit HTML/CSS" in the bottom-left corner. On the left, under "PARTIALS", select "blog>post.tpl". On the right, directly above the white "{{#custom_header_html}}" mustache code, add the HTML code below: <div id="crumbs"> <a class="crumb-line-1"></a> <div class="crumb-slash">></div> <a class="crumb-line-2"></a> </div> Step 2. Add CSS CodesOn the left, under "STYLES", select "main.less". On the right, scroll all the way to the bottom and add the CSS codes below: /* Bread Crumbs */ #crumbs { display:flex; align-items:center; font-size: 13px; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; letter-spacing: .3px; color: #008aff; } .wsite-blog-index #crumbs { display:none; } .crumb-slash { color: #008aff; padding: 0 5px; box-sizing: border-box; } #crumbs a { color:#008aff; } #crumbs a:hover { text-decoration:underline; } Step 3: Add jQuery CodesOn the left, under "ASSETS", click on "custom.js". On the right, directly beneath the "jQuery(function(){" code, add the jQuery codes below:
// Breadcrumbs var pathname = window.location.pathname; var hyphenRemove = pathname.replace(/\-/g, ' '); var arr = hyphenRemove.split('/'); // Blog URL $(".crumb-line-1").html(arr[1]); var slashRemove = (pathname.split('/').slice(0,2).join('/')); $('.crumb-line-1').attr('href', slashRemove); // Blog Page URL $(".crumb-line-2").html(arr[2]); $('.crumb-line-2').attr('href', pathname); Click "SAVE".
Comments
|
THEMEZIERWe build Weebly themes & create Weebly tutorials! Archives
February 2019
#tags |