CodeLess Design Class 

by Ordinary IT 4.0 Premium Blogger Theme (Setup Tutorial)

Theme Edit HTML

SEO tagline: Ordinary IT | DM & Freelancing Institute (recomanded 4 words)

Meta description: Ordinary IT is a full stack digital marketing company and freelancing institute. Learn Freelancing with 03 Months Moneyback Guarantee. (recomanded 160 characters)

Social share image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghAhhid7EHOBBW2kSj2aSHJev6yrAzvtrdDibkX7P3PYLswfGk3T2ryHSZs7A9lOGqilJUV9y_uspH0TvZy1SGaFomVfuKL6E_bBco-exVp-_ct9hyphenhyphenFX5cduITamy_0LPSEa7ZnYjhyUxQBBNhyPWUUloIXNa1Jz65kqjR5XsWlujbMrTdjnaA6E5-RBss/s1600/OrdinaryIT.jpg

Schema logo and favicon: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwHjKaZIksA3TVm1miOxJT4d0d7pd3j5q-l06PIDey54c3ujy5fNIfDE68NoyUCkwPYuO_BKPlqJPP_Y_qrwOzH3u_6JHHEBqWHJ4zQTA2qcl3_YbmisZYoh8DVkYT8WQi0DIcR-b5XUaGRHwRwWUCS0y8Nt3kAA9EskkGwEwOpb9yjFtYHyO2VQoXSTCZ/s1600/oit-favicon.png (recomanded 200x200px)

Google Analytics ID: G-QLXXXV931123

ToC visibility: value="true"/>

ToC position: value="u"/>

Toggle ToC: replace this code below

text += '<ul class="ps-3 pt-3 d-block-check fs-7">';

with this code below

text += '<ul class="ps-3 pt-3 d-none d-block-check fs-7">';

Always sticky menubar: replace this code below

.header-animate.header-hidden

with this code below

.header-animate.header-fixed

Sticky chat icon link: search for Call or Chat Now

404 error page: search for 404 Not Found

Menubar wide on mobile: search for width: auto;

Search box text: search for search-input

Search not found page: search for :(</h1>

Search found page: search for <data:view.search.query/>

Comment box text: search for opacity: 0.3;

Page speed performance test: visit this link

Home Page post showing issue: (use jump break)

Mark after profile name: ✅ ☑️ (win+;)

image hover no colorize

Password protected page

<script language="JavaScript">

var password = 'Ordinay-IT'

password=prompt('Enter the password. If wrong password is entered, will be redirected to home page.','');

if (password != 'Ordinay-IT') {

location.href='https://www.ordinaryit.com';

}

</script>

translate widget position change

table code

contact us page code

course page code

page view counter

print button

Copy Allow and shadow effect

class="copyordinaryit" (allow copy)

class="sdw-oit" (shadow)

Alert Message

alert = para back color 30% #0373b9 cayan color, border = header color

alert-oit-y = para back color yellow, font black with justify alignment (border header menu bar background)

alert-oit-r = para back color red, font white with justify alignment (border heading font color)

Paragraph highlighter

ph-oit-b = paragraph highlighter (blue color)

ph-oit-g = paragraph highlighter (green)

ph-oit-y = paragraph highlighter (yellow)

ph-oit-r = paragraph highlighter (red)

Button

<a href="https://www.ordinaryit.com"><button class="btn-block">Ordinary IT Website Link</button></a>

btn-block = full width button (header background, color-nagigation font color, and hover socket color)

btn-oit-r = full width button (red color and hover socket color)

btn-oit-g = full width button (green color and hover socket color)

btn-oit-b = full width button (blue color and hover socket color)

btn-oit-o = full width button (orange color and hover socket color)

btn-oit-p = full width button (purple color and hover socket color)

btn-oit-y = full width button (yellow color [color: heading font] and hover [color: nagigation font color] socket color)

Direct link convert to button

class="link-oit-btn" = full width button just with link, background color: header, color: nav, hover(bg:socket, color: nav) border is heading font color

header logo colorize from black and white

.navbar-brand {

    /* filter: url(filters.svg#grayscale); Firefox 3.5+ */

      filter: gray; /* IE5+ */

      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */

      -webkit-transition: all .8s ease-in-out;  

    }

.navbar-brand:hover {

    filter: none;

      -webkit-filter: grayscale(0);

      -webkit-transform: scale(1.01);

    }

image rotate

img{

transition: 1s ease;

}

img:hover{

-webkit-transform: rotateZ(1deg);

-ms-transform: rotateZ(1deg);

transform: rotateZ(1deg);

transition: 1s ease;

}

shadow list

93 list comming soon...

Problem with:

menu has no role declare option

image auto converted webp to png

class, id, style example for english post

<div class="copyordinaryit" style="font-family: roboto;" id="#oit">

Global Icon

 Whatsapp

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-whatsapp"/></svg>

 Pinterest

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-pinterest"/></svg>

 Tumblr

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-tumblr"/></svg>

 Twitter

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-twitter"/></svg>

 Linkedin

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-linkedin"/></svg>

 Facebook

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-facebook"/></svg>

 Instagram

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-instagram"/></svg>

 Youtube

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-youtube"/></svg>

 Telegram

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-telegram"/></svg>

 Github

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-github"/></svg>

 Arrow Bottom

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-arrow-b"/></svg>

 Arrow Left

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-arrow-l"/></svg>

 Arrow Right

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-arrow-r"/></svg>

 Arrow Top

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-arrow-t"/></svg>

 User

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-user"/></svg>

 Clock

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-clock"/></svg>

 Comment

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-comment"/></svg>

 Menu

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-menu"/></svg>

 Mail

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-mail"/></svg>

 Pencil

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-edit"/></svg>

 Close

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-close"/></svg>

 Search

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-search"/></svg>

 Check

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-check"/></svg>

 Download

<svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-download"/></svg>