NEWS
Loading...
  • Posted by : Johanes Djogan 24 Mei 2012

    Tombol Menu Unik dengan CSS3 Animasi

    Mencari sesuatu yang baru memang sulit.dibutuhkan kerja keras untuk mendapatkan sesuatu yang baru.inspirasipun tidak akan datang jika kita hanya berdiam diri,dan akhirinya setelah keliling" dunia browsing browsing dan browsing.akhirnya,kepala gw pusing @___@"
    wakakaka,memang bikin galau trik yang satu ini.sebelum'a saya cuma iseng" dengan CSS3 keyframe yang saya buat n modif sendiri di header blog saya,tapi karena kepikiran yang lain juga,banyak messages gajelas di fb yang minta share" cara'a,yweslah saya share deh.tapi trik ini agak beda dengan yang ada di header saya,beda'a CSS ini saya terapkan untuk tombol readmore.tapi sebenarnya bisa juga untuk tombol menu sendiri.karena kalau saya nyebarin masang animasi sebesar itu yang seperti blog saya,yang ada saya malah nyebarin dosa memberatkan blog kamu deh.wakwkawkawk.tapi untuk trik ini menurut saya cukup ringan,tidak ada penggunaan gambar sama sekali,100% CSS3.tapi untuk tampilan terbaik,saya sarankan untuk upgrade browser kamu ke versi yang terbaru,dan jangan sekali" menggunakan Internet Explore,karena IE tidak 100% mendukung CSS3 animasi.ok lansung saja~
    Sebelumya saya ingatkan dahulu untuk,BACKUP TEMPLATE ANDA sebelum menggunakan trik ini ==v
    #kerusakan template bukan tanggung jawab saya.


    Tampilan terbaik dapat dirasakan dengan browser Goggle chrome karena 100% mendukung css3 animasi.sedangkan untuk Mozilla firefox tidak.akibat'a kalau dibuka dengan Mozilla,mungkin akan terasa berat dan animasinya agak ngadet",jadi pikir" dahulu untuk menggunakan trik ini.so,yang mau coba" belajar css3 keyframe,silakan dicoba"~xD


    Trik dibawah ini,adalah trik untuk tombol Readmore kamu.
    saya akan jelaskan untuk Contoh Style 1 *contoh'a ada dibawah*

    Trik 1

    Pertama buka blogger=>rancangan=>Edit HTML,copy paste CSS dibawah ini diatas kode [
    ]]></b:skin>

    .circlewrapper {
    width: 98px;
    height: 98px;
    float: right;
    font-size: 14px;
    text-align: center;
    text-shadow: 0 1px 1px black;
    }

    .circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(255,0,0,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #ff0000;
    width:70px;
    height:70px;
    margin:0 auto;
    -moz-animation:spin1Pulse 1s infinite ease-in-out;
    -webkit-animation:spin1Pulse 1s infinite linear;
    }
    .circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(255,0,0,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #ff0000;
    width:50px;
    height:50px;
    margin:0 auto;
    position:relative;
    top:-70px;
    -moz-animation:spin2Pulse 1s infinite linear;
    -webkit-animation:spin2Pulse 1s infinite linear;
    }

    .circle2 {
    background-color: transparent;
    border: 5px solid rgba(255, 0, 0, 0.9);
    opacity: .9;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 15px #ff0000;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    position: relative;
    top: -150px;
    text-align: center;
    line-height: 90px;
    }

    @-moz-keyframes spin1Pulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% { -moz-transform:rotate(145deg); opacity:1;}
    100% { -moz-transform:rotate(-320deg); opacity:0;}
    }
    @-moz-keyframes spin2Pulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);}
    }
    @-webkit-keyframes spin1Pulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0;}
    }
    @-webkit-keyframes spin2Pulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg);}
    }

    Setelah itu simpan,dan centang expand widget templates,lalu cari kode html yang seperti ini/ yang mirip" seperti dibawah ini(kode HTML dibawah ini berasal dari template guilty crown)

    #note.ada kemungkinan saat kamu mencari kode html dibawah ini,kamu akan menemukan 2 kode yang sama persis.
    #solusi:dicopas dua"a

    <span class='rmlink' style='float:right'>
    <a expr:href='data:post.url'>Read More....</a>
    </span>

    lalu hapus semua kode diatas,kemudian diganti Dengan kode html dibawah ini

    <div class="circlewrapper">
    <div class="circle"></div>
    <div class="circle1"></div>
    <div class="circle2">
    <a expr:href='data:post.url'>Read More...</a>
    </div></div>

    Setelah Itu simpan dan lihat hasilnya~

    -Contoh uji coba di template guilty crown-

    Trik 2

    CSS'a sama dengan cara diatas,beda'a cara yang dibawah ini kita tinggal mengganti hanya mengganti kode html
    <a expr:href='data:post.url'>Read More...</a>
    dengan
    <a href="http://alamatlink">namalink</a>
    Tujuanya agar Url linknya bisa kita sesuaikan dengan alamat link yang kita inginkan.ganti http://alamatlink dengan url link kamu.
    (berlaku untuk semua style)

    <div class="circlewrapper">
    <div class="circle"></div>
    <div class="circle1"></div>
    <div class="circle2">
    <a href="http://alamatlink">namalink</a></div></div>
    kamu tinggal ganti alamat dan nama linknya.bisa di letakan dimana saja(kode HTTML ada tempatnya)
    diantara kode body
    #buat yang ga ngerti (<body> isi html </body>)
    atau bisa juga diletakan di (rancangan=> add a gadget=>HTML/JavaScript=> copy paste lalu simpan.


    Tambahan: Untuk mengganti warna,kamu tinggal ganti kode warna hexa dan rgbanya.
    misal

    Warna merah:
    Hexa :#ff0000

    Rgba color: rgba(255,0,0,0.9);

    Info lanjut'a ada dipostingan saya

    -Tips design menggunakan CSS3

    -Tips memilih warna design blog





    Style1

    DEMO

    CSS
    .circlewrapper {
    width: 98px;
    height: 98px;
    float: right;
    font-size: 14px;
    text-align: center;
    text-shadow: 0 1px 1px black;

    }

    .circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(255,0,0,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #ff0000;
    width:70px;
    height:70px;
    margin:0 auto;
    -moz-animation:spin1Pulse 1s infinite ease-in-out;
    -webkit-animation:spin1Pulse 1s infinite linear;
    }
    .circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(255,0,0,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #ff0000;
    width:50px;
    height:50px;
    margin:0 auto;
    position:relative;
    top:-70px;
    -moz-animation:spin2Pulse 1s infinite linear;
    -webkit-animation:spin2Pulse 1s infinite linear;
    }

    .circle2 {
    background-color: transparent;
    border: 5px solid rgba(255, 0, 0, 0.9);
    opacity: .9;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 15px #ff0000;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    position: relative;
    top: -150px;
    text-align: center;
    line-height: 90px;
    }

    @-moz-keyframes spin1Pulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% { -moz-transform:rotate(145deg); opacity:1;}
    100% { -moz-transform:rotate(-320deg); opacity:0;}
    }
    @-moz-keyframes spin2Pulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);}
    }
    @-webkit-keyframes spin1Pulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0;}
    }
    @-webkit-keyframes spin2Pulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg);}
    }

    HTML
    <div class="circlewrapper">
    <div class="circle"></div>
    <div class="circle1"></div>
    <div class="circle2">
    <a expr:href='data:post.url'>Read More...</a>
    </div></div>

    Style 2


    CSS
    .circlebg {
    width: 53px;
    height: 53px;
    position: relative;
    border-radius: 50px;
    -moz-animation: spin3Pulse 3s infinite ease-in-out;
    -webkit-animation: spin3Pulse 3s infinite linear;
    }

    .circlewrapper2 {
    width: 53px;
    height: 53px;
    text-align: center;
    border-radius: 50px;
    border: 3px solid rgba(0, 0, 0, 0.9);
    padding: 8px;
    background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
    background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
    }

    .circlewrapper3 {float:right;}

    .circlewrapper3 a {
    width: 78px;
    height: 78px;
    float: right;
    font-size: 14px;
    text-align: center;
    border-radius: 50px;
    text-shadow: 0 1px 1px black;
    margin-top: -50px;
    position: absolute;
    line-height: 20px;
    }

    .circle4 {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 1);
    opacity: .9;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    }


    .circle5 {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 1);
    opacity: .9;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    position: relative;
    top: -51.5px;
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    }

    .circle6 {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 1);
    opacity: .9;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    position: relative;
    top: -103.5px;
    }

    .circle7 {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 1);
    opacity: .9;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    position: relative;
    top: -155px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    }


    @-moz-keyframes spin3Pulse {
    0% { -moz-transform:rotate(360deg); }
    100% { -moz-transform:rotate(0deg);}
    }
    @-webkit-keyframes spin3Pulse {
    0% { -webkit-transform:rotate(360deg);}
    100% { -webkit-transform:rotate(0deg); }
    }


    HTML
    <div class="circlewrapper3">
    <div class="circlewrapper2">
    <div class="circlebg">
    <div class="circle4"></div>
    <div class="circle5"></div>
    <div class="circle6"></div>
    <div class="circle7"></div>
    </div></div>
    <a expr:href='data:post.url'>Read More</a>
    </div>


    Style3




    CSS

    span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/
    height: 4px; width: 4px;
    background: #fff;
    display: inline-block;
    margin: 2px 2px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-animation: loader 4s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -webkit-animation-fill-mode: both;
    -moz-animation: loader 4s infinite;
    -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -moz-animation-fill-mode: both;
    animation: loader 4s infinite;
    animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/
    span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
    span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
    span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
    span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
    span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
    span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
    @-webkit-keyframes loader {
    0% {-webkit-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}/*Blog Johanes-Djogzs.blogspot.com*/
    50% {-webkit-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}}
    @-moz-keyframes loader {
    0% {-moz-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-moz-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}}
    @-keyframes loader {
    0% {-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}}/*Blog Johanes-Djogzs.blogspot.com*/
    .tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;}
    .loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);}
    .loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black;
    border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/
    background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}





    HTML

    <div class='loading'>
    <p class='tombol-readmore'><a expr:href='data:post.url'>Readmore</a></p>
    <span class='l-1'/>
    <span class='l-2'/>
    <span class='l-3'/>
    <span class='l-4'/>
    <span class='l-5'/>
    <span class='l-6'/></div>





    Style4



    CSS
    .menureadmore1 {
    clear: both;
    margin:auto;
    background: black;
    font-size: 15px;
    color: #32BDE8;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    border: 8px solid
    rgba(255, 255, 255, 0.8 );
    -webkit-box-shadow: 0 1px 4px
    rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;}

    .menureadmore1::before {
    content: "";
    position: absolute;
    width: 125px;
    margin: auto;
    height: 125px;
    border: 8px solid
    rgba(255, 255, 255, 0.8 );
    -webkit-box-shadow: 0 1px 4px
    rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    -webkit-border-radius: 12px;
    -moz-border-radius: 120px;
    border-radius: 120px;
    display: block;
    margin-top: -30px;
    margin-left: -30px;
    }

    .animasimenureadmore1 {
    position: absolute;
    width: 105px;
    margin: auto;
    height: 105px;
    border: 8px dotted rgba(50, 189, 232, 0.8 );
    -webkit-box-shadow: 0 1px 4px
    rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    -webkit-border-radius: 12px;
    -moz-border-radius: 120px;
    border-radius: 120px;
    display: block;
    margin-top: -100px;
    margin-left: -20px;
    -moz-animation:spin5Pulse 2s infinite linear;
    -webkit-animation:spin5Pulse 2s infinite linear;
    }

    @-moz-keyframes spin5Pulse {
    0% { -moz-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% {opacity:1;}
    100% { -moz-transform:rotate(-360deg); opacity:0;}
    }
    @-webkit-keyframes spin5Pulse {
    0% { -webkit-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% {opacity:1;}
    100% { -webkit-transform:rotate(-360deg); opacity:0;}
    }



    HTML

    <div class='menureadmore1'>
    <a expr:href='data:post.url'>Readmore</a>
    <div class='animasimenureadmore1'/>
    </div>















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

    1. wah mantep,, ditunggu menu unik brikutnya... :D kabarin ya :)

      BalasHapus
    2. .wew.. keren..
      .di coba dulu yak..
      .jangan lupa kunjungan baliknya..

      http://0necyber.blogspot.com/

      BalasHapus
    3. @[Admin] -=- FT -=- bsk ane update lagi,sekarang mau tidur,bsk kuliah siang~xDD

      BalasHapus
    4. wah Tambah Gila Tampilan blogX Nih huahahaha Edan bener hebat2

      BalasHapus
    5. wduhh,ternyata di mozilla agak cacad,ane betulin dulu deh @__@

      BalasHapus
    6. msh bgusan style 1..
      ditunggu deh style lainnya :3 :D

      BalasHapus
    7. kok di template another gabisa ya

      BalasHapus
    8. kok di themplate Black Rock shotter ga bisa ya??

      BalasHapus
    9. kok error ya kak..

      pas kode yg kedua @@

      BalasHapus
    10. Yg coming soon mana? Kren (y_y)

      BalasHapus
    11. biar tombol readmore yg nomor 4 pindah ke pojok kanan gmna pak??

      BalasHapus
    12. Style 1 gak bisa di Template Hatsune Miku ya bro?? :D

      BalasHapus
    13. @CyBorg-4rt tmbhn css float:right atau atur pakai margin

      BalasHapus
    14. Saya coba kok gak tampil yak, coba lagi deeeh... :D

      BalasHapus
    15. Udah bisa, tapi kok jadi ada ruang kosong gede dibawahnya(Antar posting). gk jadi di pasang deh...:D

      BalasHapus
    16. gan merubah warna yg style 2 bisa ga?

      BalasHapus
    17. @Rizky

      bisa,tinggal ganti warna gradient ini:

      background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
      background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);

      ganti kode wana hex'a

      BalasHapus
    18. @Johanes djogan ok sip gan uda bisa ganti
      tpi pas ane ganti style cloud animasi Hilang tombol menunya gan aneh..

      BalasHapus
    19. @Rizky

      barusan saya cek blog kamu masih ada tombol'a sob :)

      BalasHapus
    20. hebat kau nes

      tetap pertahankan kreatifitasmu nak

      salut saya lihat blogmu ini

      no 1 laa :D

      BalasHapus
    21. kalo gk ada code ini gmn?
      span class='rmlink' style='float:right'>
      Read More....
      </span

      BalasHapus
    22. Gan , saya mau minta tolong ??
      saya mau minta tolong editin Template AKATSUKI , gan !! :'(
      PLEASE , dengan website http://zeuzzcheaterz.blogspot.com/
      #Mksih

      BalasHapus
    23. Pak itu bisa gak langsung buat seluruh link? misalnya kalo cursor didekatkan ke sub menu atau ke post lain supaya style nya tetep muncul.. kalo bisa kasih tau caranya

      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 -