Erwin Abs: Cara Membuat Halaman Parse HTML Di Blogger

Parse html bisa dibilang berfungsi untuk mengubah sebuah kode menjadi kode istilah seperti ini : </ atau ".

Biasanya halaman parse html ini digunakan untuk meletakkan sebuah kode pada sebuah template blog. Misalkan, untuk meletakkan kode google adsense pada template anda diharuskan untuk melakukan parse yang contohnya seperti diatas.

Kenapa harus melakukan parse html?
Alasannya adalah untuk menyesuaikan kode yang ingin digunakan lebih terstruktur dengan kode yang terdapat dalam template.
Cara Membuat Halaman Parse HTML Di Blogger

1. Buka menu HALAMAN pada blogger
2. Klik buat halaman baru
3. Copy dan pastekan kode dibawah ini, kemudian letakkan pada bagian HTML, bukan COMPOSE
<html>

<head>
    
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticaly.com/gh/hilmay619/pribadi/f430da03/sweetalert.min.js"></script>    
    
    </head>

    
    <body>
    
    <div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
    
    
code {
    font-family: Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
    color: #2a5ead;
    font-size: 13px;
    padding: 2px 4px;
    color: #d14;
}

#codes {
    width: 94%;
    height: 300px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 3px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius:8px;
    resize: none;
}

.button-group {
    margin: 0 auto 0;
    text-align: center;
}

button,button[disabled]:active {
    border: none;
    padding: 5px 35px;
    text-align: center;
    color: #fff;
    display: inline-block;
    white-space: nowrap;
    background-color: #0ea6d8;
    cursor: pointer;
    font-family: 'Open Sans',Arial,Sans-Serif;
    font-size: 13px;
    position: relative;
    top: -1px;
    margin: 0 10px;
    line-height: 23px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

button:hover {
    background: #034c64;
}

button[disabled],button[disabled]:active {
    background: #0095c6;
}

#opt1,#opt2,#opt3,#opt4,#opt5 {
    display: inline-block;
    margin: 0 10px 0 0;
    vertical-align: middle;
    border: none;
    outline: none;
}

#outer-wrapper {
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

#post-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

.post-body,.post {
    background-position: center!important;
}

h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {
    display: none;
    margin-top: 0;
    margin: 0;
}

#blog1,#artikel,.blog-posts {
    background-position: center!important;
}

.breadcrumbs {
    display: none;
    margin-top: 0;
    margin: 0;
}

#comments,#breadcrumb, #sidebar-wrapper,#menu-wrap {
    display: none;
    margin-top: 0;
    margin: 0;
}

.post-inner {
    padding: 0 0 0 0;
    margin: 20px auto;
}

.post-body ul#wrapin {
    display: block;
    position: relative;
    margin: 30px auto 0 auto;
}

.post-body ul#wrapin li {
    display: block;
    margin: 0 auto;
    text-align: left;
}

.post-body ul#wrapin br {
    display: none;
}

.ribbon {
    position: relative;
    z-index: 1;
    padding: 1em 2em;
}

.ribbon-tampilan {
    font-size: 120%!important;
    text-transform: uppercase;
    width: 60%;
    position: relative;
    background: #2980b9;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon-tampilan:before,.ribbon-tampilan:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #2980b9;
    z-index: -1;
}

.ribbon-tampilan:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon-tampilan:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #2980b9 transparent transparent transparent;
    bottom: -1em;
}

.ribbon-tampilan .ribbon-nama:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon-tampilan .ribbon-nama:after {
    right: 0;
    border-width: 1em 1em 0 0;
}
    
textarea {
    width: 94%;
    height: 300px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 3px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius:8px;
    resize: none;
}
    
#belakang {
    background: #ecf0f1;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.05);
}
button {
    color: #fff !important;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px;
}
    
form {
    padding: none;
}

form label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    bottom: 10px;
    right: 5px;
    line-height: 47px;
    vertical-align: top;
    font-weight: bold;
}

form .form-check {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
}

form .form-check::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 60px;
    -moz-border-radius: 30px;
}

form .form-radio {
    display: none;
}

form .form-radio + label {
    padding-left: 35px;
}

form .form-radio + label::before {
    content: "";
    position: absolute;
    left: 0;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #fff;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 2px 2px 2px #bbb;
    -moz-box-shadow: 2px 2px 2px #bbb;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -khtml-transition: 0.3s;
}

form .form-radio:checked + label::before {
    background: #34A8BF;
    border: 5px solid #fff;
    width: 17px;
    height: 17px;
}

