Cek Data Kamu Bocor Kemana Aja Pakai Website Ini

Cek Data Kamu Bocor Kemana Aja Pakai Website Ini

 


Salah satu founder Ethical Hacker Indonesia, Teguh Aprianto berhasil menciptakan sebuah website yang bisa mendeteksi kebocoran data di internet. Lewat cuitannya di media sosial twitter miliknya, Teguh mengumumkan bahwa website yang diberi nama periksadata.com itu sudah bisa dipakai mulai tanggal 23 September 2020.



Website didesain sangat simple, sehingga memudahkan orang-orang untuk mengecek kebocoran datanya. Kamu hanya perlu memasukkan email kamu ke dalam mesin pencarian yang ada di dalam website, lalu klik "periksa sekarang". Hanya dalam hitungan waktu beberapa detik saja, website karya Teguh Aprianto ini berhasil mendeteksi kebocoran data kamu.


Tak lama setelah peluncurannya, website periksadata.com mendapatkan apresiasi yang sangat baik dari para netizen twitter. Banyak orang yang merasa terbantu dengan adanya website ini.



Akhir-akhir ini memang warga net sering dikhawatirkan oleh maraknya kebocoran data. Semakin luasnya akses internet saat ini memang membuat data pribadi kita rentan untuk diretas. Salah satu tips untuk menghindari pencurian data ini yaitu jangan mudah untuk klik tombol "setuju" pada suatu aplikasi atau website. Alangkah lebih baik jika kita membaca dulu ketentuan apa saja yang akan kita peroleh apabila kita klik tombol "setuju" tadi. 


Selain itu, kamu juga perlu untuk menjaga password kamu agar tetap unik dan kalau bisa diganti secara reguler untuk mengamankan akun. Jangan menggunakan kata-kata umum atau mainstream untuk password kamu. Gunakanlah kombinasi huruf kapital dan kecil serta angka untuk membuat password kamu tetap unik.




Teguh Aprianto juga membagikan tips di website periksadata.com tentang apa saja yang perlu kamu lakukan jika data kamu bocor. Hal ini tentunya menjadi nilai tambah website karyanya tersebut, karena selain mampu melacak kebocoran data yang hanya dengan memasukkan email, website tersebut juga memberikan solusi kepada warga net tentang apa saja yang harus dilakukan setelah mengetahui datanya bocor.


Bagaimana nih apakah kamu sudah cek kebocoran data kamu lewat website Periksa Data karya anak bangsa yang hebat ini ?


Source : teknologi.id

Cara Menautkan Postingan di Instagram ke Blog

Cara Menautkan Postingan di Instagram ke Blog


Instagram adalah salah satu media sosial paling fenomenal saat. Instagram bisa dikatakan media sosial wajib bagi semua orang terlebih bagi seorang blogger.


Tak lengkap rasanya ngeblog jika tidak melibatkan instagram ke dalam sebuah blog. Nah, kali ini saya akan berbagi tips bagaimana cara memasukkan, menautkan, menyematkan atau istilah lainnya embed foto yang diupload di Instagram ke dalam sebuah postingan seperti ini:


Pada dasarnya Instagram hanyalah sebuah media sosial yang khusus dijalankan pada perangkat smartphone. Namun, Instagram juga dapat dijalankan pada desktop hanya saja tidak dapat mengupload foto dan kita hanya bisa melihat-lihat foto saja. 


Di sisi lain, Instagram yang dijalankan pada smartphone tidak dapat dimantaatkan untuk membagikan foto ke dalam sebuah postingan blog. Memindahkan foto di Instagram ke sebuah postingan hanya dapat dilakukan apabila Instagram dijalankan pada perangkat desktop.


