Cara Pasang Widget CCTV Blog Super Keren

---

Widget Blog Cookie Control To Visitor (CCTV) adalah widget untuk mengawasi pengunjung melalui cookie halaman blog sekaligus memberikan peringatan terhadap pengunjung blog yang memiliki niat jahat untuk mencuri (copas: copy-paste) konten artikel blog. Widget ini menampilkan gambar animasi kamera CCTV yang ciamik dan dinamis, dilengkapi dengan informasi IP-Tracker apabila gambar kamera di-klik oleh pengunjung. Simak cara membuat beserta pemasangan widget kamera CCTV di blog terbaru dengan fitur premium.

Widget CCTV blogger ala CodeFlare Blogspot Com sudah dimodifikasi dan tweaking agar memiliki tampilan yang uptodate (terbaru) dan memiliki fungsi lebih 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 monitor.

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 dengan fitur menampilkan informasi IP adress pengunjung dengan cara yang unik. Widget CCTV ini sangat ringan sehingga tidak akan mempengaruhi waktu tampilan loading blog.

Kelebihan Pengunaan Widget CCTV CodeFlare Pada Blog

1. Mampu meminimalisir pencurian artikel blog.
2. Menggunakan IP Tracker dan banner Copyscape.
3. Mimiliki tampilan peringatan awal berdasarkan data kunjungan.
4. Memiliki tampilan atraktif dan dinamis.
5. Tersedia dalam 5 pilihan gambar animasi CCTV.

Widget CCTV ini sangat cocok bagi anda yang memiliki blog dengan niche (topik bahasan) dalam bidang teknologi, sepeti Software, Aplikasi, Gadget, Komputer, Gaming dan lain sebagainya, pasti akan terlihat keren dan menarik. Tampilan dari widget CCTV ini tersedia dalam beberapa varian gambar animasi CCTV yang bisa anda pilih.

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.

Cara untuk bisa menampilkan widget CCTV di blog anda bisa menggunakan cara dengan menaruh script pada template blog atau bisa juga dengan memasangannya pada kotak gadget/widget blog. Apabila anda ingin memasangnya pada kotak widget blog maka silakan anda menekan tombol Add to Blogger yang ada di bawah untuk mempermudah dan mempercepat proses pemasangan ke dalam widget blog.

• 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/AVvXsEj4ihJta4qzyW-aKF5xwdQ_wHaK2BachXDVkClQMqRfq2D4o60gO5GZ65yqu0ET9o0mSWLaxG7sALTOmXY88bES9AqvWDpK1ya_YBUVmENovD7r8KfpdFTgM6QihOgAzlv_m4lQGHY9qUI/s1600/cctv1.gif";
  var cctvCamView = "left";
  var cctvCamMirror= true;
  var infoCCTVImg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZweRTP_J1bdYildoQukTK9hMpdBVBeh7TXKEJeX-iV5tpASSmRiQ2j_D_XPn3iOd-S9FtkUqo3wgm2T5xfb3m78jipV0s0QsqLwTexrKMUPJ9QqlfUeWJ3qOx1-UbUmOSeAbIOaY0jc/s1600/cctv-consent.jpg";
  var infoCCTVConsent=true;
  </script>
  <script>
  //<![CDATA[
  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>
  script code here...
  
  
  KETERANGAN
  Pada kode :
  
  var cctvCam = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilKNzUYXeUHIR5xkNetlyKrfnPwUS7KXGBMhjX46YA-4UtyuNbj38NSBDo2rknmT81KYPfE9ucSsuIIPUIl1Y2zE-S44P6KKaDGjwa8J-WDbH77v3epmEUwpCH996MAwgLH85tRqtCZQ/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/AVvXsEitZweRTP_J1bdYildoQukTK9hMpdBVBeh7TXKEJeX-iV5tpASSmRiQ2j_D_XPn3iOd-S9FtkUqo3wgm2T5xfb3m78jipV0s0QsqLwTexrKMUPJ9QqlfUeWJ3qOx1-UbUmOSeAbIOaY0jc/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/AVvXsEj4ihJta4qzyW-aKF5xwdQ_wHaK2BachXDVkClQMqRfq2D4o60gO5GZ65yqu0ET9o0mSWLaxG7sALTOmXY88bES9AqvWDpK1ya_YBUVmENovD7r8KfpdFTgM6QihOgAzlv_m4lQGHY9qUI/s1600/cctv1.gif


• Gambar Animasi CCTV 2
  
  
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheihdVqOi6UKJEaM7G5709e7IGYe4dGYKn-fgBGZ_oSkhxepiI3oGPd5_Ee2X9RCkGajX0Ed5k-JqA79-MpMe68_DOpS08lKJiQd0Wzd9tlSagPZ8uMOLjcc1gh94CnVbjWTTvtolTftE/s1600/cctv2.gif


• Gambar Animasi CCTV 3
  
  
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2KlWarW0w_qEwmh4UpboY0pUpibaSIYi9g27rzIlR8S-UYN4a-gDXbsYVOkzrAIN-4H83OdJxfMrNvnWXZ-3OeQwJuR7rXoWn4KSSilITHYYKtgknhhyeZL73-N3Cb8tU1v5zKD4LN1Q/s1600/cctv3.gif


• Gambar Animasi CCTV 4
  
  
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZTblHJyJJK5lydDd-MmkNBP-Yo8pycWsIyDQjbMScRGcpZX9c4irwNQb1mygPmdt1ZyhhNKhaDykeoPq3prC8ZWr_1B2jBajUsWJhE9yBso7IM9PzP_eAXRAxIcgo74casaR1dsTd_w/s128/cctv4.gif


• Gambar Animasi CCTV 5
  
  
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKHkxW6M1k0Cfc_fX8NRzot_gsZ8KF91Wi6I5DbWufAh7TkgazkpClBwBbUK-S4R98Q82qpRpOnaOWOLFnS88K6U9ASPcD0X9ONUP_9qPARqzZibmTC7cfn7fss_FTSAXVg9GxBrId5w/s128/cctv5.gif


• Gambar Animasi CCTV 6
  
  
  
  
  https://blogger.googleusercontent.com/img/a/AVvXsEiwOESFfHFKm-F6cTe2G_IW-D-_XjpLrkv3NG9JbV7XhYdlXCC3oB47Kz9A2avNT3RA3xVjUzFCwY89Vh90O3paHQjgV5cmBiQLFHkSOToeKrGC_SYdOQjrUf7dyW8HJoAX8bTlFKYUYCwhjpktfptAmz_hgEiqELb3gyPQIo4uH09_1xgWO9r0FVA

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/AVvXsEheihdVqOi6UKJEaM7G5709e7IGYe4dGYKn-fgBGZ_oSkhxepiI3oGPd5_Ee2X9RCkGajX0Ed5k-JqA79-MpMe68_DOpS08lKJiQd0Wzd9tlSagPZ8uMOLjcc1gh94CnVbjWTTvtolTftE/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.

Kode elemen untuk IP-Tracker terletak pada elemen iFrame, seperti yang terlihat pada penggalan kode berikut ini:
...
<iframe src="https://www.iptrackeronline.com/locate-ip-on-map.php?lang=1" marginheight="0" marginwidth="0" frameborder="0" name="iptrackeronline_gadget"></iframe>
...

Jika anda ingin mengganti IP-Tracker misalkan dengan Live Feed Traffic maka anda tinggal mengganti kode Iframe dari IP-Tracker tersebut dengan kode Live Traffic Feed.

Untuk kode CSS style terletak pada elemen <style> anda bisa memodifikasi warna background, ukuran dimensi dan lainnya. Silakan anda berkreasi sendiri dengan kode CSS Style 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

Cara memasang widget CCTV di Blog, CCTV widget blogger, CCTV widget blog, CCTV widget blogspot, 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, Widget Cara Pasang Animasi CCTV Blogger, Gambar GIF CCTV Blog, Fungsional widget CCTV untuk Blogger, Gambar CCTV Pada Blog, Bikin CCTV pada halaman Blog, Menaruh Kamera CCTV Pada Postingan Artikel BLOG, Script HTML CCTV pada Blogspot, Skrip CSS Gambar CCTV Blog, Cara buat widget CCTV, CCTV adalah kamera pengintai yang biasa dipasang pada tempat-tempat tertentu agar dapat merekam semua peristiwa yang terjadi. Namun yang akan di share ini berbeda karena hanya merupakan sebuah widget pada blog. Mungkin sobat pernah berkunjung di sebuah blog dan melihat ada widget CCTV terpasang di pojok kanan atas blog yang dapat membuat pengunjung merasa diawasi, nah sobat juga bisa memasangnya selain ringan widget ini juga dapat memperindah dan mempercantik tampilan blog, cara memasang widget CCTV terbaru