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.

Baca juga : Cara Membuat Notifikasi Order WhatsApp di Blogger

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 :

• Pastikan Anda sudah memasang jQuery di template blogger
  Baca cara memasang jQuery ditemplate blogger
• Apabila diklik icon dari [ X ] maka nanti navigasi akan dihilangkan / tersembunyi.

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.

Berbagi :