Tuesday, September 15, 2020
Beautifying the appearance of posts is one of the tricks to increase the number of visitors so that they feel more comfortable navigating the blog that we manage. Note Box that we share this time will not have an impact on the speed of your blog because it only relies on light CSS.
In beautifying the appearance of your posts, of course you are not allowed to add a lot of JQuery or Javascript which later makes the loading speed of your blog pages slow and this is what will make the blog empty of visitors.
Note Box this time has been equipped with an SVG icon which is certainly lighter than if you have to use the icon from Font Awesome. Want to know more clearly the results? you can see the following note box.
To make it, you only need to add a little CSS in the blog template that you are using, the tutorial is as shown below.
Installation Tutorial:
1. Please first login to Blogger.
2. On the dashboard, select the Themes menu > Edit HTML
3. Place the CSS code below, just above the code ]]></b:skin>
*/ BOX NOTE SEMPETIN.MY.ID */
.tips ol,.tips ul,.warning ol,.warning ul,.pilihan ul,.pilihan ol,.penting ul,.penting ol{margin:0px;padding:0px}
.tips{border-left:2px solid #00bfa5;background:-webkit-gradient(linear,left top,right top,from(#00bfa5),to(rgba(255,255,255,.00001)));color:#00bfa5}
.tips:after{background:-webkit-gradient(linear,left top,right top,from(#00bfa5),to(rgba(255,255,255,.00001)));background:linear-gradient(90deg,#00bfa5,rgba(255,255,255,.00001))}
.warning{border-left:2px solid #ff0000;background:-webkit-gradient(linear,left top,right top,from(#ff0000),to(rgba(255,255,255,.00001)));color:#ff0000}
.warning:after{background:-webkit-gradient(linear,left top,right top,from(#ff0000),to(rgba(255,255,255,.00001)));background:linear-gradient(90deg,#ff0000,rgba(255,255,255,.00001))}
.penting{border-left:2px solid #ff9900;background:-webkit-gradient(linear,left top,right top,from(#ff9900),to(rgba(255,255,255,.00001)));color:#ff9900}
.penting:after{background:-webkit-gradient(linear,left top,right top,from(#ff9900),to(rgba(255,255,255,.00001)));background:linear-gradient(90deg,#ff9900,rgba(255,255,255,.00001))}
.pilihan{border-left:2px solid #0086b3;background:-webkit-gradient(linear,left top,right top,from(#0086b3),to(rgba(255,255,255,.00001)));color:#0086b3}
.pilihan:after{background:-webkit-gradient(linear,left top,right top,from(#0086b3),to(rgba(255,255,255,.00001)));background:linear-gradient(90deg,#0086b3,rgba(255,255,255,.00001))}
.warning:after,.penting:after,.tips:after,.pilihan:after{content:"";margin:0px;position:absolute;bottom:0;left:0;height:2px;width:50%}
.warning,.penting,.tips,.pilihan{margin:15px 0px;padding:15px 15px 15px 50px;position:relative;background-size:100% 2px;background-repeat:no-repeat;background-position:0 0;font-size:95%;line-height:25px}
.warning::before,.penting::before,.tips::before,.pilihan::before{position:absolute;top:20px;left:10px;font-size:150%}
.pilihan::before{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%230086b3' d='M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2,4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center}.pilihan::before{float:left;word-wrap:normal;white-space:nowrap;content:'';height:30px;left:14px;position:absolute;top:50%;transform:translateY(-50%);width:30px}
.warning::before{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ff0000' d='M8.27,3L3,8.27V15.73L8.27,21H15.73C17.5,19.24 21,15.73 21,15.73V8.27L15.73,3M9.1,5H14.9L19,9.1V14.9L14.9,19H9.1L5,14.9V9.1M11,15H13V17H11V15M11,7H13V13H11V7'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center}.warning::before{float:left;word-wrap:normal;white-space:nowrap;content:'';height:30px;left:14px;position:absolute;top:50%;transform:translateY(-50%);width:30px}.penting::before{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ff9900' d='M12 2A2 2 0 0 0 10 4A2 2 0 0 0 10 4.29C7.12 5.14 5 7.82 5 11V17L3 19V20H21V19L19 17V11C19 7.82 16.88 5.14 14 4.29A2 2 0 0 0 14 4A2 2 0 0 0 12 2M12 6A5 5 0 0 1 17 11V18H7V11A5 5 0 0 1 12 6M21 7V13H23V7H21M21 15V17H23V15H21M10 21A2 2 0 0 0 12 23A2 2 0 0 0 14 21H10Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center}.penting::before{float:left;word-wrap:normal;white-space:nowrap;content:'';height:30px;left:14px;position:absolute;top:50%;transform:translateY(-50%);width:30px}
.tips::before{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%2300bfa5' d='M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center}
.tips::before{float:left;word-wrap:normal;white-space:nowrap;content:'';height:30px;left:14px;position:absolute;top:50%;transform:translateY(-50%);width:30px}
4. Save Theme.
Applying on Posts:
To implement Note Box in articles, you need to enter the caller code as below.
<div class="tips">
Fill in Notes.
</div>
<div class="warning">
Fill in Notes.
</div>
<div class="penting">
Fill in Notes.
</div>
<div class="pilihan">
Fill in Notes.
</div>
You are free to change the icon as you wish, to find the SVG icon code you can visit the site https://materialdesignicons.com/
If you don't understand, you can ask through the comments column provided below this article. As much as possible we reply.
Maybe that's all we can provide first, please share this article with your social media if you find it useful, and thank you!