Apakah Javascript itu dan apa peranannya terhadap HTML?

Apa yang dapat di kita buat dengan JavaScript?

• JavaScript adalah bahasa pemrograman paling populer di dunia.
• JavaScript adalah bahasa pemrograman Web.
• JavaScript mudah dipelajari.

Akan tetapi dalam kesempatan ini kita akan membuktikan bagaimana Javascript bisa merubah nilai atribut HTML, menjadikan HTML menjadi dinamis dan menarik.

Ya seperti CSS JavaScript bisa merubah nilai Atribut HTML

Pada contoh berikut kita tunjukkan bagaimana JavaScript merubah nilai Atribut dari sumber suatu image (gambar)

Berikut trik Javascript yang dimaksudkan dengan penjelasan di atas: 'nyalakan lampu' dan 'matikan lampu' dengan cara menekan tombol kanan dan kiri.

  

Lihat contoh penerapannya dalam bentuk lain di:

Baca: CARA MUDAH MEMASANG TOMBOL/TOGGLE DARK MODE KE HALAMAN BLOG

sumber kode gambar di atas:

<center> //hanya untuk re-position//<button onclick="document.getElementById('myImage').src='https://1.bp.blogspot.com/-GsTEApA_NUc/Xd5WU8emH4I/AAAAAAAApkQ/6N17ZmTWjG0AuSv3XcwU2Lb0IOc3_Rd-ACEwYBhgL/s1600/bulb-close-up-electricity-energy-577514.jpg'">Nyalakan lampu</button><img id="myImage" src="https://1.bp.blogspot.com/-GsTEApA_NUc/Xd5WU8emH4I/AAAAAAAApkQ/6N17ZmTWjG0AuSv3XcwU2Lb0IOc3_Rd-ACEwYBhgL/s1600/bulb-close-up-electricity-energy-577514.jpg" style="width: auto;" /><button onclick="document.getElementById('myImage').src='https://1.bp.blogspot.com/-Zjoskz9bZk0/Xd5WbFz6FHI/AAAAAAAApkU/sZM4yznW_poMiwzingwI_h6ht4Onh_MuACLcBGAsYHQ/s1600/20191127_175429.jpg'">Matikan Lampu</button></center> //hanya untuk re-position//

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!

SHARE YA:

AWAS SCRIPT PALSU, JANGAN PASANG FAKE AGGREGATE SCORE INI DI BLOG

Salah seorang konstributor kami telah menulis postingan yang hampir mirip karena ada saja blogger nakal atau kurang mengerti dan menyarankan agar teman temannya memasang kode kode dengan tujuan 'mengelabui' tool Google dalam membaca skor performa sebuah halaman web dan termasuk blogger. Script ini dimaksudkan oleh TS-nya agar halaman tampak tinggi perfomanya di mata pengunjung dan syukur syukur oleh klien.

Akan tetapi sayangnya, Google telah memiliki berbagai tool pendeteksi yang sangat kuat dan dapat membedakan mana skor yang memang asli dan alami dan mana yang FAKE alias palsu. Yang asli pasti akan mendapatkan nilai tinggi dan sejati. karena bagaimanapun juga nilai berlian asli sangatlah mahal di banding berlian palsu walaupun kelihatan lebih menyala dan indah.

Tapi kan palsu....

1. Jangan pernah pasang script fake score rating berikut ini di halaman HTML blogger:

Nah pada postingan waktu yang lalu, kode script yang di suruh pasang oleh TS-nya adalah:

<script type='application/ld+json'>
{
"@context": "https://schema.org/",
"@type": "Book",
"name": "Nama Blog Anda",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "Jumlah Ratingnya",
"bestRating": "5",
"worstRating": "1"
}
}
</script>

Perhatikan kode script yang benar benar maksa agar rating tampak worth tapi sebenarnya palsu:

1. Rating value di paksa jadi 5,
2. Best rating di tetapkan sendiri jadi 5,
3. Tiba bagian 'worst'nya di beri hanya 1.

LOL! Sepertinya pembuat script itu mau menentukan sendiri rating halaman yang di injeksinya. Tahu akibatnya setelah di uji ke webmaster? Muncul peringatan sebagai berikut:


'Masalah Cuplikan ulasan baru terdeteksi untuk situs BlogDummy.blogspot.com.'


Yang terhormat pemilik xxx.blogspot.com:

Search Console telah mengidentifikasi bahwa situs Anda terpengaruh oleh 1 Cuplikan ulasan masalah:

Error Teratas

Error dapat menyebabkan halaman atau fitur Anda tidak muncul di Hasil penelusuran. Error berikut ditemukan di situs Anda:

Bilangan bulat dalam properti "ratingCount" tidak valid

Sebaiknya perbaiki masalah tersebut jika memungkinkan agar situs Anda dapat memberikan cakupan dan pengalaman terbaik di Google Penelusuran.

Perbaiki Cuplikan ulasan masalah

Nah lo. Jadi ketahuan dengan mudah, bukan? Bohong ketahuan masih mau pasang?

Sebenarnya saya bingung juga karena script di atas adalah JasonLD yang biasa dipergunakan untuk memperbaiki dan meningkatkan performa dan struktur halaman, tetapi di tulis ulang untuk menghasilkan feedback palsu terhadap tool pemeringkatan ranking halaman. Bagi saya itu itu konyol sekali karena alih alih memberikan feedback positif, ia malah menberikan sinyal buruk terhadap performa halaman itu sendiri.

Siapa penulisnya jelas jagoan, tetapi sayangnya Google adalah raksasa dengan kemampuan yang terintegrasi penuh terhadap field bisnis mereka. 

2. Bukan fake score rating, yang benar pasang script sitelink ini.

Jadi script rating di atas sepenuhnya salah, tidak benar dan berbahaya bagi halaman blogger itu sendiri. apakah ia di baca oleh mesin penelusur? Ya! Tapi dibaca sebagai text pemberi sinyal yang buruk! Maka itu di google webmaster kita disuruh memperbaikinya. Intinya memasang script itu di masa sekarang dengan kecanggihan algoritma Google lebih memberikan mudharat, alih alih manfaatnya.

Google membacanya sebagai cuplikan, nah jika kalian ingin agar halaman blog terbaca dan mendapatkan kotak sitelink yang memberikan cuplikan istemewa di halaman Google, seharusnya kalian memasang script pemberi sinyal yang benar, script tersebut adalah:

<script sync='async' type='application/ld+json'>
{
&quot;@context&quot;: &quot;https://schema.org&quot;,
&quot;@type&quot;: &quot;WebSite&quot;,
&quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;,
&quot;name&quot;: &quot;<data:blog.title/>&quot;,
&quot;alternateName&quot;: &quot;<data:blog.title/>&quot;,
&quot;potentialAction&quot;: {
&quot;@type&quot;: &quot;SearchAction&quot;,
&quot;target&quot;: &quot;<data:blog.homepageUrl/>search?q={search_term_string}&amp;max-results=6&quot;,
&quot;query-input&quot;: &quot;required name=search_term_string&quot;
}
}
</script>

Letakan kode tersebut ke dalam halaman editor HTML yakni setelah atau dibawah kode </head>.

Lalu silahkan save template.

Kalian boleh menguji halaman kalian melalui search console google webmaster, apakah setelah itu halaman blog akan mendapatkan kotak sitelink?

Ya tentu saja. Masak saya juga ikut ikutan bohong...sumber itu saya ambil dari halaman google itu sendiri.

SHARE YA:

TRIK BARU MENGHAPUS JAVASCRIPT YANG TIDAK DIPERGUNAKAN PADA TEMPLATE TEMPLATE TERBARU BLOGGER