Bagaimana caranya? Sangat mudah, cukup ikuti langkah sederhana berikut;


  1. Pastikan kamu telah memiliki akun instagram. Jika belum, silahkan buat terlebih dahulu.


  2. Login dengan cara masukkan USERNAME (tanpa @) dan PASSWORD akun Instagram kamu kemudian klik MASUK.


  3. Setelah berhasil login, klik icon profil di sudut kanan atas.


  4. Setelah berada di profil akun kamu, Pilih satu foto atau video yang ingin kamu tautkan,


  5. Pada foto atau video yang dipilih akan muncul pop up, perhatikan tiga buah titik pada sudut kanan atas (lihat kotak merah). Klik tiga titik tersebut. 


  6. Setelah mengklik tiga titik tersebut, akan muncul tampilan sebagai berikut. Kemudian klik Sematkan.


  7. Setelah mengklik Sematkan akan muncul jendela baru yang memberikan kode untuk diembed. Pada jendela tersebut akan ada pilihan memasang foto beserta keterangan atau hanya foto saja tanpa keterangan, Jika tidak hilangkan saja tanda ceklistnya kemudian klik tombol Salin Kode Sematkan/ Copy Embed Code.


  8. Setelah mendapatkan kode embed, selanjutnya kita menuju ke entri postingan.


  9. Tentukan dimana posisi foto atau video di Instagram ingin disisipkan. Agar memudahkan ketik DISINI pada entri postingan. Kemudian klik HTML seperti gambar di bawah ini.


  10. Tekan CTRL-F agar mudah menemukan kata DISINI diantara banyaknya kode HTML. Jika sudah, ganti kata DISINI dengan cara pastekan kode yang kita dapat dari Instagram tadi.


  11. Klik Compose, kemudian hasilnya akan terlihat seperti di bawah ini. Hasilnya memang belum terlihat utuh seperti yang diinginkan saat masih dalam pengeditan. Hasil akan terlihat saat postingan telah dipublis atau silahkan klik Pratinjau terlebih dahulu.


  12. Jika semuanya sudah pas, silahkan klik Publish.


Cara ini sebenarnya bisa dikatakan sama seperti kita menautkan video YouTube ke dalam postingan blog dan begitu juga memasang status Facebook atau kicauan Twitter. Intinya bagaimana cara mendapatkan kode embednya saja. Selamat mencoba.


Tambahan:


Jika hasil embed terlalu berada di sebelah kiri postingan atau kamu menginginkan hasil embed berada pada posisi rata tengah, kamu hanya cukup menerapkan kode <center> di awal script dan kode </center> di akhir scriptnya. Namun, jika hasil embed sudah berada di tengah dengan sendirinya, kamu tidak perlu lagi menerapkan kode <center> dan </center> pada script. 


Agar memudahkan, sebelum kamu menerapkan scrip embed ke dalam postingan, pastekan dulu kode embed ke Aplikasi Notepad kemudian tambakan kode <center> di awal script dan </center> di akhir script.


Berikut contoh penerapannya:


<center><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BhWNcFpnh19/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/BhWNcFpnh19/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> Lihat postingan ini di Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div></a> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BhWNcFpnh19/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Saya 97% yakin kamu tidak menyukai saya tapi saya 100% yakin tidak peduli.</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Sebuah kiriman dibagikan oleh <a href="https://www.instagram.com/_slamjay/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> 𝚂𝙻𝙰𝙼𝙴𝚃 ジャヤディ</a> (@_slamjay) pada <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-04-09T10:52:58+00:00">9 Apr 2018 jam 3:52 PDT</time></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script></center>

    

Itulah tadi cara menautkan postingan di Instagram ke Blog. Jika punya pertanyaan, kritik, komentar dan saran dapat dituliskan pada kolom komentar yang tersedia di bawah.


Cara Membuat Responsive Flat UI Color Picker di Halaman Blogger

Cara Membuat Responsive Flat UI Color Picker di Halaman Blogger


Postingan berikutnya saya akan berbagi artikel yang berkaitan dengan Tips Blogger yakni Cara Membuat Responsive Flat UI Color Picker di Blogger. Flat UI Color Picker berfungsi untuk mengetahui lebih cepat kode warna pilihan sobat jika tengah memodifikasi template.



