Cara Mudah Membuat Breadcrumb Seo Friendly Di Website

Apa itu Breadcrumb? Pada umumnya fungsi dan arti dari Breadcrumb adalah fitur atau sistem navigasi menu halaman sebuah website, yang kegunaannya untuk mempermudah para pengunjung website supaya lebih mudah melacak lokasi mereka saat ini dan dari mana awal mereka mulai melakukan perjalanan diwebsite atau blog tersebut.

Tahukah kalian, bahwa Breadcrumb juga telah menyediakan suatu link penghubung untuk menghubungkan halaman yang sedang dibuka dengan diikuti halaman - halaman yang sudah lebih dulu dibuka sebelumnya. Dengan kata lain, Breadcrumb ini juga akan memberikan sebuah jejak bagi pengunjung website atau blog.

Itulah sedikit pengertian dari Breadcrumb. Nah untuk tutorial yang akan saya berikan saat ini yaitu, cara membuat Breadcrumb website Html menggunakan Css3.

Oke, sebelum kita lanjut dan mulai kedalam tahap pembuatannya, disini kita memerlukan beberapa buah file seperti:

• Html
• Css
• Scss
• Jquery

Untuk cara pembuatannya ikuti langkah - langkah dibawah ini:

Yang pertama yaitu, buatlah file html nya dan beri nama index.html atau terserah kalian. Lalu copy contoh syntax berikut ini:

<ul id="breadcrumb">
  <li><a href="#"><span class="icon icon-home"> </span></a></li>
  <li><a href="#"><span class="icon icon-beaker"> </span> Projects</a></li>
  <li><a href="#"><span class="icon icon-double-angle-right"></span> Breadcrumb</a></li>
  <li><a href="#"><span class="icon icon-rocket"> </span> Getting started</a></li>
  <li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
</ul>

Pastekan kedalam file index.html yang sudah kalian buat sebelumnya, kemudian simpan file tersebut.

Langkah selanjutnya adalah kalian buat lagi file dan beri nama style.css. kalau sudah copy kembali syntaxnya berikut ini:

body {
  text-align: center;
  background-color: #34495e;
}
h1 {
  font-weight: 100;
  font-size: 32px;
  padding: 40px;
  color: #fff;
}

#breadcrumb {
  list-style: none;
  display: inline-block;
}
#breadcrumb .icon {
  font-size: 14px;
}
#breadcrumb li {
  float: left;
}
#breadcrumb li a {
  color: #fff;
  display: block;
  background: #3498db;
  text-decoration: none;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
}
#breadcrumb li:nth-child(even) a {
  background-color: #2980b9;
}
#breadcrumb li:nth-child(even) a:before {
  border-color: #2980b9;
  border-left-color: transparent;
}
#breadcrumb li:nth-child(even) a:after {
  border-left-color: #2980b9;
}
#breadcrumb li:first-child a {
  padding-left: 15px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
#breadcrumb li:first-child a:before {
  border: none;
}
#breadcrumb li:last-child a {
  padding-right: 15px;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
}
#breadcrumb li:last-child a:after {
  border: none;
}
#breadcrumb li a:before, #breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #3498db;
  border-width: 20px 10px;
  width: 0;
  height: 0;
}
#breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}
#breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #3498db;
}
#breadcrumb li a:hover {
  background-color: #1abc9c;
}
#breadcrumb li a:hover:before {
  border-color: #1abc9c;
  border-left-color: transparent;
}
#breadcrumb li a:hover:after {
  border-left-color: #1abc9c;
}

Pastekan kembali kedalam kedalam style.css nya.

Jika sudah, langsung saja kalian simpan. Nah, untuk jquery nya, disini kita memakai:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Tempatkan script diatas pada bagian bawah atau disebut footer.

Apabila semua langkah diatas sudah dilakukan, waktunya kalian untuk menggabungkan semua file yang sudah kalian buat.

Bagaimana Cara Menggabungkannya?

Mudah saja, cukup dengan kalian lihat contoh keseluruhan dari syntax tersebut seperti penampakan dibawah:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>SeoTechman CSS3 Breadcrumb</title>
  <link rel="stylesheet" href="css/style.css"/>
 </head>
 <body>
 <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/>
  <h1>Flat CSS3 breadcrumb</h1>
<ul id="breadcrumb">
  <li><a href="#"><span class="icon icon-home"> </span></a></li>
  <li><a href="#"><span class="icon icon-beaker"> </span> Projects</a></li>
  <li><a href="#"><span class="icon icon-double-angle-right"></span> Breadcrumb</a></li>
  <li><a href="#"><span class="icon icon-rocket"> </span> Getting started</a></li>
  <li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
</ul>
<div class="footer">
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</div>
</body>
</html>

Setelah semuanya sudah kalian buat dengan mengkuti panduan diatas, sekarang coba kalian akses pada browser dan bagaimana hasilnya.

Live demonya untuk saat ini saya hanya melampirkan screenshoot hasil dari syntax diatas.

Apabila kalian ingin mendapatkan hasil yang lebih bagus dan maksimal, kalian hanya cukup memainkan atau edit pada bagian Css nya sehingga menjadi terlihat sebegitu menarik breadcrumbs itu.

Mungkin saya rasa cukup untuk pembahasan kali ini, mudah - mudahan bermanfaat selalu untuk semuanya.

Itulah Cara mudah membuat breadcrumb Seo friendly Di Website Html. Ambil ilmu positifnya dari setiap pembahasan kali ini dan hiraukan yang negatifnya.

Saya akhiri dengan, terimakasih . Wassalammuallaikum, wr, wb. Sampai bertemu dilain waktu.

Virm Aditya

Berita teknologi informasi terkini

Share this post