Membuat Blok Catatan (Kotak Catatan) Keren

Juni 02, 2022 - (Diperbarui: Agustus 08, 2023)

Please wait 0 seconds...

Scroll Down and click on GET LINK for destination

Congrats! Link is Generated

Cara menambahkan Kotak Catatan Keren di Template Blogger mana pun, Kotak Catatan Digunakan untuk menambahkan info penting, kalimat peringatan atau kalimat sorotan sehingga pengguna dapat melihatnya dengan mudah dan menyadarinya

Apa itu Blok Catatan?

Note Block adalah fitur bawaan yang hadir di beberapa template blogger seperti iMagz, Median Ui, Fletro pro, dll. Note Block digunakan untuk Menyoroti Informasi Penting, Kalimat Peringatan atau Menyoroti Setiap Langkah Penting agar pengguna dapat membacanya lebih efisien dan lebih baik daripada teks biasa, jadi inilah kegunaan utama dari Fitur Note Block.

Tetapi beberapa template blogger yang memiliki Fitur Note Block default memiliki tampilan lama yang sama dan banyak tema blogger tidak memiliki Fitur Note Block ini, jadi, saya telah mencoba membuat sesuatu yang baru dan memberikan tampilan unik pada Notebox dan Notebox ini dapat ditambahkan ke template Blogger mana pun, jadi silakan baca posting lengkap untuk diterapkan di situs blogger Anda.

Kelebihan Blok Catatan

Dapat ditambahkan di semua template Blogger
Tampilan baru yang unik dan menarik
Digunakan untuk menyorot Info Penting, kalimat peringatan, atau langkah penting lainnya. Pengguna dapat lebih tertarik dan dapat membaca lebih efisien daripada teks biasa
Tampilan dinamis untuk situs Anda
Tingkatkan tampilan situs Anda

Cara menambahkan Kotak Catatan di Template Blogger?

Langkah 1: Masuk ke Dasbor Blogger Anda

Langkah 2: Buka Tema dan klik menu tarik-turun dan pilih Edit HTML

Langkah 3: Sekarang cari ]]></b:skin> dan pastekan CSS yang diberikan di bawah ini tepat di atasnya

   /*stylish note box by Bang Wahid 1*/
    .TD-note1{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;background:linear-gradient(110deg,#fdcd3b,#ffed4b );}.TD-note1:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important;}.TD-note1:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important;}
  
   /*stylish note box by Bang Wahid 2*/
    .TD-note2{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;background:linear-gradient(to right,#ff6464,#5ac8fa);}.TD-note2:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important;}.TD-note2:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important;}
  
  
   /*stylish note box by Bang Wahid 3*/
  .TD-note3{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;color:#fff;background:linear-gradient(110deg,#000,rgba(0,0,0,0) 33%);,linear-gradient(110deg,#dd0000,#ffc608)}.TD-note3:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important;}.TD-note3:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important;}
  
  
   /*stylish note box by Bang Wahid 4*/
  .TD-note4{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;color:#fff;background:linear-gradient(-70deg,#fa7c30,rgba(0,0,0,0));,url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');background-size:cover;background-position:50% 21%;}.TD-note4:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important;}.TD-note4:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important;} 
  

     /*stylish note box by Bang Wahid 5*/
  .TD-note5{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;color:#fff;background:linear-gradient(110deg,#a60af3,#7a00cc,#c03fff,rgba(0,0,0,0));,radial-gradient(farthest-corner at 0% 0%,#5EC6F7,#5EC6F7)}.TD-note5:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important;}.TD-note5:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important;}
  
  
     /*stylish note box by Bang Wahid 6*/
  .TD-note6{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;background:linear-gradient(70deg,#fff810,rgba(0,0,0,0) ),linear-gradient(30deg,#63e89e,#ff7ee3);}.TD-note6:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.TD-note6:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important;}

Langkah 4: Sekarang salin Kode HTML berikut dan tempel di posting Anda atau di mana pun Anda ingin menambahkan Blok Catatan ini: -

Model 1

<p class="TD-note1"><b>Catatan: Ini adalah Demo Kotak Catatan 1 yang Keren</b></p>

Model 2

<p class="TD-note2"><b>Catatan: Ini adalah Demo Kotak Catatan 2 yang Keren</b></p>

Model 3

<p class="TD-note2"><b>Catatan: Ini adalah Demo Kotak Catatan 3 yang Keren</b></p>

Model 4

<p class="TD-note4"><b>Catatan: Ini adalah Demo Kotak Catatan 4 yang Stylish</b></p>

Model 5

<p class="TD-note5"><b>Catatan: Ini adalah Demo Kotak Catatan 5 yang Keren</b></p>

Model 6

<p class="TD-note6"><b>Catatan: Ini adalah Demo Kotak Catatan 6 Keren</b></p>

Dalam posting ini saya membuat tutorial langkah demi langkah tentang Cara menambahkan Blok Catatan Keren [Notebox] di Template Blogger apa pun, yang dapat Anda gunakan di template blogger apa pun untuk Menyoroti informasi Penting, Kalimat peringatan apa pun, atau Menyoroti Langkah penting apa pun. Saya harap Anda menyukai Posting ini dan silakan bagikan dengan teman-teman Anda dan ikuti blog kami untuk lebih banyak lagi.

GET LINK