Kode Flat UI Color Picker ini sudah responsive, jadi akan menyesuaikan dengan ukuran layar ditambah widget ini hanya menggunakan HTML dan CSS jadi tidak akan mempengaruhi loading blog. Baiklah tanpa panjang lebar silakan ikuti langkah-langkah berikut ini



Responsive Flat UI Color Picker


1. Login ke Blogger > Buat postingan baru atau bisa juga pada postingan baru khusus halaman statis > Kemudian tambahkan kode di bawah ini pada tab HTML post.


<div id="flatujay">
<ul class="flatui">
<li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
</li>
<li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
</li>
<li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
</li>
<li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
</li>
<li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
</li>
<li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
</li>
<li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
</li>
<li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
</li>
<li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
</li>
<li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
</li>
<li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
</li>
<li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
</li>
<li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
</li>
<li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
</li>
<li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
</li>
<li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
</li>
<li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
</li>
<li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
</li>
<li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
</li>
<li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
</li>
<li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
</li>
<li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
</li>
<li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
</li>
<li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
</li>
<li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
</li>
<li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
</li>
<li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
</li>
<li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
</li>
<li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
</li>
<li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
</li>
<li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
</li>
<li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
</li>
<li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
</li>
<li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
</li>
<li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
</li>
<li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
</li>
<li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
</li>
<li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
</li>
<li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
</li>
<li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
</li>
<li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
</li>
<li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
</li>
<li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
</li>
<li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
</li>
<li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
</li>
<li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
</li>
<li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
</li>
<li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
</li>
<li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
</li>
<li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
</li>
<li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
</li>
<li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
</li>
<li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
</li>
<li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
</li>
<li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
</li>
<li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
</li>
<li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
</li>
<li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
</li>
<li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
</li>
<li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
</li>
<li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
</li>
<li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
</li>
<li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
</li>
<li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
</li>
<li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
</li>
<li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
</li>
<li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
</li>
<li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
</li>
<li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
</li>
<li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
</li>
<li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
</li>
<li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
</li>
<li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
</li>
<li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
</li>
<li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
</li>
<li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
</li>
<li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
</li>
<li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
</li>
<li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
</li>
<li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
</li>
</ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by www.jaydzgn.blogspot.com */
#flatujay ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatujay ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatujay ul.flatui li:hover{z-index:4}
#flatujay ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatujay ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatujay ul.flatui li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatujay ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatujay ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatujay ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatujay ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatujay ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatujay ul.flatui li{width:100%}}
</style>


2. Setelah terpasang kemudian publikasikan post dan lihat sendiri hasilnya.


Untuk melihat demo tampilannya, silakan buka link di bawah ini



Demo responsive



Demikian tutorial Membuat Responsive Flat UI Color Picker, selamat mencoba.

Cara Memasang Link Hidup Pada Kolom Komentar

Cara Memasang Link Hidup Pada Kolom Komentar



Sobat blogger yang hobi mencari backlink khususnya lewat kolom komentar pasti tidak asing lagi dengan cara ini, yaitu suatu cara berkomentar di blog lain dengan menyisipkan link hidup dengan harapan mendapat backlink dari Sobat yang ikut berkomentar maupun pemilik blog.


Pada kesempatan kali ini saya akan mengulas bagaimana cara memasang link hidup atau link aktif pada kolom komentar blog. Namun tidak ada salahnya untuk dicoba kan?



Cara Memasang Link Hidup Pada Komentar


Harap diingat sebelum menerapkan cara ini ada baiknya Sobat membaca aturan berkomentar pada blog yang ingin Sobat komentari, karena tidak semua pemilik blog memberi kebebasan dalam berkomentar khususnya menyematkan link hidup di dalamnya, tentunya dengan berbagai alasan dan kita harus bisa menghormati dan menghargai hak yang bersangkutan sebagai pemilik blog.


