Cara Pasang Cookie Control To Visitor (CCTV) Pada Halaman Blog


Widget Blog Cookie Control To Visitor (CCTV) adalah widget untuk mengawasi pengunjung blog sekaligus memberikan peringatan terhadap penggunaan cookie pada halaman blog. Widget ini menampilkan gambar animasi kamera CCTV yang ciamik dan dinamis, dilengkapi dengan informasi IP-Tracker apabila gambar kamera di-klik oleh pengunjung.

Masih widget stok lama dengan beberapa modifikasi dan tweaking agar lebih uptodate dan memiliki fungsi yang bermanfaat apabila di pasang pada web / blog. Beberapa modifikasi antara lain menampilkan pesan warning seperti layaknya cookie consent, penggunaan mirroring untuk mempermudah penyesuaian gambar animasi CCTV, menampilkan iFrame IP-Tracker dan beberapa modifikasi lainnya. Contoh penggunaan widget CCTV ini bisa dilihat pada halaman artikel ini, gambar animasi CCTV terpasang berada di pojok atas kiri layar.

Fungsi lain dari widget CCTV ini adalah untuk membuat tampilan halaman blog memiliki visual tampilan yang unik dan dinamis, dimana pengunjung blog dapat sedikit melakukan interaksi dengan widget CCTV ini. Oh by the way... widget ini bukan seperti dalam artian secara harfiah makna dari kata CCTV (closed-circuit television) yaa, widget ini hanya untuk sekedar hiburan dengan gambar animasi CCTV yang menampilkan informasi penggunaan cookie dengan cara yang unik.

Oke, buat yang tertarik untuk memasang widget CCTV ini pada halaman web atau halaman blog anda, silakan disimak tutorial pemasangannya. Jangan lupa untuk yang belum subscribe silakan di subscribe dulu dan bantu share halaman blog ini sekiranya informasi yang diberikan bisa memberikan informasi yang berguna dan bermanfaat.