form .form-check::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 21px;
    height: 21px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    background: #b6b6b6;
    left: 3px;
    top: 3px;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -khtml-transition: 0.3s;
}

form .form-check:checked::after {
    left: 27px;
    background: #1bc94d;
}

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    min-width: -webkit-min-content;
    border: 2px solid aliceblue;
    border-radius: 4px;
}

legend {
    text-align: center;
    display: block;
    margin: 5px;
    font-weight: bold;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
}    
.opt1,.opt2,.opt3,.opt4,.opt5 {
    color: #fff!important;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px 5px 15px;
}

.belakang-memilih {
    padding: 15px;
    margin: 20px auto;
    font-size: 15.5px;
    color: #fff;
    font-weight: bold;
    background: #2980b9;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.05);
}
.belakang-memilih-2 {
    margin: 15px;
    background: #2980b9;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}
 .swal-icon--error__x-mark {
    position: relative;
    display: block;
    -webkit-animation: animateXMark .5s;
    animation: animateXMark .5s;
}

.swal-icon--error__line {
    position: absolute;
    height: 5px;
    width: 47px;
    background-color: #f27474;
    display: block;
    top: 37px;
    border-radius: 2px;
}

.swal-icon--error__line--left {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 17px;
}

.swal-icon--error__line--right {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 16px;
}

@-webkit-keyframes animateErrorIcon {
    0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
    }
;
}

@keyframes animateErrorIcon {
    0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
    }
;
}

@-webkit-keyframes animateXMark {
    0% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        margin-top: -6px;
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 0;
        opacity: 1;
    }
;
}

@keyframes animateXMark {
    0% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        margin-top: -6px;
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 0;
        opacity: 1;
    }
;
}

.swal-icon--warning {
    border-color: #f00;
    -webkit-animation: pulseWarning .75s infinite alternate;
    animation: pulseWarning .75s infinite alternate;
}

.swal-icon--warning__body {
    width: 5px;
    height: 47px;
    top: 10px;
    border-radius: 2px;
    margin-left: -2px;
}

.swal-icon--warning__body,.swal-icon--warning__dot {
    position: absolute;
    left: 50%;
    background-color: #f00;
}

.swal-icon--warning__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: -3.5px;
    bottom: -11px;
}

@-webkit-keyframes pulseWarning {
    0% {
        border-color: #f00;
    }

    to {
        border-color: #f00;
    }
;
}

@keyframes pulseWarning {
    0% {
        border-color: #f00;
    }

    to {
        border-color: #f00;
    }
;
}

.swal-icon--success {
    border-color: #0da706;
}

.swal-icon--success:after,.swal-icon--success:before {
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 60px;
    height: 120px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.swal-icon--success:before {
    border-radius: 120px 0 0 120px;
    top: -7px;
    left: -33px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 60px 60px;
    transform-origin: 60px 60px;
}

.swal-icon--success:after {
    border-radius: 0 120px 120px 0;
    top: -11px;
    left: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 60px;
    transform-origin: 0 60px;
    -webkit-animation: rotatePlaceholder 4.25s ease-in;
    animation: rotatePlaceholder 4.25s ease-in;
}

.swal-icon--success__ring {
    width: 80px;
    height: 80px;
    border: 4px solid #0da706;
    border-radius: 50%;
    box-sizing: content-box;
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: 2;
}

.swal-icon--success__hide-corners {
    width: 5px;
    height: 90px;
    background-color: #fff;
    padding: 1px;
    position: absolute;
    left: 28px;
    top: 8px;
    z-index: 1;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.swal-icon--success__line {
    height: 5px;
    background-color: #0da706;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
}

.swal-icon--success__line--tip {
    width: 25px;
    left: 14px;
    top: 46px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: animateSuccessTip .75s;
    animation: animateSuccessTip .75s;
}

.swal-icon--success__line--long {
    width: 47px;
    right: 8px;
    top: 38px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: animateSuccessLong .75s;
    animation: animateSuccessLong .75s;
}

@-webkit-keyframes rotatePlaceholder {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    5% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    12% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
    }

    to {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
    }
;
}

@keyframes rotatePlaceholder {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    5% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    12% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
    }

    to {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
    }
;
}

@-webkit-keyframes animateSuccessTip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    to {
        width: 25px;
        left: 14px;
        top: 45px;
    }
;
}

@keyframes animateSuccessTip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    to {
        width: 25px;
        left: 14px;
        top: 45px;
    }
;
}