Nah jika tidak ada masalah dan sobat blogger ingin membuat link hidup pada komentar sebagai sarana promosi maupun mendapatkan backlink caranya sangat sederhana :


<a href="https://www.jaydzgn.blogspot.com/">Komentar Sobat Disini</a>


Sobat tinggal mengganti tulisan yang ditandai dengan URL dan teks komentar yang ingin Sobat tampilkan pada kolom komentar. Harap diperhatikan saat berkomentar harus sesuai dengan artikel yang sedang di bahas, karena jika terlalu menyimpang dan berlebihan dalam promosi biasanya admin maupun pemilik blog tidak segan menghapus komentar Sobat.

Cara Promosi Blog Agar Banyak Pengunjung

Cara Promosi Blog Agar Banyak Pengunjung


 

Ada banyak blogger yang besar di luar sana yang tidak seorang pun pernah mendengar tentang mereka, hanya karena mereka tidak tahu bagaimana cara mempromosikannya, atau mungkin tidak ingin mempromosikan blog mereka.


Inti yang paling penting tentang promosi blog adalah Sobat jangan pernah malu memberitahu orang-orang tentang blog Sobat.


Banyak blogger yang tidak mempromosikan blog mereka hanya karena mereka tidak merasa itu layak untuk dipromosikan.


Jangan lakukan ini jika Sobat telah masuk ke dunia blogging, maka Sobat perlu memberitahu orang-orang tentang blog Sobat dengan melakukan promosi blog agar banyak pengungjung yang mengujungi blog Sobat. Banggalah dengan pekerjaan yang sedang Sobat jalani saat ini.


Jadi, bagaimana Sobat dapat mempromosikan blog agar banyak pengunjung? Nah, ternyata metode yang paling efektif adalah dengan cara promosi gratis tapi bisa mendatangkan pengunjung blog yang banyak. Mari kita simak tips berikut ini.


1. Email Marketing


Banyak tips bagaimana cara mendatangkan pengunjung baru untuk blog Sobat. Tetapi sebenarnya Sobat tidak hanya perlu pengunjung baru, Sobat juga harus menjaga agar pembaca yang pertama kali datang bisa kembali lagi berkunjung ke blog Sobat.


Di sinilah email marketing memiliki peran yang cukup besar. Dengan mengumpulkan alamat email dari pengunjung Sobat (tentu saja dengan izin mereka), maka Sobat dapat memberitahu mereka ketika Sobat memposting sesuatu yang baru di blog Sobat.


Hal ini membuat orang datang kembali mengunjungi ke blog Sobat, yang tidak hanya memberikan Sobat lebih banyak pembaca dari waktu ke waktu, juga memungkinkan Sobat untuk membangun hubungan yang lebih dekat dengan pembaca Sobat.


2. Jejaring Sosial


Saya yakin Sobat pasti sudah mempunyai akun Facebook, dan bahkan mungkin akun Twitter juga. Jadi, ketika Sobat memposting sesuatu di blog Sobat, pastikan bahwa Sobat juga memposting link posting blog Sobat di akun sosial media Sobat.


Hal ini juga membantu untuk terhubung dengan orang lain yang tertarik dalam topik Sobat. Kirim permintaan teman untuk blogger top di niche Sobat dan pastikan untuk mengikuti mereka di Twitter juga.


Sobat mungkin akan terkejut melihat betapa banyak orang yang akan menemukan posting Sobat yang menarik dan kemudian berbagi link dengan teman-teman mereka sehingga akan berdampak mendatangkan pengunjung yang banyak bagi blog Sobat.


3. Komentar di Blog Lain (Blogwalking)


Sobat dapat memberikan komentar dibanyak blog yang mempunyai topik yang sama dengan blog Sobat dengan mencantumkan link artikel blog Sobat di komentar tersebut sehingga akan mendatangkan pengunjung ke blog Sobat nanti nya.


Jika Sobat memberikan komentar yang bermanfaat pada blog yang terkait dengan topik Sobat, berarti Sobat telah memberikan informasi kepada orang-orang yang tertarik dengan topik Sobat. Dampaknya mereka bisa mengunjungi blog Sobat juga.


