Làm cách nào để thêm Note Block sành điệu [Notebox] cho bất kỳ Mẫu Blogger nào?

Cách thêm Note Block [Notebox] trong bất kỳ Mẫu Blogger nào

Note Block là gì?

Note Block là một tính năng được hiển thị mặc định trong một số blogger các mẫu như iMagz, Median Ui, Fletro pro, v.v .... Note Block được sử dụng để Đánh dấu một thông tin quan trọng, Bất kỳ câu cảnh báo nào hoặc Đánh dấu bất kỳ bước quan trọng nào để người dùng có thể đọc nó hiệu quả hơn và tốt hơn so với văn bản bình thường. vì vậy, đây là cách sử dụng chính của Note Block. 

Nhưng một số mẫu blogger có Tính năng Note Block mặc định có cùng giao diện cũ và nhiều chủ đề blogger không có Tính năng Note Block này, vì vậy, tôi đã cố gắng tạo một cái gì đó mới và mang đến một cái nhìn độc đáo cho Note Block [Notebox ] và Notebox này có thể được thêm vào bất kỳ mẫu Blogger nào. vì vậy vui lòng đọc toàn bộ bài đăng để triển khai trên trang blogger của bạn.

Ưu điểm của Note Block

2. Có thể được thêm vào bất kỳ mẫu Blogger nào.
3. Giao diện mới độc đáo và hấp dẫn.
4. Được sử dụng để đánh dấu thông tin quan trọng, câu cảnh báo hoặc bất kỳ bước quan trọng nào.
5. Người dùng có thể bị thu hút hơn và có thể đọc hiệu quả hơn văn bản bình thường.
6. Giao diện sinh động cho trang web của bạn.
7. Cải thiện giao diện trang web của bạn.

Let's Begin

How to add a Stylish Note Block [Notebox] in any Blogger Template?

Bước 1: Đăng nhập vào Blogger Dashboard

Bước 2: Đi tới Chủ đề và nhấp vào menu thả xuống và chọn Chỉnh sửa HTML

Bước 3: Tìm kiếm thẻ  ]]></b:skin> và dán CSS bên dưới ngay phía trước  ]]></b:skin>  .

/*stylish note box by SoiPro 1*/
    .SP-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 )}.SP-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}.SP-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 SoiPro 2*/
    .SP-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)}.SP-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}.SP-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 SoiPro 3*/
  .SP-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)}.SP-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}.SP-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 SoiPro 4*/
  .SP-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%;}.SP-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}.SP-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 SoiPro 5*/
  .SP-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)}.SP-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}.SP-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 SoiPro 6*/
  .SP-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)}.SP-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}.SP-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}

Hãy để ý đến cú pháp SP-notexxx  để  thay đổi các mẫu trong việc sử dụng Note Block

Bước 4: Bây giờ sao chép các Mã HTML sau và dán nó vào bài đăng của bạn hoặc bất kỳ nơi nào bạn muốn thêm Note Block

Note: This a Stylish Note Box Demo 1

<p class="SP-note1"><b>Note: This a Stylish Note Box Demo 1</b></p>

Note: This a Stylish Note Box Demo 2

<p class="SP-note2"><b>Note: This a Stylish Note Box Demo 2</b></p>

Note: This a Stylish Note Box Demo 3

<p class="SP-note3"><b>Note: This a Stylish Note Box Demo 3</b></p>

Note: This a Stylish Note Box Demo 4

<p class="SP-note4"><b>Note: This a Stylish Note Box Demo 4</b></p>

Note: This a Stylish Note Box Demo 5

<p class="SP-note5"><b>Note: This a Stylish Note Box Demo 5</b></p>

Note: This a Stylish Note Box Demo 6

<p class="SP-note6"><b>Note: This a Stylish Note Box Demo 6</b></p>

Lời kết

Trong bài đăng này, tôi đã thực hiện từng bước hướng dẫn về cách thêm Note Block [Notebox] sành điệu trong bất kỳ mẫu Blogger nào, bạn có thể sử dụng cái này trong bất kỳ mẫu blogger nào để Đánh dấu Thông tin quan trọng, Bất kỳ câu cảnh báo nào hoặc Đánh dấu Bất kỳ những điều quan trọng nào. Tôi hy vọng bạn đã thích Bài đăng này và hãy chia sẻ với bạn bè của bạn và theo dõi blog của chúng tôi để biết thêm.