Ribbon menu CSS3

Ribbon menu CSS3

Apa kabar sobat?sudah lama nih saya share css3 karena sekarang sibuk kuliah,tapi kalau ada waktu senggang ,manfaatin aja deh~xDD thx sudah sering" mampir.nah kali ini saya mau share css ribbon menu.design menubar yang menyerupai pita,karena menarik dan ringan.ok langsung saja~


Pertama,buka blogger kamu => Rancangan=> edit HTML lalu masukan kode html di bawah ini.


<div class='menu'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
</div>


Ganti tanda pagar # dengan url link kamu


kemudian,masukan css dibawah ini di atas kode ]]></b:skin>


.menu:after, .menu:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid rgba(0, 159, 234, 0.3 );}
.menu:after {
border-right-color:transparent;}
.menu:before {
border-left-color:transparent;
}
.menu a:link, .menu a:visited {
color:#fff;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;}
.menu span {
background:rgba(0, 159, 234, 0.3 );
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s;
-moz-transition: background, margin 0.2s;
-o-transition: background-color, margin-top 0.2s;
transition: background, margin 0.2s;
}
.menu a:hover span {
background:rgba(0, 159, 234, 0.5 );
margin-top:0;
}
.menu span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );
}
.menu span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );}



lalu simpan dan lihat hasilnya.
Contohnya,kamu bisa lihat dibawah ini




Simple bukan? selamat mencoba,Arigatou Gozaimasu~

