This Website Template Download Here
DOWNLOAD

Welcome To Creator Faruk™

Hi Dear : A New Blog Where You Can Find Blogging Tutorials, Tips, Tricks,Templates and Many More...

  See More Tutorials Here →

How To Add Stylish Colorful NoteBox In Blogger Website - CreatorFaruk

How to add stylish note block, how to add stylish note box in blogger website, NoteBox, Blog Website Note Block, Colorful Note Box In Blogger Website,
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

How To Add Stylish Colorful NoteBox In Blogger Website - CreatorFaruk

Hello everyone, I'm Faruk Ahmed. In moment's tutorial I'll tell you How to Add a Stylish Note Block( Notebox) to any Blogger Template, Note Block( Notebox) is used to add important information, advising rulings or highlight rulings so that druggies can fluently notice and be apprehensive of it.

What's Note Block?

Note block is a point that's presently dereliction in some blogger templates like iMagz, Median Ui, Plus Ui, Fletro pro etc. Note block is used to punctuate an important information, any warning judgment or any important step so that druggies can read it more efficiently and better than plain textbook. So, this is the main use of note block point.

But some blogger templates which have dereliction note block point are same old look and numerous blogger themes do not have this note block point so, I came up with numerous intriguing notes adding tutorial for everyone to use in any theme. This notebox can be added to any blogger template. So read the full post to apply it on your blogger point. also you can fluently understand how to add notebox to your website. 

Advantages of note block

  • Can be added to any blogger template
  • New unique and attractive look
  • Used to highlight important information, warning sentences or any important step
  • Users can be more engaged and read more efficiently than plain text
  • Dynamic look for your site
  • Improve the appearance of your site

So let's get started.

Step 1: Login to your Blogger Dashboard

Step 2: Go to Themes and click on the dropdown menu and choose Edit HTML

Step 3: Now search for  ]]></b:skin> and paste the given below CSS just above to it. >

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

Note: This a Stylish Note Box Demo 1

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

Note: This a Stylish Note Box Demo 2

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

Note: This a Stylish Note Box Demo 3

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

Note: This a Stylish Note Box Demo 4

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

Note: This a Stylish Note Box Demo 5

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

Note: This a Stylish Note Box Demo 6

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

Note: I mentioned the name for the CSS so if you want to use only one note block, use a specific CSS

Step 4: Now copy the following HTML codes and paste in your post or wherever you want to add this note block :

Conclusion

In this post I have created a step by step tutorial on how to add stylish note block [notebox] to any blogger template, which you can use to highlight an important information, any warning sentence or any important step in any blogger template. I hope you liked this post and please share with your friends and follow our blog for more.

Rate This Article

Thank You So Much How To Add Stylish Colorful NoteBox In Blogger Website - CreatorFaruk For Reading This Article.

About the Author

Hello Dear Visitor, i am Faruk Ahmed. I Give all Blogger Tutorials For Creating Attractive Websites. There is also an Opportunity To Introduce and Download The Best Templates. Software and Windows tutorials and more are published here. Tutorial Here…

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
Youtube Channel Image
Creator Faruk Subscribe Now To Watch More Blogging Tutorials and Many More..