2011-06-24

Membuat Menu Breadcrumb

Membuat menu breadcrum b, menu broadcumb yaitu menu yang sama dengan menu navigasi horizontal yang biasanya dibawah header atau diatas header, trus bedanya apa? nah bedanya dari menu breadcrumb ini terletak dipaling atas blog mirip seperti toolbar dan lebarnya selalu memenuhi lebar layar komputer , menu ini dapat kita gunakan untuk menempatkan link-link halaman atau blog kita yang lain, contohnya dibawah ini :


Untuk membuatnya cukup mudah hanya menambahkan sedikit CSS dan javascript dibawah ini :

1. Pertama silahkan Login ke blogger
2. Masuk ke Rancangan >> Edit HTML
3. Letakkan kode berikut ini diatas ]]></b:skin> (gunakan CTRL+F untuk mempermudah pencarian)
/* ---- Breadcrumb Menu source 1st by u-sup.blogspot.com ----*/
.usup-breadcrumb {
position:relative;
height:30px;
width:100%; }

.usup-breadcrumb ul {
position:relative;
margin:0 5px 0 5px;
padding:0;
height:30px;
background:url ('http://2.bp.blogspot.com/-3NPO5mKoPE4/TbH2Qw7bvXI/AAAAAAAAAfE/5dJ5f9Rmvpg/s320/breadcrumbImage.png') 0px -30px repeat-x; }

.usup-breadcrumb ul li {
padding:0; margin:0;
list-style:none;
float:left;
height:30px
display:inline;}

.usup-breadcrumb ul li a {
font:12px Arial, Helvetica, sans-serif; color:rgb(255,255,255);
text-decoration:none;
line-height:30px;
display:block;
background:url ('http://2.bp.blogspot.com/-3NPO5mKoPE4/TbH2Qw7bvXI/AAAAAAAAAfE/5dJ5f9Rmvpg/s320/breadcrumbImage.png') 100% -60px no-repeat;
padding:0 17px 0 15px; }

.usup-breadcrumb ul li a:hover {text-decoration:underline; color:rbg(255,255,255);}
.usup-breadcrumb ul li a.active{background:none; color:rgb(255,255,255);}
.usup-breadcrumb ul li a.active:hover {text-decoration:none;}

.usup-breadcrumb .left {
position:absolute; top:0px; left:0px; width:10px; height:30px; display:block; z-index:1;
background:url ('http://2.bp.blogspot.com/-3NPO5mKoPE4/TbH2Qw7bvXI/AAAAAAAAAfE/5dJ5f9Rmvpg/s320/breadcrumbImage.png') 0% 0px no-repeat;}

.usup-breadcrumb .right {
position:absolute; top:0px; right:0px; width:10px; height:30px; display:block; z-index:1;
background:url ('http://2.bp.blogspot.com/-3NPO5mKoPE4/TbH2Qw7bvXI/AAAAAAAAAfE/5dJ5f9Rmvpg/s320/breadcrumbImage.png') 100% -90px no-repeat; }
4. Selanjutnya, letakkan kode berikut tepat dibawah kode  <body> 
<div class='usup-breadcrumb'>
<span class='left'/>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://www.blogger.com/'>My Profil</a></li>
<li><a href='http://facebook.com/usupdotnet'>My Facebook</a></li>
<li><a href='http://twitter.com/usupnew'>My Twitter</a></li>
<li><a href='http://zonablogger.com/'>Zona Blogger</a></li>
<li><a href='http://article.azuli.org/'>My Article</a></li>
<li><a href='http://templatemaxs.com/'>Templatemaxs</a></li>
</ul>
<span class='right'/>
</div> 
5. Simpan pekerjaan kamu, dan kamu sudah selesai

Comment:

  • Ubahlah teks warna hijau dengan link yang kamu punya
  • Kamu dapat menyesuaikan warna dari menu breadcrumb tersebut dengan blog kamu, caranya silahkan simpan gambar diatas ini kemudian edit dengan aplikasi photoshop atau yang lainnya, dan uploadlah gambar tersebut mengenai bagaimana cara upload gambar di blogger bisa baca Disini .
  • Jika gambar sudah diupload rubahlah URL gambar (yang berwarna merah) tersebut dengan URL gambar kamu

Dapatkan artikel terbaru seperti Membuat Menu Breadcrumb langsung ke Email kamu..!!!


Ada 9 komentar untuk Membuat Menu Breadcrumb

  1. ko g muncul maz.mila bingung ah

    BalasHapus
  2. Bang mau tanya seputar blog..
    giman cara buat kotak ketika kita arahkan cursor di ARTIKEL tERBARU BLOG ABANG...
    Makasih..

    BalasHapus
  3. Diman :
    Cari saja lewat google dengan kata kunci
    "Recent Posts dengan BuzzBoost dari Feedburner"
    Sy belum smpat bikin tutorialnya....

    BalasHapus
  4. makasih mas broo tak cobannya

    BalasHapus
  5. pagi mas, sya lagi coba menu breadcrumb, setelah saya ikutin petunjuknya (copy paste) hasilnya ada di atas logo sya, sedang kan saya maunya dia dibawah logo saya, mohon infonya mas apa yg harus sya ubah

    NB: sya adalah seorang pemula, mohon infonya, thx

    BalasHapus
    Balasan
    1. Itu memang untuk bagian atas klw yg dibawah header disini :
      http://u-sup.blogspot.com/2011/11/meta-tag-otomastis-di-setiap-halaman.html dan
      http://u-sup.blogspot.com/2012/02/navigasi-menu-dengan-css3-menu-maker.html

      Hapus
  6. bang...kalo posisinya tengah gimana....soalnya pas ane pasang adanya sebelah kiri...
    trimakasih sblumnya..

    BalasHapus
  7. gmn cranya ganti foto profil bos?

    BalasHapus
  8. sama aku juga bingung...masi mending ngurus anak"sd...

    BalasHapus