Membuat Papan Pengumuman Sederhana pada Blog ~ Setyawan Berbagi

Membuat Papan Pengumuman Sederhana pada Blog

Posted by : Unknown Minggu, 25 Januari 2015

Tutorial, Papan Pengumuman, Blog, SETYAWAN BERBAGI

Salam semua... Setelah sekian lama tidak posting karena masih dalam perbaikan template blog kini saya sempatkan berbagi sedikit tutorial sederhana. Dalam proses edit template saya menambahkan 1 fitur baru, yaitu papan pengumuman yang hanya berada pada Homepage. Lalu apa gunanya?... Papan pengumuman ini dapat kita gunakan sebagai pemberi informasi singkat pada pengunjung blog kita, dan tidak akan mengganggu kecepatan loading. Nah, bagi yang penasaran seperti apa tampilan dari papan pengumuman itu bisa sobat lihat dibawah ini. Selain itu untuk variasinya bisa sobat lihat di Homepage/Beranda Setyawan Berbagi.

Notifications

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Bagaimana?... Walaupun sederhana tapi dengan css kita dapat membuatnya tampil menarik bukan?... Dan tentunya tidak memberatkan loading blog kita. Tertarik untuk mencobanya?... Silahkan ikuti tutorial dibawah ini.

Pasang kode HTML ini di dalam tag <body>...</body>


<div id="pesan">
<div id="notif">
<h2>
Notifications</h2>
<ol>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4, dst</li>
</ol>
</div>
</div>

Lalu letakkan css ini di dalam kode <b:skin>...</b:skin> atau di dalam kode <style type='text/css'>...</style>


#pesan {
position: relative;
width: 420px; /* Lebar papan pengumuman */
height: 240px; /* Tinggi papan pengumuan */
}
#notif {
background: #34495E; /* Warna latar belakang */
position: absolute; 
bottom: 0;
padding: 15px;
color: #ECF0F1; /* Warna text */
border: 7px solid #1ABC9C;
overflow: auto;
}
#notif h2 {
text-transform: uppercase;
font-family: 'arial', sans-serif; /* Jenis huruf */
font-size: 17pt; /* Ukuran huruf */
}
#notif ol {
text-align: left; /* Rata text */
margin: 5px auto;
padding-left: 30px;
}

Nah, bagaimana?... Cukup mudah diterapkan bukan?... Okelah, sampai disini dulu tutorial kali ini, semoga tutorial ini dapat bermanfaat bagi sobat sekalian...