RaVsign Blogger

Friday, January 1, 2021

Cara Menambahkan Animasi Loading Pada Blogger

RaVsign Official January 01, 2021

Mungkin setiap pengunjung ke blog sobat pasti tidak semuanya dalam hal koneksi internet akan berbeda - beda kecepatannya ada yang lambat ataupun cepat. biasanya pengunjung-pun akan merasa jenuh melihat halaman yang sedang loading tanpa adanya hal - hal yang menarik.

Nah oleh karena itu sebisa mungkin sobat tambahkan sebuah animasi loading pada saat halaman yang sedang loading tesebut, supaya pengunjung yang sedang menunggu halaman yang sedang di muat bisa setidaknya nyaman dan enak di lihat karena terdapat animasi yang di ulang terus menerus.

pertama, sobat buka terlebih dahulu editor HTML template sobat.
kedua, sobat copy CSS di bawah ini dan tempatkan tepat di atas tag </head>.

  
    <style type="text/css">

    body{overflow:hidden}#loading{position:fixed;background:#fff;left:0;right:0;top:0;bottom:0;transition:all .5s;z-index:999999}.loader-anim{position:absolute;background-color:#f57c00;width:50px;height:50px;top:50%;left:50%;border-radius:50%;-webkit-animation:loader 1s infinite ease-in-out;animation:loader 1s infinite ease-in-out;transform:translate(-50%,-50%);z-index:1}@keyframes loader{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}

    </style>

ketiga, bila sudah menambahkan CSS sobat copy kembali Javascript yang berada di bawah ini dan tempatkan tepat sebelum tag </body>.

  
    <script type="text/javascript">

    window.addEventListener('load', () => {
      document.querySelector("#loading").style.cssText = "display: none;";
      document.getElementsByTagName("body")[0].style.cssText = "overflow: auto;";
    });
    </script>

keempat, jika CSS dan Javascript sudah di copy dan di tempatkan di tempat yang sudah di tunjukan, sobat copy HTML di bawah dan tempatnya tepat di bawah tag <body>.

  
    <div id="loading">

       <div class="loader-anim"></div>

    </div>

kelima, sobat Save dan coba Refresh blog sobat. Sobatpun akan melihat animasi loading yang muncul pada saat halaman blog sedang di muat.

result

Thursday, December 31, 2020

Cara Menambahkan "Double Click To Select" Di Text Tertentu Pada Blogger

RaVsign Official December 31, 2020

Sobat mungkin suka ataupun pernah melihat khususnya pada sebuah website atau blog yang ber-artikel tentang tutorial seputar Programming ataupun penambahan sebuah widget, pasti terdapat code - code yang harus di copy dan di letakan di bagian tag setelah ataupun sebelum tag Html tertentu.

Biasanya dalam mempermudah pencarian tag Html untuk menyimpan code - code yang sudah di copy akan jika di hover oleh cursor pada text tertentu akan keluar tulisan "Double Click To Select" yang dimana jika kita double click di bagian text tag Html tersebut maka secara otomatis ter-select tanpa kita drag dari kanan ke kiri atau sebaliknya hanya untuk mengcopy text tag Html tersebut.

pertama, sobat buka terlebih dahulu editor HTML template sobat.
kedua, sobat copy CSS di bawah dan letakan tepat di atas tag </head>.


<style type="text/css">

kbd{position:relative;font-size:12px;background:#ffd6ab;padding:2px 7px;border-radius:10px}kbd::before{position:absolute;display:block;content:'Double Click To Select';background:#f57c00;color:#fff;font-size:12px;width:9rem;bottom:0;left:0;padding:1px;text-align:center;border-radius:10px;visibility:hidden;opacity:0;z-index:2;transition:all .3s}kbd:hover::before{bottom:25px;visibility:visible;opacity:1}

</style>

ketiga, setelah itu sobat copy script Javascript di bawah dan letakan tepat di atas tag </body>.


<script type="text/javascript">

var pres = document.querySelectorAll('kbd');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}

</script>

keempat, sobat buka postingan blog sobat dan cari text yang berisi tag Html, dan sobat sisipkan tag <kbd> sebelumnya dan ditutup dengan </kbd>.
kelima, otomatis text tag Html yang sudah berada di dalam tag <kbd> akan berubah dan jika di hover akan keluar tulisn "Double Click To Select".

result

Tuesday, December 29, 2020

Cara Membuat Scroll Indicator Progress Bar Pada Blogger

RaVsign Official December 29, 2020

Mungkin sobat suka ataupun pernah melihat garis tipis yang tepat berada paling atas pada sebuah website, yang garis tipis itu yang akan memanjang jika di scroll ke bawah dan memendek jika scroll ke atas. Jika sobat belum pernah lihat sobat bisa buka saja YouTube, karena YouTube juga hampir sama, hanya saja kalau YouTube garis tipisnya itu akan keluar pada saat loading saja. Beda halnya dengan yang di bahas disini, tapi untuk tampilannya itu sendiri sama saja.