@-webkit-keyframes animateSuccessLong {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0;
        top: 35px;
    }

    to {
        width: 47px;
        right: 8px;
        top: 38px;
    }
;
}

@keyframes animateSuccessLong {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0;
        top: 35px;
    }

    to {
        width: 47px;
        right: 8px;
        top: 38px;
    }
;
}

.swal-icon--info {
    border-color: #c9dae1;
}

.swal-icon--info:before {
    width: 5px;
    height: 29px;
    bottom: 17px;
    border-radius: 2px;
    margin-left: -2px;
}

.swal-icon--info:after,.swal-icon--info:before {
    content: "";
    position: absolute;
    left: 50%;
    background-color: #c9dae1;
}

.swal-icon--info:after {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: -3px;
    top: 19px;
}

.swal-icon {
    width: 80px;
    height: 80px;
    border-width: 4px;
    border-style: solid;
    border-radius: 50%;
    padding: 0;
    position: relative;
    box-sizing: content-box;
    margin: 20px auto;
}

.swal-icon:first-child {
    margin-top: 32px;
}

.swal-icon--custom {
    width: auto;
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
}

.swal-icon img {
    max-width: 100%;
    max-height: 100%;
}

.swal-title {
    color: rgba(0,0,0,.65);
    font-weight: 600;
    text-transform: none;
    position: relative;
    display: block;
    padding: 13px 16px;
    font-size: 27px;
    line-height: normal;
    text-align: center;
    margin-bottom: 0;
}

.swal-title:first-child {
    margin-top: 26px;
}

.swal-title:not(:first-child) {
    padding-bottom: 0;
}

.swal-title:not(:last-child) {
    margin-bottom: 13px;
}

.swal-text {
    font-size: 18px;
    position: relative;
    float: none;
    line-height: normal;
    vertical-align: top;
    text-align: left;
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    font-weight: 400;
    color: #dfdfd;
    font-weight: bold;
    max-width: calc(100% - 20px);
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.swal-text:first-child {
    margin-top: 45px;
}

.swal-text:last-child {
    margin-bottom: 45px;
}

.swal-footer {
    text-align: right;
    padding-top: 13px;
    margin-top: 13px;
    padding: 13px 16px;
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.swal-button-container {
    margin: 5px;
    display: inline-block;
    position: relative;
}

.swal-button {
    background-color: #2980b9;
    color: #fff;
    border: none;
    width: 80px;
    box-shadow: none;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
    font-size: 15px;
    padding: 15px 25px;
    margin: 0;
    cursor: pointer;
}

.swal-button[not:disabled]:hover {
    background-color: #78cbf2;
}

.swal-button:active {
    background-color: #70bce0;
}

.swal-button:focus {
    outline: none;
    box-shadow: 0 0 0 1px #fff,0 0 0 3px rgba(43,114,165,.29);
}

.swal-button[disabled] {
    opacity: .5;
    cursor: default;
}

.swal-button::-moz-focus-inner {
    border: 0;
}

.swal-button--cancel {
    color: #555;
    background-color: #efefef;
}

.swal-button--cancel[not:disabled]:hover {
    background-color: #e8e8e8;
}

.swal-button--cancel:active {
    background-color: #d7d7d7;
}

.swal-button--cancel:focus {
    box-shadow: 0 0 0 1px #fff,0 0 0 3px rgba(116,136,150,.29);
}

.swal-button--danger {
    background-color: #e64942;
}

.swal-button--danger[not:disabled]:hover {
    background-color: #df4740;
}

.swal-button--danger:active {
    background-color: #cf423b;
}

.swal-button--danger:focus {
    box-shadow: 0 0 0 1px #fff,0 0 0 3px rgba(165,43,43,.29);
}

.swal-content {
    padding: 0 20px;
    margin-top: 20px;
    font-size: medium;
}

.swal-content:last-child {
    margin-bottom: 20px;
}

.swal-content__input,.swal-content__textarea {
    -webkit-appearance: none;
    background-color: #fff;
    border: none;
    font-size: 14px;
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid rgba(0,0,0,.14);
    padding: 10px 13px;
    border-radius: 2px;
    transition: border-color .2s;
}

.swal-content__input:focus,.swal-content__textarea:focus {
    outline: none;
    border-color: #6db8ff;
}

.swal-content__textarea {
    resize: vertical;
}

.swal-button--loading {
    color: transparent;
}

.swal-button--loading~.swal-button__loader {
    opacity: 1;
}

.swal-button__loader {
    position: absolute;
    height: auto;
    width: 43px;
    z-index: 2;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
}

.swal-button__loader div {
    display: inline-block;
    float: none;
    vertical-align: baseline;
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    margin: 2px;
    opacity: .4;
    border-radius: 7px;
    background-color: hsla(0,0%,100%,.9);
    transition: background .2s;
    -webkit-animation: swal-loading-anim 1s infinite;
    animation: swal-loading-anim 1s infinite;
}

.swal-button__loader div:nth-child(3n+2) {
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

.swal-button__loader div:nth-child(3n+3) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

@-webkit-keyframes swal-loading-anim {
    0% {
        opacity: .4;
    }

    20% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: .4;
    }
;
}

@keyframes swal-loading-anim {
    0% {
        opacity: .4;
    }

    20% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: .4;
    }
;
}

.swal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0;
    overflow-y: auto;
    background-color: rgba(0,0,0,.4);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}

