Beberapa plugin jquery untuk mempercantik tampilan web atau blog

Beberapa plugin jquery untuk mempercantik tampilan web atau blog

 


Untuk membuat website yang menarik kita membutuhkan beberapa plugin. dengan menggunakan plugin kita akan lebih cepat dan lebih mudah dalam mendevlop web kita, juga lebih powerfull



1. lightbox

  lightbox adalah plugin yang bisa digunakan untuk membuat gallery dan modal image
  lightbox bisa anda dapatkan di sini

2. slick

  slick bisa digunakan untuk membuat image slider selain image slider dengan slick kita bisa juga membuat div   slider. slick bisa anda download di link ini

3. smint

  smint adalah plugin jquery yang bisa dipakai untuk membuat sticky navigation
  smint bisa anda download disini

4. pagify.js

  pagify yaitu plugin jquery yang bisa dipakai untuk membuat website one page, pagify akan menggabungkan beberapa file html  menjadi sebuah halaman dengan metode ajax. pagify.js bisa didownload disini

5. WebCodeCamjs

  dengan plugin webcodecam kita dapat menyecan qrcode melalui webcam. dan dapat menterjemahkan qrcode tersebut. webcodecam bisa di download disini 


Sumber:https://juanasss.blogspot.com/
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 menampilkan waktu pagi,siang,sore,malam dengan javascript

Cara menampilkan waktu pagi,siang,sore,malam dengan javascript

 


Cara membuat text pagi,siang,sore,malam dengan js secara otomatis

Copy script js ini 


<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("sekarang pagi,:)");
if (h >= 10 && h < 15) document.writeln("Sekarang siang,:)");
if (h >= 15 && h < 18) document.writeln("sekarang sore,:v");
if (h >= 18 || h < 4) document.writeln("sekarang malam,:)");
//]]>
</script>
maka hasil nya seperti ini
Penjelasan tentang gadget atau widget di blogger

Penjelasan tentang gadget atau widget di blogger



widget/gadget yang disediakan oleh blogger kadang membuat kita malah bingung sehingga membuat kita bertanya-tanya gadget mana aja yang wajib dipasang di halaman blogger agar nampak bagus

Tidak semua widget/gadget harus terpasang diblogger anda, hanya gadget yang memiliki fungsi utama aja yang harus kalian pasang, karena kebanyakan gadget akan membuat loading blog akan melambat. Dan itu membuat pengunjung blog anda merasa tidak nyaman.

tapi anda juga harus tau apa kegunaan dari semua gadget yang disediakan oleh blogger, supaya jika nanti membutuhkan kita tinggal memasangnya.

Widget yang disediakan oleh blogger menurut saya sudah lengkap sesuai dengan fungsinya masing - masing dan kita tidak perlu lagi bingung jika kalian ingin men custome widget/gadget

