Cara membuat daftar isi atau sitemap di blog

Cara membuat daftar isi atau sitemap di blog

Daftar isi atau juga disebut sitemap adalah navigasi yang dirancang untuk memudahkan pengunjung mengakses konten atau topik diperlukan oleh mereka. Selain itu daftar isi atau sitemap terdiri dari semua link posting dalam 1 tempat sehingga pengunjung lebih betah dan bounce rate pun akan semakin turun. Daftar isi atau sitemap juga dapat membantu bot search engine untuk memudahkan pengindexan situs anda.

Sudah tau apa itu sitemap dan fungsinya. Sayangnya blogger atau blogspot tidak menyediakan semacam widget tetapi kita dapat menambahkannya Dengan cara memasang script.

Berikut adalah langkah langkah cara membuat daftar isi atau sitemap di blogger atau blogspot:

  1. Masuk ke blogger
  2. Pilih halaman
  3. Buat halaman lalu beralih ke mode html
  4. Beri nama halaman dengan peta situs/sitemap
  5. Salin script ini lalu pastekan di halamannya 

 <style type="text/css">


#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;


-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);


-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);


box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}


.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;


padding:1px 0 2px 11px;background: #3498DB;


border:1px solid #2D96DF;


border-radius:4px;-moz-border-radius:4px;


-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;


-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}


.labl a{color:#fff;}


.labl:first-letter{text-transform:uppercase;}


.new{color:#FF5F00;font-weight:bold;font-style:italic;}


.postname{font-weight:normal;background:#fff;margin-left: 35px;}


.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}


</style>


<div id="toc">


<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>


<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">


</script></div>


Demo
Cara membuat informasi pengunjung dengan javascript

Cara membuat informasi pengunjung dengan javascript

 


Sebelum saya sudah membuat cara menambahkan informasi Pengunjung di blog dengan PHP dan tools 

Namun yang saya berikan kali ini berbeda dari Part1 cara ini menggunakan javascript 


Langkah 

  • pertama buat file index.html

Lalu copy script di bawah ini



 <!DOCTYPE html>

<html>

  <head>

    <title> menampilkan browser yang di gunakan dengan js</title>

    <link rel="stylesheet" href="style.css"/>

  </head>

  <body>

   

 <a class="btn" id="button1" href="#id01">deteksi</a>


 <div id="id01" class="modal">

  <div class="modal-dialog">

   <div class="modal-content">

    <header class="container">

     <a href="#" class="closebtn">x</a>

     <h4 style="text-align:center">data yang di dapat</h4>

    </header>

    <div class="container"> 

   <!--data js-->

          <script type="text/javascript">

     //<![CDATA[

var h=(new Date()).getHours();

var m=(new Date()).getMinutes();

var s=(new Date()).getSeconds();

if (h >= 4 && h < 10)

document.writeln("<p>waktu : pagi" + "</p>");

if (h >= 10 && h < 15) 

document.writeln("<p>waktu : siang" + "</p>");

if (h >= 15 && h < 18) 

document.writeln("<p>waktu : sore" +"</p>");

if (h >= 18 || h < 4) 

document.writeln("<p>waktu : malam" + "</p>");

//]]>

      document.write ("<p>nama browser: "

   +navigator.appName +"</p>");

      document.write ("<p>versi aplikasi: "

   +navigator.appVersion +"</p>");

      document.write ("<p>versi aplikasi: "

      +navigator.platform +"</p>");

      document.write ("<p>enable cookies: "

    +navigator.cookieEnabled +"</p>");

      document.write ("<p>user-agent: "+navigator.userAgent +"</p>");


</script>

   

       </div>

    <footer class="container">&#67;&#79;&#80;&#89;&#82;&#73;&#71;&#72;&#84; &#72;&#65;&#77;&#90;&#65;&#72; &#88;&#79;&#85;</footer>

    

<!-- 

/*footer bawah copyright*/

<div>

<header class:"container"> copyright hamzah xou </header>

</div>

//-->

   </div>

  </div>

 </div>

  </body>

</html>



  • Ke dua buat file style.css

Lalu salin
     body {
       background: #001559;
}
     #button1 {       border: none;
           background: #0076ff;
           border-radius: 10px;
           padding: 5px;
           color: #fff;
           font-weight: bold;
           font-size: 12px;


      }
      .btn {
         font-family: sans-serif;
         border: none;
         padding: 15px 30px;
         font-size: 20px;
         outline: none;
         margin: 10px;
        
      }


/* The modal's background */

.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */

.modal:target {
display: table;
position: absolute;
}
/* The modal box */

.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* The modal's content */

.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Add animation */
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 0.5s;
}
/* The button used to close the modal */

