Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts
Situs Encrypt & Decrypt JavaScript Yang Sering Digunakan Para Blogger

Situs Encrypt & Decrypt JavaScript Yang Sering Digunakan Para Blogger


Dalam dunia maya atau internet sangat diperlukan yang namanya pengamanan data karena data yang tersebar di dunia maya sangatlah sensitif dan harus diwaspadai karena dapat dicuri oleh orang atau pihak yang tidak bertanggung jawab.

I. Pengertian Encrypt

Encrypt atau enkripsi adalah suatu metode yang digunakan untuk membuat suatu kata atau file menjadi rahasia sehingga hanya orang yang dituju saja yang bisa membukanya.

Didalam lalu lintas jaringan internet yang sangat banyak, data akan mengalir terus sampai tujuan. Selama dalam perjalanan, data tersebut akan di enkripsi untuk mencegah pihak ketiga atau orang-orang yang tidak bertanggung jawab mengambil data tersebut.

Berikut Situs yang Sering Digunakan Encrypt Dan Contoh kode yang Belum di Encrypt & Sesudah Di Encrypt.

Contoh Kode javascript original
var encodedStr = 'hello & world';
var parser = new DOMParser;
var dom = parser.parseFromString(
    '' + encodedStr,
    'text/html');
var decodedString = dom.body.textContent;
console.log(decodedString);

1. Hasil Encrypt dari Javascript Obfuscator
var _0x8393=["\x68\x65\x6C\x6C\x6F\x20\x26\x61\x6D\x70\x3B\x20\x77\x6F\x72\x6C\x64","\x3C\x21\x64\x6F\x63\x74\x79\x70\x65\x20\x68\x74\x6D\x6C\x3E\x3C\x62\x6F\x64\x79\x3E","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x70\x61\x72\x73\x65\x46\x72\x6F\x6D\x53\x74\x72\x69\x6E\x67","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x62\x6F\x64\x79","\x6C\x6F\x67"];var encodedStr=_0x8393[0];var parser= new DOMParser;var dom=parser[_0x8393[3]](_0x8393[1]+ encodedStr,_0x8393[2]);var decodedString=dom[_0x8393[5]][_0x8393[4]];console[_0x8393[6]](decodedString)

2. Hasil Encrypt dari dean.edwards.name
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0 1=\'7 &8; 9\';0 2=a b;0 3=2.c(\'<5>\'+1,\'e/4\');0 6=3.5.f;g.h(6);',18,18,'var|encodedStr|parser|dom|html|body|decodedString|hello|amp|world|new|DOMParser|parseFromString|doctype|text|textContent|console|log'.split('|'),0,{}))

3. Hasil Encrypt dari Hex Encode {pilih tab hex Js}
\x76\x61\x72\x20\x65\x6e\x63\x6f\x64\x65\x64\x53\x74\x72\x20\x3d\x20\x27\x68\x65\x6c\x6c\x6f\x20\x26\x61\x6d\x70\x3b\x20\x77\x6f\x72\x6c\x64\x27\x3b\xa\x76\x61\x72\x20\x70\x61\x72\x73\x65\x72\x20\x3d\x20\x6e\x65\x77\x20\x44\x4f\x4d\x50\x61\x72\x73\x65\x72\x3b\xa\x76\x61\x72\x20\x64\x6f\x6d\x20\x3d\x20\x70\x61\x72\x73\x65\x72\x2e\x70\x61\x72\x73\x65\x46\x72\x6f\x6d\x53\x74\x72\x69\x6e\x67\x28\xa\x20\x20\x20\x20\x27\x3c\x21\x64\x6f\x63\x74\x79\x70\x65\x20\x68\x74\x6d\x6c\x3e\x3c\x62\x6f\x64\x79\x3e\x27\x20\x2b\x20\x65\x6e\x63\x6f\x64\x65\x64\x53\x74\x72\x2c\xa\x20\x20\x20\x20\x27\x74\x65\x78\x74\x2f\x68\x74\x6d\x6c\x27\x29\x3b\xa\x76\x61\x72\x20\x64\x65\x63\x6f\x64\x65\x64\x53\x74\x72\x69\x6e\x67\x20\x3d\x20\x64\x6f\x6d\x2e\x62\x6f\x64\x79\x2e\x74\x65\x78\x74\x43\x6f\x6e\x74\x65\x6e\x74\x3b\xa\x63\x6f\x6e\x73\x6f\x6c\x65\x2e\x6c\x6f\x67\x28\x64\x65\x63\x6f\x64\x65\x64\x53\x74\x72\x69\x6e\x67\x29\x3b

II. Pengertian Decrypt