Beberapa widget/gadget di blogger dan penjelasan nya



  • Adsense,
    adalah gadget khusus untuk menempelkan iklan yang sudah dirancang khusus oleh blogger, penempatannya terserah sobat sesuai selera aja. Jadi dengan menambahkan gadget tersebut maka sobat gak perlu susah susah memasang kode javscrip iklan adsen secara manual. Dengan adanya gadget tersebut sobat dimudahkan dalam meletakkan iklan.



  • Entri Yang Diunggulkan
    , adalah gadget yang dirancang khusus untuk menampilkan postingan khusus yang menurut sobat perlu ditampilkan terus menerus di area sidebar, bisa jadi sebuah postingan yang unik atau postingan artikel yang menarik atau juga artikel yang berisi iklan dan sebagainya. Untuk menggunakannya sobat hanya perlu klik tambahkan dan taruh disidebar yang menurut sobat bagus.



  • Penelusuran Blog
    , adalah gadget khusus yang disediakan oleh blogger sebagai alat untuk mencari sebuah artikel yang sesuai dengan keyword/ kata kunci yang sobat tentukan, dengan mengetikkan kata kunci disebuah blog maka artikel yang sobat cari akan ditampilkan.



  • HTML/Javascript
    , adalah gadget yang disediakan ole blogger apabila sobat ingin memasangkan kode scrip atau HTML khusus yang sobat rancang sendiri atau bisa juga untuk memasang kode iklan adsense yang sudah sobat buat di menu unti iklan secara manual. Dan yang pastinya HTML/JavaScrip ini banyak fungsinya untuk mempercantik blog sobat, seperti sobat akan memasang kode media sosial atau formulir kontak dan lain lain.



  • Profil
    , adalah Gadget yang dikhususkan untuk menampilkan profil atau data diri pemilik blog supaya pengunjung itu tau siapa pemilik blog tersebut. Blog yang bagus pasti akan menampilkan data diri yang lengkap supaya orang lain akan mengenal sobat dan secara tidak langsung dapat menjalin hubungan emosional yang membuat pengunjung betah dan suka mengunjungi blog sobat.



  • Arsip Blog,
    Adalah sebuah gadget yang berisi tentang ringkasan dari postingan blog sobat dari awal sobat menulis sampai dengan sekarang. Didalam arsip ini akan ditampilkan berdasarkan Bulan, Tahun dan jumlah postingan sehingga mempermudah pengunjung untuk mencari apa aja yang isi artikel sobat.



  • Header Halaman
    , Berisi tentang judul blog sobat dan deskripsi blog sobat. Untuk header halaman biasanya sudah tertanam di tema atau template blog sobat sehinggan jarang banget memakai gadget ini.



  • Pengikut
    , Fungsinya untuk menampung siapa saja yang suka dengan blog sobat, jadi apabila blog sobat bagus maka apabila pengunjung suka mereka tinggal klik ikuti blog sobat. semakin banyak pengikut semakin bagus sebagai indikator kesuksesan blog sobat dalam memberikan informasi.



  • Gambar
    , adalah gadget yang digunakan untuk menambahkan gambar di halaman sidebar. contohnya iklan banner dan lain lain.



  • Label
    , adalah gadget penting yang harus terpasang diblog sobat karena label berfungsi untuk mengelompokkan setiap postingan sobat berdasarkan kategori yang sudah sobat tetapkan, contohnya : sobat beri nama label Berita, Internet, Android maka setiap postingan yang berhubungan dengan label tersebut akan terekap jadi satu.



  • Halaman
    , Berfungsi untuk menampilkan sebuah halaman yang sudah sobat buat secara mandiri, gadget ini juga bisa dipakai untuk membuat menu navigasi blog sobat.





  • Daftar Link
    , Gadget yang berfungsi untuk menampilkan situs, blog atau halaman web favorit sobat yang dapat dilihat oleh pengunjung, bisa jadi dipakai untuk menampilkan blog atau website sobat yang lainnya.



  • Teks
    Kebanyakan orang yang menggunakan widget ini untuk memuat hal-hal pribadi. Bisa dibilang juga orang-orang menggunakannya untuk memuat profil mereka. Jadi lebih khsusu dibanding profil yang ditampilkan Google.



  • Postingan Populer
    , adalah Gadget yang banyak digunakan oleh semua blogger untuk menampilkan postingan sobat yang banyak dikunjungi, sehingga sobat atau pengunjung akan tau artikel mana yang memiliki pengunjung paling banyak.



  • Statistik Blog
    Nah, yang ini bagus untuk Anda pasang kalau blog Anda banyak pengunjungnya. Bisa digunakan untuk ajang pamer, tapi bisa pula untuk meyakinkan pembaca kalau blog Anda telah dikunjungi banyak orang jadi bagus untuk dibaca isinya.



  • Daftar blog
    fungsi nya menampilkan blog-blog favorit kita, tinggal memberikan link blog saja di Blog List jika ingin menampilkannya



  • Feed
    fungsinya menambahkan konten dari RSS dengan memberikan link RSS



  • Logo
      menampilkan logo blogger di blog kita



  • Link berlangganan
    tambahkan ini jika blog kita ingin di subscribe



  • Terjemahan
    Menyediakan translate untuk pengunjung blog yang bukan orang dari negara yang sama dari Anda. Ini memudahkan pengunjung asing membaca blog Anda tanpa dihalangi bahasa yang berbeda.


  • Daftar
    fungsi wedget ini menambah daftar buku,flim,konten favorit



  • Formulir kontak,
    adalah tambahan gadget yang berfungsi untuk menerima keluhan atau saran dari pengunjung, jadi jika ada pengujung yang ingin bertanya khusus maka bisa menghubungi sobat lewat Formulir kontak tersebut.



  • Wikipedia
    adalah tambahan gadget yang berfungsi untuk memudahkan pengunjung ke situs Wikipedia



  • Atribusi 
    Bukti kalau yang memberdayakan blog Anda adalah milik blogspot. Tidak terlalu penting sebenarnya. Jadi tak usah dipasang.



  • Laporan penyalahgunaan
    berfungsi untuk melaporkan konten blog .jika konten tidak senonoh




  • Dari beberapa gadget diatas biasanya yang dipasang di blog hanya beberapa saja sesuai dengan kebutuhan blog sendiri.

    rekomendasi gadget yang harus dipasang di blog :

    1. Postingan Populer.
    2. Adsense
    3. Penelusuran Blog
    4. HTML/Javascript
    5. Profil
    6. Label
    7. Ikuti Lewat email

      Cara Memasang Link Sumber Otomatis di Blog

      Cara Memasang Link Sumber Otomatis di Blog



      Menambahkan link sumber secara otomatis ketika text postingan blog Anda di copas orang lain merupakan tindakan yang perlu dilakukan untuk meminimalisir terjadinya pencurian konten blog. Membuat link sumber otomatis ketika postingan blog di copy paste orang lain memang tidak menjamin seutuhnya artikel Anda aman dari tindakan pencurian artikel. Karena kode JavaScript yang saya bagikan ini hanya akan menampilkan link sumber dari konten asli yang di copas.

      Cara pembuatan nya:

      • Masuk ke Blogger.com.
      • Klik Tema > Edit HTML.
      • Cari code ini lalu letakkan tepat di atas nya

      &lt;!--<head/>&lt;!--<body/>--&gt;&lt;/body&gt; 

      • Selanjutnya Salin script js ini.  Dan paste kan
       
      <script type='text/javascript'>

      //<![CDATA[

      // Copy Text

      function nocopas(){var e=window.getSelection();pagelink="<br/><br/>Read more: "+document.location.href,copytext=e+pagelink,newdiv=document.createElement("div"),newdiv.style.position="absolute",newdiv.style.left="-99999px",document.body.appendChild(newdiv),newdiv.innerHTML=copytext,e.selectAllChildren(newdiv),window.setTimeout(function(){document.body.removeChild(newdiv)},100)}document.addEventListener("copy",nocopas);

      //]]>

      </script>
      Jika sudah klik simpan dan lihat hasilnya
      Cara Mencari Kode template Blogger di HP Android part 3

      Cara Mencari Kode template Blogger di HP Android part 3




      Ini adalah cara ke 3 dari Part1 dan Part2

      Cara ke 3 ini cukup mudah tapi menggunakan aplikasi tambahan 

      1. download dulu apknya 

      Cara download dan pasang nya cukup mudah kalian pasti pahamlah.hehehe....


      2. Login ke blogger,  Tap Tema>> Edit HTML,kemudian cari kode yang ingin diedit dengan cara seperti gambar dibawah ini. Pertama, tahan atau hold tombol gear yang ada di bagian bawah keyboard kemudian pilih Fn, Klik Ctrl, lalu klik tombol kunci yang ada disamping Ctrl, setelah itu ketik huruf F.

      3. Maka kolom search akan muncul.
      Cari kode HTML yang ingin diedit di kolom pencarian,lalu klik enter dan kode HTML pun berhasil ditemukan.


      Jika kolom pencarian tidak muncul dan mengalami lag, disarankan untuk mengubah tampilan blogger ke tampilan versi terbaru. 

      Klik tombol 'Coba Blogger Baru'

      Tekan tombol CTRL+f  
      Maka dengan memilih Blogger tampilan baru,proses mengedit html menjadi lebih mudah dan cepat karena tampilan yang dikhususkan untuk perangkat mobile, jadi tidak akan mengalami lag.

      untuk mencari code nya harus sesuai dengan yang di cari contoh :"<head>" tidak boleh h atau head


      Gimana cara ke 3 untuk Mencari code template blogger di HP tidak sulit kan:)