Pernah mengukur kecepatan halaman blog menggunakan matrik Google PageSpeed? Ya pernah dong.  Saya gagal fokus pada bagian LCP (Largest Contenful Paint) karena itu adalah salah satu biang kerok lambatnya halaman berpacu di jaringan web, sangat melukai performa kecepatan. Pada pengukuran akan menghasilkan data sebagai berikut:

Tentu saja saya tidak akan mempermasalahkannya jika ia tidak di gunakan sebagai sinyal bagi mesin pencari di Google console Webmaster. Terutama pada bagian data web inti ini bisa mencerminkan kegagalan mengoptimalkan halaman sebuah web termasuk halaman blog. Lalu apa biang keroknya?

Setelah klik disana terdapat salah satu datanya: Jika ingin halaman jadi wuss dan ringan kita harus menghapus javascript yang tidak dipergunakan dari dalam template. Malangnya kemanapun mencarinya di halaman editor HTMLblogger Javascript itu tidak di temukan. Walaupun sudah tekan CTRL+ALT. dan memasukan kata kunci, tidak ada. Javascript itu adalah:

…widgets/53698643-widgets.js

Para blogger senior umumnya menyarankan agar kita 'menghentikan' aktivitas sang javascript yang tidak terlihat dengan merubah atau mengganti tag penutup body yakni </body> dengan &lt;!–</body>–&gt;&lt;/body&gt;  dan setelah itu halaman memang menjadi ringan, tapi apa yang terjadi kemudian?

Begini akibatnya:

• Tombol reply komentar berhenti berfungsi, hampir tidak ada cara untuk memperbaikinya, kecuali mengembalikan kode </body> seperti semula.
• Widget 'contact form' berhenti bekerja
• Search form atau menu pencarian tidak berfungsi lagi
• Widget Wikipedia juga jadi tidak berfungsi
• Widget arsip blog berhenti bekerja
• DLL

Melihat akibat yang ditimbulkan di atas, bagi saya itu semua adalah harga yang harus ditebus dan sangat mahal karena bagi saya terutama tombol reply komentar itu penting dan widget menu pencarian juga.

IDENTITAS TEMPLATE MELALUI IKATAN JAVASCRIPT

Tapi tunggu, karena saya menggunakan template terbaru blogger di bawah kode yang 'tidak di temukan' tersebut ada kode desain template notable: 

…res/247…-rockpool_compiled.js

Kodenya ada di dalam 5 varian blogger terbaru dengan masing masing perbedaan penulisan:

1. Notable:  <b:template-script async='true' name='rockpool' version='1.0.0'/> 
2. SOHO: <b:template-script async='true' name='fancy' version='1.0.0'/>
3. Contempo: <b:template-script async='true' name='indie' version='1.0.0'/>
4. Emporio: <b:template-script async='true' name='vegeclub' version='1.0.0'/>
5. Essential: <b:template-script async='true' name='strm' version='1.0.0'/>

Jadi untuk notable saya menghapus : <b:template-script async='true' name='rockpool' version='1.0.0'/>  dan menyelidiki dampaknya.

1. Benar, ia membuat kolom pencarian menjadi tidak bekerja. 
2. Ia menghilangkan efek sticky header template template terbaru
3. Tapi, ia tidak mempengaruhi kolom reply pada komentar sama sekali. 

Bagi saya itu masih worth. Tidak apa apa mengorbankan tombol pencarian, toh saya dapat menggantinya dengan yang kustom.

Jadi saya meneliti hal hal berikut:

XML:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='rockpool.xml' b:templateVersion='1.3.3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Pengaturan CSS terkait dengannya adalah:

body.variant-rockpool_deep_orange .centered-top-secondline .PageList .overflow-popup li a{

color:#000

}

body.variant-rockpool_pink .blog-name h1,body.variant-rockpool_pink .blog-name h1 a{

text-transform:none

}

body.variant-rockpool_deep_orange .post-filter-message{

background-color:$(header.background.color)

}

Lupakan kode kode xml dan CSS di atas, itu hanya penelusuran keterkaitan kode terhadap struktur template, gunanya bagi saya adalah bagaimana memahami setiap kode bekerja dan berdampak terhadap kinerja template secara keseluruhan.

Setelah saya menghapus kode tersebut dan membuang widget bawaan tombol bawaan astaga, loading yang tadinya di ukur hanya di kecepatan 50-65 untuk mobile berubah drastis menjadi 85-90!. 

Dan yang lebih aneh setelah saya periksa  kembali data kecepatan di PageSpeed java script yang disuruh hapus bebanya sekarang telah jauh berkurang:

Sebelum:

Sesudah:

Tentu saja itu tidak dapat di hapus, namun kita dapat mengurangi dampaknya dengan melakukan beberapa perbaikan, misalnya:

• Memperbaiki ukuran dimensi gambar
• Menghilangkan resource yang memblokir render halaman]
• Mengurangi penggunaan javascript
• dll

Setelah melakukan perbaikan perubahan tidak akan serta-merta terjadi, karena berbeda dari anggapan sebagian orang bahwa yang melakukan tugas mengumpulkan data adalah Google bot atau robot.txt, sebaliknya baik google bot atau robot.txt tidak mengambil bagian dari tugas ini, yang melakukannya justeru peramban Google Chrome! Tool matrix pagespeed harus membaca data yang di kumpulkan melalui UX peramban chrome terlebih dahulu, barulah setelah score terkumpul bedasarkan itu, score real time performa halaman web kita dapat di tampilkan di dalam matriks search console di halaman webmaster.

MENGAPA KITA HARUS PERDULI?

Karena pada matrik penilaian di search consol Google memberikan skor dan peringatan terkait performa halaman dan jika halaman tidak sesuai dengan standar, maka halaman tersebut berpotensi mengalami penurunan trafik lalu di ikuti oleh penghasilan.

Kita harus mempebaiki data halaman blog yang di tandai merah oleh Google, jika tidak halaman akan mulai rusak secara perlahan. Ini terutama bagi para blogger yang halamannya telah di monetisi, perbaikan biasanya akan selalu diikuti oleh peningkatan performa dan peningkatan trafik.

Perbaikan disini lebih ke struktur template. Dengan teknik dan desain yang valid, tepat dan akurat pastinya akan meningkatkan pengalaman pengguna pada saat menggunakan halaman tersebut.

Dan alih alih menghapusnya, kita tidak dapat melakukannya karena javascript tersebut di remote dari sisi server ke librari, lalu ke dalam template kita. Kita hanya dapat mengurangi 'aktivitasnya' yang sangat merugikan kecepatan loading tersebut.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Membuat navbar dengan vanilla script

Pernah bekerja dengan vanilla script? Di banding dengan Javascript ia lebih muda dan tentunya lebih modern. 

Jujur ketika membicarakan interest saya, saya sadar topik seperti ini kurang peminatnya alias kurang popular walaupun di zaman now yakni zamannya ibu ibu kita, tetapi zaman next, yaitu zaman generasi Z ke generasi Alpha di masa depan - dimana para ahli sepakat: TIDAK BISA KODING = BUTA HURUF. Terdengar sadis bagi sebagian orang yang masih hidup di zaman 'mak mak' kita, zamannya membaca text, tetapi hal itu memang menggambarkan seperti apa orientasi teknologi di masa depan.

Bagi saya sudah cukup pusing untuk memahami mengapa beberapa situs besar mulai menggunakan VanillaScript dan apa bedanya dengan JavaScript, Angular dan Jquerry? Saya sedikit mulai terbiasa dengan JavaScript dan jadi panasaran, pasti kalian juga kalau berada diposisi yang sama dengan saya.

Konon Vanilla Script mampu melipat-gandakan kecepatan, Oh my Gosh! 

Setelah Web Assembly di klaim dan terbukti sangat cepat kini Vanilla script diklaim memiliki kemampuan lebih daripada "pendahulunya" yakni JavaScript tetapi benarkah dia adalah bahasa pemrograman web? Saya rasa bukan. Lalu apa namanya? Markup?

