NEWS
Loading...
  • Posted by : Johanes Djogan 7 Mar 2012

    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~

    { 41 comments... read them below or Comment }

    1. @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
    2. kalo di template bang anes yg costume css3 v2 bisa kagak? masalahnya di blogku lamanya di bawah g kayak gitu

      BalasHapus
    3. wah sama kayak yg aku share sebelumnya hehhee

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

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

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

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

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

      BalasHapus
    9. 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
    10. maaf,mksud'a tulisan welcome yang mana ya? =__=a

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

      BalasHapus
    12. 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
    13. @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
    14. 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
    15. @trii waluyo gpp,namanya juga belajar sob :)

      owh,menu ini ga bisa dibuat dropdown.

      BalasHapus
    16. 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
    17. @trii waluyo thx.

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

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

      BalasHapus
    19. @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
    20. 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
    21. @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
    22. kakmau tanya nih kan menu ini aku taruh di blog agar pass gimana pengaturanya
      nih templatenya http://demo-iyunksulivan.blogspot.com/

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

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

      BalasHapus
    25. 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
    26. Artikelnya mantap2 eu, jadi betah disini, ijin bukmark ah :)

      BalasHapus
    27. Komentar ini telah dihapus oleh pengarang.

      BalasHapus

    "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"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -