Hello Blogger user, in this tutorial I will share with you all How to Add stylish Note Block in Median UI. Installing a Note Block on your website will look more professional, plus it can also serve as an assessment of the views.
What is Note Block
Note Block is a component which is available default in a portion of the blogger the layouts like iMagz, Median Ui, Fletro ace etc.... Note Block is utilized to Highlight an Important data, Any advance notice sentence or Highlight Any significant advances so the clients can peruse it more effectively and better than the typical message. thus, this is the primary utilization of Note Block Feature.
In any case, a portion of the blogger layouts which have default Note Block Feature have normal, worn out look and large numbers of the blogger subjects doesn't have this Note Block Feature exist thus, I have attempted to make something new and gave an extraordinary hope to Note Block [Notebox] and this Notebox can be included any Blogger format. so kindly read full post to execute in your blogger webpage .
Process To Make.
Stage 1: Login to your Blogger Dashboard
Stage 2: Go to Themes and snap on the dropdown menu and pick Edit HTML
Stage 3: Now look for ]]></b:skin> and glue the given beneath CSS only above to it
/*stylish note box by Techy Darshan 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 Techy Darshan 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 Techy Darshan 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 Techy Darshan 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 Techy Darshan 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 Techy Darshan 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}
Note: This a Stylish Note Box Demo 1
<p class="TD-note1"><b>Note: This a Stylish Note Box Demo 1</b></p>
Note: This a Stylish Note Box Demo 2
<p class="TD-note2"><b>Note: This a Stylish Note Box Demo 2</b></p>
Note: This a Stylish Note Box Demo 3
<p class="TD-note3"><b>Note: This a Stylish Note Box Demo 3</b></p>
Note: This a Stylish Note Box Demo 4
<p class="TD-note4"><b>Note: This a Stylish Note Box Demo 4</b></p>
Note: This a Stylish Note Box Demo 5
<p class="TD-note5"><b>Note: This a Stylish Note Box Demo 5</b></p>
Note: This a Stylish Note Box Demo 6
<p class="TD-note6"><b>Note: This a Stylish Note Box Demo 6</b></p>
Conclusion
In this post I made a stage by instructional exercise on How to add a Stylish Note Block [Notebox] in any Blogger Template, which you can use in any blogger format to Highlight an Important data, Any advance notice sentence or Highlight Any significant stages. I want to believe that you have loved this Post and kindly offer with your companions and follow up our blog for more.
Referensi:
Techy DarshaN
Techy DarshaN