Cara Membuat Menu Bar 3D SEO Friendly

Oleh Unknown

Wednesday, August 23, 2017

Bagikan :

Tweet

Cara Membuat Menu Bar 3D SEO Friendly - Pada kesempatan kali ini kami akan memberikan salah satu cara supaya blog kita menjadi lebih menarik dan unik. Membuat blog yang unik memang mempunyai nilai tersendiri bagi setiap blog, Membuat Menu Bar  menjadi 3D salah satunya.

Baca juga :

Cara Membuat Widget Label Berwarna di BlogCara Membuat Scroll Bar Pada Postingan BlogCara Membuat Sitemap 100% Otomatis SEO Friendly di Blogger

Berikut Bagaimana Cara Membuat Menu Bar 3D SEO Friendly di Blog:

• Silahkan anda masuk di blog anda!
• Lalu pilih Template/Theme kemudian Klik Edit HTML.
• Lalu carilah kode  ]]></b:skin>  setelah itu copy kode dibawah dan paste di atas  kode  ]]></b:skin>

/* basic menu styles */
.myster {
    display: block;
    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
}
.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;
 font-smoothing: antialiased;
 text-transform: uppercase;
 overflow: visible;
 line-height: 20px;
 font-size: 24px;
 padding: 15px 10px;
}

/* animation domination */
.three-d {
 perspective: 200px;
 transition: all .07s linear;
 position: relative;
 cursor: pointer;
}
 /* complete the animation! */
 .three-d:hover .three-d-box, 
 .three-d:focus .three-d-box {
  transform: translateZ(-25px) rotateX(90deg);
 }

.three-d-box {
 transition: all .3s ease-out;
 transform: translatez(-25px);
 transform-style: preserve-3d;
 pointer-events: none;
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
}

/* 
 put the "front" and "back" elements into place with CSS transforms, 
 specifically translation and translatez
*/
.front {
 transform: rotatex(0deg) translatez(25px);
}

.back {
 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;
 box-sizing: border-box;
}

• Simpanlah Template.
• Kemudian Masuk ke Tata Letak/Layout dan Tambahkan Gadget / Add Widget.
• Lalu pilih HTML/Java Script dan masukan kode HTML di bahwah ini ke dalam widget tersebut lalu klik Save.

<div clas='myster' >
<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="https://mystertiroang.blogspot.co.id/" class="three-d">tips<span class="three-d-box"><span class="front">tips</span><span class="back">tips</span></span>
  </a></li>
  <li><a href="https://mystertiroang.blogspot.co.id/" class="three-d">sitmap<span class="three-d-box"><span class="front">sitmap/span><span class="back">sitmap</span></span>
  </a></li>
  <li><a href="https://mystertiroang.blogspot.co.id/" class="three-d">info<span class="three-d-box"><span class="front">info</span><span class="back">info</span></span>
  </a></li>
 </ul>
    </div>

Catatan gantilah kata/kalimat https://mystertiroang.blogspot.co.id dengan link  kalian.

• Terakhir silahkan anda lihat blog anda.

Jika ada yang kurang paham silahkan tinggalkan komentar anda.

Sekian tutorial tentang Bagaimana Cara Membuat Menu Bar 3D SEO Friendly di blog semoga bisa bermanfaat bagi kita semua. Aminnn

Tag : Blog SEO, Tips N Trik