Cara Membuat Menu Di Blog - Ribbon CSS3 - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Menu Di Blog - Ribbon CSS3 !! Semoga tulisan dengan kategori
Edit Menu !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Menu Di Blog - Ribbon CSS3 ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->
Selamat pagi sobat blogger tepat pukul 02:38, pada pagi kali ini sambil begadang karena belum bisa tidur, saya akan berbagi tips blog Cara Membuat Menu Di Blog - Ribbon CSS3. Pada postingan saya sebelumnya adalah Cara Membuat Menu Di blog Seperti Google. Ribbon Menu adalah Sebuah Menu navigasi yang berbentuk atau menyerupai sebuah Pita dan pembentukannya tidak menggunakan gambar dan hanya menggunakan Kode CSS3 sehingga membuat Ribbon Menu ini sangatlah Efisien dan ringan untuk digunakan. Lebih jelasnya silahkan sobat lihat live demo nya : DEMO.
Silahkan Simak Dibawah ini untuk Cara Membuatnya.
- Pertama Silahkan Sobat Masuk atau Login Ke Akun Blogger.
- Cari Kode ]]></b:skin> pada Kode HTML Tempalte Sobat.
- Bila Sudah ketemu silahkan taruh semua kode berikut tepat diatasnya.
.ribbon {
display:inline-block;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #01978C;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#01978C;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}
display:inline-block;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #01978C;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#01978C;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}
Selanjutnya Cari Kode <body> dan letakkan Kode Berikut Dibawahnya.
<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>Software</span></a>
<a href='#'><span>Game</span></a>
<a href='#'><span>Tutorial</span></a>
<a href='#' ><span>About</span></a>
<a href='#'><span>Contact</span></a>
</div>
<a href='#'><span>Home</span></a>
<a href='#'><span>Software</span></a>
<a href='#'><span>Game</span></a>
<a href='#'><span>Tutorial</span></a>
<a href='#' ><span>About</span></a>
<a href='#'><span>Contact</span></a>
</div>
Note : Kode ini bisa juga sobat letakkan di add gadget HTML.
Sekarang Simpan Template Sobat dan Lihat Hasilnya.
Cukup Sekian sob Tutorial Cara Membuat Menu Di Blog - Ribbon CSS3.
Semoga bermanfaat.
Script by : www.filiex.com
Demikian info Cara Membuat Menu Di Blog - Ribbon CSS3, Semoga dengan adanya postingan ini, Anda sudah benar benar menemukan informasi yang memang sedang anda butuhkan saat ini. Bagikan informasi Cara Membuat Menu Di Blog - Ribbon CSS3 ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.