Mungkin ada beberapa orang menganggap buat apa, dan apa fungsinya?? memang untuk masalah fungsi mungkin hanya sebagai indikator scroll saja. Tapi ada beberapa orang juga yang menganggap hal ini bisa membuat tampilan website menjadi lebih bagus lagi dan tidak monoton karena terdapat animasi - animasi yang membuat tampilan web tidak terlalu monoton.

pertama, sobat buka terlebih dahulu editor HTML template sobat.
kedua, sobat copy tag HTML di bawah ini dan paste tepat di bawah tag <body>.


<div class="progress-bar" id="myBar"></div>

ketiga, sobat copy CSS di bawah ini dan paste dimana saja sebelum tag </head>.


<style type="text/css">

#myBar {position: fixed; background: #f57c00; top: 0; left: 0; height: 2px; width: 0; z-index: 1000; transition: all .5s;}

</style>

keempat, sobat copy script Javascript di bawah ini, dan sobat paste tepat di atas tag </body>.


<script type="text/javascript">

window.onscroll = function() {myFunction()};



function myFunction() {

  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

  var scrolled = (winScroll / height) * 100;

  document.getElementById("myBar").style.width = scrolled + "%";

}

</script>

kelima, tinggal sobat save dan lihat perubahannya.

result

Sunday, December 27, 2020

Cara Mengatasi Error "The feed does not have subscriptions by email enabled" Pada Feedburner

RaVsign Official December 27, 2020

Feedburner merupakan layanan web yang terdiri dari RSS Feed dan management tools lainnya, feedburner ini biasanya merupakan salah satu hal yang bisa di bilang berguna dan memang bisa dibilang di khususkan salah satunya untuk blogger untuk menganalisa lalu lintas pengunjung pada blog kita.

Dalam pendataran awal Feedburner ini sendiri sangatlah mudah dan cepat, tetapi jika sobat baru pertama kali mendaftarkan diri ke Feedburner ini biasanya masih terdapat satu masalah yaitu mendapati error "The feed does not have subscriptions by email enabled".

Nah pada tutorial kali ini saya akan menjelaskan cara untuk mengatasi error "The feed does not have subscriptions by email enabled" pada Feedburner ini. Untuk memperbaiki masalahnya ini sendiri sangatlah mudah.

pertama, sobat buka website Feedburner terlebih dahulu.
kedua, jika sudah terbuka sobat akan melihat list blog yang sudah sobat buat sebelumnya, sobat cari dan klik blog tersebut.
ketiga, sobat klik Publicize > Email Subcriptions > Klik Activate.

Nah sobat tinggal coba ulang Feedburnernya apakah sudah ada perubahan atau masih sama saja, tetapi biasanya langsung selesai masalahnya jika cara - cara di atas sudah di lakukan.

Saturday, December 26, 2020

Cara Supaya Artikel Pada Blog Tidak Bisa di Copy Paste Dengan CSS

RaVsign Official December 26, 2020

Mungkin beberapa ataupun semua dari sobat yang berprofesi sebagai penulis khususnya di blog pasti akan merasa jengkel, kesal dan marah pastinya, jika artikel yang sudah susah payah dibuat di copy oleh orang - orang yang tidak bertanggung jawab. Dan parahnya lagi mereka mempublish ulang artikel hasil copy paste tersebut ke blog pribadi.

Oleh sebab itu kita sebagai author setidaknya mencoba berusaha untuk memproteksi artikel yang susah payah di buat tersebut, supaya tidak ada orang yang meng-copy paste nya. Nah pada artikel kali ini saya akan share tips trick khusunya bagi penggunana Blogger supaya artikel - artikel yang sudah kita buat tidak dapat seleksi untuk di copy paste seenaknya oleh orang lain.

Untuk caranya itu sendiri sangat mudah kok, sobat hanya menambahkan beberapa baris saja kode CSS ke template blog yang sobat pakai, tanpa adanya script - script yang rumit dan panjang.

pertama, sobat buka terlebih dahulu editor HTML template sobat.
kedua, sobat copy code di bawah ini, dan tempatkan tepat dimana saja asalkan tempatkan sebelum penutup </head>.

<style type="text/css">
.post-body {user-select:none; -moz-user-select:none; -ms-user-select:none; -khtml-user-select:none; -webkit-user-select:none;}
 pre, code {user-select:text; -moz-user-select:text; -ms-user-select:text; -khtml-user-select:text; -webkit-user-select:text;}
</style>

ketiga, lalu sobat save.

Code CSS di atas sudah membuat artikel sobat tidak bisa di seleksi, dan hanya tulisan yang berada di dalam tag Pre dan Code saja yang bisa di seleksi selain itu tidak bisa di seleksi.