Home » Praktek » Praktek Penerapan Kotak seleksi Kode Script HTML/CCS/Javascript di Dalam Posting Blog

Kali ini admin DGP akan memberikan praktek penerapan kotak seleksi kode Script HTML/CCS/Javascript di Dalam Posting Blog.

Artikel-artikel yang biasanya kita temui biasa adalah artikel tutorial yang menyajikan script sebagai tutorial, tujuannya bukan hanya untuk menambah kerapian postingan artikel tetapi juga sangan memudahkan pembaca untuk mencopy paste script tersebut supaya mudah dipraktekkan saat ingin diterapkan oleh pengunjung.

Bagi para blogger atau mereka yang sudah terbiasa mendesain blog/webs tentu hal ini bukanlah hal yang baru dan luar biasa karna sudah familiar dengan tampilan tutorial yang seperti ini, namun bagi para pemula hal ini bukanlah sesuatu yang mudah, oleh karena itu postingan ini khusus dedikasikan hanya untuk blogger pemula yang ingin belajar oleh admin DGP.

Untuk lebih jelasnya berikut sedikit gambaran dari praktik ini:

Atau liahat demonya di SINI
Untuk penerapannya mari kita mulai dengan masuk ke blog anda pilih Template kemudian Edid HTML lihat gambar berikut:

Selanjutnya cari kode ]]></b:skin> atau </style> jika sudah ketemu sisipkan CCS berikut sebelum ]]></b:skin> atau </style> lihat gambar berikut :

Sebelum ]]></b:skin> atau di atasnya sudah saya kasi kotak, nantinya disitulah posisi CCS berikut disisipkan ;

/* CSS Simple div dgp */
div {
    background: #fff;
    white-space: div;
    word-wrap: break-word;
    overflow: auto;
}

div.dgp {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

div.dgp label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

div.dgp dgp {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

div::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

div:hover::after {
    opacity: 0;
    visibility: visible;
}

div.dgp-css dgp {
    color: #0288d1;
}

div.dgp-html dgp {
    color: #558b2f;
}

div.dgp-javascript dgp {
    color: #f57c00;
}

div.dgp-jquery dgp {
    color: #78909c;
}

Selanjutnya, sisipkan kode script berikut sebelum atau di atas body </body>

Setelah langkah di atas selesai save template anda, kemudia cobalah membuat suatu postingan seperti biasanya pada mode Compose, namun ketika anda ingin memasukkan sebuah CCS/JS pilih mode HTML, lihat gambar berikut :

Paste kode berikut pada mode HTML seperti pada gambar di atas:

Saat postingannya selesai pratinjau dan lihat hasilnya, selesai.

dg patang 2:10 PM DGPatang Takalar, Indonesia

Praktek Penerapan Kotak seleksi Kode Script HTML/CCS/Javascript di Dalam Posting Blog