Akan tetapi ia juga disebut sebagai vanilla JS, artinya Javascript banget. Namun lebih ringan dan lebih enteng. Mari kita bahas dahulu perbedaan dan persamaannya.

1.JavaScript

Jangan bingung dulu, jika kita bicara mengenai JavaScript ini tidak ada hubungannya dengan bahasa program Java ya, Java dibangun sebagai sebuah bahasa yang berdiri disisi perangkat pengguna, Sedangkan JavaScript secara umum dipergunakan untuk memanipulasi “Document Object Model” (DOM), yang meliputi elemen-elemen pada sebuah laman web. Oh jadi dia bahasa markup? 

Jadi, JS (JavaScript) itu adalah sebuah bahasa pemrograman yang dirancang untuk penggunaan pada browser (peramban) web. Kebanyakan Blogger pasti mengerti hal itu.

JavaScript dieksekusi pada client side (sisi pengguna = komputer pengguna): Sebuah server website mengirim JavaScript ke peramban milik pengguna, dan peramban tersebut menginterpretasikan dan menjalankan kodenya.

Semuanya terjadi dalam sebuah sandbox, yang menjaga agar JavaScript tidak menyentuh internal sistem dan mencegah malicious code (kode jahat) menginfeksi komputer pengguna.

2. Vanilla Script

Vanilla Script atau Vanilla JS itu sebenarnya adalah sama saja dengan Java Script, dia hanya memaintain setiap bait daripada kode dalam framework dan terus di maintain agar menjadi lebih kecil namun intuitif, sehingga memang lebih cepat daripada JavaScript, dibawah ini daftar situs pengguna vanilla:

1. Facebook
2. Google
3. YouTube
4. Yahoo
5. Wikipedia
6. Windows Live
7. Twitter
8. Amazon
9. LinkedIn
10. MSN
11. eBay
12. Microsoft
13. Tumblr
14. Apple
15. Pinterest
16. PayPal
17. Reddit
18. Netflix
19. Stack Overflow
20. DLL

Faktanya ketimbang kombinasi jQuery, Prototype Js, YUI, dan Web Toolkit, maka Vanilla telah dipergunakan oleh website-website besar secara umum. Terakhir saya baca Boostrap versi teranyar menggunakan Vanilla Script (atau Vanilla JS)

Oh jadi kita ketinggalan zaman gara gara kurang update? Saya periksa template yang saya buat, saya pakai JavaScript dan jQuery saya tidak ada gambaran bagaimana menggantikannya dengan vanilla he he he...

Bahkan saya belum mencoba menerapkannya, ternyata dia seperti bagian dari JavaScript secara terpisah dan terkadang direferensikan sebagai library , contoh kodenya dapat di pasang ke dalam HTML jika ingin menggunakan Vanilla:

<script src="path/to/vanilla.js"></script>

JavaScript banget ya...so, sebagian orang masih berpendapat: it's not really a framework or a library. 

3. Membuat navbar dengan vanilla script

wah bisa gak sih vanilla script di pasang ke blogger? Jika ia librari apakah kita harus pasang eksternal link? Itu dia persoalannya tadi.

Tentu saja bisa karena ia hanyalah javascript yang bekerja lebih detail di dalam framework, dan vanilla dapat bekerja di dalam halaman HTML blog, misalnya ketika kita ingin membentuk sebuah navbar dari sebuah navigasi menu, contohnya kita dapat meletakan vanilla script berikut di atas kode </body> di halaman HTML blogger:

    <script>const nav = document.querySelector(&quot;nav&quot;);
const supportPageOffset = window.pageXOffset !== undefined;
const isCSS1Compat = (document.compatMode || &quot;&quot;) === &quot;CSS1Compat&quot;;

let previousScrollPosition = 0;

const isScrollingDown = () =&gt; {
  let scrolledPosition = supportPageOffset
    ? window.pageYOffset
    : isCSS1Compat
    ? document.documentElement.scrollTop
    : document.body.scrollTop;
  let isScrollDown;

  if (scrolledPosition &gt; previousScrollPosition) {
    isScrollDown = true;
  } else {
    isScrollDown = false;
  }
  previousScrollPosition = scrolledPosition;
  return isScrollDown;
};

const handleNavScroll = () =&gt; {
  if (isScrollingDown() &amp;&amp; !nav.contains(document.activeElement)) {
    nav.classList.add(&quot;scroll-down&quot;);
    nav.classList.remove(&quot;scroll-up&quot;);
  } else {
    nav.classList.add(&quot;scroll-up&quot;);
    nav.classList.remove(&quot;scroll-down&quot;);
  }
};

var throttleTimer;

const throttle = (callback, time) =&gt; {
  if (throttleTimer) return;

  throttleTimer = true;
  setTimeout(() =&gt; {
    callback();
    throttleTimer = false;
  }, time);
};

const mediaQuery = window.matchMedia(&quot;(prefers-reduced-motion: reduce)&quot;);

window.addEventListener(&quot;scroll&quot;, () =&gt; {
  if (mediaQuery &amp;&amp; !mediaQuery.matches) {
    throttle(handleNavScroll, 250);
  }
});</script>

Letakan di atas </body>, demikian struktur template blogger telah tertata.

Jadi kita segera tahu kode tersebut telah di parse, ya disitu persoalanya tapi faktanya ia bekerja dengan baik. Artinya itu adalah Javascript yang bernama vanilla script. Akan tetapi karena ia bekerja dengan cara berbeda dalam framework, maka kita mengenalinya sebagai vanilla script.

Lalu Pasang  kode CSS berikut di atas kode </head>:

    <style>body {
  margin: 0;
  font-family: &#39;Lato&#39;, sans-serif;
}

* {
  box-sizing: border-box;
}

nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background-color: #eaeaea;
  transition: top 500ms ease-in-out;
      z-index:2000;
}

nav.scroll-up,
nav:focus-within {
  top: 0;
}

nav.scroll-down {
  top: -100%;
}

.links {
  display: flex;
  margin: 0 -1em;
}

.links a {
  display: inline-block;
  margin: 0 1em;
}

.logo {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

nav a {
  color: #0f0f0f;
  text-decoration: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

section {
  width: 65%;
  margin: 0 auto;
}

section h1 {
  font-size: 2rem;
}

section p {
  font-size: 1.25rem;
  line-height: 140%;
}

footer {
  padding: 1em;
  text-align: center;
  background-color: #FFDFB9;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer .heart {
  color: #DC143C;
}</style>

Terakhir letakan kode HTML berikut di bawah kode <body>:

<nav>
  <div class='logo'>
    <data:blog.title/>
  </div>
  <div class='links'>
    <a href=''>Link 1</a>
    <a href=''>Link 2</a>
    <a href=''>Link 3</a>
    <a href=''>Link 4</a>
  </div>
</nav>

Penutup:

Di atas tadi saya ada mengutip kata kata ahli, yakni: "Di masa depan tidak bisa koding sama saja seperti buta huruf" well, terserah kita mau setuju atau tidak, tapi waktu akan terus merambat ke masa depan dan lajunya tidak bisa ditahan oleh kita.

Buta huruf modern adalah: orang yang tidak mau membuka pikirannya, taklid dan merasa dirinya saja yang paling benar. Tidak mau belajar ilmu diluar keyakinannya, tidak perduli yang penting orang lain harus sama dengan dirinya. Jika tidak akan dianggap bukan golongannya. Padahal bagiamana dia akan melawan lawan lawannya jika dia tidak menguasai ilmu mereka?

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

The chronicle Javascript

Javascript mampu membuat halaman blog menjadi jauh lebih keren, tampilan tombol reaktif, navigasi, lazyload. Dll. 

Segala hal menjadi cantik dan itu tidak sepenuhnya dapat digantikan oleh trik trik CSS yang ada. 

Dan javascript sangatlah powerful jika dipergunakan dengan benar.  

Akan tetapi Javascript bisa berpotensi dan berubah menjadi anti SEO kalau kita kita menggunakannya dengan cara yang salah. 

Berikut contoh kasus kasusnya:

1. Lazyload Gambar.

Pemasangan lazyload pada gambar dapat mempercepat loading halaman, namun segera dengan signifikan mengurangi kemampuan mesin pencari dalam  merambati tag ALT pada gambar. Padahal gambar juga adalah konten yang sangat penting selain konten tulisan pada halaman blog. 

Itu sangat nyata sementara pencarian gambar sangat penting bagi SEO halaman blog, dan mesin pencari membaca tag yang kita tulis pada bagian alt dan titel gambar,  lalu mereka mengangkut tag gambar gambar tersebut ke hadapan pembaca. 

Melalui pemunculan gambar halaman blog kita dengan mudah ditemukan oleh pembaca dan itu terjadi karena mesin pencari telah menemukan gambar tersebut terlebih dahulu. 

Akan tetapi lazyload (baca Javascript) menahan atau menyembunyikan gambar gambar tersebut untuk sementara, dan mesin pencari terpaksa mengabaikannya. Sangat sederhana, bukan?

Jadi sebenarnya kita tidak perlu menggunakan lazyload untuk mempercepat loading halaman. Yang harus kita lakukan adalah memposting gambar dengan format yang benar dan ringan. 

Kecepatan selalu menjadi pertimbangan bagi SEO, termasuk kecepatan loading pada gambar namun alih alih menahan (memperlambat)  kemunculannya melalui lazyload, lebih baik melakukan best praktis melalui cara pengaturan, format dan ukuran. 

2. Navigasi halaman

Tidak terbantahkan, dengan javascript kita dapat membuat menu navigasi yang hebat dan menakjubkan terutama dalam hal penampilan. Dan navigasi menu blog misalnya sangat penting bagi sebuah blog karena ia dapat membantu menuntun pembaca kepada apa yang mereka cari.

 

Tapi ada bahayanya, Javascript kadang tidak mengikuti standard ketentuan web, dan ketika konten diletakan, ia jadi tersembunyi sehingga Google tidak dapat merayapinya. Sekalipun misalnya jika kita menggunakan framework javascript lain. 

Misalnya kita membuat tombol navigasi overlay yang scrollable atau bisa di scroll naik turun. Mesin pencari tidak akan menscroll navigasi, tanpa tambahan elemen lain yang menjadi sinyal penghubung itu akan tersembunyi dan diabaikan oleh mesin pencari. 

Google hanya membaca konten yang di render di dalam HTML tanpa perantara. Jika memiliki konten di dalam elemen lain namun ada teksnya di dalam HTML, maka Google dapat membaca dan mesin penelusur akan merayapinya. 

Untungnya manusia kadang kadang menscroll atau menggulir menu navigasi.  Dan ketika mereka manusia atau pengunjung mengklik sebuah tautan barulah hal itu akan menjadi sinyal kepada mesin pencari untuk menemukannya. 

Burukkah menggunakan Javascript? 

Pertanyaannya mengapa harus menggunakan Javascript? Ya karena sekalipun CSS dapat melakukan hal ini dan itu tadi, namun CSS belum lagi sehebat Javascript melakukannya. 

Yang nyata adalah Google bot tidak merayapi Javascript, ketika Google bot sedang merayapi HTML namun jika terdapat javascript di dalamnya maka di butuhkan usaha ekstra bagi mesin pencari untuk merender konten.

Dan ini dapat memperlambat loading halaman karena menurut laman uproer.com cara bekerjanya begini:

Tanpa Javascript:

1. Googlebot mengunduh HTML sejak awal
2. Googlebot merayapi tautan dalam sumber kode untuk menemukan laman baru
3. Googlebot mengunduh file CSS dan mengirim semua sumber daya untuk pengindeksan
4. Pengindeks Google, Kafein, mengindeks halaman

Dengan Javascript:

1. Googlebot mengunduh HTML awal
2. Googlebot mendeteksi JavaScript dan tidak menemukan tautan untuk dirayapi
3. Googlebot mengunduh file JS & CSS dan mengirim semua sumber daya ke Google's Web Rendering Service (WRS)
4. WRS memproses sumber daya sehingga konten dapat diindeks
5. Pengindeks Google, Kafein, mengindeks halaman
6. Tautan ditambahkan ke antrean perayapan Googlebot sehingga lebih banyak laman dapat ditemukan

Jadi isu isu yang diakibatkan oleh Javascript meliputi:

1. Rendering & pengindeksan tertunda
2. Waktu tunggu rendering
3. Unduhan file tidak ada atau tidak lengkap
4. Pengindeksan konten yang tidak lengkap yang tersembunyi di balik tombol atau tindakan pengguliran

Kesimpulan:

Tentu saja javascript sangat berguna sepanjang ia di pasang dengan benar untuk di fungsikan dengan benar pula di dalam halaman blog. Tidak mungkin menyingkirkan elemen elemen penting yang menggunakan javascript sama sekali dari halaman web.

Itu sebabnya mengapa banyak template template CSS hadir di dunia buat dipergunakan blogging. Namun jika pertanyaannya apakah Javascript itu penting? Semua pengembang menjawabnya YA. karena itu kita jadi terbiasa dengan framework framework Javascript berikut:

React

Angular

Vue.js

Dan berikut solusi SSR (Server-Side Rendering) yang di milikinya:

Next.js

Gatsby

Angular Universal

Nuxt.js

Ketika kita minta solusinya, pasti ada. Namun dengan harga lebih yang harus kita bayar...

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Dasar membuat game HTML sederhana menggunakan Javascript

Dulu programmer web membuat game menggunakan flash, namun flash kemudian mati sebelum saya sempat mempelajarinya. Itu zaman sudah lewat hari ini zamannya HTML5. Jadi saya mencoba mengutak atik mata pelajaran dasar HTML dan mulai belajar membuat game.

DEMO

Pernah kan kalian mendengar game sederhana bernama Flappy Bird? Juga sebelum sempat saya memainkannya, game tersebut sudah tidak populer lagi. Namun karena sempat menjadi sangat terkenal, saya juga berfikir gimana kalau membuat game tersebut menggunakan HTML?

Ya hanya bisa melalui HTML dan Saya sendiri tidak tahu bagaimana mengkonversikannya ke platform Android he he he...

Ternyata juga bisa. Artinya jika kalian bisa menggunakan HTML untuk buat tombol tombol animasi, berarti sekurang kurangnya kalian juga bisa membuat game menggunakan HTML. Walau harus memahami perintah dan logikanya.

Perhatikan Javascript berikut:

<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
myGamePiece = new component(30, 30, "yellow", 10, 120);
myScore = new component("30px", "Consolas", "white", 280, 40, "text");
myGameArea.start();
}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "red", x, 0));
myObstacles.push(new component(10, x - height - gap, "red", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].speedX = -1;
myObstacles[i].newPos();
myObstacles[i].update();
}
myScore.text="SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}


function moveup() {
myGamePiece.speedY = -1;
}

function movedown() {
myGamePiece.speedY = 1;
}

function moveleft() {
myGamePiece.speedX = -1;
}

function moveright() {
myGamePiece.speedX = 1;
}

function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<div style="text-align:center;width:480px;">
<button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">ke atas</button><br><br>
<button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">ke kiri</button>
<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">ke kanan</button><br><br>
<button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">ke bawah</button>
</div> 

Tidak usah di pelototi, yang penting kalian dapat gambaran dan perhatikan tombol tombol yang saya tulis dengan warna merah. Untuk memainkannya tombol tersebut harus kalian tekan agar objek pengganti flappy bird yang warna kuning tidak menabrak rintangan.

Untuk cotoh DEMO dan sekaligus memainkannya kalian dapat menekan tombol di bawah:

DEMO

Baiklah berikut dasar dasar pembuatan game agar paling sedikit dapat memberikan gambaran:

Elemen game di HTML.

1. Kanvas Game <canvas>

<canvas> adalah bidang ruang yang dapat di gambar di dalam HTML, elemen canvas ini sama saja seperti yang umumnya kita pergunakan pada aplikasi web biasa misalnya untuk blogging. Namun bedanya disini adalah elemen memiliki objek bawaan, diantara contohnya ada yang di sebut getContext("2d")

Elemen HTML <canvas> digunakan untuk menggambar grafik, dengan cepat, melalui skrip (biasanya JavaScript).

Elemen <canvas> hanya wadah untuk grafik. Kalian harus menggunakan skrip untuk benar-benar menggambar grafik. Canvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, teks, dan menambahkan gambar.

Jadi dalam hal ini untuk menggambar objek ke dalam canvas maka kita harus menggunakan Javascript yakni dengan cara menulis, menambahkan gambar dst.

2. Pergerakan Game

Nah setelah membuat elemen canvas dan menggambar objek sebuah game harus memiliki pergerakan, jadi Kita harus menambahkan instruksi pergerakan baik maju, mundur, naik, bergerak ke kanan, bergerak ke kiri. Lalu tambahkan instruksi kecepatannya juga.

3. Suara game

Ketika Kita harus menambahkan suara dan musik ke dalam game maka gunakan elemen <audio> HTML5 .

Untuk mempelajarinya kalian harus belajar dan berlatih menggunakan HTML, CSS dan Javascript.

4. Gravitasi Game

Supaya tampak real dan alami terkadang suatu game memiliki gaya yang menarik komponen game ke satu arah, seperti gravitasi yang menarik objek ke tanah.

Untuk menambahkan fungsionalitas ini ke konstruktor komponen kita, pertama-tama tambahkan properti gravitasi, yang menyetel gravitasi saat ini.  Kemudian tambahkan properti gravitySpeed, yang meningkat setiap kali kita memperbarui frame, contoh:

function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
}
}

Ada percepatan yang harus di hitung dimana objek semakin cepat pada saat berada semakin dekat dengan permukaan tanah.

5. Gambar 

Nah yang tidak kalah penting adalah onjek gambar sebagai 'tokoh tokoh' di dalam permainan yang akan di mainkan oleh pengguna.

Kita dapat menambahkan gambar dan menyimpannya dan lalu menambahkan URL atau alamat linknya ke dalam komponen game yang telah kita tulis.

Demikian langkah atau gambaran dasar membuat game HTML yang dapat saya bagikan hari ini. Semoga bermanfaat.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

APA ITU JSON?

sumber gambar: jsonview.com

Jika Anda tertarik mempelajari Javascript pada akhirnya sulit mengabaikan JSON karena JSON itu sendiri adalah Javascript dalam bentuk dan fungsi yang berbeda. Namun sebagai blogger dan tertarik pada dunia pengatahuan HTML mau tidak mau Anda harusnya paling sedikit memahaminya.

JSON adalah singkatan dari: JavaScript Object Notion 

Ia adalah sintaks untuk menyimpan dan bertukar data
Bentuknya adalah teks namun di tulis dengan notasi objek JavaScript

Mengapa menggunakan JSON?

Karena format JSON hanya teks, maka dengan mudah dapat dikirim dari dan ke server, dan digunakan sebagai format data oleh bahasa pemrograman apa pun.

JavaScript memiliki fungsi bawaan untuk mengonversi string, yang ditulis dalam format JSON, menjadi objek JavaScript asli:

JSON.parse()

Jadi, jika Anda menerima data dari server, dalam format JSON, Anda dapat menggunakannya seperti objek JavaScript lainnya.

JSON memiliki 4 kegunaan:

1. Bertukar Data

Saat bertukar data antara browser dan server, data hanya dapat berupa teks.

Karena JSON adalah teks, dan kita dapat mengonversi objek JavaScript apa pun menjadi JSON, dan mengirim JSON ke server.

Kita bahkan dapat mengonversi JSON apa pun yang diterima dari server menjadi objek JavaScript.

Dengan cara ini kita dapat bekerja dengan data sebagai objek JavaScript, tanpa penguraian dan terjemahan yang rumit.

2. Mengirim Data

Jika Anda memiliki data yang disimpan dalam objek JavaScript, Anda dapat mengonversi objek tersebut menjadi JSON, dan mengirimkannya ke server:

Contoh:

<!DOCTYPE html>

<html>

<body>

<script>

var myObj = { name: "Ujang", age: 17, city: "Batam" };

var myJSON = JSON.stringify(myObj);

window.location = "demo_json.php?x=" + myJSON;

</script>

</body>

</html>

3. Menerima data

Jika Anda menerima data dalam format JSON, Anda dapat mengubahnya menjadi objek JavaScript:

Contoh:

<!DOCTYPE html>

<html>

<body>

<p id="demo"></p>

<script>

var myJSON = '{"name":"Ujang", "age":17, "city":"Batam"}';

var myObj = JSON.parse(myJSON);

document.getElementById("demo").innerHTML = myObj.name;

</script>

</body>

</html>

4. Menyimpan Data

Saat menyimpan data, data harus dalam format tertentu, dan di mana pun Anda memilih untuk menyimpannya, teks selalu menjadi salah satu format legal.

JSON memungkinkan untuk menyimpan objek JavaScript sebagai teks.

Contoh:

<!DOCTYPE html>

<html>

<body>

<p id="demo"></p>

<script>

var myObj, myJSON, text, obj;

// Storing data:

myObj = { name: "ujang", age: 17, city: "Batam" };

myJSON = JSON.stringify(myObj);

localStorage.setItem("testJSON", myJSON);

// Retrieving data:

text = localStorage.getItem("testJSON");

obj = JSON.parse(text);

document.getElementById("demo").innerHTML = obj.name;

</script>

</body>

</html>

KESIMPULAN:

• JSON adalah singkatan dari Java Script Object Notation
• JSON adalah format pertukaran data yang ringan
• JSON "mendeskripsikan diri sendiri" dan mudah dimengerti dan dipelajari.
• JSON tidak bergantung pada bahasa (JSON menggunakan sintaks JavaScript, tetapi format JSON hanya teks. Sedangkan teks dapat dibaca dan digunakan sebagai format data oleh bahasa pemrograman apa pun.)

Sumber rujukan: w3school

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Adelina Sofyan

contributor biasanya hanya menulis artikel pendek

SHARE YA:

Cara menghapus Javascript yang tidak digunakan dari dalam template blogspot

Tidak fair rasanya jika tidak berbagi hal ini, namun saya ingin menyederhanakan masalah, apakah Kalian bersedia menggunakan halaman sederhana? Seharusnya tidak masalah jika mengacu pada peringatan google perihal elemen halaman suatu website: Kecepatan akan menjadi sinyal penting bagi mesin pencari, terutama setelah memasuki bulan may 2021 nanti Data Web Inti atau Web Vitals Core benar benar akan menjadi sinyal utama kepada mesin pencari.

Ibaratnya nanti dengan memiliki hal itu, halaman blog kita akan berkata keras kepada mesin pencari:

"Hai, Ini Gue"

Dan mesin pencari akan menoleh kepada kita dan berkata:

"Oh itu lu, mari gue pegang tangan lu biar gue antar ke atas sana"

Sederhana sekali bukan?

Semua orang ingin menuju ke pemeringkatan tinggi. Sementara yang tidak memiliki tiket ini tidak bisa berkata apa apa selain menunggu giliran yang datangnya entah kapan. Ktia lihat saja tanggal mainnya, namun yang jelas sebelum itu di tahun tahun Google telah memberikan warning pinalti antara lain:

• Pengindexan oleh mesin pencari hanya akan di utamakan untuk halaman web mobile, dalam beberapa kesempatan jika Kita sering masuk ke Google search tool telah terdapat notifikasi, bahwa prioritas halaman mobile akan di dahulukan dan halaman yang tidak responsif dan mobile akan di tinggalkan alias di abaikan.
• Pemeringkatan juga hanya akan di utamakan untuk halaman halaman mobile.
• Saran wajib agar memperhatikan kecepatan loading halaman dan kecepatan adalah sinyal kuat bagi mesin pencari untuk menempatkan halaman ke dalam pemeringkatan.
• Data web Inti tiba tiba menjadi populer akhir akhir ini.

Data Web Inti, dan hari ini itu hanyalah dianggap sebagai penyempurnaan akan tetapi sudah terlihat gelagatnya: Data web Inti erat kaitannya dengan cara blogging modern.

Pada dasarnya Data Web Inti mengklasifikasikan kecepatan dengan tiga kategori

• URL Buruk dengan warna merah
• URL Sedang dengan warna oranye
• URL Bai dengan warna hijau

Dan ini masih berlaku buat pengukuran kecepatan halaman mobile maupun pengukuran kecepatan halaman desktop. Namun halaman mobile di dahulukan (Saya curiga pada akhirnya pengukuran halamann desktop akan di tiadakan)

Untuk membuat template cepat sederhananya bisa seperti berikut:

• Gunakan template sederhana, atau template bawaan blogger terbaru seperti contempo, emporio, soho dan notable. Sederhana berarti tidak menggunakan widget berlebihan, tidak menggunakan warna jreng berlebihan, tidak memasang script terlalu banyak. Sederhana jelas ringan. Google dan mesin pencarinya sangat menyukainya. Zaman sekarang template berhias hias boleh dikatakan tidak banyak lagi manfaatnya.
• Gunakan gambar ringan, konversikan saja ukurannya menjadi 500x276 px (=37.2kb) misalnya. Robah formatnya menjadi JPG atau lebih baik lagi jika WEBP.
• Hapus Javascript yang tidak di gunakan.

Nah kita membahas poin terakhir saja: Cara menghapus Javascript yang tidak di gunakan. Ini biasanya sering di ajukan melalui saran oleh halaman penguji kecepatan PageSpeed. Namun kode nya sendiri tidak kelihatan bagaimana mau menghapusnya? Kode tersebut biasanya di tulis pada tool pengukur kecepatan Pagespeed selalu terdapat catatan: Buang javascript yang tidak terpakai dan di beri contoh kode sbb:

https://www.blogger.com/static/v1/widgets/1791449097-widgets.js

Dimanapun Anda mencari kode tersebut di dalam template tidak akan nemu karena itu adalah terkait dengan kebijakan cache google. Cara membuangnya (sepertinya masih berlaku) adalah hapus kode tag penutup </body> dan lalu ganti dengan kode berikut:

&lt;!--</body>--&gt;<script>document.write="&lt;/bo"+"dy&gt;";</script>

lalu SAVE template. Cara ini effektif namun ada peringatan dari kami.

Peringatan: mengganti kode </body> dengan kode di atas dapat berakibat kehilangan fungsi tombol REPLY komentar. Jujur saja saya belum menemukan cara mengatasinya. Jika kalian merasa keberatan, hapus kembali kode tersebut dan ganti dengan </body> kembali.

Jadi biasanya pengguna akan merobah opsi komentar dengan opsi Disqus ketimbang mempergunakan sistem komentar blogspot default. Namun jika ingin mengembalikan fitur reply hapus saja kembali &lt;!--</body>--&gt; dan document.write="&lt;/bo"+"dy&gt;";</script> pada tag penutup </body> di atas tadi. 

Kita bisa mengganti form komentar dengan sistem komentar disqus jika diperlukan.

Kita juga dapat menemukan problem yang sama pada template template blogger blogspot AMP yang di buat dengan opsi komentar pihak ketiga Disqus ketimbang opsi komentar default (bawaan) blogger. kebetulan saya juga sedang membuat template AMP untuk dipergunakan pada halaman blog percobaan, jika sukses dan terbukti valid pasti akan saya bagikan.

Bagaimanapun opsi di atas hanyalah pilihan, bukan?

SHARE YA:

APAKAH CREDIT FOOTER PADA TEMPLATE BLOGGER ITU?

Yaitu kredit berbentuk tulisan dari pembuat template sebagai penanda hak cipta atau copyright, sebagian kredit ini biasanya di bungkus dengan kode script untuk menyamarkannya yang apabila pengguna mencoba menghapusnya maka mereka akan otomatis berpindah mengunjungi halaman si pembuat template.

Letaknya di bagian paling bawah halaman web atau halaman blog dan tampil baik pada bagian halaman homepage maupun halaman konten suatu website atau blog.

Yang penting adalah apa sih link kredit footer redirect itu?

Kalau mau di sebut 'gembok' pengaman istilahnya terdengar gak biasa juga. Tapi pihak ketiga yang membuat template premium versi gratis menggunakannya dengan beberapa jenis teknik atau triks yang cukup pintar. Sesungguhnya tekniknya itu ke itu saja, contohnya:

• Kalau kalian menggunakan template versi gratis dan mencoba menghapus link kredit 'template by soraTemplates' misalnya, eh blog kalian teralih ke halaman mereka.
• Lalu perhatikan fungsi navigasi menu kehilangan fitur dropdown, search button dsb.
• Atau sticky header dan sticky sidebar menghilang alias tidak berfungsi lagi

Lolz...kita kena diakalin, link tersebut adalah pembungkus paket paket perintah ke widget widget tertentu juga menjadi link re-direct ke situs pendesain template melalui script javascript yang contohnya, telah di Obfuscated. Sekarang kita membahas seperti apa link re-direct itu. Sebenarnya ada beberapa matode. Namun perhatikan salah satunya saja terlebih dahulu:

Contoh kode Obfuscated.

Berikut contoh kode kredit footer.

<footer class='footerku' id='footerku'> <span class='credit-link'> Template designed By [COLOR="#FF0000"]<a href='HTTPS://WWW.EDITBLOGTEMA.NET' id='credit' title='editblogtema'>EDITBLOGTEMA</a>[/COLOR]</span> </footer> 

Contoh setelah di Obfuscated:

<script type='text/javascript'>
    //<![CDATA[
    var summary = 38;
    var ry = "<h4>Similar Posts</h4>";
    rn = "<h5>No related post available</h5>";
    [COLOR="#FF0000"]eval(function(w, i, s, e) {
        var lIll = 0;
        var ll1I = 0;
        var Il1l = 0;
        var ll1l = [];
        var l1lI = [];
        while (true) {
            if (lIll < 5) l1lI.push(w.charAt(lIll));
            else if (lIll < w.length) ll1l.push(w.charAt(lIll));
            lIll++;
            if (ll1I < 5) l1lI.push(i.charAt(ll1I));
            else if (ll1I < i.length) ll1l.push(i.charAt(ll1I));
            ll1I++;
            if (Il1l < 5) l1lI.push(s.charAt(Il1l));
            else if (Il1l < s.length) ll1l.push(s.charAt(Il1l));
            Il1l++;
            if (w.length + i.length + s.length + e.length == ll1l.length + l1lI.length + e.length) break;
        }
        var lI1l = ll1l.join('');
        var I1lI = l1lI.join('');
        ll1I = 0;
        var l1ll = [];
        for (lIll = 0; lIll < ll1l.length; lIll += 2) {
            var ll11 = -1;
            if (I1lI.charCodeAt(ll1I) % 2) ll11 = 1;
            l1ll.push(String.fromCharCode(parseInt(lI1l.substr(lIll, 2), 36) - ll11));
            ll1I++;
            if (ll1I >= l1lI.length) ll1I = 0;
        }
        return l1ll.join('');
    }('8f8991u2z2829333916243q01211m25312q1b3v2c1d3q011z2k3q01222k3v3u37262t203p112238231s27352z14212x252z1a3u29111z38251s27332z1632281w1z121611133v2b2q192z241u3u2v2z2n113w262c133x2b2q172z2611121m233e1i2e2936182x3u101z1o380y101z3b233x2z2938182x3s10111o2e162t3b233x29213x3b233v29233x111z2s2911222s271u3u291p2o1i27222o2c1z2314193v111122223316312q193v111k1v332z1d322p2c1z3w2o211o1e27311q1m23111s273r173126162c1c3e', 'f784611326f3a308d8b74df064e321d9'));[/COLOR] //]]>  
    $(document).ready(function() {
        $( & quot;.taze & quot;).click(function() {
            $( & quot;.jeep & quot;).slideToggle( & quot; normal & quot;);
        });
    });
    $(document).ready(function() {
        $( & quot;.tabe & quot;).click(function() {
            $( & quot;.deep & quot;).slideToggle( & quot; normal & quot;);
        });
    }); </script>