Decrypt atau dekripsi adalah suatu metode yang digunakan untuk mengubah atau menerjemahkan file rahasia yang dienkripsi menjadi pesan asli. Dekripsi ini kebalikan dari enkripsi, kita tahu bahwa enkripsi itu untuk membuat file menjadi rahasia sementara dekripsi ini untuk membuka file rahasia tersebut.

Berikut Situs yang Sering Digunakan Decrypt untuk membuka kode yang sudah Di Encrypt

Masuk ke websitenya Beautifier.io jika ada kode yang belum sempurna setelah decryption copykan kode di situs ini untuk menyempurnakannya.

IV. esprima.org {Validasi Script}
Masuk ke websitenya esprima, paste-kan kode script dari langkah terakhir. Ini langkah tambahan aja, untuk memastikan apakah script yang di Decrypt tadi sudah benar atau belum.


Pengertian dan Cara Kerja Google Adsense

Pengertian dan Cara Kerja Google Adsense

Bagi para pemilik blog dan website, mungkin Google Adsense sudah menjadi salah satu produk yang cukup mereka kenal.

Karena cita-cita setiap pemilik blog, pastinya ingin bisa mendaftarkan blog miliknya ke Google Adsense.


Di era wawasan teknologi dunia terbuka, Google AdSense menjadi semakin populer di kalangan pengguna internet. Keduanya ditawarkan kepada pembuat web Blogger & YouTuber. Bagi Anda yang sudah lama berkecimpung di dunia internet khususnya blogger, mungkin sudah tidak asing lagi dengan program periklanan dari Google ini. Namun bagi sebagian orang, masih ada yang belum mengetahui apa itu Google AdSense. Pada artikel ini akan menjelaskan secara detail apa itu artinya, cara kerjanya, manfaatnya, dan cara mendaftar Google AdSense.


Pengertian Google AdSense

Seperti disebutkan di atas, AdSense adalah program periklanan yang dimiliki oleh Google. Sebenarnya, Google AdSense bukan satu-satunya program periklanan di Internet. Selain Google AdSense, ada banyak program periklanan seperti PropellerAds, Media.net, MGID dan masih banyak lagi. Tapi bisa dibilang Google AdSense adalah yang terbesar. Dari website besar hingga blog kecil, banyak orang menggunakan Google AdSense sebagai sumber penghasilan. Apa yang membuat Google AdSense populer di kalangan pemilik situs web adalah algoritmanya. Google AdSense menampilkan iklan yang sesuai dengan konteks artikel di jaringan tempat artikel diterbitkan. Jadi, misalnya, jika Anda membaca artikel di sebuah situs web teknologi, iklan yang muncul kemungkinan besar tentang teknologi. Dengan begitu, potensi pendapatan juga akan lebih besar, karena peluang menarik perhatian pembaca juga akan lebih besar.


Cara Kerja Google AdSense

Cara kerja Google AdSense sebenarnya cukup sederhana, kurang lebih seperti ini: blogger atau pemilik website yang sudah memiliki banyak pengunjung dan ingin menghasilkan uang dari mereka dapat mendaftarkan website atau blog mereka ke Google AdSense. Jika permohonan diterima, pemilik situs akan diberikan akun Google AdSense. Selanjutnya, Anda perlu menempelkan kode Google AdSense ke blog atau situs web Anda. Anda mendapatkan uang setiap kali pengguna meng click iklan yang berada di Website/YouTube kalian. Setiap tanggal 22, penghasilan Anda akan ditransfer ke rekening bank yang terdaftar di akun Google AdSense Anda.


Layanan jasa periklanan yang dikelola oleh Google ini, menggunakan sistem bagi hasil untuk setiap iklan yang tayang dan diklik oleh pengguna.


Pembagian hasilnya sendiri dibagi menjadi dua kategori

  • Iklan konten 68% untuk penayang
  • Iklan penelusuran 51% untuk penayang

Selain dua kategori penayangan iklan untuk web di atas, sebenarnya Google Adsense juga memiliki kategori lainnya, yaitu:

  • Host Konten (blogspot)
  • Host Youtube
  • Google Play Newsstand (Admob)


Cara mendaftar Google AdSense bisa dikatakan gampang-gampang susah. Gampang karena semua persyaratannya sudah dijelaskan oleh Google. Susah karena terkadang pengajuan kita bisa ditolak. Tapi, secara garis besar untuk mendapatkan sebuah akun Google AdSense alurnya akan seperti ini:


Buat blog/web > Daftar AdSense > Diterima/ditolak


Jika diterima, kamu bisa langsung menempelkan kode iklan ke blog atau web yang kamu kelola. Cukup mudah bukan?


Yang Harus Di Waspadai dalam Adsense