Informasi Singkat
Jika widget CCTV hanya sekedar hiburan semata, maka CCTV dalam artian sesungguhnya adalah Televisi sirkuit tertutup (bahasa Inggris: Closed Circuit Television (CCTV) yang berarti menggunakan sinyal yang bersifat tertutup, tidak seperti televisi biasa yang merupakan sinyal siaran.

Pada umumnya CCTV digunakan sebagai pelengkap keamanan dan banyak dipakai di dalam industri-industri seperti militer, bandara, toko, kantor, pabrik dan bahkan sekarang perumahan pun telah banyak yang menggunakan teknologi ini.

CCTV sebagai satu kesatuan system mepunyai beberapa perlengkapan yaitu:

Kamera
Kamera CCTV ini berfungsi sebagai alat pengambil gambar, ada beberapa tipe kamera yang membedakan dari segi kualitas, penggunaan dan fungsinya 2 hal yang paling utama adalah, camera CCTV analog dan Camera CCTV Network dimana kamera analog menggunakan satu solid cable untuk setiap kamera yang berarti, setiap kamera akan harus terhubung ke DVR atau system secara langsung sedangkan Camera Network atau yang biasa di sebut IP Kamera, bisa menggunakan jejaring yang berarti akan menghemat dari segi installasi karena network bersifat pararel dan bercabang tidak memerlukan satu kabel khusus untuk tiap kamera dalam pengaksesannya.

DVR (Digital Video Recorder)
DVR ini adalah system yang digunakan oleh kamera CCTV untuk merekam semua gambar yang di kirim oleh kamera dalam sistem ini banyak fitur yang bisa kita manfaatkan untuk pelengkap keamanan, salah satunya adalah merekam semua kejadian dan hasil rekaman ini yang biasa digunakan di dalam peradilan untuk membuktikan suatu kejadian dalam sebuah sistem kamera, jumlah dan kualitas rekaman akan ditentukan oleh DVR ini.
Sumber : Wikipedia



DAFTAR ISI
  1. Cara Pemasangan Widget Pada Blogger
  2. Pilihan Gambar Animasi CCTV
  3. Modifikasi Kode Script dan Kode CSS
#1 Cara Pemasangan Widget Pada Blogger


PERINGATAN
Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

  • Silakan login dahulu ke blog Anda.

  • Klik tombol Tema untuk masuk ke tema editor.


  • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


  • Geser scrollbar ke posisi paling bawah.


  • Letakan kode dibawah ini tepat diatas kode </body>.


    <script>
    if(typeof(jQuery) == 'undefined'){
    document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
    </script>
    <script>
    var cctvCam = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFyGga7gJZuRzaoN7x-Uc2MHHMjNQ_2fwW90EWoGEqibgRZLV-kTiDgpuMVgOnCnIBA4JLbq64mwl41WFuHgiKPx43vL2l-mdbTV9IveyLAIwYTxrwHza86pZoEKNrgCPSrC1H6M-8-sG/s1600/cctv1.gif";
    var cctvCamView = "left";
    var cctvCamMirror= true;
    var infoCCTVImg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0LEqrGRCDsBUmCbRMQLccR_ShFXsKYWXvTxQasQhh7p4f6sMGtqfhDCZ4YZ_SPgNDTkbKwJV34yNqGlH-f7BAz9SsP8_l76eD4ict_B3wVq-_ci3dL6xG2Da4NNe2Uxs9Iq8GvkpZEXtK/s1600/cctv-consent.jpg";
    var infoCCTVConsent=true;
    </script>
    <script>
    var cctvCMS=false;
    var cctvElm="";
    cctvElm+='<style>#CCTVConsent{position:fixed;bottom:-300px;border:1px solid #ccc;border-radius:4px;}.borderCCTV {z-index:99991;top:115px;'+cctvCamView+':-300px;position:fixed;width:280px;height:auto;padding:5px 5px 0px 5px;overflow:hidden;box-shadow: 0px 0px 2px #000;border-radius:4px;background-color:#619bb9;background:-moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background:-webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));}.titleCCTV {text-shadow: 1px 1px 2px #000;background-color:gold; border-radius: 4px; border-bottom:#000 solid 2px; padding: 2px; text-align:center; margin-bottom:4px;color:#000;}.footerCCTV {padding-bottom:5px;text-align:center;}.inlineCCTV {border-bottom:#000 solid 2px; background-color:white;border-radius: 4px; padding: 2px;}.inlineCCTV iframe{box-sizing:border-box;overflow-x:hidden;width:100%;height:190px;}</style>';
    cctvElm+='<div id="cctv" style="cursor:pointer;position:fixed;top:0;z-index:9999;'+cctvCamView+':0;" onclick="showCCTV();"><img src="'+cctvCam+'" border="0"/></div><div id="cctvScreen" class="borderCCTV"><div class="titleCCTV">CCTV Security System v1.00</div><div id="dataCCTV" class="inlineCCTV"><iframe src="https://www.iptrackeronline.com/locate-ip-on-map.php?lang=1" marginheight="0" marginwidth="0" frameborder="0" name="iptrackeronline_gadget"></iframe></div><div class="footerCCTV"></div></div><div id="CCTVConsent"><img border="0" src="'+infoCCTVImg+'"/></div>';
    $("body").append(cctvElm);
    $(".footerCCTV").html('<img border="0" src="https://banners.copyscape.com/images/cs-bk-3d-234x16.gif"/>');
    if(cctvCamMirror==true){$('#cctv img').css('transform','scaleX(-1)');}
    function showCCTV(){
    if(cctvCMS==true){hideCCTV();return;}
    if (cctvCamView == "right"){
    $('#cctvScreen').animate({right:'10px'},{duration:500,specialEasing: {all: "linear"}});cctvCMS=true;
    }else{
    $('#cctvScreen').animate({left:'10px'},{duration:500,specialEasing: {all: "linear"}});cctvCMS=true;
    }}
    function hideCCTV(){
    if (cctvCamView == "right"){
    $('#cctvScreen').animate({right:'-310px'},{duration:500,specialEasing: {all: "linear"}});cctvCMS=false;
    }else{
    $('#cctvScreen').animate({left:'-310px'},{duration:500,specialEasing: {all: "linear"}});cctvCMS=false;
    }}
    var infoCCTVImgW,infoCCTVImgH;
    var infoCCTVImgFile=new Image();
    infoCCTVImgFile.src=infoCCTVImg;
    infoCCTVImgFile.onload=function(){
    infoCCTVImgW=this.width;
    infoCCTVImgH=this.height;
    $("#CCTVConsent").css({"left":"calc(50% - "+(infoCCTVImgW/2)+"px)"});
    }
    function showCCTVConsent(){
    $('#CCTVConsent').animate({bottom:'0px'},{duration:500,specialEasing: {all: "linear"}});
    var remCCTV=setTimeout(function(){
    $('#CCTVConsent').animate({bottom:'-300px'},{duration:500,specialEasing: {all: "linear"}});
    },5000);
    }
    /* Start Cookie Code */
    function setCookieCCTV(cname,cvalue,exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      var expires = "expires=" + d.toGMTString();
      document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }
    function getCookieCCTV(cname) {
      var name = cname + "=";
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
          c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    }
    function checkCookieCCTV() {
    var data = getCookieCCTV("CCTV");
    if (data == ""){setCookieCCTV("CCTV", "version CF 1.00", 1);
    if(infoCCTVConsent==true){showCCTVConsent();}
    }}
    checkCookieCCTV();
    /* End Cookie Code */
    </script>

    KETERANGAN
    Pada kode :

    var cctvCam = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pbPX_9aRUUy9w_w1ojGinDew9y7Hw_dd8PmciQeRis4LlVWk1DIMscHVNqikDboasdX0w2hw2-nh3hF6R6Kbmh3UCedc7Exwj6xT_FB0jlMVAFOxO3W1gyUbGfmXc-II9YzmaJnFpD4/s1600/cctv1.gif";
    Merupakan variabel untuk URL Gambar animasi CCTV.

    var cctvCamView = "left";
    Merupakan variabel untuk letak dari tampilan gambar CCTV. Terdapat dua posisi pengaturan letak, yaitu : posisi "left" dan posisi "right".

    var cctvCamMirror= true;
    Merupakan variabel untuk melakukan efek mirroring, jadi misalkan gambar animasi CCTV yang akan dipasang memiliki arah ke kanan sedangkan posisi tampilan ingin di taruh ke arah sebaliknya, agar gambar animasi yang akan dipasang dapat menyesuaikan arah tanpa perlu repot-repot menggunakan editor gambar. Jika gambar tidak ingin di mirror maka pada varibel ini silakan diganti dari true menjadi false.

    var infoCCTVImg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0LEqrGRCDsBUmCbRMQLccR_ShFXsKYWXvTxQasQhh7p4f6sMGtqfhDCZ4YZ_SPgNDTkbKwJV34yNqGlH-f7BAz9SsP8_l76eD4ict_B3wVq-_ci3dL6xG2Da4NNe2Uxs9Iq8GvkpZEXtK/s1600/cctv-consent.jpg";
    Merupakan variabel untuk URL gambar notifikasi warning, notifikasi akan terlihat apabila pengunjung baru pertama kali mengunjungi blog anda. Notifikasi mirip seperti notifikasi cookie consent.

    var infoCCTVConsent=true;
    Merupakan variabel apakah notifikasi warning mau ditampilkan atau tidak. Jika notifikasi warning tidak ingin ditampilkan silakan anda rubah dari true menjadi false.

#2 Pilihan Gambar Animasi CCTV


Selain gambar animasi CCTV yang digunakan pada contoh widget CCTV ini, anda bisa menggunakan gambar animasi pilihan anda sendiri atau menggunakan beberapa pilihan gambar animasi CCTV berikut ini.

  • Gambar Animasi CCTV 1



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFyGga7gJZuRzaoN7x-Uc2MHHMjNQ_2fwW90EWoGEqibgRZLV-kTiDgpuMVgOnCnIBA4JLbq64mwl41WFuHgiKPx43vL2l-mdbTV9IveyLAIwYTxrwHza86pZoEKNrgCPSrC1H6M-8-sG/s1600/cctv1.gif

  • Gambar Animasi CCTV 2



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHyL2jqI690WpPKfWTueBDLzoKUG0jaL_IZJW1MIZ6oH0E45ifCY-2AfsDK2vycGMrAcTyWdS7Wl52UAHYb2DcIj9IvBm6sTJ_iIhw1Sv-b5IPD0ghdzyIXny9zFW7Ww9WBRzrxNqKDbUI/s1600/cctv2.gif

  • Gambar Animasi CCTV 3



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY7oxDYW9I8uRJ8IPfJVz_jkp6lXcdvwJMqXmXHBreKVQfdkEQeKKlTi1BCaOwczYu8HTc7q5NiM9HdTHLp2a1XBXQuGMdbAyzn4nDLLW3ucuEh5I08qzgqOK2eStRlU4XqvaTMoze_xhA/s1600/cctv3.gif

  • Gambar Animasi CCTV 4



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUsKlUrVBxFTFVhjZFyls4apZ0sT71pf6cw3z8wqOPflfqna-vfCBgnIhdQhiA1PFTBL-DYMXNtvU15s1psfKDMqSC95Q7DMkOpVAsu3FxB4rnKSDknK01OUI3S81KiJUbK8kcurvo_Wg/s128/cctv4.gif

  • Gambar Animasi CCTV 5



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz9Y4LuX0TdF0ORva_Ckac4DxKgAw7IPo_Hp4UIWoVQ_x7PUv_CWxxXGYpcXomw8tism5IhzF4WCFZeOy20MwRpPQJcsZ5VX9raNOUO9MLfIJzGJydb6QHJK_SxXe97XvJOJ8jaxn-BWk/s128/cctv5.gif

Cara Pemasangan gambar animasi CCTV diatas adalah dengan memasukan URL gambar animasi tersebut ke dalam variabel var cctvCam. Contoh apabila anda ingin menggunakan gambar animasi CCTV 2 maka penulisan variabel pada kode diatas menjadi :

var cctvCam = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHyL2jqI690WpPKfWTueBDLzoKUG0jaL_IZJW1MIZ6oH0E45ifCY-2AfsDK2vycGMrAcTyWdS7Wl52UAHYb2DcIj9IvBm6sTJ_iIhw1Sv-b5IPD0ghdzyIXny9zFW7Ww9WBRzrxNqKDbUI/s1600/cctv2.gif";

#3 Modifikasi Kode Script dan Kode CSS


Widget CCTV ini sebenarnya terdiri dari 3 bagian kode, yaitu kode HTML, kode CSS dan kode Javascript itu sendiri, namun untuk mempermudah pemasangan widget kedua kode tersebut (HTML dan CSS Style) digabung menjadi satu kode Javascript. Bagi anda yang ingin memodifikasi tampilan box dari IP-Tracker atau mengganti IP-Tracker dengan elemen lain, berikut cara memodifikasi script tersebut.


Demikian artikel tentang Cara Pasang Cookie Control To Visitor (CCTV) Pada Halaman Blog apabila ada pertanyaan, kritik maupun saran silakan anda ketikan di kotak komentar yang ada di bawah ini. Jangan lupa untuk subscribe halaman blog ini agar anda bisa langsung mendapatkan notifikasi apabila ada informasi terbaru seputar blogging. Akhir kata semoga bisa bermanfaat.

Keyword


Blog, Blogger, Blogspot, Widget, Extended, CCTV, Cookie, Consent, Unique, Unik, Menarik, Cara, Kumpulan, Memasang, Pemasangan, Terlengkap, Tutorial, Code, Kode, CSS, HTML, JavaScript, JQuery, Animate, Animated, Animation, GIF, Custom, Modifikasi, Tweaking, Tampilan, Halaman, Membuat, Tips, Trick, Hiburan

Incoming Search Term


Extended Widget Blogger, Custom Blog Widget, Widget Dekorasi Blog, Tutorial Pasang Widget Blogspot, Menghias Blog Dengan Widget Unik dan Menarik, Menambah daya tarik blog dengan memasang widget, Kumpulan terlengkap widget blog yang bermanfaat, Widget Blogger Update Terbaru
edit Tags: Widget

Related Cara Pasang Cookie Control To Visitor (CCTV) Pada Halaman Blog:

LihatTutupKomentar