Cara Membuat kotak script dengan menampilkan notif saat diklik

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

<script> //<![CDATA[ var mymonths=['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'];var myDays=['Minggu','Senin','Selasa','Rabu','Kamis','Jum&#39;at','Sabtu'];var date=new Date();var day=date.getDate();var month=date.getMonth();var thisDay=date.getDay(),thisDay=myDays[thisDay];var yy=date.getYear();var year=(yy<1000)?yy+1900:yy;document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year) //]]> </script>

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