Google Adsense memang sebuah program yang menggiurkan, jika berhasil dijalankan dengan sukses, bayangkan seorang adsenser yang sukses meraup keuntungan yang dengan menjadi publiser adsense dengan bermodalkan blog gratis atau web berbayar. Adsenser yang sukses memang kadang membuat banyak orang iri karna memang menggiurkan.


Bayangkan bagaimana orang yang bekerja dari rumah atau warnet tetapi mereka mendapat penghasilan dolar. Tak heran banyak orang yang menghalalkan segala cara dalam berburu dolar di adsense. Namun bukan dolar yang diraih atau di dapat malah banned massal yang di dapat.


Memang dalam prakteknya sangat sulit untuk menipu google. Ada beberapa blogger mencoba berbagai trik, seperti menggunakan proxy untuk menyamarkan IP mereka atau merubah IP mereka ke negara lain. Kemudian mengklik iklannya sendiri, namun tetap tidak bisa dan malah menuai hasil yang merugikan berupa BANNED oleh Google.


Yang jelas entah teknologi apa yang digunakan oleh google, sehingga mereka bisa mengetahui semua, tapi pada dasarnya, apabila ada kecendrungan peningkatan pendapatan dolar secara drastis dimana sebelumnya belum pernah terjadi di akun google adsense anda, maka hal ini bisa menimbulkan sesuatu hal yang sangat mencurigakan.

Cara Memasang Adblock Killer di Blogger

Cara Memasang Adblock Killer di Blogger

 


AdBlock adalah ekstensi browser yang berfungsi mencegah iklan untuk muncul. Tujuan instalasi Adblock biasanya agar pengunjung bisa membaca artikel dengan nyaman tanpa perlu melihat iklan yang berseliweran. Jadi ketika Anda menginstal script anti-adblock ini maka blog Anda akan muncul secara utuh pada pengguna yang telah menginstal Adblock di browser mereka. 


Dapat dikatakan bahwa Adblocker adalah musuh terburuk Blogger yang memonetisasi blog dengan Google Adsense, Chitika atau iklan lainnya menggunakan kode JavaScript. Jika pengunjung blog Anda memasang script anti-iklan di browser mereka, maka iklan Anda tidak akan muncul di browser mereka dan situasi ini tentu saja merugikan kita. Untuk mengatasi hal ini kita perlu menambahkan script Adblock Killer pada blog.


Fungsinya yaitu dengan memberikan notifikasi kepada pengunjung untuk menonaktifkan ekstensi Adblock untuk situs ini namun dengan tampilan berbeda. Bagi yang ingin memasangnya silakan ikuti langkah berikut ini.


Cara memasang AdBlock Killer Di Blog

Pertama masuk ke Dashboard Blogger > Tema > Edit HTML dan letakkan script di bawah ini sebelum tag </head>.

<script src='https://rawcdn.githack.com/Fajardjoekerz/djoekerz/579158f5ce7e0629d601f578f52f21fa5ea97071/Killer%20block.js' type='text/javascript'/>

Selanjutnya Letakkan CSS dibawah ini agar tampilan AdBlock Lebih Menarik dipandang, Letakkan Sebelum tag </style>

