System UI Dark For Samsung J1 (J100H)

Pada kesempatan kali ini, admin bakalan share mengenai system ui dark untuk device samsung j1 (J100H). System ui dark ini merupakan system ui buatan mas hendri yang mana pemasangannya dapat melalui root explorer.

Tampilan :

Download System UI Dark For Samsung J1 (J100H)

Cara Pemasangan System UI Dark

One System UI For Samsung J1 (J100H) By Wawan

One System Ui merupakan system ui buatan mas wawan yang dilengkapi dengan adanya menu qoutes, info pemilik dan banyak lagi. Berikut tampilan dari One System Ui

Tampilan :

Download One System UI For Samsung J1 (J100H) By Wawan

Cara Pemasangan One System UI

Mengatasi Automatic Repair Terus Menerus Pada Windows 8

Jika anda menggunakan windows 8 atau 8.1, dan di layar anda ada logo windows 8 dan tulisan “preparing automatic repair” dan tidak bisa berhenti, maka ada yang salah dengan windows anda.

Pada kasus yang sama, terkadang pc bis melewati pesan “preparing automatic repair” dan menuju ke pesan “diagnosing your PC” namun setelah windows mendiagnosis PC anda, muncul pesan peringatan berbunyi “Your PC did not start correctly” dan kembali mengalami macet.

Ketika anda melakukan restartpun PC akan mengalami hal yang sama terus menerus, hal ini disebut juga looping. Sebenarnya ada banyak penyebab yang mungkin terjadi..ada banyak cara yang bisa anda tempuh guna menyelesaikan masalah ini. yaitu

• Restart PC Full.

Cara pertama ini adalah dengan mematikan PC anda secara total, untuk mematikan PC, anda bisa menekan tombol power 3 detik, kemudian setelah mati, cabut kabel power, baterai laptop, dan semua kabel yang terhubung dengan PC anda. keluarkan juga kaset CD/DVD jika ada.

Tunggulah beberapa saat, jika sudah, kembali pasang semua yang anda cabut dan nyalakan PC sekali lagi.. jika hal ini tidak berhasil, anda bisa melakukan hal kedua yaitu

• Melakukan Sistem Restore

Untuk melakukanya, restart PC anda, sebelum menampilkan tampilan windows, segera tekan tombol F8 untuk menampilkan “Boot menu” kemudian jalankan “windows safe mode” safe mode sangat bermanfaat untuk membuka windows yang tidak bisa start. Setelah anda masuk ke mode safe mode, anda bisa menjalankan system restore dari PC anda. caranya

1.  Klik setting
2.  Pilih “general”
3. Kemudian pilih opsi advance startup
4. Restart PC anda dan jalankan kembali safe mode
5.  Buka “advanced Option”
6. Pilih “system restore”
7. Kemudian ada tampilan tanggal terahir kali ada back up windows.
8. Pilih salah satu tanggal
9. Klik restore

Jika anda berhasil melakukan langkah ini, Settingan PC dan data anda akan kembali seperti data pada tanggal restore yang anda pilih.

•   Menjalankan Automatic Repair Win 8 

Caranya siapkan flashdisk berisi windows 8 installer atau bisa DVD, booting lah menggunakan media tersebut, jika tidak bisa berjalan anda harus menyetting urutan booting di BIOS. Caranya :

1. Tancapkan flashdisk/DVD ke PC
2. Hidupkan PC dan tekan 8
3. Pada pilihan windows setup, pilih “language to install, Time& Curency format, Keyboard or input method”
4. Setelah itu klik “next”
5. Setelah itu pilih “repair your Computer”
6. Pilih “troubleshoot”
7. Klik pilihan “advanced”
8. Lalu terahir klik “Automatic Repair”

Setelah itu, windows akan secara otomatis memperbaiki sistem windows anda yang rusak dengan mengambil data dari Flashdisk/DVD installer anda. biasanya cara ini adalah cara paling ampuh untuk mengatasi automatic repair terus menerus pada windows 8.
Biasanya cara ini adalah cara yang ampuh untuk memperbaiki automatic repair terus menerus pada windows 8.

• Cara Yang Terahir Adalah “Install Ulang”

Cara ini adalah cara terahir yang bisa anda lakukan, yaitu mengganti windows anda dengan windows yang baru... sebelum menginstall ulang, pastikan anda menyelamatkan data anda yang ada di Disc C: , karena akan hilang setelah instalasi windows selesai. Jika setelah install ulang dan tetap terjadi automatic repair terus menerus pada windows 8, maka kemungkinan ada yang salah dengan hardware anda. anda bisa mengunjuangi reparasi hardware komputer terdekat di tempat anda.

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 

Cara Memasang Font Google Sans Di Blog

Halo teman-teman blogger, pada kesempatan kali ini admin bakalan memberikan tutorial mengenai cara menggunakan font google sans di blog.

Font ini hampir sama persis yang saya terapkan pada blog ini, dan sangat ringan jika digunakan ditambah ringan untuk dibaca.

Cara Memasang Font Google Sans Di Blog

1. Buka menu template, dan klik EDIT HTML

2. Cari kode <style> lalu tempelkan css dibawah ini tepat dibawah kode tersebut. (Gunakan ctrl f untuk memudahkan pencarian)

/* Fonts */
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Nwp5MKg.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Awp5MKg.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt3CwZ-Pw.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtwCwZ-Pw.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt9CwZ-Pw.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtzCwY.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

3. Sekarang panggil font tersebut dengan cara meletakkan atau mengganti font blog dengan kode dibawah ini :

html, input, button{font-family:Google Sans, sans-serif}

Catatan : Banyaknya varian font pada blog akan berdampak buruk pada kecepatan blog