Widodo

Membuat Tampilan Recent Post dengan css dan html

Slamat Pagi Teman-tema apa kabar semua oke untuk hari ini kita akan belajar membuat sebuah recent post dengan menggunakan CSS dan HTML tutorial ini sederhana dan simple, dan semoga tutorial ini bisa bermanfaat bagi para developer yang baru mau terjun menjadi web design untuk itu saya jelaskan sedikit apa itu recent post

Recent Post adalah untuk menampilkan Artikel terbaru yang telah Anda publikasikan pada web maupun blog. Dengan menggunakan Recent Post maka pengunjung Web maupun blog akan lebih cepat dan mudah untuk mengetahui tentang artikel yang anda update. Dan Tutorial ini bisa juga di jadikan sebuah widget lainya misalkan Populer Post, Berita Terikini atau terbaru dll.

Mohon Maaf untuk tutorial di Video Kode CSSnya taruh diatas </head> oke

Untuk Itu langsung aja kita coba.

1. Silahkan buat folder recent post di locadist kalian.

2. Setelah itu buka Editor web kalian masing2

3. Buatlah Document baru

4. Silahkan tulis script cssnya diatas </head> atau bisa liat contoh dibwah ini

<style type="text/css">
ul, li {list-style:none; margin:auto; padding:0px;}
h2, h3 {margin:0px; padding:5px;}
.recent_post {margin:20px; width:300px; padding:5px; border:solid 2px #eeeeee}
.recent_post li a{list-style:none; text-decoration:none; font-family:Arial, Helvetica, sans-serif;color:#333; padding:5px 0px 5px 0px; border-bottom:solid 1px #eeeeee; display:table; width:100%;}
.recent_post li a h3 {font-size:18px; font-weight:700;}
.recent_post li a img {float:left; padding:2px; margin:5px; width:60px; height:60px;}
.recent_post li a .date {text-align:left; font-size:12px}
.recent_post li a:hover {background:#0066FF; color:#ffffff;}
</style>

5. Setelah itu anda tinggal memanggil code cssnya dengan HTML seperti dibwah ini

<div class="recent_post"><ul>
<li><a href="#"><img src="./itemgall.jpg" />
<h3>Lorem ipsum lorem ipsum</h3>
<span class="date">29-Desember-2014</span>
</a></li></ul></div>

6. Selesa.

View Youtube



Artikel Terkait

0 Komentar