Cara Membuat Halaman Info Timeline di Blog

Membuah Halaman Informasi Timeline - Memberikan Informasi kepada pengunjung dapat kita lakukan dengan beberapa style seperti Info Box atau juga pesan pembuka . Pada kali ini Aak akan memberikan Tips Membuah Halaman Informasi Timeline , Anda bisa menginformasikan pada halaman dengan menampilkan waktu.

Demo   CODE

Untuk menciptakannya dengan menggunakan properti CSS, bagi Anda yang tertarik berikut ini langkah-langkahnya :

Silahkan Anda buka Editor Template, kemudian Anda cari kode ]]></b:skin> dan salin kode dibawah ini terapkan diatasnya atau sebelumnya :

.container {
  width: 400px;
  margin: 0 auto;
}

a {
  color: #5890FF;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.box {
  border: 1px solid #ddd;
  padding: 10px 12px;
  margin-bottom: 15px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 3px;
  overflow: hidden;
}
.box.blue {
  border: 1px solid #5890FF;
}
.box .header {
  position: relative;
  color: #9197a3;
  font-size: 12px;
  line-height: 1.38;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #ddd;
}
.box .header a {
  font-weight: bold;
}
.box .header .date {
  position: absolute;
  right: 0;
  top: 0;
}
.box .links {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.38;
}
.box .links a {
  color: #5890FF;
  text-decoration: none;
}
.box .links a:hover {
  text-decoration: underline;
}
.box .footer {
  color: #444;
  font-size: 12px;
  line-height: 1.38;
  border-top: 1px solid #ddd;
  background: #5F5F5F;
  padding: 5px 12px;
  margin: 8px -12px -10px -12px;
}

Kemudian selanjutnya Anda terapkan pada Entri baru mode HTML atau Anda juga bisa menempatkan di manapun yang Anda inginkan.

<div class="container">
<div class="box">
<div class="header">
<a href="http://www.aak-share.com">www.aak-share.com</a> Information
<div class="date">
11. Februari 2015</div>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div class="links">
<a href="http://www.aak-share.com">Link</a></div>
<div class="footer">
This is a Footer</div>
</div>
<div class="box">
<div class="header">
<a href="http://www.aak-share.com">www.aak-share.com</a> Information
<div class="date">
11. Februari 2015</div>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div class="links">
<a href="http://www.aak-share.com">Link</a></div>
<div class="footer">
This is a Footer</div>
</div>
<div class="box blue">
<div class="header">
<a href="http://www.aak-share.com">www.aak-share.com</a> Information
<div class="date">
11. Februari 2015</div>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div class="links">
<a href="http://www.aak-share.com">Link</a></div>
<div class="footer">
This is a Footer</div>
</div>
</div>

Semoga bermanfaat!

Bagikan Artikel ini