Ingat! Jangan pernah menyalahgunakan metode ini.


Jika Sobat meninggalkan komentar yang tidak bermanfaat atau hanya membuat spam saja maka ini akan berdampak merugikan blog Sobat sendiri. Selain itu, komentar berkualitas buruk kemungkinan akan dihapus oleh pemilik blog.


Jika Sobat membuat komentar yang bermanfaat, orang lebih cenderung untuk mengunjungi situs Sobat, karena mereka ingin mendengar lebih banyak tentang apa yang harus Sobat katakan pada topik tersebut.


4. Link ke Blog Lain


Salah satu ide terbaik untuk menulis postingan blog adalah menulis respon terhadap postingan dari blog lain. Ini bisa menjadi sebuah postingan blog Sobat yang tidak setuju dengan blog lain tersebut, atau topik artikel blog Sobat memiliki sesuatu yang berbeda atau nilai tambah dari blog orang orang yang Sobat berikan responnya.


Ketika Sobat melakukan ini, pastikan untuk me-link an blog Sobat kepada blog yang Sobat tanggapi. Pada kebanyakan blog, hal ini menciptakan apa yang dikenal sebagai "trackback".


Dengan Trackback, blog orang yang Sobat beri respon akan otomatis terkait dengan postingan link ke blog Sobat. Ini berarti bahwa siapa pun yang membaca posting blog orang yang Sobat beri respon maka mereka juga akan melihat link ke blog Sobat, dan berharap mengklik link tersebut di atasnya untuk mengunjungi postingan situs Sobat.


5. Tamu


Cara lain untuk mendatangkan banyak pengunjung blog adalah menulis di postingan "tamu". Untuk menulis postingan tamu Sobat hanya perlu menghubungi pemilik blog lain dan menawarkan untuk menulis postingan untuk situs mereka.


Tidak semua blogger yang terbuka untuk ide ini, tetapi jika Sobat dapat menemukan beberapa ide yang sangat besar bagi semua orang.


Sobat dapat memberikan mereka suatu informasi dengan menulis konten yang berkualitas, dan sebagai imbalannya Sobat menempatkan link ke blog Sobat dalam posting Sobat.


Jika orang menikmati posting tamu Sobat maka mereka cenderung untuk mengunjungi blog Sobat, maka hal ini akan menjadi salah satu jalan untuk mendatangkan banyak pengunjung ke blog Sobat.


6. Forum Online


Jika Sobat belum melakukannya, Sobat harus bergabung dengan forum online populer yang terkait dengan topik Sobat. Misalnya, jika blog Sobat adalah tentang pelatihan usaha, bergabung beberapa forum pelatihan usaha paling populer.


Banyak forum yang memungkinkan Sobat dapat mencantumka link ke situs Sobat dalam tSobat tangan yang berlangsung di bagian bawah setiap posting yang Sobat tulis.


Beberapa forum mengharuskan Sobat untuk membuat beberapa posting sebelum membiarkan Sobat melakukan hal ini.


Setelah bergabung di sebuah forum, buatlah postingan yang menarik dan bermanfaat. Sama seperti halnya dengan komentar blog, isi postingan di forum Sobat juga harus berkualitas tinggi dan membantu orang lain yang sedang mencari informasi sesuai dengan topik Sobat.


Orang tidak akan ingin membaca blog Sobat jika mereka tidak menemukan postingan forum Sobat yang dapat membantu dan menarik bagi mereka.


7. Sering Membuat Postingan


Semua metode promosi di atas fokus untuk mendatangkan pengunjung baru untuk blog Sobat. Ini biasanya merupakan langkah yang paling sulit untuk blog apapun. Namun, Sobat juga perlu memastikan bahwa setelah pembaca menemukan blog Sobat, mereka akan kembali lagi mengunjungi blog Sobat.


