Print this page
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 ----*/4. Selanjutnya, letakkan kode berikut tepat dibawah kode <body>
.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; }
<div class='usup-breadcrumb'>5. Simpan pekerjaan kamu, dan kamu sudah selesai
<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>
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
from: http://u-sup.blogspot.com/2011/06/membuat-menu-breadcrumb.html
|
|
|
|
Get Free Email Updates Daily! |
Follow us! 
|
Terimakasih anda telah membaca artikel 
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
Postingan