.closebtn {
text-decoration: none;
float: right;
font-size: 25px;
font-weight: bold;
color: #fff;
}

.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.container {
padding: 2px 16px;
}

header {
background-color: #0076ff;
font-size: 25px;
color: white;
}

footer {
background-color: #0076ff;
font-size: 10px;
color: white;
text-align: center;
}
p {
 border: 1px solid #0076ff;
}



Untuk melihat demo nya di sini



Demo dengan tombol
atau kalian bisa menggunakan script js ini tanpa tombol

 <script type="text/javascript">

      document.write ("<p>nama browser: "

   +navigator.appName +"</p>");

      document.write ("<p>versi aplikasi: "

   +navigator.appVersion +"</p>");

      document.write ("<p>versi aplikasi: "

      +navigator.platform +"</p>");

      document.write ("<p>enable cookies: "

    +navigator.cookieEnabled +"</p>");

      document.write ("<p>user-agent: "+navigator.userAgent +"</p>");

</script>



Demo seperti di bawah ini
 Cara menambah kan Efek Salju Berjatuhan di Blog

Cara menambah kan Efek Salju Berjatuhan di Blog



Ada berbagai cara untuk mempercantik tampilan blog, 
salah satunya yaitu dengan menambahkan efek di blog Anda. Memberi efek seperti hujan salju pada blogger akan membuat tampilan blog Anda lebih menarik
 perhatian pengunjung blog Anda.

Cara membuat nya cukup mudah 

  • salin script ini


<script src="https://cdn.rawgit.com/FicriPebriyana/efek/0a935a6c/efek%20salju.js" type="text/javascript"></script>

  • Masuk ke dashboard blogger

  • Pilih tata letak

  • TAmbah gadget html/javascript

  • Lalu pastekan di bagian konten


jika menggunakan yang di bawah ini.di sarankan menggunakan laptop/pc,karena jika menggunakan hp bisa ngelag
Jika ingin menggunakan warna yang berbeda bisa saling script ini
ubah #148cf5 sesuai warna yang kalian suka


 <div class='widget-content'>


<script type="text/javascript" charset="utf-8">

  /*

   DHTML Snowstorm! OO-style Jascript-based Snow effect

   ----------------------------------------------------

   Version 1.4.20091115 (Previous rev: v1.3.20081215)

   Code by Scott Schiller - http://schillmania.com

   ----------------------------------------------------

  

   Initializes after body onload() by default (via addEventHandler() call at bottom.)

   To customize properties, edit below or override configuration after this script

   has run (but before body.onload), eg. snowStorm.snowStick = false;


*/


var snowStorm = null;


