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

Letakkan Code berikut dibawah

Sekarang Cari kode ]]>

Letakkan Code berikut diatas ]]>

.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

Home

Judul menu di sini

Judul menu di sini

Judul menu di sini

Judul menu di sini

Judul menu di sini

Terakhir Silahkan Disimpan

Semoga Bermanfaat

reff : http://www.kumpulancara.com/2012/12/cara-buat-menu-bergaya-ticket.html

Related video : Cara Buat Menu Bergaya Ticket