Home » Ask (Forum) » Cara Membuat Catatan yang Tampil di Header pada WordPress?

Question

Hi, Saya bermaksud membuat catatan yang tampil di header pada wordpress, tetapi catatan itu dapat di tutup oleh pengunjung website saya. Gimana ya caranya ?

Aug 18, 2016 (4 months ago) - Posted by 1 Comment

One Answer

  1. Sumar says:

    Hi,

    UNTUK LANGKAH MEMBUATNYA SEBAGAI BERIKUT :

    1. Download plugins ninja announcements ‘https://wordpress.org/plugins/ninja-announcements/”
    2. Install dan aktifkan plugins
    3. Masuk ke menu Sidebar ninja announcements dan tambahkan note dengan klik Add New
    4. Lakukan setting note seperti dibawah ini, setting ini terletak dibawah area anda menulis note.

    *note : terlihat diatas anda bisa mensetting schedule atau penjadwalan kapan note akan ditampilkan dan kapan akan berakhir untuk ditampilkan, dengan menghilangkan centang not schedule. Dan selain itu anda juga bisa men-setting Main option (Menampilkan/menyembunyikan judul) dan main page display (dimana anda ingin menampilkan front page atau home page)

    Pada dasarnya tampilan dari menggunakan warna yang kurang menarik dan tidak begitu kelihatan, karena warna background dan warna font tidak sesuai, tapi untuk membuatnya lebih menarik anda bisa menyesuaikan warna font dan background sesuai dengan yang anda inginkan, dalam contoh ini saya menggunakan warna hitan dan text putih. saya juga menambahkan fixed sehingga jika discroll kebawah tetap mengikuti sehingga terlihat menonjol dan memungkinkan pengunjung untuk membacanya.

    Caranya anda sorot dengan inspect element dengan menggunakan add ons firefox Firebug, jika anda tidak tahu apa dan bagaimana cara menggunakan add ons firebug bisa anda lihat di postingan sebelumnya disini. liat ID css dari plugins tersebut. Di tutorial ini saya mendapatkan ID css #ninja_annc_317_wrapper , cukup anda salin ID css anda dengan ID yang sesuai dengan milik anda, setelah itu ikuti kode css sesuai dengan yang dibawahnya. seperti berikut :

    /*ninja */
    #ninja_annc_317_wrapper {
        height: 30px;
        background: #000;
        color: #fff;
        font-size: 14px;
        margin: 0 auto;
        position:fixed;
        z-index:99998;
        }
    .ninja-annc-close {
      background: #999;
      color: #fff;
      margin-top: -2px;
      padding: 2px 5px;
      text-decoration: none;
      position:fixed;
      z-index:99999;
    }
    .ninja-annc-close:hover {
      text-decoration: none;
    }
    .ninja-annc-wrapper .ninja-annc-close {
      background: #000;
      color: #999;
      position: absolute;
      left: 0;
      bottom: 0;
      position:fixed;
      z-index:99999;
    }
    /*Akhir css ninja */
    Register Member

Your Answer

Your email address will not be published. Required fields are marked *