function SnowStorm() {


  // --- PROPERTIES ---


  this.flakesMax = 128;           // Limit total amount of snow made (falling + sticking)

  this.flakesMaxActive = 64;      // Limit amount of snow falling at once (less = lower CPU use)

  this.animationInterval = 33;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower

  this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect

  this.targetElement = null;      // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference

  this.followMouse = true;        // Snow will change movement with the user's mouse

  this.snowColor = '#148cf5';        // Don't eat (or use?) yellow snow.

  this.snowCharacter = '&bull;';  // &bull; = bullet, &middot; is square on some systems etc.

  this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.

  this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it

  this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling

  this.usePositionFixed = false;  // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported


  // --- less-used bits ---


  this.flakeLeftOffset = 0;       // amount to subtract from edges of container

  this.flakeRightOffset = 0;      // amount to subtract from edges of container

  this.flakeWidth = 8;            // max pixel width for snow element

  this.flakeHeight = 8;           // max pixel height for snow element

  this.vMaxX = 5;                 // Maximum X velocity range for snow

  this.vMaxY = 4;                 // Maximum Y velocity range

  this.zIndex = 0;                // CSS stacking order applied to each snowflake


  // --- End of user section ---


  // jslint global declarations

  /*global window, document, navigator, clearInterval, setInterval */


  var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {

return o.addEventListener(evtName,evtHandler,false);

  }:function(o,evtName,evtHandler) {

return o.attachEvent('on'+evtName,evtHandler);

  });


  var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {

    return o.removeEventListener(evtName,evtHandler,false);

  }:function(o,evtName,evtHandler) {

return o.detachEvent('on'+evtName,evtHandler);

  });


  function rnd(n,min) {

    if (isNaN(min)) {

  min = 0;

}

    return (Math.random()*n)+min;

  }


  function plusMinus(n) {

    return (parseInt(rnd(2),10)==1?n*-1:n);

  }


  var s = this;

  var storm = this;

  this.timers = [];

  this.flakes = [];

  this.disabled = false;

  this.active = false;


  var isIE = navigator.userAgent.match(/msie/i);

  var isIE6 = navigator.userAgent.match(/msie 6/i);

  var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));

  var isWin9X = navigator.appVersion.match(/windows 98/i);

  var isiPhone = navigator.userAgent.match(/iphone/i);

  var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');

  var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);

  var screenX = null;

  var screenX2 = null;

  var screenY = null;

  var scrollY = null;

  var vRndX = null;

  var vRndY = null;

  var windOffset = 1;

  var windMultiplier = 2;

  var flakeTypes = 6;

  var fixedForEverything = false;

  var opacitySupported = (function(){

    try {

  document.createElement('div').style.opacity = '0.5';

    } catch (e) {

  return false;

    }

    return true;

  })();

  var docFrag = document.createDocumentFragment();

  if (s.flakeLeftOffset === null) {

s.flakeLeftOffset = 0;

  }

  if (s.flakeRightOffset === null) {

s.flakeRightOffset = 0;

  }


  this.meltFrameCount = 20;

  this.meltFrames = [];

  for (var i=0; i<this.meltFrameCount; i++) {

this.meltFrames.push(1-(i/this.meltFrameCount));

  }


  this.randomizeWind = function() {

    vRndX = plusMinus(rnd(s.vMaxX,0.2));

    vRndY = rnd(s.vMaxY,0.2);

    if (this.flakes) {

      for (var i=0; i<this.flakes.length; i++) {

        if (this.flakes[i].active) {

          this.flakes[i].setVelocities();

}

      }

    }

  };


  this.scrollHandler = function() {

    // "attach" snowflakes to bottom of window if no absolute bottom value was given

    scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));

    if (isNaN(scrollY)) {

  scrollY = 0; // Netscape 6 scroll fix

}

    if (!fixedForEverything && !s.flakeBottom && s.flakes) {

      for (var i=s.flakes.length; i--;) {

        if (s.flakes[i].active === 0) {

      s.flakes[i].stick();

}

      }

    }

  };


  this.resizeHandler = function() {

    if (window.innerWidth || window.innerHeight) {

      screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;

      screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);

    } else {

      screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;

      screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);

    }

    screenX2 = parseInt(screenX/2,10);

  };


  this.resizeHandlerAlt = function() {

    screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;

    screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;

    screenX2 = parseInt(screenX/2,10);

  };


  this.freeze = function() {

    // pause animation

    if (!s.disabled) {

      s.disabled = 1;

    } else {

      return false;

    }

    for (var i=s.timers.length; i--;) {

      clearInterval(s.timers[i]);

    }

  };


  this.resume = function() {

    if (s.disabled) {

       s.disabled = 0;

    } else {

      return false;

    }

    s.timerInit();

  };


  this.toggleSnow = function() {

    if (!s.flakes.length) {

      // first run

      s.start();

    } else {

      s.active = !s.active;

      if (s.active) {

        s.show();

        s.resume();

      } else {

        s.stop();

        s.freeze();

      }

    }

  };


  this.stop = function() {

    this.freeze();

    for (var i=this.flakes.length; i--;) {

      this.flakes[i].o.style.display = 'none';

    }

    removeEvent(window,'scroll',s.scrollHandler);

    removeEvent(window,'resize',s.resizeHandler);

    if (!isOldIE) {

      removeEvent(window,'blur',s.freeze);

      removeEvent(window,'focus',s.resume);

    }

  };


  this.show = function() {

    for (var i=this.flakes.length; i--;) {

      this.flakes[i].o.style.display = 'block';

    }

  };


  this.SnowFlake = function(parent,type,x,y) {

    var s = this;

    var storm = parent;

    this.type = type;

    this.x = x||parseInt(rnd(screenX-20),10);

    this.y = (!isNaN(y)?y:-rnd(screenY)-12);

    this.vX = null;

    this.vY = null;

    this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)

    this.vAmp = this.vAmpTypes[this.type];

    this.melting = false;

    this.meltFrameCount = storm.meltFrameCount;

    this.meltFrames = storm.meltFrames;

    this.meltFrame = 0;

    this.twinkleFrame = 0;

    this.active = 1;

    this.fontSize = (10+(this.type/5)*10);

    this.o = document.createElement('div');

    this.o.innerHTML = storm.snowCharacter;

    this.o.style.color = storm.snowColor;

    this.o.style.position = (fixedForEverything?'fixed':'absolute');

    this.o.style.width = storm.flakeWidth+'px';

    this.o.style.height = storm.flakeHeight+'px';

    this.o.style.fontFamily = 'arial,verdana';

    this.o.style.overflow = 'hidden';

    this.o.style.fontWeight = 'normal';

    this.o.style.zIndex = storm.zIndex;

    docFrag.appendChild(this.o);


    this.refresh = function() {

  if (isNaN(s.x) || isNaN(s.y)) {

// safety check

return false;

  }

      s.o.style.left = s.x+'px';

      s.o.style.top = s.y+'px';

    };


    this.stick = function() {

      if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {

        s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';

      } else if (storm.flakeBottom) {

    s.o.style.top = storm.flakeBottom+'px';

  } else {

        s.o.style.display = 'none';

    s.o.style.top = 'auto';

        s.o.style.bottom = '0px';

    s.o.style.position = 'fixed';

        s.o.style.display = 'block';

      }

    };


    this.vCheck = function() {

      if (s.vX>=0 && s.vX<0.2) {

        s.vX = 0.2;

      } else if (s.vX<0 && s.vX>-0.2) {

        s.vX = -0.2;

      }

      if (s.vY>=0 && s.vY<0.2) {

        s.vY = 0.2;

      }

    };


    this.move = function() {

      var vX = s.vX*windOffset;

      s.x += vX;

      s.y += (s.vY*s.vAmp);

      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check

        s.x = 0;

      } else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {

        s.x = screenX-storm.flakeWidth-1; // flakeWidth;

      }

      s.refresh();

      var yDiff = screenY+scrollY-s.y;

      if (yDiff<storm.flakeHeight) {

        s.active = 0;

    if (storm.snowStick) {

          s.stick();

    } else {

      s.recycle();

    }

      } else {

    if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {

      // ~1/1000 chance of melting mid-air, with each frame

      s.melting = true;

      s.melt();

      // only incrementally melt one frame

      // s.melting = false;

    }

    if (storm.useTwinkleEffect) {

  if (!s.twinkleFrame) {

if (Math.random()>0.9) {

      s.twinkleFrame = parseInt(Math.random()*20,10);

    }

  } else {

s.twinkleFrame--;

s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');

  }

    }

      }

    };


    this.animate = function() {

      // main animation loop

      // move, check status, die etc.

      s.move();

    };


    this.setVelocities = function() {

      s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);

      s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);

    };