Membuat postingan baru yang sesering mungkin (setidaknya sekali seminggu, tetapi sebaiknya setiap 1-2 hari), adalah kunci untuk membangun dan menjaga pengikut Sobat tetap kembali lagi mengunjungi blog Sobat.


Itulah Cara Promosi Blog Agar Banyak Pengunjung. Bagi yang ingin memberikan masukan dan saran silakan untuk berkomentar yang baik dan membangun.


Tag Kondisional Blogger Terbaru 2020

Tag Kondisional Blogger Terbaru 2020



Halo sobat blogger, pada artikel kali ini saya akan membagikan penjelasan tentang tag kondisional yang digunakan pada template xml khususnya pada platform blogger.

Tag kondisional blogger berfungsi menampilkan widget atau recourse seperti CSS dan JavaScript pada halaman tertentu. Misalnya Anda ingin menampilkan widget artikel terbaru hanya di postingan saja, selain halaman postingan maka widget tidak akan tampil.

Tag kondisional blogger ini bisa Anda temui pada tag <b:if cond="..."> yang diakhiri </b:if> dan bisa diikuti beberapa kondisi seperti AND, OR dan NOT. Baiklah langsung saja berikut penjelasan tag kondisional blogger terbaru.

Berikut ini adalah Tag Kondisional Blogger Terbaru yang bisa sobat tambahkan pada tema untuk membungkus markup tertentu seperti HTML dan widget.

Tag Kondisional Halaman Index

Halaman index merupakan halaman yang menampilkan atau berisi banyak post. Beberapa halaman yang termasuk halaman index seperti homepage, label, search dan archive (kecuali post dan halaman statis). Berikut tag kondisional blogger untuk halaman index.

Versi baru

<b:if cond="data:view.isMultipleItems"> ... </b:if>

Versi lama

<b:if cond="data:blog.pageType == &quot;index&quot;"> ... </b:if>

Tag Kondisional Halaman Beranda (Homepage)

Halaman beranda atau homepage adalah halaman yang tampil pertama kali saat pengunjung membuka web yang berisi navigasi menuju halaman-halaman lain. Halaman homepage memiliki alamat pada domain utama.

Contoh URL halaman homepage : jaydzgn.blogspot.com.

Versi baru

<b:if cond="data:view.isHomepage"> ... </b:if>

Versi lama

<b:if cond="data:blog.url == data:blog.homepageUrl"> ... </b:if>

Tag Kondisional Halaman Item

Halaman item adalah halaman yang menampilkan seluruh isi dari sebuah halaman web. Halaman yang termasuk halaman item yaitu halaman postingan dan halaman statis. Berikut tag kondisional blogger untuk halaman item.

Versi baru

<b:if cond="data:view.isSingleItem"> ... </b:if>

Versi lama

<b:if cond="data:blog.pageType in [&quot;item&quot;, &quot;static_page&quot;]"> ... </b:if>

Tag Kondisional Halaman Postingan

Halaman postingan adalah halaman yang menampilkan isi konten dari suatu halaman web. Halaman ini bersifat dinamis yang bisa digunakan untuk memuat artikel seperti informasi atau berita. Tentu Anda sudah paham bahwa Anda membaca artikel ini pada halaman postingan.

Contoh URL halaman post : jaydzgn.blogspot.com/2020/02/tag-kondisional-blogger.html

Versi baru

<b:if cond="data:view.isPost"> ... </b:if>

Versi lama

<b:if cond="data:blog.pageType == &quot;item&quot;"> ... </b:if>

Tag Kondisional Halaman Statis

Halaman statis merupakan halaman tetap dari web, halaman statis biasa digunakan pada halaman About, Contact Us dan Privacy Policy.

Contoh URL halaman statis : jaydzgn.blogspot.com/p/blog-page.html

Versi baru

<b:if cond="data:view.isPage"> ... </b:if>

Versi lama

<b:if cond="data:blog.pageType == &quot;static_page&quot;"> ... </b:if>

Tag Kondisional Halaman Label

