Hello sobat iclouzer kali ini admin bakalan membagikan informasi seputar box script atau kotak script lagi nih untuk mau Semuanya, yang kepengen kotak script dengan nuansa dan tampilan yang sedikit berbeda dari biasanya
Admin kali ini khusus membahas bagaiamana caranya membuat kotak script diblogger dengan menggunakan Credits label dipojok kanan atasnya, ok
Info: Bagi kamu yang sudah penasaran dengan tampilan kotak scriptnya, yuk let's go.... Kita bahas bersama
Credit Label Kode
Kotak script ini nantinya akan menampilkan Credit label dari kode yang akan tampilkan, maksudnya? Ketika anda menampilkan kode CSS didalam kotak script maka Credit label CSS akan muncul dipojok kanan atas dari kotak scriptnya
Muncul notif saat diklik
Nah kotak script yang satu ini juga memiliki fitur untuk menampilkan notif saat pengguna mengklik kode didalam script box, ketika Text didalam kode diklik maka, kota script akan menampilkan sebuah notif di pojok kanan atas
Contoh Tampilan
Biar tidak penasaran admin akan memberikan contoh tampilan dari kotak script dengan Text Credit label kode didalamnya
Info: Bagaimana sobat keren bukan, udah diklik kodenya... 😁
Cara Pembuatan
Baiklah tanpa berlama lama lagi, saya akan menjelaskan bagaiaman sih caranya membuat kota script seperti contoh yang sudah saya sedikan diatas itu Lo
Kode CSS
Yang pertama yang bisa kamu lakukan untuk membuat kotak script dengan disertai label kode dan juga notif didalamnya adalah menyalin kode CSS dibawah ini kemudian letakkan diatas kode ]]></b:skin>, berikut Ini adalah kodenya
pre{position:relative;font-family:'Fira Mono', monospace;line-height:1.6em;font-size:.8rem}pre:before{content:'</>';position:absolute;right:0;top:0;color:red;font-size:10px;padding:0 10px;z-index:2;line-height:35px}pre.html:before{content:'.html'}pre.css:before{content:'.css'}pre.js:before{content:'.js'}code{display:block;white-space:pre;font-size:.8rem;position:relative;width:100%;border-radius:2px;background-color:white;color:red;padding:20px;margin:25px auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto;font-family:'Fira Mono', monospace;line-height:1.6em}pre:after{content:'Created by icloudice.com';position:absolute;right:0;top:0;color:red;font-size:10px;padding:0 10px;z-index:2;line-height:35px;opacity:0}pre:hover:after{opacity:1}.post pre:hover:before{opacity:0}Cara Penggunaan
Untuk memunnculkan kotak script nya, kamu bisa mengunakan tag pre code seperti biasanya, sebagai contoh dibawah ini
<pre><code><!-- letakkan kodenya disini --></pre></code>Label kode
Kemudian Cara untuk menampilkan label kode di pojok kanan atas box, kamu bisa menambahakan class css untuk kode CSS, js untuk kode javascript, html untuk kode HTML sebagai contoh kamu bisa melihatnya seperti contoh dibawah ini
<pre class='css'><code>>!-- Letakkan kode CSS nya disini --></pre></code>Info: Untuk contoh demo kotak scriptnya kamu bisa melihatnya pada Contoh tampilan diatas, ok