/* AdBlock Killer Fd */#levelmaxblock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}
#levelmaxblock .header{margin:0 0 15px 0}
#levelmaxblock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto}
#levelmaxblock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}
#levelmaxblock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}
#levelmaxblock button.active,#levelmaxblock button:hover.active{background:#fff;color:#222;outline:none}
#levelmaxblock .caranya{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
#levelmaxblock .caranya div{display:none}
#levelmaxblock .caranya div.active{display:block;animation:fadeInUp .5s}
#levelmaxblock ol{margin-left:20px}
@media(max-width:680px){#levelmaxblock .inner{width:calc(100% - 80px);margin:auto}}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}

Jika semuanya sudah dipasang kemudian klik simpan. Pesan notif akan keluar jika sudah Mengaktifkan AdBlock, maka akan ada tampilan notif AdBlock killer yang sudah terpasang. Untuk Demo silahkan cek hasilnya di Block ini.


Sekian Cara Memasang Adblock Killer di Blogger semoga bermanfaat.
Cara Membuat Newsletter Rainbow

Cara Membuat Newsletter Rainbow

 


Membuat Widget Subscribe/Newsletter Rainbow Simple - Artikel blog anda ingin selalu di ikut para pengunjung blog, manfaatkan fitur feedburner. Ya salah satu cara untuk meningkatkan pengunjung blog adalah dengan memanfaatkan fasilitas Mail Subscribe dari feedburner. Dengan begitu apabila banyak orang yang mengikuti blog ada dengan fasilitas langganan via email gratis ini semakin besar pula nantinya trafik kunjungan blog anda


Sebenar untuk membuat widget subscribe di blogger cukuplah gampang, yaitu dengan memilih widget "Ikuti lewat Email" dari menu Tata letak pada dasbor akun blogger. Namun tampilkan yang cukup sederhana mungkin saja kita ingin mengubah sehingga menarik para pengunjung untuk mengikuti langganan via email ini.


Berikut ada 2 widget CSS Simple 

Pertama masuk ke Dashboard Blogger > Tata Letak > Tambah Gadget > pilih HTML/JavaScrip dan pastekan scrip dibawah ini.

1. Newsletter Social Media Responsive


<!--
Subscribe Box by fajardjoekerz.com
Original Post:https://www.fajardjoekerz.com/
-->
<div id="Subscribebox">
  <div class="email__">
    <div class="email">
      Dapatkan artikel terbaru setiap hari
      <form action="https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz','popupwindow','scrollbars=yes,width=550,height=520');return true" target="popupwindow">
        <input name="email" class="email" placeholder="Contoh:nama@mail.com"/>
        <input name="uri" type="hidden" value="fajardjoekerz" /> <input name="loc" type="hidden" value="en_US" />
        <button type="submit"></button>
      </form>
    </div>
  </div>
  <div class="socialsubcribe__">
    <div class="socialsubcribe">
      <a class="facebook" title="Facebook" href="https://www.facebook.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>
      <a class="twitter" title="Twitter" href="https://twitter.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
      <a class="youtube" title="Youtube" href="https://www.youtube.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>
      <a class="instagram" title="Instagram" href="https://www.instagram.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
   <a class="pinterest" title="Pinterest" href="https://pinterest/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path></svg></a>
    </div>
  </div>
</div>
<link href="https://fonts.googleapis.com/css?family=Rubik:300" rel="stylesheet">

Simpan kode CSS dibawah ini diatas </style>

/*
Subscribe Box by fajardjoekerz
Original Post: https://fajardjoekerz.blogspot.com/2019/09/kotak-subscribe-email.html
*/
#Subscribebox {width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}
#Subscribebox .email__ {padding:15px 15px 5px;}
#Subscribebox .email {margin:auto; color:#555; text-align:center;}
#Subscribebox .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#Subscribebox .socialsubcribe__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}
#Subscribebox form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;}
#Subscribebox form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';}
#Subscribebox input {width: calc(100% - 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
#Subscribebox button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}
#Subscribebox button:hover, #Subscribebox button:focus {background-color:#1d2129;}
#Subscribebox button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;}
#Subscribebox .socialsubcribe {width:100%; text-align:center;}
#Subscribebox .socialsubcribe svg {width:20px;height:20px;margin-top:7px}
#Subscribebox .socialsubcribe svg path {fill:#fff}
#Subscribebox .socialsubcribe a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;}
#Subscribebox .socialsubcribe a:last-child {margin-right:0px;}
#Subscribebox .socialsubcribe a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}
#Subscribebox .socialsubcribe .facebook{background:#3a579a}
#Subscribebox .socialsubcribe .twitter {background:#00abf0}
#Subscribebox .socialsubcribe .googleplus {background:#df4a32}
#Subscribebox .socialsubcribe .youtube {background:#cc181e}
#Subscribebox .socialsubcribe .instagram {background:#992ebc}
#Subscribebox .socialsubcribe .pinterest {background:#e60023}
@-webkit-keyframes ignielRing{
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }
  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ignielRing{
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }
  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}
@keyframes ignielRing{
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }
  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}
BODY {max-width:800px; padding:50px; margin:auto; font-family: 'Rubik', sans-serif; font-size:14px; font-weight:300;}2

2. Newsletter Rainbow simple

