Pada tutorial ini kita tidak hanya menggunakan jQuery namun menggunakan bantuan dari cloudflare, tanpanya kita tidak bisa menampilka IP pengunjung website kalian. untuk demo nya kita akan membuatnya seperti website flashpulsa diatas. tetapi disini kalian bisa menempatkan dimana IP pengunjung anda akan ditampilkan, contohnya kalian bisa memasang nya dibagian footer.
Jika penasaran bagaimana bentuknya nanti, kalian bisa melihat melalui link demo disamping DEMOO. silahkan lihat dibagian footernya.
Bagaimana? tertarik untuk membuatnya? jika ia langsung saja simak tutorial
TUTORIALNYA
Pertama seperti biasa masuk ke dashboard blogger dan pergi kemenu Tema lalu edit html. Jika sudah langsung saja copy kode jQuery dibawah dan letakan diatas kode </body>
<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> Jangan lupa simpan template. sekarang kalian tinggal memanggil jQuery diatas, disini kalian terserah mau menempatkan dimana.
<span id='your-ip'></span> Bingung dimana akan menempatkan nya? jika ia saya akan menyarankan kalian menempatkan dibagian footer. Atau jika kalian ingin menempatkanya seperti di Demo maka silahkan ikuti tutorial dibawah. disini kita akan mengganti juga footernya, maksudnya footer bawaan template kalian harus dihapus dan diganti dengan footer yang ada pada demo diatas.
Silahkan hapus css footer template bawaan kalian biasanya kode css footer berbentuk #footer atau .footer, dan jika sudah dihapus silahkan ganti dengan css footer dibawah, atau jangan dihapus cukup blok semua kode css footernya dan ganti/timpa dengan 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} Selanjutanya hapus juga kode html footer bawaan template kalian dan ganti dengan html dibawah ini, Biasanya html footer berbentuk <footer> atau <footer class="blabla"> jika sudah dihapus langsung saja ganti dengan kode html dibawah
<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> Perhatikan kode id='your-ip' tandanya kode diatas juga akan memanggil script jQuery yang sudah dipasang sejak awal tadi. Kekurangan dari memasang IP pengunjung ini adalah website kalian akan menjadi sedikit terbebani oleh cloudflare yang ditempatkan bersama kode jQuery diatas. sekarang tergantung kalian ingin memasang atau tidak.
PENUTUP
Baiklah itu dia Cara Menampilkan IP Pengunjung Menggunakan jQuery DiBlogger. Semoga bermanfaat dan sampai jumpa diartikel selanjutnya.
0 Comments