How to Start a Blog? Panduan Membuat Website Hanya 30 Menit

Tutorial Membuat Note Schedule header WordPress

Pada tutorial sebelumnya saya memberikan cara untuk membuat floating fixed footer pada wordpress tanpa menggunakan plugins yang sebenarnya mirip dengan tutorial yang akan saya bahas sekarang, Tutorial kali ini saya akan membahas tentang membuat catatan yang tampil di header pada wordpress, dimana note ini bisa di open close, kegunaan dari note ini adalah untuk memberikan pesan penting pada pengunjung anda dan not ini bisa anda jadwal sesuai yang anda inginkan untuk ditampilkan di website anda.

Baca : Plugin Terbaik Membuat Pesan Notifikasi Bar WordPress

Untuk membuat note schedule ini saya menggunakan plugins ninja announcements yang bisa anda download disini. display dari penggunaan plugins ini adalah sebagai berikut :

note schedule wordpress fixedTerlihat gambar di atas ada note di header dengan catatan Tutorial wordpress lengkap gratis.

Untuk langkah membuatnya sebagai berikut :

1. Download 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.

setting schedule wordpress plugin ninja announcement*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)

Custom Design Plugins ninja announcements?

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 */

Semoga artikel di atas membantu anda dalam membuat note schedule wordpress pada header. 🙂

Baca : Membuat Sticky Floating fixed bar Footer WordPress

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Niagahoster

Rp.26.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

IDCloudhost

Rp.30.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

Add a Comment

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