<div class="rainbow"> 
<div id="subscribe-css"> 
<div class="subscribe-wrapper"> 
<h2>Newsletter</h2> 
<p>If you like articles on this blog, please subscribe for free via email.</p> 
<div class="subscribe-form"> 
<form action='https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> 
<input name="uri" type="hidden" value="Fajardjoekerz" /> 
<input name="loc" type="hidden" value="en_US" /> 
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/> 
<input class="subscribe-css-button" title="" type="submit" value="Submit" /> 
</form> </div> </div></div></div> <style> 
.rainbow{background:#2e87e7;background:linear-gradient(45deg,rgba(255,101,165,1) 0,rgba(255,101,165,1) 13%,rgba(255,107,154,1) 35%,rgba(255,134,106,1) 100%);position:relative;z-index:0;overflow:hidden;padding:0;border-radius:5px}
#rainbow{padding:0}
#rainbow h2{color:#fff;padding:0;border:0;margin:0 auto 10px auto}
#rainbow h2:before{display:none}.subscribe-wrapper{color:#222;line-height:20px;margin:0;padding:20px}
.subscribe-form{clear:both;display:block;margin:10px auto;overflow:hidden}
.subscribe-wrapper p{color:#fff;margin:0;font-size:13px}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#fff;color:#222;margin:0 0 18px;padding:8px;width:100%;border:0;outline:0;font-size:13px;text-indent:10px;line-height:20px;border-radius:3px;transition:all .6s}
.subscribe-css-email-field:hover,.subscribe-css-email-field:focus{border-color:rgba(0,0,0,0.3)}
.subscribe-css-button{background:transparent;color:#fff;cursor:pointer;font-weight:500;padding:10px;text-transform:none;width:100%;border:1px solid;border-radius:3px;outline:none;font-size:13px;transition:all .3s}
.subscribe-css-button:hover{background:#fff;color:#2e87e7;border-color:#2e87e7}
 </style>

> https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz 
> <input name="uri" type="hidden" value="Fajardjoekerz" />
> Yang bertanda merah ganti dengan id feedburner kalian.


3. Newsletter Rainbow 
<div class='sbox wow rubberBand'>
<center>
<br /><span class='icon'><img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyZnKsyO-XQmuevkU6-xn9ExYYga_Pu7FBqRuoBKukpi1-i1hbK2BuyQX6-xWBqBfX6-ewmqZgJ_WECQCzhck9eTEafUdofzn2bypjI4_zlgY3zAc_IYjaelWxVvgzNfXrvLB9CwZybp0/s1600/email.png' width='150px'/></span><br/>
</center>
<span>Newsletter</span><br /><br />
<span class='small'>Join our newsletter to get secret tips directly in your inbox!</span><br /><br />
<center>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='Your Email Address' type='email' required/>
<input class='boxsubmit' type='submit' value='Submit'/><input name='uri' type='hidden' value='fajardjiekerz'/>
<input name='loc' type='hidden' value='en_US'/></form><br />
<br /><br />
</center></div>
<style>
/* https://fajardjoekerz.blogspot.con*/
//@media(max-width:400px) {.sbox{width:109%!important;}}
//@media(max-width:1024px) and (min-width:400px)  {.sbox{width:106.5%!important;}}
.sbox {background:#009abe;text-align:center;width:100%;}
.sbox span {color:#fff;font-family:roboto;font-size:27px;}
.sbox .small {font-size:18px;}
input.boxinput::placeholder {color:#fff;}
.sbox .hatespam {font-size:15px;}
.sbox .boxinput::placeholder {color:#fff;}
.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:roboto;margin-bottom:10px;outline:none;transition:.3s;width:86%;text-align:center;border-radius:4px;}
.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:roboto;cursor:pointer;border-radius:4px;}
.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}
.sbox {border-radius:8px!important;padding:0!important;border:none!important;}
.sbox .widget-content {margin:0!important;}
#sidebar-wrap .widget {overflow-x:hidden;}
.sbox {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;width:100%;}
.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}
.sbox .boxinput {border-radius:2px!important;}
</style>

> https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz 
> <input name="uri" type="hidden" value="Fajardjoekerz" />
> Yang bertanda merah ganti dengan id feedburner kalian.

Jika sudah diganti dengan id feedburner kalian kemudian simpan widget kalian.
Demikian Cara membuat Newsletter Rainbow simple
Cara Membuat Syntax Highlighter di Blog

Cara Membuat Syntax Highlighter di Blog

 


Apa itu yang dimaksud dengan Syntax Highlighter dan fungsinya? Berikut penjelasan tentang Syntax Highlighter.


Syntax Highlighter adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan Syntax Highlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.


Selain mempercantik tampilan barisan kode di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca agar dapat dengan mudah mengenal jenis kode yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi pengurus atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.


1. Pertama masuk ke Dashboard Blogger > Tema > Edit HTML dan letakkan script di bawah ini sebelum tag </head>. 

<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>

<script>hljs.highlightAll();</script>

2. Selanjutnya, tambahkan deretan kode CSS berikut ini tepat dibawah sebelum tag </style>.

pre code.hljs{display:block;overflow-x:auto;padding:1em}

code.hljs{padding:3px 5px}

.hljs{color:#c9d1d9;background:#0d1117}

.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}

.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}

.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}

.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}

.hljs-built_in,.hljs-symbol{color:#ffa657}

.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}

.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}

