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





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 Simpan

Kedua
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
Cara Buat Menu Bergaya Ticket 10out of 10 ratings.
Powered by Blogger.