.swal-overlay:before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.swal-overlay--show-modal {
    opacity: 1;
    pointer-events: auto;
}

.swal-overlay--show-modal .swal-modal {
    border-radius: 8px;
    opacity: 1;
    pointer-events: auto;
    box-sizing: border-box;
    -webkit-animation: showSweetAlert .3s;
    animation: showSweetAlert .3s;
    will-change: transform;
}

.swal-modal {
    width: 478px;
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    text-align: center;
    border-radius: 5px;
    position: static;
    margin: 20px auto;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    z-index: 10001;
    transition: opacity .2s,-webkit-transform .3s;
    transition: transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s,-webkit-transform .3s;
}

@media (max-width:500px) {
    .swal-modal {
        width: calc(100% - 20px);
    }
;
}

@-webkit-keyframes showSweetAlert {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    1% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }

    45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    80% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
;
}

@keyframes showSweetAlert {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    1% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }

    45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    80% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }    
</style>

<br />
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">Ads Converter</strong>
</h1>
</div>
        
<div id="belakang">        
        <form name="adsconverter">
<textarea id="codes" placeholder="Paste your code HTML, JS here..." spellcheck="false"></textarea>
<div class="belakang-memilih">           
<form action="">
<fieldset>
<legend>SELECTED</legend>
<ul id="wrapin">
<li>
<input checked="checked" type="checkbox" id="opt1" class="opt1 form-check">
<label for="opt1">MENGUBAH KODE ( &amp; )</label>
 </li>
    <li>
<input type="checkbox" checked="checked" id="opt2" class="opt2 form-check">
<label for="opt2">MENGUBAH KODE ( ' )</label>
 </li>
    <li>
<input type="checkbox" id="opt3" class="opt3 form-check">
<label for="opt3">MENGUBAH KODE ( " )</label>
  </li> 
    <li>
<input checked="checked" type="checkbox" id="opt4" class="opt4 form-check">
 <label for="opt4">MENGUBAH KODE ( &lt; )</label>
     </li>
    <li>
<input checked="checked" type="checkbox" id="opt5" class="opt5 form-check">
 <label for="opt5">MENGUBAH KODE ( &gt; )</label>
        </li>
</ul>
    </fieldset>
    </form>        
 </div>              
            
<div class="belakang-memilih-2">
<div class="button-group">
<button id="cvrt" onclick="cdConvert();">CONVERTER</button>
<button onclick="cdClear();">RESET</button>
<button onclick="copyToClipboard();">COPY TO CLIPBOARD</button>
</div>
</div>

            </form>
</div>
</div>
    
    
 <script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
    if(adsconverter.codes.value == ""){
        swal({
  text: "NO CODE IN TEXT AREA",
  icon: "warning",
});  
        return false;
    }else{
        return ctarea;

    }
};
</script>
<script type="text/javascript">
function copyToClipboard() {
  $("#codes").select();
  document.execCommand("copy");
    
if(adsconverter.codes.value == ""){
           swal({
  text: "NO CODE IN TEXT AREA",
  icon: "warning",
});  
}else{
       swal({
  text: "YOUR CODE HAS BEEN SUCCESSFULLY COPIED!",
  icon: "success",
});  
}

}
</script>
    </body>
    
    
</html>
4. Save dan publikasikan halaman tersebut
DEMO PARSE HTML
Labels: Blog
Erwin Abs

Friday, February 1, 2019

Cara Membuat Halaman Parse HTML Di Blogger

Cara Membuat Halaman Parse HTML Di Blogger

0 Comments:

Post a Comment

About Me

Previous Posts