Halaman Label adalah halaman yang berisi daftar postingan yang berada pada label tertentu. Anda dapat menemui label pada menu navigasi blog yang berisi link halaman label untuk memudahkan pengunjung menemukan postingan yang mereka inginkan.

Contoh URL: jaydzgn.blogspot.com/search/label/Android

Versi baru

<b:if cond="data:view.isLabelSearch"> ... </b:if>

Versi lama

<b:if cond="data:blog.searchLabel"> ... </b:if>

Tag Kondisional Halaman Arsip

Halaman arsip berisi daftar post yang dipublikasikan pada rentan waktu perbulan dan pertahun.

Contoh URL halaman arsip: jaydzgn.blogspot.com/2020 dan jaydzgn.blogspot.com/2020/02

Versi baru

<b:if cond="data:view.isArchive"> ... </b:if>

Versi lama

<b:if cond="data:blog.pageType == &quot;archive&quot;"> ... </b:if>

Tag Kondisional Halaman Pencarian

Halaman pencarian atau search query adalah halaman yang terbuka saat pengunjung melakukan pencarian dengan query tertentu melalui penelusuran blog atau search . Halaman ini akan menampilkan daftar post yang sesuai dengan query pencarian.

Contoh URL halaman percarian: jaydzgn.blogspot.com/search?q=tag+kondisional

Versi baru termasuk halaman pencarian label

<b:if cond="data:view.isSearch"> ... </b:if>

Versi baru hanya halaman pencarian

<b:if cond="data:view.isSearch and !data:view.isLabelSearch"> ... </b:if>

Versi lama

<b:if cond="data:blog.searchQuery"> ... </b:if>

Tag Kondisional Halaman Kesalahan / Error 404

Halaman kesalahan atau error 404 not found merupakan halaman yang tampil apabila url tidak ditemukan bisa karena pengguna yang salah mengetik atau link pada navigasi yang memang salah.

Versi baru

<b:if cond="data:view.isError"> ... </b:if>

Versi lama

<b:if cond="data:blog.pageType == &quot;error_page&quot;"> ... </b:if>

Tag Kondisional Halaman Pratinjau

Halaman pratinjau digunakan untuk menampilkan halaman postingan sebelum dipublikasikan. Berikut tag kondisional untuk halaman pratijau.

<b:if cond="data:view.isPreview"> ... </b:if>

Tag Kondisional Perangkat Mobile

Tag ini digunakan untuk menambahkan parameter m=1 yang berarti ditampilkan untuk perangkat selular.

<b:if cond="data:view.isMobile"> ... </b:if>

Tag Kondisional untuk Thumbnail


<b:if cond="data:post.thumbnailUrl"> ... </b:if>

Dan lainnya.....

Penggunaan AND OR NOT


AND

Gunakan and, maka halaman akan muncul apabila memenuhi kedua tag kodisional. Berikut contoh tag kondisional untuk halaman index kecuali halaman pencarian (Saya juga menggunakan kondisi not).

<b:if cond="!data:view.isLabelSearch and data:view.isMultipleItems"> ... </b:if>

OR

Gunakan or apabila ingin menampilkan beberapa halaman yang dimaksud pada tag kondisional. Berikut contoh tag kondisional untuk halaman arsip dan halaman label, atau salah satu dari halaman tersebut.

<b:if cond="data:view.isArchive or data:view.isLabelSearch"> ... </b:if>

NOT

Gunakan ! apabila tidak ingin tampil pada halaman yang dimaksud. Berikut contoh tag kondisional yang tidak menampilkan pada halaman beranda atau homepage saja.

<b:if cond="!data:view.isHomepage"> ... </b:if>

Penutup

Itu tadi pembahasan tentang beberapa tag kondisional blogger, masih banyak tag kondisional yang belum dibahas pada artikel ini namun untuk kedepannya saya akan mengupdate beberapa tag kondisional lagi. Baiklah sekian saja artikel ini, semoga bermanfaat.