How to Display Visitor IP Using jQuery DiBlogger

Please Wait Bro, We Made your link safe to visit.

Baca cara download agar tidak bingung Disini

 jQuery is very useful for a programmer, many things can be done with jQuery, one of which displays the IP of visitors who are visiting your website. Have you ever encountered a website that displays IP? one example of this flashpulsa website  . You will see an IP displayed under the "Security Code" input. well, the website owner must embed a script that functions to display the IP.

In this tutorial we don't only use jQuery but use the help of cloudflare, without which we can't show the IP of your website visitors. for the demo we will make it like the flashpulsa website above. but here you can place where your visitor's IP will be displayed, for example you can put it in the footer section.

If you are curious about what it will look like, you can see through the demo link beside  DEMOO . please look at the footer.

How? interested in making it? if he just saw the tutorial

TUTORIAL

First, as usual, go to the blogger dashboard and go to the Themes menu then edit the html. If you have, just copy the jQuery code below and place it above the </body> code

<script>
//<![CDATA[
$.get('https://www.cloudflare.com/cdn-cgi/trace', function(data) {
	var createIp=document.createElement('div');
	createIp.innerHTML='Your IP = '+data.split('ip=')[1].split('ts')[0]+' - '+data.split('loc=')[1].split('tls')[0];
  document.getElementById('your-ip').insertBefore(createIp, document.getElementById('your-ip').childNodes[0])
  //console.log(data)
});

//]]>
</script>

Don't forget to save the template. now you just call jQuery above, where you want to put it here.

<span id='your-ip'></span>

Confused where to place it? if it I would suggest you put in the footer. Or if you want to place it like in Demo then please follow the tutorial below. here we will also change the footer, meaning that your default template footer must be deleted and replaced with the footer in the demo above.

Please delete your default css footer template, usually the css footer code in the form of #footer or .footer , and if it's deleted please replace it with the css footer below, or don't delete it, just block all the css footer code and replace / overwrite it with the css footer.

#footer{background:rgba(15, 15, 15, 0.76);margin-bottom:5rem;padding:0 0 25px 0;color:#eee;font-size:14px;border-top:1px solid rgba(255,255,255,.08)}#footer .copyright{text-align:center;padding-top:30px}#footer .credits{text-align:center;font-size:13px;color:#ddd}

Next, delete the html footer code that comes with your template and replace it with the html below, Usually the html footer is in the form of <footer> or <footer class = "blabla"> if it has been deleted just replace it with the html code below.

<footer id='footer' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div class='backtotop'><svg style='width:34px;height:34px;margin:0 0 10px;' viewBox='0 0 24 24'>
<path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='currentColor'></path>
</svg></div>
<div class='copyright'>
         Copyright <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script>
<a href='https://filmmediainc.blogspot.com/' rel='copyright' title='Film Media'>Film Media</a> - All Rights Reserved
      </div>
<div class='credits'>
<span id='your-ip'></span>
</div>
</footer>

Pay attention to the id = 'your-ip' code, the sign of the code above will also call the jQuery script that was installed earlier. The drawback of installing this visitor's IP is that your website will be a little burdened by cloudflare which is placed with the jQuery code above. now depends on whether you want to install or not.

Please Wait Bro, Link will be apear in 10 seconds.

Succesfull Now Click the button

Bagikan Artikel ini