Di bawah halaman template (bagian footer) tertulis:

Template designed By: editblogtema.

Yang apabila kalian hapus maka saat membuka 'sim salabim, kalian berada si Homepage halaman editblogtema! (Tapi editblogtema tidak memiliki script beginian).
Banyak pemula yang keberatan dengan hal ini terutama kalau tiba tiba dengan menggunakan template tersebut mereka malah jadi mengakses halaman blog orang lain, halaman blog sendiri bagaimana? Tentu saja hal itu terjadi karena:

• Kredit footer adalah trademark, hak cipta branding dan menandai siapa pemilik desain templatenya
• Kredit footer sekaligus dapat menarik link ke situs pembuatnya
• Kredit footer dapat menaikan trafik pengunjung ke situs pemiliknya
• Kredit footer dapat di jadikan tool pengontrol hak cipta..

Ada banyak matode mengunci dan mengamankan kredit hak cipta

Ya contoh di atas hanyalah salah satu contoh menggunakan matode obsfuscated, Berikut matode matode yang dapat di terapkan:

1. Eval
2. Array
3. _Number
4. JSFuck
5. JJencode
6. AAencode
7. URLencode
8. Packer
9. JS Obfuscator
10. My Obfuscate

Disamping sepuluh tool di atas ada beberapa teknik menyamarkan kode di dalam template menggunakan HEX Decoder. Namun yang paling umum dipergunakan adalah Eval JS Obfuscator, My Obfoscate, JSFuck.

Contoh kode yang telah di eval:

function looseJsonParse(obj){ return Function('"use strict";return (' + obj + ')')(); } console.log(looseJsonParse( "{a:(4-1), b:function(){}, c:new Date()}" ))

Beberapa jenis template kami temukan juga dengan kombinasi eval dan Obfuscate. Jika kalian ingin mengurai kode tersebut dapat dilakukan dengan menggunakan tool online.

Linknya: _https://lelinhtinh.github.io/de4js/

Pastekan kode yang kalian curigai ke dalam halamannya (seperti terlihat pada gambar).

Mengenskripsi kode script

Jika kalian telah belajar programming, tentu hal di atas jauh lebih mudah di atasi.

Kalian dapat mengenali kode kode yang menggunakan berbagai macam matode penyamaran tersebut di dalam template dengan rajin rajin memperhatikannya, dengan mengenalinya kita akan lebih mudah memodifikasi, menghapus atau meng-enskripsi ulang kode kode tersebut, atau...membiarkannya saja soalnya para pembuatnya tidak meminta bayaran templatenya di pakai, mereka hanya ingin agar kredit footer itu tidak di hapus....

Tapi link tersembunyi dan disamarkan itu sering menimbulkan kecurigaan dan bahaya lho..

Well demikian sekilas gambaran perihal kredit link yang dapat saya sampaikan dalam kesempatan ini. 

Tulisan ini hanya bersifat pengetahuan dasar ya guys, saya akan menulis teknik teknik berikut pada konten khusus setelah mendapatkan cara paling sederhana buat penyampaiannya melalui konten tulisan dan kalau bisa sekaligus dalam bentuk konten video.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

MEMBUAT TEMPLATE BLOGGER DENGAN HTML, CSS DAN JAVASCRIPT (BAG:1)

Quality Templates. Membuat template sendiri adalah sangat mungkin bagi siapa saja terutama blogger. Banyak keuntungan yang kita dapatkan jika telah bisa membuat template sendiri di samping kepuasan hati tentu saja. Contohnya:

blogger layout

• Meningkatkan pengetahuan web
• Meningkatkan ketrampilan desain web
• Meningkatkan pengatahuan koding web seperti HTML, CSS dan JavaScript
• Memiliki template buatan sendiri yang dapat di sesuaikan dengan selera kita sendiri
• DLL

Poin terakhir itu keren. Semahal dan se premium apapun template yang kita beli dari website penjual template, bentuk dan ciri cirinya akan mirip jika di gunakan oleh orang banyak. Contohnya walaupun telah di robah warna warni template viomagz tetaplah viomagz buatan Mas Sugeng. Tidak ada totalitas yakni sebuah halaman web dengan ciri ciri khas dirinya sendiri.

Membuat template sendiri membutuhkan pengetahuan, dan pengatahuan itu berguna sekali bukan hanya untuk membuat template tapi juga untuk hal hal lain di luar itu. Pengatahuan yang sebenarnya telah di ajarkan di bangku sekolah: HTML, CSS dan JavaScript.

Dengan catatan apabila kita bloggingnya menggunakan platform blogger blogspot karena platform ini berbasis HTML. Jika kalian bloggingnya melalui CMS seperti Wordpress org atau igniester, maka kalian harus memiliki pengetahuan PHP yang lebih baik karena platform platform tersebut di buat berbasis PHP. Namun biar demikian pengatahuan HTML tetaplah penting disana, jika kalian ingin membuat template.

Kita sedang membahas peralatan membuat template blogger blogspot. Saya suka karena saya bisa mengutak atik 2 peralatan dasar template blog:

• HTML
• CSS
• JavaScript

Lho kemana XML? Walaupun elemen yang saya sebutkan penting untuk material desain, namun pada pembuatan template bagian XMLnya cukup mengutak atik yang sudah ada saja deh, cukup main standar dulu.

1. HTML

Contoh dasar penulisan HTML adalah sbb:

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>ini bagian heading</h1>
<p>dan ini bagian pragraf.</p>
</body>
</html>

Kalau mau di ikuti ada berton ton contoh penggunaan HTML, namun faktanya untuk membuat atau mendesain ulang sebuah template blogger, HTML itu wajib di pelajari, karena:

• HTML itu adalah standar bahasa Mark Up untuk halaman WEB
• Dengan mempelajari dan menguasai HTML kita dapat membuat halaman website kita sendiri
• HTML amat mudah di pelajari.

2. CSS

CSS nyaris tidak terpisahkan dari HTML terutama jika terkait dengan desain WEB, contoh penulisannya adalah sebagai berikut:

body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}

Jadi jika HTML dapat mendeskripsikan tampilan suatu halaman web CSS dapat membuat style untuk merubah antarmukanya sesuai dengan keinginan kita. Misalnya untuk mewarnai background, font dan juga untuk membentuk border pada halaman web.
Untuk membuat template CSS sangat penting di pelajari karena:

• Ia adalah bahasa yang dapat mendeskripsikan style suatu dokumen HTML
• CSS mendeskripsikan bagaimana HTML di tampilkan dan di lihat orang di halaman WEB.

3. Javascript

Belajar Javascript adalah wajib karena JavaScript adalah bahasa pemrograman HTML dan WEB yang tidak dapat kita tinggalkan pada saat membuat sebuah template menjadi hidup, contoh kode JavaScript:

<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

