Membuat Notifikasi Seperti Facebook dengan CSS

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Membahas Web design memang gampang-gampang susah. Hal ini tergantung pandai-pandainya kita berimajinasi untuk membuat suatu interface yang user friendly. Karena hal ini sangat penting untuk memberikan kenyamanan serta memudahkan pengunjung untuk bereksporasi dalam website kita. 

Berikut saya ingin berbagi tentang cara membuat style notifikasi seperti yang ada di facebook dengan memanfaatkan CSS. Notifikasi seperti ini dapat kita gunakan pada halaman Administrator untuk memberitahukan Informasi semisal ada komentar terbaru dari pengunjung. 

Langkah Membuat Style Notifikasi Seperti Facebook

1. Buat Sebuah File HTML dengan nama notif.html kemudian tambahkan code css seperti berikut ini
<style type="text/css">
  /*Style Notifikasi*/
  .bubble
  {
    background: #e02424;    
    margin-left:7px;
    right: 5px;
    top: -5px;
    padding: 2px 6px;
    color: #fff;
    font: bold .9em Tahoma, Arial, Helvetica;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }
  /*Membuat Menu*/
  .menu ul{
  margin:0;
  padding:0;
  }
  .menu li{
  list-style:none;
  color:#FFF;
  float:left;
  display:inline;
  position:relative;
  }
  .menu li a{
  display:block;
  background:0;
  color:#000;
  text-decoration:none;
  font:bold 14px Arial;
  outline:none;
  padding:7px 30px;
  }
  .menu li a:hover{
  background:#2a2a2a;
  color:#FFF;
  }

2. Langkah Kedua adalah menambahkan Tag List untuk menu yang akan kita tampilkan beserta Notifikasinya. Potongan Codenya adalah sebagai berikut
<div class="menu">
  <ul>
  <li><a href="#">Pertemanan<span class="bubble" id="jumlah_konfirmasi">10</span></a></li>
  <li><a href="#">Notifikasi<span class="bubble" id="jumlah_pesanan">1</span></a></li>
  </ul>
  </div>
Membuat Style Notifikasi Seperti Facebook dengan CSS
Simpan dan jalankan file tersebut untuk melihat hasilnya. Sayangnya. Ini Hanya Sebatas Style karena tidak terhubung dengan Database. Tentang Bagaimana menghubungkannya dengan database akan saya bahas pada postingan berikutnya. Stay Tune dan Happy Coding. :)
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

4 comments

comments
Anonymous
19 May 2015 at 15:55 delete

ahh..ngak mudeng bro...

Reply
avatar
29 November 2016 at 09:17 delete

Bang boleh minta contact personnya gak ? Mau konsul nih

Reply
avatar

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.