Tips Membuat Tulisan Notifikasi diatas Kepala Tema

Berbagi :
Tips Membuat Tulisan Notifikasi diatas Kepala Tema

Dalam bahasan kali ini mimin akan memberikan tutorial tentang membuat text notifikasi yang berada dibagian atas kepala tema.

Trik ini sedikit susah jika Anda belum familar sama kode HTML, CSS & jQuery. Karena harus paham dengan berbagai macam fungsinya.

Namun mimin akan membagikan langsung kode tampilan navigasi text notifikasi diatas kepala tema dengan mudah cukup ikuti intruksi dibawah ini.

Sumber Desain Text Notifikasi

Tampilan dari navigasi text notifikasi ini mimin dapat dari situs evanto.com

Yang mana fungsi dari desain ini akan memberikan penjelasan kepada pengunjung bahwa ada promosi produk & semacamnya.

Tentu ini akan memberikan daya tarik buat pengunjung untuk mengkliknya.


Memulai Membuat Navigasi Text

Silahkan Anda salin kode HTML dibawah ini.
<nav class='menu-notif'>
<div class='menu-notif-text'>
<span>Edit Tulisan Ini Sesuai Pemberitahuan</span>
<a href='#URL_HALAMAN'>Tulisan Kamu</a>
</div>
<div class='close'>×</div>
</nav>
Penjelasan :
  • Ubah | Edit tulisan [ Edit Tulisan Ini Sesuai Pemberitahuan ] dengan tulisan menarik dari Anda.
  • Ganti / Rubah link [ #URL_HALAMAN ] dengan URL halaman Anda.
  • Ganti tulisan [ Tulisan Kamu ] sesuai text yang Anda inginkan.

Letakan kode HTML diatas dibagian kode template <header>.

Langkah berikutnya silahkan salin lagi CSS dibawah ini untuk merapikan tampilannya.

<style>
.menu-notif {
    position: relative;
    cursor: pointer;
    box-shadow: 0 -1px 5px rgba(0,0,0,.06);
    display: block;
    height: 60px;
    background-color: #523ee8}
.menu-notif-text {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
    height: 60px;
    line-height: 60px;
    text-align: center}
.menu-notif-text span {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    font-style: inherit;
    letter-spacing: 0;
    margin-bottom: 0;
    color: #fff}
.menu-notif-text a {
    padding: 10px 30px 11px;
    font-style: inherit;
    margin-left: 20px;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    outline: 0;
    border: none;
    border-radius: 6px;
    display: inline-block;
    cursor: pointer;
    line-height: .875em;
    transition: all .2s ease-in-out;
    background-color: #f73859;
    color: #fff
 }
.close {
    position: absolute;
    top: 10px;
    cursor: pointer;
    right: 15px;
    font-size: 30px;
    color: #fff;
    opacity: 0.7
}
@media screen and (max-width: 640px) {
.menu-notif {
   display: none
   }
}
</style>
Letakan CSS diatas dibagian kode </head>

Penjelasan :
  • Untuk merubah warna latar navigasi silahkan Anda ubah kode .menu-notif {background-color: #kode-warna}
  • Merubah warna tombol .menu-notif-text a {background-color: #kode-warna}

Salin lagi kode jQuery dibawah ini untuk navigasi bisa ditutup.
  <script>//<![CDATA[
      $('.close').click(function(){
      $('.menu-notif').hide();
      $('.close').fadeOut();});
//]]>
    </script>  
Pasang kode jQuery diatas dibagian atas kode </body>

Penjelasan :

Klik tombol " SIMPAN " untuk melihat hasilnya.

Demo Design

Sampai tahap ini Anda sudah berhasil membuat tampilan navigasi diatas kepala tema dengan mudah.

Penutup

Jika panduan diatas masih ada yang kurang Anda pahami dari segi penjelasan.

Jangan ragu untuk menulis pertanyaannya dikolom komentar yang nanti mimin bantu jawab.

Jika ada yang ingin menulis ulang tentang artikel panduan ini dari mimin harap untuk memberikan nara sumber dari blog boshjn.

Daftar Isi [Tutup]

    Apakah Halaman ini membantu?
    Lebih baru
    Lebih lama
    Sonia Monica
    Sonia Monica Hi, I'm Sonia, as the designer of this blog and I really like to make web design, art and vectors

    0 Komentar

    Posting Komentar

    Kami memiliki kebijakan dalam berkomentar di Blog ini :

    — Dilarang promosi suatu barang
    — Dilarang jika memasang link aktif di komentar
    — Dilarang keras melakukan promosi iklan
    — Dilarang menulis komentar yang berisi sara, bully atau cemuhan

    NB :Komentar yang melanggar tidak akan ditampilkan

    Kebijakan komentar yang bisa Anda temukan selengkapnya disini

    Dukungan :

    Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini