Laborblog

Category: Website

  • CSS Button HTML

    www.laborblog.my.id - Button is one of the HTML elements that are often found on a website, this element is usually used to submit forms or it could be for other things.

    CSS Button HTML
    Button is one of the html elements that are often found on a website, this element is usually used to submit forms or it could be for other things. Here are some interesting button options:



    <!– HTML !–>
    <button class=”button-1″ role=”button”>Button 1</button>
    <!– CSS !–>
    <style>
    .button-1 {
    background-color: #EA4C89;
    border-radius: 8px;
    border-style: none;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: “Haas Grot Text R Web”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    line-height: 20px;
    list-style: none;
    margin: 0;
    outline: none;
    padding: 10px 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: color 100ms;
    vertical-align: baseline;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    }

    .button-1:hover,
    .button-1:focus {
    background-color: #F082AC;
    }
    </style>

    <!– HTML !–>
    <button class=”button-2″ role=”button”>Button 2</button>
    <!– CSS !–>
    <style>
    .button-2 {
    background-color: rgba(51, 51, 51, 0.05);
    border-radius: 8px;
    border-width: 0;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-family: “Haas Grot Text R Web”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    text-align: center;
    transition: all 200ms;
    vertical-align: baseline;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    }
    </style>

    <!– HTML !–>
    <button class=”button-3″ role=”button”>Button 3</button>
    <!– CSS !–>
    <style>
    .button-3 {
    appearance: none;
    background-color: #2ea44f;
    border: 1px solid rgba(27, 31, 35, .15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system,system-ui,”Segoe UI”,Helvetica,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    padding: 6px 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    }

    .button-3:focus:not(:focus-visible):not(.focus-visible) {
    box-shadow: none;
    outline: none;
    }

    .button-3:hover {
    background-color: #2c974b;
    }

    .button-3:focus {
    box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
    outline: none;
    }

    .button-3:disabled {
    background-color: #94d3a2;
    border-color: rgba(27, 31, 35, .1);
    color: rgba(255, 255, 255, .8);
    cursor: default;
    }

    .button-3:active {
    background-color: #298e46;
    box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
    }
    </style>

    <!– HTML !–>
    <button class=”button-4″ role=”button”>Button 4</button>
    <!– CSS !–>
    <style>
    .button-4 {
    appearance: none;
    background-color: #FAFBFC;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    box-sizing: border-box;
    color: #24292E;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system, system-ui, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    list-style: none;
    padding: 6px 16px;
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: break-word;
    }

    .button-4:hover {
    background-color: #F3F4F6;
    text-decoration: none;
    transition-duration: 0.1s;
    }

    .button-4:disabled {
    background-color: #FAFBFC;
    border-color: rgba(27, 31, 35, 0.15);
    color: #959DA5;
    cursor: default;
    }

    .button-4:active {
    background-color: #EDEFF2;
    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
    transition: none 0s;
    }

    .button-4:focus {
    outline: 1px transparent;
    }

    .button-4:before {
    display: none;
    }

    .button-4:-webkit-details-marker {
    display: none;
    }
    </style>

    <!– HTML !–>
    <button class=”button-5″ role=”button”>Button 5</button>
    <style>
    /* CSS */
    .button-5 {
    align-items: center;
    background-clip: padding-box;
    background-color: #fa6400;
    border: 1px solid transparent;
    border-radius: .25rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: system-ui,-apple-system,system-ui,”Helvetica Neue”,Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    min-height: 3rem;
    padding: calc(.875rem – 1px) calc(1.5rem – 1px);
    position: relative;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width: auto;
    }

    .button-5:hover,
    .button-5:focus {
    background-color: #fb8332;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    }

    .button-5:hover {
    transform: translateY(-1px);
    }

    .button-5:active {
    background-color: #c85000;
    box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
    transform: translateY(0);
    }
    </style>

    <!– HTML !–>
    <button class=”button-6″ role=”button”>Button 6</button>
    <style>
    .button-6 {
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: .25rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    display: inline-flex;
    font-family: system-ui,-apple-system,system-ui,”Helvetica Neue”,Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    min-height: 3rem;
    padding: calc(.875rem – 1px) calc(1.5rem – 1px);
    position: relative;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width: auto;
    }

    .button-6:hover,
    .button-6:focus {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    color: rgba(0, 0, 0, 0.65);
    }

    .button-6:hover {
    transform: translateY(-1px);
    }

    .button-6:active {
    background-color: #F0F0F1;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
    color: rgba(0, 0, 0, 0.65);
    transform: translateY(0);
    }
    </style>

    <!– HTML !–>
    <button class=”button-7″ role=”button”>Button 7</button>
    <style>
    .button-7 {
    background-color: #0095ff;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system,system-ui,”Segoe UI”,”Liberation Sans”,sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.15385;
    margin: 0;
    outline: none;
    padding: 8px .8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
    }

    .button-7:hover,
    .button-7:focus {
    background-color: #07c;
    }

    .button-7:focus {
    box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
    }

    .button-7:active {
    background-color: #0064bd;
    box-shadow: none;
    }
    </style>

    <!– HTML !–>
    <button class=”button-8″ role=”button”>Button 8</button>
    <!– CSS!–>
    <style>
    .button-8 {
    background-color: #e1ecf4;
    border-radius: 3px;
    border: 1px solid #7aa7c7;
    box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
    box-sizing: border-box;
    color: #39739d;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system,system-ui,”Segoe UI”,”Liberation Sans”,sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.15385;
    margin: 0;
    outline: none;
    padding: 8px .8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
    }

    .button-8:hover,
    .button-8:focus {
    background-color: #b3d3ea;
    color: #2c5777;
    }

    .button-8:focus {
    box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
    }

    .button-8:active {
    background-color: #a0c7e4;
    box-shadow: none;
    color: #2c5777;
    }
    </style>

    <!– HTML !–>
    <button class=”button-9″ role=”button”>Button 9</button>
    <!– CSS!–>
    <style>
    .button-9 {
    align-items: center;
    appearance: none;
    background-color: #fff;
    border-radius: 24px;
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    color: #3c4043;
    cursor: pointer;
    display: inline-flex;
    fill: currentcolor;
    font-family: “Google Sans”,Roboto,Arial,sans-serif;
    font-size: 14px;
    font-weight: 500;
    height: 48px;
    justify-content: center;
    letter-spacing: .25px;
    line-height: normal;
    max-width: 100%;
    overflow: visible;
    padding: 2px 24px;
    position: relative;
    text-align: center;
    text-transform: none;
    transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: auto;
    will-change: transform,opacity;
    z-index: 0;
    }

    .button-9:hover {
    background: #F6F9FE;
    color: #174ea6;
    }

    .button-9:active {
    box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
    outline: none;
    }

    .button-9:focus {
    outline: none;
    border: 2px solid #4285f4;
    }

    .button-9:not(:disabled) {
    box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
    }

    .button-9:not(:disabled):hover {
    box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
    }

    .button-9:not(:disabled):focus {
    box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
    }

    .button-9:not(:disabled):active {
    box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
    }

    .button-9:disabled {
    box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
    }
    </style>

    <!– HTML !–>
    <button class=”button-10″ role=”button”>Button 10</button>
    <!– CSS!–>
    <style>
    .button-10 {
    appearance: button;
    background-color: #1899D6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: din-round,sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 20px;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 13px 16px;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    transform: translateZ(0);
    transition: filter .2s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 18%;
    }

    .button-10:after {
    background-clip: padding-box;
    background-color: #1CB0F6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    bottom: -4px;
    content: “”;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    }

    .button-10:main,
    .button-10:focus {
    user-select: auto;
    }

    .button-10:hover:not(:disabled) {
    filter: brightness(1.1);
    }

    .button-10:disabled {
    cursor: auto;
    }
    </style>

    <!– HTML !–>
    <button class=”button-11″ role=”button”>Button 11</button>
    <!– CSS!–>
    <style>
    .button-11 {
    background: #FF4742;
    border: 1px solid #FF4742;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: nunito,roboto,proxima-nova,”proxima nova”,sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 16px;
    min-height: 40px;
    outline: 0;
    padding: 12px 14px;
    text-align: center;
    text-rendering: geometricprecision;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    }

    .button-11:hover,
    .button-11:active {
    background-color: initial;
    background-position: 0 0;
    color: #FF4742;
    }

    .button-11:active {
    opacity: .5;
    }
    </style>

    <!– HTML !–>
    <button class=”button-12″ role=”button”>Button 12</button>
    <!– CSS!–>
    <style>
    .button-12 {
    appearance: none;
    background-color: #000000;
    border: 2px solid #1A1A1A;
    border-radius: 15px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: Roobert,-apple-system,BlinkMacSystemFont,”Segoe UI”,Helvetica,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    min-height: 60px;
    min-width: 0;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 19%;
    will-change: transform;
    }

    .button-12:disabled {
    pointer-events: none;
    }

    .button-12:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
    }

    .button-12:active {
    box-shadow: none;
    transform: translateY(0);
    }
    </style>

    <!– HTML !–>
    <button class=”button-13″ role=”button”>Button 13</button>
    <!– CSS!–>
    <style>
    .button-13 {
    appearance: none;
    background-color: transparent;
    border: 2px solid #1A1A1A;
    border-radius: 15px;
    box-sizing: border-box;
    color: #3B3B3B;
    cursor: pointer;
    display: inline-block;
    font-family: Roobert,-apple-system,BlinkMacSystemFont,”Segoe UI”,Helvetica,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    min-height: 60px;
    min-width: 0;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 19%;
    will-change: transform;
    }

    .button-13:disabled {
    pointer-events: none;
    }

    .button-13:hover {
    color: #fff;
    background-color: #1A1A1A;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
    }

    .button-13:active {
    box-shadow: none;
    transform: translateY(0);
    }
    </style>

    <!– HTML !–>
    <button class=”button-14″ role=”button”>Button 14</button>
    <!– CSS!–>
    <style>
    .button-14 {
    align-items: center;
    appearance: none;
    background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
    border: 0;
    border-radius: 6px;
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: “JetBrains Mono”,monospace;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    font-size: 18px;
    }

    .button-14:focus {
    box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
    }

    .button-14:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
    transform: translateY(-2px);
    }

    .button-14:active {
    box-shadow: #3c4fe0 0 3px 7px inset;
    transform: translateY(2px);
    }
    </style>

    <!– HTML !–>
    <button class=”button-15″ role=”button”>Button 15</button>
    <!– CSS!–>
    <style>
    .button-15 {
    align-items: center;
    appearance: none;
    background-color: #FCFCFD;
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
    box-sizing: border-box;
    color: #36395A;
    cursor: pointer;
    display: inline-flex;
    font-family: “JetBrains Mono”,monospace;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    font-size: 18px;
    }

    .button-15:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    }

    .button-15:hover {
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    transform: translateY(-2px);
    }

    .button-15:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
    }
    </style>

    <!– HTML !–>
    <button class=”button-16″ role=”button”>Button 16</button>
    <!– CSS!–>
    <style>
    .button-16 {
    background-color: #222;
    border-radius: 4px;
    border-style: none;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: “Farfetch Basis”,”Helvetica Neue”,Arial,sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    max-width: none;
    min-height: 44px;
    min-width: 10px;
    outline: none;
    overflow: hidden;
    padding: 9px 20px 8px;
    position: relative;
    text-align: center;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 19%;
    }

    .button-16:hover,
    .button-16:focus {
    opacity: .75;
    }
    </style>

    <!– HTML !–>
    <button class=”button-17″ role=”button”>Button 17</button>
    <!– CSS!–>
    <style>
    .button-17 {
    background-color: #fff000;
    border-radius: 12px;
    color: #000;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 15px;
    text-align: center;
    transition: 200ms;
    width: 16%;
    box-sizing: border-box;
    border: 0;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    }

    .button-17:not(:disabled):hover,
    .button-17:not(:disabled):focus {
    outline: 0;
    background: #f4e603;
    box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
    }

    .button-17:disabled {
    filter: saturate(0.2) opacity(0.5);
    cursor: not-allowed;
    }
    </style>

    <!– HTML !–>
    <button class=”button-18″ role=”button”>Button 18</button>
    <!– CSS!–>
    <style>
    .button-18 {
    background-color: #c2fbd7;
    border-radius: 100px;
    box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
    color: green;
    cursor: pointer;
    display: inline-block;
    font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
    padding: 7px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 250ms;
    border: 0;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    }

    .button-18:hover {
    box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
    transform: scale(1.05) rotate(-1deg);
    }
    </style>

    <!– HTML !–>
    <button class=”button-19″ role=”button”>Button 19</button>
    <!– CSS!–>
    <style>
    .button-19 {
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
    box-sizing: border-box;
    color: #121212;
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 auto;
    font-family: Inter,sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    margin: 0;
    outline: none;
    padding: 1rem 1.2rem;
    text-align: center;
    text-decoration: none;
    transition: box-shadow .2s,-webkit-box-shadow .2s;
    white-space: nowrap;
    border: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    }

    .button-19:hover {
    box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0;
    }
    </style>

    <!– HTML !–>
    <button class=”button-20″ role=”button”>Button 20</button>
    <!– CSS!–>
    <style>
    .button-20 {
    background-color: #13aa52;
    border: 1px solid #13aa52;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: “Akzidenz Grotesk BQ Medium”, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    outline: none;
    outline: 0;
    padding: 10px 25px;
    text-align: center;
    transform: translateY(0);
    transition: transform 150ms, box-shadow 150ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    }

    .button-20:hover {
    box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
    transform: translateY(-2px);
    }

    @media (min-width: 768px) {
    .button-20 {
    padding: 10px 30px;
    }
    }
    </style>






















    Notes: Get the code by clicking the button will copy the code and paste the code in the column below. Check the code is working or not




  • Cara Membuat Iklan Adsense Melayang Responsive dibawah Blog

    www.laborblog.my.id - Pada kesempatan kali ini saya akan memberikan tips cara membuat floating ads dengan mudah. Jika Anda ingin memasang iklan melayang, Anda harus berhati-hati, jangan sampai iklan tersebut mengganggu pengunjung blog Anda.

    Tangkapan Layar | Istimewa
    Pada kesempatan kali ini saya akan memberikan tips cara membuat floating ads dengan mudah. Jika Anda ingin memasang iklan melayang, Anda harus berhati-hati, jangan sampai iklan tersebut mengganggu pengunjung blog Anda.


    Iklan melayang tetap (sticky fixed ads) yang ditempatkan di bagian bawah layar memiliki nilai rasio klik-tayang yang cukup solid. Karena kinerjanya, pengunjung blog akan terus melihat iklan meskipun artikel di-scroll ke bawah atau ke atas. , itu akan memiliki potensi klik-tayang (RKT) yang lebih tinggi. Nah bagaimana cara membuat iklan melayang nya bro? Yuk simak tipsnya di bawah ini.
    Cara Mudah Membuat Iklan Adsense Melayang
    1. Buka Blogger dan Theme
    Hal pertama yang harus dilakukan adalah masuk ke blogger.com, lalu pilih theme dan edit kode htmlnya.
    Peringatan ! : Sebelum memodifikasi template blog, saran saya buat backup dulu, jika ada kesalahan bisa segera diperbaiki.
    2. Buat Iklan Responsive dan Edit Kode
    Cara kedua, buat iklan baru dalam format responsive, lalu copy kode adsense ke teks yang saya tandai di bawah ini.

    <script type=’text/javascript’>
    $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#btm_banner&#39;).hide(90);});});
    </script>
    <!–start: floating ads–>
    <div id=’floatads’ style=’width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999′>
    <div><a id=’close-floatads’ onclick=’document.getElementById(&apos;floatads&apos;).style.display = &apos;none&apos;;’ style=’cursor:pointer;’><img alt=’close’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhclRDQZWqGVHmf1si9GTOlj-GAtAcNDA2TWpO4mrgttAwRDvOT74pcD_lBPspiNxF2SAO_EnysDgYmVA0EAVD4iR3yQ2AIstgUwROXMqEdoKhXk0fQhwWVmwhL2-JwQBjqzzdLNmqsK14/s1600/btn_close.gif’ title=’close button’/></a></div>
    <div style=’text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto’>
    <!–Script iklan–>
    [Masukaniklandisini]
    <!–Akhir script iklan–>
    </div>
    </div>
    <!–end: floating ads–>

    3. Letakkan Kode Diatas diatas </body>
    Setelah selesai membuat skrip di atas, salin dan letakkan di atas kode </body>
    4. Simpan
    Apabila langkah demi langkah dilakukan dengan tepat, maka akan terlihat seperti ini.


    Demikian artikel “Cara Membuat Iklan Adsense Melayang Responsif dibawah Blog” semoga bermanfaat. Jika ada tutorial yang kurang jelas bisa comment dibawah. Selamat membaca dan ngeblog…

  • Cara Mencegah Copy Paste Artikel Kecuali Kode dan Blockquote

    www.laborblog.my.id - Mencegah tindakan copy paste artikel dapat dilakukan dengan mudah dengan plugin atau script tertentu, lalu bagaimana cara mencegah copy paste kecuali tanda kutip atau kode pada artikel tersebut?

    Ilustrasi
    Mencegah tindakan copy paste artikel dapat dilakukan dengan mudah dengan plugin atau script tertentu, lalu bagaimana cara mencegah copy paste kecuali tanda kutip atau kode pada artikel tersebut?
    Tindakan mengcopy paste konten blog orang lain mungkin bukan hal yang aneh lagi Saat ini banyak blogger yang menginginkan kesuksesan instan tanpa kerja keras.


    Untuk menghasilkan uang dengan blogging, kita membutuhkan lalu lintas. Traffic dapat dicapai dengan menyajikan konten viral atau berkualitas. Sayangnya, tidak semua blogger yang mengharapkan hasil langsung ingin bersusah payah membuat konten mereka sendiri.
    “Kalau ada yang mudah kenapa khawatir, toh semua yang ada di internet itu gratis, sudah jadi resikonya”. saya kira, ini adalah kalimat pembelaan dari banyak blogger yang melakukan kecurangan.
    Bagaimana mencegah copy dan paste posting blog?
    Ada cara mudah untuk mencegah orang lain menyalin postingan yang kita buat. laborblog.my.id sendiri sudah membuat cara untuk mencegah blogger mengcopy paste konten dengan menambahkan script tertentu. Cukup dengan menambahkan kode berikut di gadget HTML/JAVASCRIPT, pengunjung tidak akan bisa menggunakan shortcut CTRL+A untuk memilih konten artikel.

    <script src=’demo-to-prevent-copy-paste-on-blogger_files/googleapis.js’></script> <script type=’text/javascript’> if (typeof document.onselectstart!=”undefined” ) { document.onselectstart=new Function (“return false” ); } else { document.onmousedown=new Function (“return false” ); document.onmouseup=new Function (“return true” ); } </script>

    Selain itu, anda juga dapat menambahkan kode berikut untuk mencegah pencuri mengambil gambar dalam artikel dan menonaktifkan klik kanan menggunakan mouse.

    <script language=JavaScript>
    var message=”©laborblog.my.id 2021″; //Ganti dengan pesan kamu sendiri
    function clickIE4() {
    if (event.button==2) {
    alert (message);
    return false;
    }
    }
    function clickNS4(e) {
    if (document.layers||document.getElementById&&!document.all) {
    if (e.which==2||e.which==3) {
    alert(message);
    return false;
    }
    }
    }
    if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=clickNS4;
    } else if (document.all&&!document.getElementById) {
    document.onmousedown=clickIE4;
    }
    document.oncontextmenu=new Function(“alert(message);return false”)
    </script>

    Walaupun judulnya khusus untuk pengguna Blogger, cara ini juga bisa digunakan oleh pengguna WordPress – cukup tambahkan widget CUSTOM HTML di sidebar atau footer Anda, lalu salin kode di atas dan simpan.
    Bagi Anda yang lebih suka menggunakan plugin, Anda juga dapat mencegah copy paste artikel dengan plugin khusus seperti WP Content Copy Protection with Color Design, WP Content Copy Protection atau WP Content Copy Protection, dan No Right Click. secara otomatis sudah bisa melindungi konten blog Anda.
    Cara Mencegah Copy Paste Artikel Kecuali Kode dan Blockquote
    Satu masalah yang saya temui di kedua metode di atas adalah tidak ada kontrol atas apa yang diblokir – menggunakan skrip atau plugin akan membuat semua item blog tidak dapat disalin, sedangkan jika saya membagikan artikel dengan quote/blockquote atau kode? akan sangat merepotkan pembaca, jika ingin menyalin kode pada artikel tentang tutorial.
    Di beberapa plugin terdapat fungsi untuk memfilter bagian artikel mana yang bisa dicopy oleh pembaca, namun sayangnya fungsi ini hanya tersedia pada versi premium, untungnya ada cara yang murah!
    Untuk mencegah agar postingan tidak tercopy paste kecuali kode dan tanda kutip (blockquote), kita bisa menambahkan kode CSS berikut di template Blogger

    .post-outer {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    }
    .post blockquote,.post pre,.post code{
    -webkit-touch-callout:text;
    -webkit-user-select:text;
    -khtml-user-select:text;
    -ms-user-select:text;
    -moz-user-select:text;
    }

    Sedangkan untuk pengguna WordPress kamu bisa menggunakan kode berikut:



    .entry-content {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    }
    .entry-content blockquote, .entry-content pre, .entry-content code {
    -webkit-touch-callout:text;
    -webkit-user-select:text;
    -khtml-user-select:text;
    -ms-user-select:text;
    -moz-user-select:text;
    }

    CATATAN: Setiap tema/template memiliki class CSS yang berbeda. Dalam kode di atas menggunakan contoh yang paling umum. Jadi, jika kode ini tidak berfungsi, gunakan fungsi INSPECT browser Anda untuk menentukan class yang benar.

  • Cara Memasang Komentar Facebook di Blog atau Web

    www.laborblog.my.id - Memasang Komentar Facebook ke Blogger dan Web sudah banyak dijelaskan dan digunakan oleh para blogger karena sebagian besar pengguna internet selalu login ke akun Facebook mereka, sehingga memudahkan pengunjung blog untuk berkomentar menggunakan akun Facebook nya.

    Tangkapan Layar | Istimewa
    Memasang Komentar Facebook ke Blogger dan Web sudah banyak dijelaskan dan digunakan oleh para blogger karena sebagian besar pengguna internet selalu login ke akun Facebook mereka, sehingga memudahkan pengunjung blog untuk berkomentar menggunakan akun Facebook nya.
    Berikut cara memasang komentar Facebook di blog Anda.
    LANGKAH:
    1. Masuk ke akun blogger.
    2. Pilih menu template – Edit HTML.
    3. Cari kode (CTRL+F) ini <div class=’comments’ id=’comments’>
    4. Lalu masukkan kode di bawah ini, di bawah kode <div class=’comments’ id=’comments’>

    <div title=’Comments made with Facebook’><fb:comments-count expr:href=’data:post.url’/> Comments </div> <div title=’Comments from Blogger’><data:post.numComments/> Comments </div> <div class=’clear’/></div> <div><p><b:if cond=’data:blog.pageType == “item”‘></p> <div id=’fb-root’/><fb:comments expr:href=’data:post.url’ num_posts=’2′ width=’400’/></b:if></div>

    5. Cari dan ganti kata “ID FACEBOOK ANDA” dengan ID Facebook atau ID Fan Page Anda.
    6. Simpan template, dan coba. Semoga berhasil

  • Bagaimana Cara Menghilangkan Kode ?m=1 atau ?m=0 Url Blogger

    www.laborblog.my.id - Pernahkah Anda memperhatikan bahwa URL blog pada platform Blogger memiliki kode unik yang diakhiri dengan (?m=1 atau ?m=0) dan kode tersebut secara otomatis ditampilkan ketika Anda mengakses URL dari home sebuah blog.

    Ilustrasi
    Pernahkah Anda memperhatikan bahwa URL blog pada platform Blogger memiliki kode unik yang diakhiri dengan (?m=1 atau ?m=0) dan kode tersebut secara otomatis ditampilkan ketika Anda mengakses URL dari home sebuah blog. Misalnya, blog ini memiliki URL home https://www.laborblog.my.id/?m=1 atau https://www.laborblog.my.id/?m=0.


    Jadi apa arti dari kode-kode ini?
    Kode akhiran ini hanya dimaksudkan untuk menunjukkan identitas perangkat yang digunakan seseorang untuk mengakses blog. Jika kode akhiran ditampilkan ?m=1, berarti Anda mengakses blog melalui perangkat seluler, jika kode ditampilkan ?m=0 berarti Anda mengakses blog melalui perangkat PC.
    Mengapa Kode Akhiran ?m=1 Url Blogger Dihilangkan?
    Salah satu alasan utama mengapa kode akhiran ?m=1 harus dihilangkan adalah karena kode tersebut dapat mengakibatkan duplikat konten di blog. Juga, menghapus kode url blogger dapat meningkatkan SEO di blog itu sendiri, yang masih dipercaya oleh beberapa blogger.
    Namun, apakah itu benar? Dan apakah benar ini berhubungan langsung dengan SEO?
    Menurut pendapat saya atau pribadi, pernyataan seperti di atas yang menyarankan kode ?m=1 atau ?m=0 dapat menyebabkan duplikat konten di blog tidak benar tetapi juga tidak sepenuhnya salah.
    Pendapat para Blogger hanyalah sebagian dari spekulasi dan asumsi sederhana bahwa mereka mungkin hanya akan mengalami kesulitan ketika URL blog mereka masih memiliki lampiran ?m=1 atau ?m=0. Jadi menurut mereka penyebabnya kira-kira seperti ini.
    Fakta bahwa kebanyakan blogger mengabaikan poin ini dan kebanyakan blogger lain tidak pernah mengalami masalah seperti duplikat konten yang disebabkan oleh kode akhiran ?m=1 atau ?m=0.
    Logika saya mengatakan itu seperti trik peringkas URL blog, terutama platform blogger, di mana semua URL yang dapat diakses home memiliki kode akhiran ?m=1 atau ?m=0. Jadi dengan menghilangkan kode tersebut, URL blog terlihat pendek dan rapi.
    Selain itu, dapatkah kode-kode ini berhubungan dengan SEO? Bahkan ada yang mengatakan bahwa menghilangkan kode akhiran dapat meningkatkan SEO pada sebuah blog. Ini pendapat yang agak tidak relevan dan ternyata menghilangkan kode akhiran ?m=1 atau ?m=0 tidak bisa menaikkan atau menurunkan rangking blog.
    Jawaban paling logis dari pernyataan di atas adalah jika Anda ingin meningkatkan SEO blog Anda, maka buatlah konten yang berkualitas, yang dengan sendirinya sudah cukup untuk meningkatkan peringkat blog Anda di serp engine research.
    Jadi mengapa saya terus berbagi Bagaimana cara menghilangkan Kode ?m=1 atau ?m=0 ?
    Alasannya sangat sederhana, saya ingin membagikan tip ini untuk Anda yang ingin mempersingkat url atau tautan blog agar lebih pendek saat login dari perangkat seluler atau desktop. Sekali lagi, saya menekankan bahwa dengan kode ?m=1 atau ?m=0 tidak akan mempengaruhi SEO blog Anda.
    Oleh karena itu sebelum mencoba cara ini ada baiknya anda membaca artikel diatas terlebih dahulu agar anda tidak gagal paham nantinya.
    Cara Menghilangkan Kode ?m=1 atau ?m=0
    1. Silahkan buka akun Blogger Anda masing-masing.
    2. Lalu pergi ke bagian Tema > Edit Html. Kemudian salin dan tempel kode di bawah ini tepat di atas </body>

    <script type=’text/javascript’>
    var uri = window.location.toString();if (uri.indexOf(&quot;?m=1&quot;,&quot;?m=1&quot;) &gt; 0) {var clean_uri = uri.substring(0, uri.indexOf(&quot;?m=1&quot;));window.history.replaceState({}, document.title, clean_uri);}
    </script>



    3. Simpan tema dan coba akses url blog, kode akhiran tidak akan lagi dilampirkan ke url blog Anda.
    Cukup sekian artikel tentang “Bagaimana Cara Menghilangkan Kode ?m=1 atau ?m=0 Url Blogger”. Semoga bermanfaat. Terima kasih

  • Cara Menggunakan Followlike.Net dan Meningkatkan Traffic Situs

    www.laborblog.my.id - Followlike adalah alat promosi SEO yang menggunakan pembuatan tautan, alat SEO, dan media sosial untuk membantu Anda mengembangkan bisnis, sekaligus meningkatkan Situs Web

    Tangkapan Layar
    Followlike – komunitas pertukaran sosial. followlike adalah komunitas penguat seo pertukaran sosial gratis. tingkatkan media sosial, pagerank, peringkat alexa, backlink, bookmark, dan peringkat kata kunci seo Anda hari ini!
    Apa itu Followlike?


    Followlike adalah alat promosi SEO yang menggunakan pembuatan tautan, alat SEO, dan media sosial untuk membantu Anda mengembangkan bisnis, sekaligus meningkatkan Situs Web, Jejaring Sosial, Video & Musik, Blog, Tautan Balik & Bookmark. Anda dapat mempromosikan apa pun yang Anda butuhkan saat Followlike.Net menghubungkan Anda dengan member yang mencari hal yang sama. Tingkatkan peringkat mesin pencari dan dapatkan suka gratis & pengikut twitter gratis dari pengguna yang benar-benar akan berinteraksi dengan platform web mereka.
    Media Sosial & Penguat Lalu Lintas
    Situs web baru atau lama? itu tidak masalah. Yang penting adalah lalu lintas, tautan balik, peringkat mesin pencari, dan jejaring sosial, jika tidak, pelanggan tidak tahu Anda ada. Followlike memiliki banyak alat SEO yang akan membantu Anda meningkatkan pengoptimalan mesin pencari dan meningkatkan lalu lintas situs web termasuk tautan balik dan Unique Article Spinner. Jadi, tingkatkan statistik media sosial Anda hari ini
    Suka, Bagikan & Bookmark
    Mengapa Anda membutuhkan lebih banyak jejaring sosial? Media sosial sekarang memainkan peran besar dalam SEO Anda. Meningkatkan pelanggan, pengikut, penggemar, suka & berbagi di situs media sosial Anda sangat penting. Apa itu seo? Mesin pencari utama menggunakannya untuk menentukan peringkat popularitas situs web Anda, jadi semakin banyak Pertukaran Sosial yang Anda dapatkan, semakin baik peringkat Anda. Ini bisa dalam bentuk Suka atau Bookmark Sosial
    Apa yang dapat Anda Promosikan menggunakan Followlike.Net?
    Situs Anda
    Promosikan situs web Anda di seluruh platform utama dan kembangkan Lalu Lintas & Penjualan Anda sambil meningkatkan SEO-nya
    Bisnis Anda
    Biarkan dunia tahu tentang bisnis Anda dan arahkan Klien, Pelanggan, dan Penjualan baru langsung kepada Anda.
    Band, Trek & Video Anda
    Dunia akan mengetahui tentang Band, Trek, atau Video Anda dengan meningkatkan eksposur Anda di platform utama.
    Jejaring Sosial Anda
    Jejaring Sosial Anda akan meningkat pesat dari pengikut, menjadi suka, dan berbagi di seluruh platform sosial terkemuka.
    Mengapa Followlike.Net?… Followlike.Net Pertukaran Sosial
    Followlike.Net adalah Promosi Sosial online tercanggih. Jangan pernah membayar pengikut palsu, suka, atau lalu lintas ketika Anda bisa mendapatkannya dari orang sungguhan yang ingin menjadi bagian dari Jaringan Anda. Yang terbaik dari semuanya GRATIS
    Lebih dari 180.000 Anggota dari lebih dari 200 negara
    Semua aspek SEO dan Promosi Sosial tercakup
    Sistem yang cepat dan ramah pengguna
    Sistem pendukung teratas.
    Alat No. 1 untuk menghasilkan lebih banyak lalu lintas di situs web & akun sosial Anda
    Pendaftaran cepat dan poin gratis hanya untuk mendaftar
    Cukup tambahkan Tautan atau Akun Sosial Anda. Tawarkan tawaran, lalu orang akan mengikuti, menyukai, melihat, atau membagikan konten Anda jika mereka mau. Meningkatkan pemasaran internet media sosial, pemasaran konten dan seo harian.
    Bagaimana Cara Mendaftar?


    1. Kunjungi situs https://www.followlike.net
    2. Isi formulir pendaftaran sesuai dengan data yang diminta
    3. Setelah terdaftar, pilih fitur promosi yang ingin Anda gunakan. Penting: 1 Alamat IP hanya untuk 1 akun
    Semoga berhasil…[FollowLike.Net]

  • Cara Membuat Anti Copas Klik Kanan dan CTRL+U

    www.laborblog.my.id - Seorang blogger pasti akan sangat marah jika artikel yang dia tulis dengan susah payah akhirnya hanya dicopy paste oleh penulis lain, lebih baik jika copy paste tapi mencantumkan sumbernya.

    Ilustrasi
    Seorang blogger pasti akan sangat marah jika artikel yang dia tulis dengan susah payah akhirnya hanya dicopy paste oleh penulis lain, lebih baik jika copy paste tapi mencantumkan sumbernya.
    Hari ini kita akan mempelajari Cara Membuat Anti Copas Klik Kanan dan CTRL U, jika pada artikel Cara Otomatis Memasang Link Sumber Artikel di Blog/Web, mempelajari anti klik kanan menggunakan JavaScript, sekarang kita akan mencoba metode lain. Langsung saja ya.
    Copy script berikut pada tag body

    oncontextmenu=’return false;’ onkeydown=’return false;’ onmousedown=’return false;’ ondragstart=’return false’ onselectstart=’return false’ style=’-moz-user-select: none; cursor: default;’

    Dengan mengetikkan script seperti di atas, tidak akan ada yang bisa mengcopy paste teks tersebut, baik dengan klik kanan maupun CTRL+U.
    Sekarang kita akan mengedit dan memastikan bahwa ctrl + u Anda akan diarahkan ke halaman web lain.
    Ketikkan skrip berikut:

    <script type=’text/javascript’>
    //<![CDATA[
    shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:”keydown”,propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)”undefined”==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,”string”==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if(“INPUT”==e.tagName||”TEXTAREA”==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=”,”),190==code&&(e=”.”);var f=a.split(“+”),g=0,h={“`”:”~”,1:”!”,2:”@”,3:”#”,4:”$”,5:”%”,6:”^”,7:”&”,8:”*”,9:”(“,0:”)”,”-“:”_”,”=”:”+”,”;”:”:”,”‘”:’”‘,”,”:”<“,”.”:”>”,”/”:”?”,”\”:”|”},i={esc:27,escape:27,tab:9,space:32,”return”:13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,”break”:19,insert:45,home:36,”delete”:46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)”ctrl”==k||”control”==k?(g++,m=!0):”shift”==k?(g++,j=!0):”alt”==k?(g++,o=!0):”meta”==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent(“on”+c.type,e):d[“on”+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent(“on”+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c[“on”+a]=!1}}},shortcut.add(“Ctrl+U”,function(){top.location.href=”http://dumetschool.com”});
    //]]>
    </script>

    Klik dan tekan CTRL+U untuk lihat hasilnya.

  • Cara Membuat Tampilan Blog versi Web di Handphone

    www.laborblog.my.id - Ketika kita mengakses blog lewat handphone seringkali kita melihat tampilan blog yang tidak sesuai atau sama dengan tampilan blog yang kita akses lewat desktop/computer.

    Ilustrasi
    Ketika kita mengakses blog lewat handphone seringkali kita melihat tampilan blog yang tidak sesuai atau sama dengan tampilan blog yang kita akses lewat desktop/computer. Ini dikarenakan pengaturan blog akan secara otamatis tampil dengan versi mobile apabila kita akses lewat handphone.
    Bagaimana cara mengubah pengaturan tersebut, agar blog kita tampil dengan versi web apabila kita akses melalui handphone? Berikut langkah cara membuat tampilan blog versi web di handphone:
    1. Login akun blogger Anda.
    2. Pilih menu tab Template, kemudian klik icon setting.

    Ilustrasi
    3. Setelah Anda klik icon setting akan muncul gambar pengaturan template.
    4. Kemudian klik ‘Tidak’ jika ingin menampilan blog versi web di handphone.

    Ilustrasi
    NB: Klik ‘Ya’ untuk menampilkan blog versi mobile di handphone.
    5. Kemudian Simpan.