Judul : Cara Buat Menu Bergaya Ticket
link : Cara Buat Menu Bergaya Ticket
Cara Buat Menu Bergaya Ticket
Sebenarnya Css berikut yang kumpulan cara modifikasi jadi Menu yakni Pure CSS3 Ticket-Tags, yang digunakan untuk memperindah Tampilan Tag Label pada Blogsot, dan ternyata setelah di ubah fungsikan menjadi Menu terlihat keren dan bisa memperindah tampilan Blog. bagi sobat yang ingin mencoba silahkan ikuti cara berikut ini untuk di pasang di Blog.
Sebelumnya silahkan Lihat D E M O
Sebelumnya silahkan Lihat D E M O
Berikut langkahnya
Pertama
SIlahkan menuju Dasbord lalu klik Template ---> Edit HTML
Silahkan Cari kode <head>
Letakkan Code berikut dibawah <head>
<link rel="stylesheet" href="styles/tut.css" />
<link rel="stylesheet" href="styles/tickets.css" />
Sekarang Cari kode ]]></b:skin>
Letakkan Code berikut diatas ]]></b:skin>
.ticket {
font-family: Arial;
font-size: 12px;
font-weight: bold;
position: relative !important;
background: #8dc63f;
float: left;
padding: 7px 3px;
margin: 0 5px 5px 0;
}
.ticket:after {
content: "";
position: absolute !important;
z-index: 100;
top: 0;
left: 0;
border-right: #fff 7px solid;
border-bottom: #fff 7px solid;
-moz-border-radius: 0 0 20px 0;
-webkit-border-radius: 0 0 20px 0;
border-radius: 0 0 20px 0;
}
.ticket:before {
content: "";
position: absolute !important;
z-index: 100;
top: 0;
right: 0;
border-left: #fff 7px solid;
border-bottom: #fff 7px solid;
-moz-border-radius: 0 0 0 20px;
-webkit-border-radius: 0 0 0 20px;
border-radius: 0 0 0 20
}
.ticket a {
outline: 1px rgba(255,255,255,0.4) dashed;
border: 1px rgba(0,0,0,0.3) dashed;
padding: 4px 10px 4px 20px;
text-decoration: none;
color: rgba(255,255,255,0.5);
white-space: nowrap;
}
.ticket a:hover {color: rgba(0,0,0,0.5);}
.ticket a:after {
content: "";
position: absolute !important;
z-index: 100;
bottom: 0;
left: 0;
border-right: #fff 7px solid;
border-top: #fff 7px solid;
-moz-border-radius: 0 20px 0 0;
-webkit-border-radius: 0 20px 0 0;
border-radius: 0 20px 0 0;
}
.ticket a:before {
content: "";
position: absolute !important;
z-index: 1000;
bottom: 0;
right: 0;
border-left: #fff 7px solid;
border-top: #fff 7px solid;
-moz-border-radius: 20px 0 0 0;
-webkit-border-radius: 20px 0 0 0;
border-radius: 20px 0 0 0;
}
.ticket .circle {
position: absolute !important;
z-index: 100;
border: 5px #fff solid;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-top: -5px;
width: 0;
height: 0;
top: 50%;
left: 8px;
-moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.3);
box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.3);
}Sekarang silahkan SimpanKedua
Sobat Sebaiknya pasang Menu ini pada widget di Bawah Header Blog supaya terlihat serasi.
Sekarang silahkan menuju Tata Letak + Tambah Gadget + HTML/JavaScript
Masukkanlah Code berikut kedalamnya
<div class="ticket"><span class="circle"></span><a href=" Masukkan Link disini ">Home</a></div>
<div class="ticket"><span class="circle"></span><a href="Masukkan Link disini">Judul menu di sini</a></div>
<div class="ticket"><span class="circle"></span><a href="Masukkan Link disini">Judul menu di sini</a></div>
<div class="ticket"><span class="circle"></span><a href="Masukkan Link disini">Judul menu di sini</a></div>
<div class="ticket"><span class="circle"></span><a href="Masukkan Link disini">Judul menu di sini</a></div>
<div class="ticket"><span class="circle"></span><a href="Masukkan Link disini">Judul menu di sini</a></div>
Terakhir Silahkan Disimpan
Semoga Bermanfaat
Demikianlah Artikel Cara Buat Menu Bergaya Ticket
Sekian Cara Buat Menu Bergaya Ticket, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.
