الصفحة الرئيسية
Blogger
Not Oluşturma

Blogger'da Yapışkan Not Oluşturma Aracı



Merhabalar, Bugün sizlere Blogger'da Yapışkan  Notlar nasıl oluşturulur onu anlatmaya çalışacağım.


Öncelikle Blogger'da Sayfalar sekmesine gidin ve orada Yeni Sayfa bölümüne tıklayın.



 <div class="sticky-notes">
      <div class="note-container">
        <div class="note-content" contenteditable>
          Create Sticky Note Using HTML, CSS, and JavaScript
        </div>
        <div class="note-actions">
          <button class="delete-note" onclick="deleteNote(this)">Delete</button>
        </div>
      </div>
    </div>
    <div class="create-note" title="New Notes" onclick="createNote()">+</div>


Daha sonra aşağıda verilen CSS kodlarını html kod editör sayfanızda bulunan ]]></b:skin> kodunun üzerine gleecek şekilde yapıştırın.



 *{
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1f1d2b;
  font-family: 'Gloria Hallelujah', cursive;
  min-height: 100vh;
}

.sticky-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 800px;
}

.note-container {
  position: relative;
  width: 250px;
  height: 250px;
  background: linear-gradient(#f9efaf, #f7e98d);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.note-container:hover {
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
}

.note-content {
  padding: 15px;
  height: calc(100% - 40px);
  border: none;
  outline: none;
}

.note-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.delete-note {
  background-color: #ff6347;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.delete-note:hover {
  background-color: #d9534f;
}

.create-note {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 120px 'Helvetica', sans-serif;
  margin: 0 15px;
  width: 250px;
  height: 250px;
  background-color: #fff;
  color: #888;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.create-note:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}


Son olarak aşağıda ki JavaScript kodunu temanızda bulunan </body> kodunun üzerine gelecek şekilde yapıştırın.



 function createNote() {
  const stickyNotes = document.querySelector('.sticky-notes');
  const noteContainer = document.createElement('div');
  noteContainer.classList.add('note-container');

  const noteContent = document.createElement('div');
  noteContent.classList.add('note-content');
  noteContent.contentEditable = true;
  noteContent.textContent = 'New note';

  const noteActions = document.createElement('div');
  noteActions.classList.add('note-actions');
  const deleteButton = document.createElement('button');
  deleteButton.classList.add('delete-note');
  deleteButton.textContent = 'Delete';
  deleteButton.onclick = function () {
    noteContainer.remove();
  };

  noteActions.appendChild(deleteButton);
  noteContainer.appendChild(noteContent);
  noteContainer.appendChild(noteActions);
  stickyNotes.appendChild(noteContainer);
}

function deleteNote(button) {
  const noteContainer = button.closest('.note-container');
  noteContainer.remove();
}



DEMO SAYFASI


See Also :

إرسال تعليق