.hljs-subst{color:#c9d1d9}

.hljs-section{color:#1f6feb;font-weight:700}

.hljs-bullet{color:#f2cc60}

.hljs-emphasis{color:#c9d1d9;font-style:italic}

.hljs-strong{color:#c9d1d9;font-weight:700}

.hljs-addition{color:#aff5b4;background-color:#033a16}

.hljs-deletion{color:#ffdcd7;background-color:#67060c}

3. Jika step 1 & 2 sudah selesai kemudian simpan template.

4. Cara Menggunakan Syntax Highlighter di Blogger 
Untuk menggunakannya syntax highlighter di blog dalam isi postingan tinggal dipanggil menggunakan <pre> dan <code> seperti contoh berikut.

<pre><code>

  <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->

</pre></code>

Jika ingin menulis tag HTML atau Javascript di dalam syntax highlighter maka wajib diparse lebih dulu, agar tidak menghancurkan tampilan template, untuk parse bisa disini.

Demonya bisa dicek di postingan ini sendiri. 

Widget Comments Simple

Widget Comments Simple


Berikut Cara Menambahkan Widget Komentar Simple & Responsive Ke Blogger 


Pertama masuk ke Dashboard Blogger > Tata Letak > Tambah Gadget kemudian Pastekan script di bawah ini dan tuliskan judul sesuai keinginan Lalu simpan.

<script type="text/javascript">
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;

function showrecentcomments(e){for(var r=0;r<a_rc;r++){var t,n=e.feed.entry[r];if(r==e.feed.entry.length)break;for(var i=0;i<n.link.length;i++)if("alternate"==n.link[i].rel){t=n.link[i].href;break}t=t.replace("#","#");var a=t.split("#");a=a[0];var c=a.split("/");c=c[5],c=c.split(".html"),c=c[0];var s=c.replace(/-/g," ");s=s.link(a);var o=n.published.$t,l=(o.substring(0,4),o.substring(5,7)),u=o.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in n)var d=n.content.$t;else if("summary"in n)var d=n.summary.$t;else var d="";var v=/<S[^>]*>/g;if(d=d.replace(v,""),document.write('<div class="rcw-comments">'),1==m_rc&&document.write("On "+m[parseInt(l,10)]+" "+u+" "),document.write('<span class="author-rc"><a href="'+t+'">'+n.author[0].name.$t+"</a></span> commented"),1==n_rc&&document.write(" on "+s),0==o_rc)document.write("</div>");else if(document.write(": "),d.length<o_rc)document.write("<i>&#8220;"),document.write(d),document.write("&#8221;</i></div>");else{document.write("<i>&#8220;"),d=d.substring(0,o_rc);var w=d.lastIndexOf(" ");d=d.substring(0,w),document.write(d+"&hellip;&#8221;</i></div>"),document.write("")}}}

</script><script src=https://fajardjoekerz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script><div style="font-size: 10px; float: right;">Get this <a href="https://fajardjoekerz.blogspot.com">sini</a></div>
<style type="text/css">
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px dotted;padding: 7px 0;}
</style>

Customiz widget
> Var a_rc = 5; menampilkan jumlah komentar
> Ganti https://fajardjoekerz.blogspot.com dengan Alamat website kalian.


Result:

Membuat Slide Demo Download Responsive

Membuat Slide Demo Download Responsive

Membuat tombol Slide Demo dan Download Responsive di Blogger - Tombol demo dan unduh CSS akan menggunakan efek hover css termasuk radius batas, bayangan kotak, gradien linier, indeks-z, dan transisi untuk mencapai efek unik dan sederhana saat mengarahkan kursor. Tombol Slide Demo dan Download dibuat dengan CSS dengan efek kursor mouse. Dua ikon diambil dari fontawesome. Jadi sebelum ke tutorial ini Anda harus menambahkan skrip fontawesome di blog Anda jika sudah ada tidak perlu menambahkan lagi. 


Sebelum memulai tutorial ini, harap ambil cadangan template Anda untuk keamanan.


Pertama masuk ke Dashboard Blogger > Tema > Edit HTML dan letakkan script Fontawesome di bawah ini sebelum tag </head>. Jika sudah terinstal Fontawesome skip lanjut ke code selanjutnya.




<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-replace-svg="nest">
</script>


Code CSS bisa ditempatkan sebelum tag </style>



#wrap { margin: 20px auto; text-align: center; } #wrap br { 

display: none; } .btn-slide, .btn-slide2 { position: relative; display:

inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; 

border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin:

10px; transition: .5s; } .btn-slide2 { border: 2px solid #efa666; }

.btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color:

#efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left:

100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; }

.btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title,

.btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover

span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; }

.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; 

background-color: #0099cc; color: #fff; position: absolute; float: left; margin:

5px; line-height: 42px; height: 40px; width: 40px; top: 0; 

left: 0; transition: .5s; border-radius: 50%; } .btn-slide2 span.circle2 { 

 background-color: #efa666; } .btn-slide span.title, .btn-slide

span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position:

absolute; left: 90px; text-align: center; margin: 0 auto; font-size:

16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2

span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; }

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity:

0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color:

#fff; }
Pilih Simpan/Save Theme.


Untuk langkah selanjutnya pilih Postingan – Entri Baru – Html – Lalu masukan kode pemanggil di bawah ini.



<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>

<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>


Catatan: Untuk Tagar ( tanda pagar ) dalam kode di atas bisa kamu ubah dengan link download atau link lainnya.

 

Result:


Membuat Sitemap atau Daftar isi Simple

Membuat Sitemap atau Daftar isi Simple


Membuat Daftar Isi (Sitemap) Blog Simple & Fast Loading - Membuat Halaman Indeks Posting Blog Alfabetis (Berdasarkan Abjad per Kategori/Label).


Setiap blog rata-rata memiliki daftar isi/sitemap dan bisa dipastikan semua memiliki daftar isi, para blogger menyertakan sitemap tersebut bukan karena tanpa alasan atau hanya ikut-ikutan saja.


Keuntungan yang bisa kamu dapatkan jika blog kamu memiliki sitemap akan menambah kebetahan pengunjung blog untuk berlama-lama di blog kamu, karena jika blog kamu memiliki content yang menarik maka pengunjung akan penasaran dengan content-content kamu yang lain, maka dengan rasa penasaran itu mereka akan melihat-lihat isi dari blog kamu melalui sitemap/daftar isi blog.


Berikut cara membuat mudah dan simple

  • Buka Blogger
  • Klik Halaman / Halaman statis

  • Buat Halaman Baru dengan judul Sitemap atau Daftar isi kemudian buka html dan pastekan kode berikut



<script style="text/javascript" src="https://rawcdn.githack.com/Fajardjoekerz/djoekerz/716b9ef6777281b85ff53df013ab045862fc9ee1/sitemaps.js"></script>

<script src="https://fajardjoekerz.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Terakhir ganti https://fajardjoekerz.blogspot.com ganti dengan alamat blog kalian kemudian simpan dan cek hasilnya maka akan keluar daftar isi simple dan responsive. 
Mengenal Tentang Microsoft Clarity: Untuk Analisis Website

Mengenal Tentang Microsoft Clarity: Untuk Analisis Website


Microsoft Clarity Untuk Analisis Website

Microsoft Clarity adalah sebuah tools analisa visitor dari Microsoft yang bisa membagikan gambaran bagaimana pengunjung atau visitor berinteraksi dalam satu web. Dengan Clarity, telah membuat tools yang membantu orang yang mengelola situs web membuat keputusan yang lebih tepat tentang modifikasi yang harus dilakukan pada situs anda. Kejelasan menunjukkan kepada Anda bagian mana dari situs web Anda yang paling banyak terlibat dan paling sedikit terlibat dan menyediakan antarmuka yang sangat berharga untuk debugging.


Clarity memberi tools untuk membuat keputusan yang tepat tentang perubahan pada situs web Anda menggunakan data yang valid, dan ini memungkinkan Anda melakukannya dengan cara yang membantu menghormati privasi dan keamanan data pengguna Anda. Selain itu, membangun jenis sistem yang dapat memberikan bukti ini sendiri dapat menjadi rumit dan memakan waktu.


Microsoft Clarity dibuat agar siapa saja yang mencoba meningkatkan pengalaman situs web untuk dapat menggunakannya. Microsoft Clarity mendesainnya agar mudah digunakan untuk pengembang dan non-pengembang. Jika Anda ingin memahami pengguna Anda tanpa harus menganalisis lautan data yang dapat diperoleh dari mengoperasikan situs web. 

Dirancang untuk memiliki dampak yang sangat rendah pada waktu pemuatan halaman, sehingga dapat memastikan pengguna yang menavigasi ke situs Anda tidak perlu menunggu halaman dimuat. Selain itu, tidak membatasi lalu lintas di website, 10 pengunjung per hari atau 1.000.000, Clarity akan dapat menangani lalu lintas tanpa biaya tambahan.

Saat ini Microsoft Clarity ini gratis untuk digunakan, mudah untuk menambahkan Clarity Microsoft ke situs web yang ada. Ada overhead minimal, dan semua ukuran situs didukung, tanpa batasan lalu lintas. Penting untuk diperhatikan bahwa Clarity tidak disarankan untuk situs yang bekerja dengan data sensitif, karena rekaman sesi dapat menangkap informasi itu dan menyimpannya di server Clarity Microsoft.

Ingin Memulai menggunakan Microsoft Clarity?

Anda dapat memulai dengan mendaftar secara gratis, menggunakan akun Microsoft, Google, atau Facebook. Kalian akan membuat ruang kerja tempat Anda dapat menambahkan proyek, pilihan halaman atau situs atau domain. Menambahkan proyek baru akan dibuat menggunakan template dasar, dengan nama situs, URL, dan kategori yang disesuaikan dengan template. Anda juga dapat membuat dan mengenerate kode pelacakan unik untuk proyek, yang perlu Anda sertakan di konten halaman Anda. Ini adalah fungsi JavaScript yang ada di halaman Head block, dan setelah dipasang itu akan mulai mengirimkan data ke dasbor Clarity Anda.

Tim menjadi hal yang penting dalam membuat sebuah website, untuk sekarang Clarity juga menyediakan 2 role untuk anggota tim yaitu Administrator dan Member. Sebuah website dalam Clarity dapat memiliki beberapa role, misalnya satu website dapat memiliki beberapa administrator dan beberapa Team Member. Pemberian role tersebut juga tidak terbatas oleh email domain, siapapun dapat anda ajak menjadi admin dan member dalam tim anda. Jadi kamu dapat mengajak tim agency mu untuk bergabung dalam Microsoft Clarity Team.

Masihkah Kita Butuh Google Analytics?

Jika kita melihat dashboard dari Microsoft Clarity ini, maka dapat kita simpulkan bahwa sepertinya Microsoft tidak berniat untuk bersaing dengan Google Analytics karena secara fungsi lebih mirip dengan Hotjar.

Jadi, tentu saja kita masih butuh menggunakan Google Analytics karena Microsoft Clarity bukan untuk menggantikan Google Analytics, tapi sebagai pelengkap saja. Setidaknya untuk saat ini. Apalagi dengan adanya fitur integrasi dengan Google Analytics.

Saran saya, sebaiknya gunakan keduanya, baik Google Analytics & Microsoft Clarity sambil kita lihat perkembangan ke depannya.

Sekian artikel mengenai Microsoft Clarity yang bisa kalian gunakan untuk melihat informasi lebih detail mengenai website atau situs Anda. Semoga informasi ini bermanfaat dan sampai jumpa di artikel selanjutnya.
Cara Membuat Navigasi Menjadi Sticky

Cara Membuat Navigasi Menjadi Sticky





Sticky menu navigasi adalah sebuah menu blog atau website yang dibuat menjadi diam pada tempatnya. Fungsinya adalah ketika pembaca blog melakukan scrool mouse ke bawah dan ke atas, bagian yang di sticky akan tetap di tempat.

 Bukan hanya pada menu navigasi, teknik sticky ini juga bisa diterapkan di widget yang lainnya seusai keinginan.

 Berikut adalah langkah demi langkah membuat Sticky Menu Navigasi.

1. Perhatikan contoh CSS Menu Navigasi dan HTML Menu Navigasi berikut:

CSS Menu Navigasi
/* Menu */
.navi{clear:both;display:block;width:100%;font-family:&#39;Roboto&#39;, sans-serif;padding:0;margin:0 auto 25px; z-index:9999!important;}.navi ul{background:#fff;margin:0 auto;padding:0;text-align:center;border-radius:5px}.navi li{display:inline-block;margin:15px 0}.navi li a{display:block;color:#000;font-weight:normal;padding:0 11px;font-size:18px;}.navi li a:hover{color:#86dfff !important}
Keterangan:

Advertiser

- Tulisan  .navi yang berwarna biru diatas adalah bagian selector atau widget id yang akan dijadikan sticky.
- Tulisan z-index:9999!important; yang berwarna merah adalah kode css yang akan mengatur kerapian menu navigasi nantinya, supaya tetap rapi walaupun di zoom in-zoom out. maka tambahkan pada css navigasi di template blog anda.

HTML Menu Navigasi
<nav class='navi'>
<ul>
   <li><a expr:title='data:blog.title' href='/' itemprop='url'>HOME></a></li>
         <li><a href='#'>FACEBOOK</a></li>
         <li><a href='#'>ADSENSE</a></li>
        <li><a href='#'>BLOGGER</a></li>
        <li><a href='#'>TWITTER</a></li>
</ul></nav>
Kode diatas hanya untuk memberikan pemahaman kepada anda bahwa yang akan dibuat sticky itu adalah menu navigasi di blog.


2. Copy dan pastekan script dibawah ini tepat diatas </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
      var sticky_nav_offset_top = $('.navi').offset().top;
      var sticky_nav = function(){
              var scroll_top = $(window).scrollTop();
              if (scroll_top > sticky_nav_offset_top) {
                      $('.navi').css({ 'position': 'fixed', 'top':0, 'left':0 });
              } else {
                      $('.navi').css({ 'position': 'relative' });
              }
       };
       sticky_nav();
       $(window).scroll(function() {
              sticky_nav();
       });
});
</script>
3. Ganti semua kode .navi dengan bagian atau widget id yang ingin dijadikan sticky.
Subscribe to: Posts (Atom)