this.setOpacity = function(o,opacity) {

  if (!opacitySupported) {

return false;

  }

  o.style.opacity = opacity;

};


    this.melt = function() {

  if (!storm.useMeltEffect || !s.melting) {

s.recycle();

  } else {

if (s.meltFrame < s.meltFrameCount) {

  s.meltFrame++;

  s.setOpacity(s.o,s.meltFrames[s.meltFrame]);

  s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';

  s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';

} else {

  s.recycle();

}

  }

    };


    this.recycle = function() {

      s.o.style.display = 'none';

      s.o.style.position = (fixedForEverything?'fixed':'absolute');

      s.o.style.bottom = 'auto';

      s.setVelocities();

      s.vCheck();

  s.meltFrame = 0;

  s.melting = false;

  s.setOpacity(s.o,1);

  s.o.style.padding = '0px';

  s.o.style.margin = '0px';

  s.o.style.fontSize = s.fontSize+'px';

  s.o.style.lineHeight = (storm.flakeHeight+2)+'px';

  s.o.style.textAlign = 'center';

  s.o.style.verticalAlign = 'baseline';

      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);

      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;

      s.refresh();

      s.o.style.display = 'block';

      s.active = 1;

    };


    this.recycle(); // set up x/y coords etc.

    this.refresh();


  };


  this.snow = function() {

    var active = 0;

    var used = 0;

    var waiting = 0;

    var flake = null;

    for (var i=s.flakes.length; i--;) {

      if (s.flakes[i].active == 1) {

        s.flakes[i].move();

        active++;

      } else if (s.flakes[i].active === 0) {

        used++;

      } else {

        waiting++;

      }

      if (s.flakes[i].melting) {

    s.flakes[i].melt();

  }

    }

    if (active<s.flakesMaxActive) {

      flake = s.flakes[parseInt(rnd(s.flakes.length),10)];

      if (flake.active === 0) {

        flake.melting = true;

      }

    }

  };


  this.mouseMove = function(e) {

    if (!s.followMouse) {

  return true;

}

    var x = parseInt(e.clientX,10);

    if (x<screenX2) {

      windOffset = -windMultiplier+(x/screenX2*windMultiplier);

    } else {

      x -= screenX2;

      windOffset = (x/screenX2)*windMultiplier;

    }

  };


  this.createSnow = function(limit,allowInactive) {

    for (var i=0; i<limit; i++) {

      s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));

      if (allowInactive || i>s.flakesMaxActive) {

    s.flakes[s.flakes.length-1].active = -1;

  }

    }

    storm.targetElement.appendChild(docFrag);

  };


  this.timerInit = function() {

    s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);

  };


  this.init = function() {

    s.randomizeWind();

    s.createSnow(s.flakesMax); // create initial batch

    addEvent(window,'resize',s.resizeHandler);

    addEvent(window,'scroll',s.scrollHandler);

    if (!isOldIE) {

      addEvent(window,'blur',s.freeze);

      addEvent(window,'focus',s.resume);

    }

    s.resizeHandler();

    s.scrollHandler();

    if (s.followMouse) {

      addEvent(document,'mousemove',s.mouseMove);

    }

    s.animationInterval = Math.max(20,s.animationInterval);

    s.timerInit();

  };


  var didInit = false;


  this.start = function(bFromOnLoad) {

if (!didInit) {

  didInit = true;

} else if (bFromOnLoad) {

  // already loaded and running

  return true;

}

    if (typeof s.targetElement == 'string') {

  var targetID = s.targetElement;

      s.targetElement = document.getElementById(targetID);

      if (!s.targetElement) {

    throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');

  }

    }

if (!s.targetElement) {

  s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);

}

    if (s.targetElement != document.documentElement && s.targetElement != document.body) {

  s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions

}

    s.resizeHandler(); // get bounding box elements

    s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported

    fixedForEverything = s.usePositionFixed;

    if (screenX && screenY && !s.disabled) {

      s.init();

      s.active = true;

    }

  };


  function doStart() {

  s.start(true);

  }


  if (document.addEventListener) {

    // safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.

    document.addEventListener('DOMContentLoaded',doStart,false);

    window.addEventListener('load',doStart,false);

  } else {

    addEvent(window,'load',doStart);

  }


}


snowStorm = new SnowStorm();

</script>

</div>

Cara melihat kode html, elemen di web

Cara melihat kode html, elemen di web

              

helo friend

 di konten kali ini saya akan memberikan tutorial cara menampilkan elemen seperti di komputer p


 langsung aja ke tutorial nya

Pertama 

•Copy SC ini




 •Masuk ke crome 

•pencet titik 3 dipojok kanan atas

 lalu pencet lagi simbol bintang di samping kiri logo download


Maka akan ada tulisan (edit) di bawah kanan 

•pencet edit 

Lalu ubh nama nya menjadi Inspect Element

Dan ubh juga URL nya menjadi SC yg sudah di copy tadi

Lalu pencet keluar 

• langkah terakhir ketik di pencarian

Inspect Element

pencet histori yg ada bintang nya


Maka akan ada gambar setting 



sekian dulu tutorial dari saya 

Maaf kalo ada bahasa yang kurang jelas/tidak mudah di pahami