Kesimpulannya adalah:

1. HTML berguna untuk membuat dan menentukan konten pada halaman web
2. CSS untuk membuat dan menentukan tataletak halaman web
3. JavaScript untuk memprogram perilaku halaman web (meskipun dalam beberapa hal CSS dapat melakukan hal yang sama)

Kita akan mendiskusikan bagaimana ketiga peralatan tempur diatas dapat di pergunakan untuk mendesain dan membuat template HTML untuk diguanakan dalam membangun halaman web sesuai dengan keinginan kita pada kesempatan penulisan berikutnya.

SHARE YA:

JAVASCRIPT ADALAH SUPERMAN DI HALAMAN HTML

Mengapa Javascript masih begitu powerful?

Terdapat gambar bola lampu di dalam artikel ini yakni gambar bola lampu nyala namun bola lampu tersebut bisa dimatikan dan dihidupkan kembali melalui tombol action yang di buat melalui JavaScript, setelah saya selesai menuliskan sekilas penjelasan perihal JavaScript dibawah ini, kalian bisa menyalakan dan memadamkan bola lampu di atas melalui tombol yang tersedia di kiri dan kanan gambar dari sumber yang sama (namun dengan skala diperkecil) di bagian bawah postingan ini.

Gambar Logo JS

Meskipun seluruh bahasa program terus berkembang, dan beberapa sebagiannya telah mati, namun JavaScript hingga kini masih sangat popular. JavaScript juga masih sangat mudah di pelajari karena sintaks sintaksnya yang mirip bahasa manusia yang biasanya selalu kalian pakai itu lho. Tidak seperti bahasa mesin tingkat pertama yang binary, JavaScript adalah bahasa tingkat tinggi yang sangat mudah di fahami. Asalkan,....kalian meminati bahasa bahasa cerdas dunia ini.

Karena Kemampuan JavaScript antara lain adalah:

• Dapat merubah konten HTML
• Dapat merubah atribut atribut HTML
• Dapat merubah Style CSS
• Dapat menyembunyikan elemen elemen HTML
• Kalau dapat menyembunyikan maka JavaScript juga mampu menampilkan elemen elemen HTML yang tersembunyi.

Di dalam template blogger kita menempatkan perintah di bawah tag <body> namun sesungguhnya dia bisa ditempatkan dengan baik pada atribut atribut HTML. Contoh yang saya tunjukan di bawah adalah bagaiamana JavaScript mampu merubah nilai daripada atribut atribut HTML:

<center> //hanya untuk re-position//
<button onclick="document.getElementById('myImage').src='https://1.bp.blogspot.com/-GsTEApA_NUc/Xd5WU8emH4I/AAAAAAAApkQ/6N17ZmTWjG0AuSv3XcwU2Lb0IOc3_Rd-ACEwYBhgL/s1600/bulb-close-up-electricity-energy-577514.jpg'">Nyalakan lampu</button>
<img id="myImage" src="https://1.bp.blogspot.com/-GsTEApA_NUc/Xd5WU8emH4I/AAAAAAAApkQ/6N17ZmTWjG0AuSv3XcwU2Lb0IOc3_Rd-ACEwYBhgL/s1600/bulb-close-up-electricity-energy-577514.jpg" style="width: 100px;" />
<button onclick="document.getElementById('myImage').src='https://1.bp.blogspot.com/-Zjoskz9bZk0/Xd5WbFz6FHI/AAAAAAAApkU/sZM4yznW_poMiwzingwI_h6ht4Onh_MuACLcBGAsYHQ/s1600/20191127_175429.jpg'">Matikan Lampu</button></center> //hanya untuk re-position//

Pada contoh diatas membuat "Tombol saklar" untuk menyalakan dan mematikan lampu melalui cara menekan tombol "menyalakan" dan "mematikan" bola lampu listrik, cobalah tekan kedua tombol dibawah gambar di bawah ini: (pada hape "matikan lampu" berada diatas gambar, sedangkan "nyalakan lampu" berada di bawah).

Coba tekan tombol "Matikan Lampu"  dan kemudian tekan "Nyalakan Lampu" pada gambar di bawah ini:

Contoh diatas hanyalah salah satu dari trik yang dapat kita buat dengan JavaScript. Jika kalian berminat mempelajari bahasa bahasa pemrograman cerdas, maka JavaScript tidak bisa di abaikan.

Cara kerjanya terlihat dari kode diatas, "onclick" java script berguna untuk mengganti gambar yang satu kepada gambar yang lain, sehingga menghasilkan efek bola padam dan bola nyala. Para hacker bisa memanfaatkan fungsi ini untuk mematikan sistem penerangan di dunia nyata yang terhubung ke server dengan memanipulasi perintah perintah di dalam sistem.

Baca Juga: CARA YANG BENAR MEMASANG TOMBOL TOGGLE DARK MODE

Melalui blog ini saya hanya mencoba menjelaskan sesingkat dan sesederhana mungkin kegunaan bahasa bahasa pemrograman dan web. Paling tidak untuk memotivasi teman teman agar memiliki semangat belajar selagi usia kita masih sangat muda..

SHARE YA:

CARA MEMASANG NAVBAR MOBILE FRIENDLY PADA BLOG

Pentingnya membuat navigasi (navbar) pada blog memang telah diakui oleh para blogger. Dan juga dianjurkan oleh para pakar website.

mobile navbar

Buktinya hampir setiap template blog premium berbeli selalu di pasang navigasi dengan beraneka warna menu. Menu memang bermanfaat menavigasi pengunjung dalam mengeksplorasi halaman blog kita. Di samping itu navbar menu blog masih dapat mengoptimalkan mesin pencari dalam mempetakan konten konten blog kita.

Untuk manusia, hal yang menarik adalah navigasi menu yang berbeda, penuh warna, ada hiasan ikon okon keren, fresh, simpel dan efektif.

Untuk mesin pencari tentu saja memiliki kriteria tersendiri. Kali ini saya akan mengajak kalian untuk membuat menu navigasi mobile yang cocok sekali untuk di buka melalui ponsel dan tablet. Menu seperti ini selain sederhana juga sangat menghemat ruang. Perhatikan contohnya dibawah ini:

Anissa Page

News Contact About

Navbar vertikal

contoh ini untuk mendemokan bagaimana navigasi menu blog terlihat pada saat di buka melalui halaman mobile (ponsel/hape).
Klik tombol menu hamburger (garis tiga lapis) di sudut kanan atas halaman, untuk membuka menu menu.

Kalian dapat mengklik hamburger menu atau garis susun tiga  ☰  untuk menampilkan menu yang akan turun secara vertikal. KLIK kembali untuk mengembalikan posisi navbar.

Cara memasangnya:

1. CSS
CSS adalah bagian penting dari HTML, ia yang mendeskripsikan bagaimana nanti HTML di visualkan di halaman web.

Masuk ke pengaturan atau dasbor blog

• Pilih theme
• Lalu akan muncul menu baru blogger cari titik tiga sweetie berikut: ፧dan klik maka akan muncul menu seperti terlihat pada gambar berikut:

Opsi edit menu blogger

• Pada menu yang muncul pilih "Edit HTML" pada halaman editor HTML yang telah terbuka cari kode </head> dan letakan kode CSS berikut tepat diatasnya:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: transparent;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: transparent;
color: white;
}
</style>

 2. HTML
Letakan kode berikut tepat di bawah </head>:

<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a class="active" href="https://www.blogger.com/u/1/blogger.g?blogID=3894474860842702694#home">Anissa Page</a>
<div id="myLinks">
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
<a class="icon" href="javascript:void(0);" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left: 16px;">
<h3>

3. JavaScript

Cari kode </body> dan letakan kode berikut tepat diatasnya:

<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>

SAVE template.

Dapat di terapkan pada hampir semua template bawaan (default) blogger.

SHARE YA: