2022 July 08 Archive - EXEIdeas – Let's Your Mind Rock

Internal site structure is one of the important SEO factors that help Google and other search engines easily understand your site. Besides linking other pages on your site, adding breadcrumbs can help users to navigate to different sections. If you don’t know about breadcrumb, it is an additional navigational link, generally displayed on top of the webpage containing the structure. It helps users navigate to the upper-level categories or sections of the site easily from the current page.Before we start, the prerequisite for a breadcrumb is to keep your pages in a structured manner. Though there is no need of arranging pages as per the breadcrumb we strongly recommend to do maintaining the needed hierarchy under the “Pages” tab and aligning your navigation accordingly. We will explain with an example structure as “Home > Site Building > Weebly > Weebly Tips & Tricks > This Page”. This needs five blocks with corresponding links to create a breadcrumb.There are many code snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want. CLICK HERE TO SEE DEMOFeatures:Light Weight.Pure CSS Code.Cross Browser.No External Files.Fully Customizable.Responsive.How To Add 6 Stylish And Awesome Pure CSS Breadcrumbs Widgets?There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly.CSS: .breadcrumb{text-align:center;display:inline-block;box-shadow:0 0 15px 1px rgba(0,0,0,0.35);overflow:hidden;border-radius:5px;counter-reset:flag}.breadcrumb a{text-decoration:none;outline:none;display:block;float:left;font-size:12px;line-height:36px;color:#fff;padding:0 10px 0 60px;background:#666;background:linear-gradient(#666,#333);position:relative}.breadcrumb a:first-child{padding-left:46px;border-radius:5px 0 0 5px}.breadcrumb a:first-child:before{left:14px}.breadcrumb a:last-child{border-radius:0 5px 5px 0;padding-right:20px}.breadcrumb a.active,.breadcrumb a:hover{background:#333;background:linear-gradient(#333,#000)}.breadcrumb a.active:after,.breadcrumb a:hover:after{background:#333;background:linear-gradient(135deg,#333,#000)}.breadcrumb a:after{content:'';position:absolute;top:0;right:-18px;width:36px;height:36px;transform:scale(0.707) rotate(45deg);z-index:1;background:#666;background:linear-gradient(135deg,#666,#333);box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1);border-radius:0 5px 0 50px}.breadcrumb a:last-child:after{content:none}.breadcrumb a:before{content:counter(flag);counter-increment:flag;border-radius:100%;width:20px;height:20px;line-height:20px;margin:8px 0;position:absolute;top:0;left:30px;background:#444;background:linear-gradient(#444,#222);font-weight:700}.flat a,.flat a:after{background:#fff;color:#000;transition:all .5s}.flat a:before{background:#fff;box-shadow:0 0 0 1px #ccc}.flat a:hover,.flat a.active,.flat a:hover:after,.flat a.active:after{background:#9EEB62}ul,li{list-style-type:none!important;padding:0;margin:0}.breadcrumbs1{border-bottom:1px solid #ccc;background-color:#fff;line-height:20px;overflow:auto;font-size:16px;font-weight:700}.breadcrumbs1 li{float:left;padding-left:8px}.breadcrumbs1 li a{padding:0 24px 2px 0;background:transparent url(http://img.webnots.com/2015/07/bread_arrow1.png) no-repeat right center}.breadcrumbs1 li a:link,#breadcrumbs1 li a:visited{text-decoration:none;color:#036}.breadcrumbs1 li a:hover,#breadcrumbs1 li a:focus{text-decoration:underline;color:#09C}.breadcrumbs1 li{color:#F90}.breadcrumbs2{list-style:none!important;overflow:hidden;font-size:16px}.breadcrumbs2 li{float:left}.breadcrumbs2 li a{color:#fff;text-decoration:none;padding:10px 0 10px 65px;background:#a52a2a;background:hsla(34,85%,35%,1);position:relative;display:block;float:left}.breadcrumbs2 li a:after{content:" ";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid hsla(34,85%,35%,1);position:absolute;top:50%;margin-top:-50px;left:100%;z-index:2}.breadcrumbs2 li a:before{content:" ";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #fff;position:absolute;top:50%;margin-top:-50px;margin-left:1px;left:100%;z-index:1}.breadcrumbs2 li:first-child a{padding-left:10px}.breadcrumbs2 li:nth-child(2) a{background:hsla(34,85%,45%,1)}.breadcrumbs2 li:nth-child(2) a:after{border-left-color:hsla(34,85%,45%,1)}.breadcrumbs2 li:nth-child(3) a{background:hsla(34,85%,55%,1)}.breadcrumbs2 li:nth-child(3) a:after{border-left-color:hsla(34,85%,55%,1)}.breadcrumbs2 li:nth-child(4) a{background:hsla(34,85%,65%,1)}.breadcrumbs2 li:nth-child(4) a:after{border-left-color:hsla(34,85%,65%,1)}.breadcrumbs2 li:nth-child(5) a{background:hsla(34,85%,75%,1)}.breadcrumbs2 li:nth-child(5) a:after{border-left-color:hsla(34,85%,75%,1)}.breadcrumbs2 li:last-child a{color:#000;pointer-events:none;cursor:default}.breadcrumbs2 li a:hover{background:hsla(34,85%,25%,1)}.breadcrumbs2 li a:hover:after{border-left-color:hsla(34,85%,25%,1)!important}ul{margin:0;padding:0;list-style:none!important}.breadcrumbs3{background:#eee;border-width:1px;border-style:solid;border-color:#f5f5f5 #e5e5e5 #ccc;border-radius:5px;box-shadow:0 0 2px rgba(0,0,0,.2);overflow:hidden;font-size:16px}.breadcrumbs3 li{float:left}.breadcrumbs3 a{padding:.7em 1em .7em 2em;float:left;text-decoration:none;color:#444;position:relative;text-shadow:0 1px 0 rgba(255,255,255,.5);background-color:#ddd;background-image:linear-gradient(to right,#f5f5f5,#ddd)}.breadcrumbs3 li:first-child a{padding-left:1em;border-radius:5px 0 0 5px}.breadcrumbs3 a:hover{background:#fff}.breadcrumbs3 a::after,.breadcrumbs3 a::before{content:"";position:absolute;top:50%;margin-top:-1.5em;border-top:1.5em solid transparent;border-bottom:1.5em solid transparent;border-left:1em solid;right:-1em}.breadcrumbs3 a::after{z-index:2;border-left-color:#ddd}.breadcrumbs3 a::before{border-left-color:#ccc;right:-1.1em;z-index:1}.breadcrumbs3 a:hover::after{border-left-color:#fff}.breadcrumbs3 .current,.breadcrumbs3 .current:hover{font-weight:700;background:none}.breadcrumbs3 .current::after,.breadcrumbs3 .current::before{content:normal}#breadcrumbs4{font:16px Arial,Helvetica,sans-serif;background-image:url(http://img.webnots.com/2015/07/Bread_Separator.png);background-repeat:repeat-x;height:30px;line-height:30px;color:#9b9b9b;border:solid 1px #cacaca;overflow:hidden;margin:0;padding:0}#breadcrumbs4 li{list-style-type:none!important;float:left;padding-left:10px}#breadcrumbs4 a{height:30px;display:block;background-image:url(http://img.webnots.com/2015/07/bread_arrow.png);background-repeat:no-repeat;background-position:right;padding-right:15px;text-decoration:none;color:#454545}.home{border:none;margin:8px 0}#breadcrumbs4 a:hover{color:#35acc5} HTML: CSS Breadcrumb Style 1 Home Site Building Weebly Weebly Tips & Tricks Current Page Title CSS Breadcrumb Style 2 Home Site Building Weebly Weebly Tips & Tricks Current Page Title CSS Breadcrumb Style 3 Home Site Building Weebly Weebly Tips & Tricks Current Page CSS Breadcrumb Style 4 Home Site Building Weebly Weebly Tips & Tricks Current Page Title CSS Breadcrumb Style 5 Home Site Building Weebly Weebly Tips & Tricks Current Page Title Bonus CSS Breadcrumb Style 6 Site Building Weebly Weebly Tips & Tricks Current Page Title Customization:No need to customize it. Just copy-paste. Rest edit the code as per comments and need. Remember to add JavaScript after HTML code.Troubleshooting the Errors:Do it with concentration and patience. Check your all steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.Final Words:That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.