Cara membuat menu bolak balik dengan efek 3D di blog

Pada tutorial kali ini saya akan share ke anda tentang cara membuat menu Bolak balik dengan efek 3D. Menu ini murni berbasis CSS dengan konsep menggunakan efek 3D (tiga dimensi) yang bisa bolak balik. Menu ini akan bolak balik apabila krusor kita arahkan ke menu tersebut. Menu ini di buat oleh David Walsh. David adalah salah satu pengembang web favorit penulis.

View Demo

Cara menambahkan Menu ini di blog  

• Masuk ke akun blogger anda
• Kemudian cari Kode / tag ]]></b:skin> ( CTRL + F untuk memudahkan pencarian)
• Pastekan kode CSS berikut dibawah ini tepat di atas kode ]]></b:skin> 

Kode CSS 

/* menu bolak balik dengan efek 3D by jalu-pangna.blogspot.com */
        .block-menu {
            display: block;
            background: #000;
        }
        .block-menu li {
            display: inline-block;
        }
        .block-menu li a {
color: #fff;
            display: block;
            text-decoration: none;
            font-family: 'Passion One',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;
        }
        /* animation domination */
        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }
            .three-d:not(.active):hover {
                cursor: pointer;
            }
            .three-d:not(.active):hover .three-d-box,
            .three-d:not(.active):focus .three-d-box {
                -moz-transform: translateZ(-25px) rotateX(90deg);
                -webkit-transform: translateZ(-25px) rotateX(90deg);
                -o-transform: translateZ(-25px) rotateX(90deg);
                transform: translateZ(-25px) rotateX(90deg);
            }
        .three-d-box {
            -webkit-transition: all .3s ease-out;
            -moz-transition: all .3s ease-out;
            -ms-transition: all .3s ease-out;
            -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }
        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }
        .back {
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
        }
        .front, .back {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

Kode HTML

• Masuk ke Blogger -> Tata Letak -> Klik tambahkan Gadget -> HTML/Javascript
• Masukan kode HTML berikut didalamnya

<ul class="block-menu"> <li><a href="#" class="three-d"> Home <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span> </a></li> <li><a href="#" class="three-d"> Demos <span class="three-d-box"><span class="front">Demos</span><span class="back">Demos</span></span> </a></li> <li><a href="#" class="three-d"> Deals <span class="three-d-box"><span class="front">Deals</span><span class="back">Deals</span></span> </a></li> <li><a href="#" class="three-d"> About <span class="three-d-box"><span class="front">About</span><span class="back">About</span></span> </a></li> </ul>

• Simpan Gadget, selesai...

Catatan:

Ganti seluruh tanda # dengan link-link anda, kemudian anda juga bisa menambahkan opsi menu berikutnya dengan menambahkan kode berikut dibawah ini tepat diatas tag / kode </ul>.

<span class="three-d-box"><span class="front">Title</span><span class="back">Title</span></span>

Happy Blogging..!