Komentar

  1. Wah manteb masbro :D
    langsung dicoba :D

    BalasHapus
  2. keren banget menunya, ijin coba bro :D

    BalasHapus
  3. @bagoes.terserah kamu mau dimana.masa ga tau kode html?=="
    mau dibawah kode body ato sidebar ,terserah kamu mau letak'a dimana.masa harus dijelasin juga =____=Zzz
    ingat,css ama html itu beda.

    BalasHapus
  4. kalo di template bang anes yg costume css3 v2 bisa kagak? masalahnya di blogku lamanya di bawah g kayak gitu

    BalasHapus
  5. wah sama kayak yg aku share sebelumnya hehhee

    BalasHapus
  6. hhehe.berarti aq telat dunk=__="
    aq biasa dpt info'a dari google alert yg update truz dari gmail.wkwkw

    BalasHapus
  7. tpi disini beda'a aq pakai rgba color.jadi bisa dibuat transparant ^^

    BalasHapus
  8. ga bisa di pakai di Css3 v2 ya ?
    ud di tes brulang kali soalnya... +_+

    BalasHapus
  9. bisa kq.trgantung kamu letakin'a dimana~

    BalasHapus
  10. aq udah coba berkali" dan ga ada masalah ^^

    BalasHapus
  11. setelah di coba keren sih cuman dia lebih begeser ke kiri pdhal ada tulisan welcome d sebelah kiri navbar...gimana mindainnya tuh? maklum gak ngerti css mas...

    BalasHapus
  12. maaf,mksud'a tulisan welcome yang mana ya? =__=a

    BalasHapus
  13. @-=MR.Kraze=- terserah,mau diaad gadget bisa,mau di bawah kode body bisa.ngerti html ga? =__="

    BalasHapus
  14. thx sob,
    langsung saya coba sob.
    Oh ya sob,
    kode itu taruh dimana sob, ?
    Diatas kode apa gtu, ?

    Itu bwt menu barnya kan sob, ?
    Kan q udah pasang menu barnya, trz mw diganti yg ini, gmana cranya sob.
    Mohon pencerahaanya
    thx

    BalasHapus
  15. @trii waluyo

    terserah,mau di add gadget bisa,mau di bawah kode body bisa.tergantung kamu mau letakin dimana,coz letak'a ga cuma di 1 tempat,bisa dimana aja.
    poko'a klo kode html itu masih didalam html

    susah ya klo ga ngerti css/HTML =__=

    BalasHapus
  16. maaf sob, aku kan bodoh, jadi ga tw kode css, ga seperti mas johanes.
    Hehe


    oh ya sob, misalnya menu tersebut dikasih submenu ke bawah bisa ga sob, ?
    Cranya gmana, ?

    Mohon pencerahaanya, ,

    BalasHapus
  17. @trii waluyo gpp,namanya juga belajar sob :)

    owh,menu ini ga bisa dibuat dropdown.

    BalasHapus
  18. Siip sob,
    Thx akhirnya jadi juga,
    Bingung nie sob, mw desain kya apa,
    Tpi setelah lihat Blog Johanes, jadi saya terinspirasi.
    Bener2 Blog Johanes bener2 tutorial css3 nya bener2 lengkap.


    Sob, q mw tanya+minta diajarin sob,
    Oh ya, postingan Blog Johanes kan ada scrol downya tuh,
    Gmana cra bwtnya sob, ?
    Bgus yakin sob,

    Mohon pencerahanya

    BalasHapus
  19. @trii waluyo thx.

    kalau itu saya cuma nambahin css overflow-x: scroll;

    BalasHapus
  20. nambain kode overflow-x: scroll; itu tepatnya dimana sob, ?
    Apa cuma kaya gto aja sob, di blog johanes ada postinganya ga sob, ?

    BalasHapus
  21. @trii waluyo tiap template bisa beda css'a,kalau aq sih di .post{


    ga ada,coz menurut aq itu dasar bgt,kamukan bisa cari di google,banyak kq tutor'a.

    blog aq cuma share jquery,trik CSS3,trik HTML,sama sharing template,aq ga share yang dasar" gitu.==v

    bkn'a sombong ya,tapi cuma berusaha untuk tetap profesional dan kreatif.

    yaa intinya,untuk blajar CSS/Html itu perlu kerja keras dgn usaha sendiri,tanpa tergantung orang lain,dan jangan mau disuapin trus.

    aq aja dulu begitu gara" dulu diceramahin ama kk aq==v
    tapi manfaat'a jd gini deh,aq aja blajar CSS/HTML otodidak dari google ==v

    BalasHapus
  22. Iya sob, thx atas masukan.nya, ?
    Masukan imi akan kujadikan, prinsip saya.
    Hehe


    Oh ya sob, tadi aku bis ke warnet, buka blog q lewat Google Chrome malah ga bisa, blog Johanes juga ga bisa. Padahal kemaren bisa,apa warnetnya. .

    Apa mgkn google chrome diwarnet itu rusak.

    Trus blog johanes kalau dibuka di Mozilla agak terasa berat, sama sprti blog saya.

    Mungkin gara-gara CSS3nya ya sob, apa berpengaruh sob, ?

    BalasHapus
  23. @trii waluyo tergantung koneksi internet'a. aq tiap hari buka ga ada masalah kq :)

    BalasHapus
    Balasan
    1. iya sob, warnetnya yg error. oh ya sob, q mau tanya nie. 1. gmana ngasih efek css3 pada gambar di postingan sob, ? soalnya q pengen bgt bisa, hehe. aku udah berusaha nie sob. mksdnya tanya sama blog johanes. arigato

      Hapus
  24. kakmau tanya nih kan menu ini aku taruh di blog agar pass gimana pengaturanya
    nih templatenya http://demo-iyunksulivan.blogspot.com/

    BalasHapus
  25. @IyunKSulivaNBlog ini terbuka hanya untuk pembaca yang diundang saja. Kok ane ga bisa buka blog ente -,-

    BalasHapus
  26. bro yohanes saya udah buat tapi kok ga bisa d klik ya? http://ginjalsapi.blogspot.com/

    BalasHapus
  27. gan kalo posisinya dijadiin ditengah gimana ya??
    ane pasang jadi melayang diutak atik tetep posisi dikiri mulu gan

    bantuannya
    tkp: http://x-sonz.blogspot.com/

    BalasHapus
  28. Artikelnya mantap2 eu, jadi betah disini, ijin bukmark ah :)

    BalasHapus
  29. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Posting Komentar

"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

"Sorry your comment will not be replied, because this blog has been inactive. Thank you"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template