Cara Membuat Halaman Info Timeline di Blog

Cara Membuat Halaman Info Timeline di Blog

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 ]]> 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.




www.aak-share.com Information

11. Februari 2015




Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.







www.aak-share.com Information

11. Februari 2015




Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.







www.aak-share.com Information

11. Februari 2015




Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.





Semoga bermanfaat!

Post Comment