Cara Memasang Atau Membuat Catatan dengan Efek Lipatan - Minta Ilmu Cara Memasang Atau Membuat Catatan dengan Efek Lipatan - Minta Ilmu

Cara Memasang Atau Membuat Catatan dengan Efek Lipatan

Mintailmu.com - Cara Memasang Atau Membuat Catatan dengan Efek Lipatan Di Blog Atau Website – Untuk kesempatan kali ini saya akan memberikan tutorial tentang bagaimana cara membuat catatan atau note dengan efek lipatan di blog atau website.

Langkah pertama anda bisa buka text editor lalu buat file dengan nama index.html lalu copy code di bawah ini, dan yang buat blogspot anda bisa buka Postingan dan klik HTML lalu masukan code di bawah ini :
<link rel="stylesheet" href="css/style.css">
<div class='tengah'>
<h1> Cara Memasang Atau Membuat Catatan dengan Efek Lipatan Di Blog Atau Website</h1></div>

<div class='note'>Ini Merupakan Cara Memasang Catatan dengan Efek Lipatan Dengan mudah dan gampang hanya ada di Mintailmu.com dan memiliki warna yang berbeda-beda yang wajib kamu ketahui </div>
<div class='note orange'>Ini Merupakan Cara Memasang Catatan dengan Efek Lipatan Dengan mudah dan gampang hanya ada di Mintailmu.com dan memiliki warna yang berbeda-beda yang wajib kamu ketahui....</div>
<div class='note river'>Ini Merupakan Cara Memasang Catatan dengan Efek Lipatan Dengan mudah dan gampang hanya ada di Mintailmu.com dan memiliki warna yang berbeda-beda yang wajib kamu ketahui.,..,.,</div>
<div class='note crusta'>...... Ini Merupakan Cara Memasang Catatan dengan Efek Lipatan Dengan mudah dan gampa ...ng hanya ada di Mintailmu.com dan memiliki warna yang berbeda-beda yang wajib kamu ketahui ...</div>

<div class='credit'><a href="Mintailmu.com">Mintailmu.com</a></div>
 

Langkah ke dua untuk website anda buat file dengan nama style.css lalu copy code di bawah ini, dan buat blogspot cari code </script> lalu copy code dibawah ini pas di atas code </script> :
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  background: #fff none repeat scroll top left;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

a,
a:visited {
  color: #95a5a6;
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
  color: #bdc3c7;
  text-decoration: none;
}

.credit,
.tengah {
  margin: 1em auto;
  padding: .5em 1em;
  text-align: center;
  max-width: 100px;
  color: #95a5a6;
}

.tengah {
  font-weight: 700;
  font-size: 150%;
  max-width: 690px;
}

.note {
  position: relative;
  width: 60%;
  padding: 1.2em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #2ecc71;
  overflow: hidden
}

.note.orange {
  background: #f39c12;
}

.note.crusta {
  background: #F2784B;
}

.note.river {
  background: #3498db;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #27ae60 #27ae60;
  background: #27ae60;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
  display: block;
  width: 0
}

.note.orange:before {
  border-color: #fff #fff #e67e22 #e67e22;
  background: #e67e22;
}

.note.crusta:before {
  border-color: #fff #fff #de6e45 #de6e45;
  background: #de6e45;
}

.note.river:before {
  border-color: #fff #fff #2980b9 #2980b9;
  background: #2980b9;
}

@media only screen and (max-width:768px) {
  position: relative;
  width: 70%;
}
}
 

Langkah terakhir anda save dan lihat hasilnya.

See the Pen membuat note efek lipatan by Minta Ilmu (@Mintailmu) on CodePen.


Tag : Cara Memasang Atau Membuat Catatan dengan Efek Lipatan, membuat note di website, blogspot ,blogger , efek lipatan note yang bagus, keren.

Show comments
Hide comments

0 Response to "Cara Memasang Atau Membuat Catatan dengan Efek Lipatan"

Posting Komentar

Silahkan Anda berkomentar yang baik, menarik Dan Benar sesuai dengan isi Postingan Minta Iilmu .com.
Komentar-Komentar yang tidak diperbolehkan Di dalam Postingan Ini :

1. Berbau penghinaan SARA ,PXXN & SPAM
2. Komentar dengan Link hidup (SPAM)
3. Komentar tidak nyambung dengan isi postingan

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel