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

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

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

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
 *{
  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.

1234567891011121314151617181920212223242526272829
 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();
}

Serkan Kod Editörü

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

DEMO SAYFASI