Cara Membuat Scroll Persentase di Blog atau Website


Kali ini Saya akan memberitahu Cara Membuat Scroll Persentase di Blog.
Jika Anda punya blog yang keren dan bagus, memasang scroll persentase ini pun menjadi keunikan sendiri untuk blog yang Anda punya, tapi jika blog Anda tidak terlalu bagus atau keren, Saya sarankan untuk tidak memasang scroll ini, karena hanya membuat blog Anda menjadi berat saja, tapi jika Anda ingin, Anda boleh copy script Cara Membuat Scroll Persentase di Blog yang ada di bawah.


Cara Membuat Scroll Persentase di Blogspot

Langkah-langkah membuatnya :

  • Login ke blogger.com, jika sudah. 
  • Pilih Template → Edit HTML
  • Cari kode ]]> untuk mudah mencari tekan [F3]
  • Letakkan script di bawah ini di atas ]]>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

  • Setelah itu cari kode
  • Letakkan script di bawah ini, di bawah kode


  • Cari kode 
  • Setelah itu letakkan JavaScript di bawah ini, di atas kode


  • Simpan dan lihat hasilnya.

Perhatian !

Sebelum menyimpan hasil, disarankan membackup template terlebih dahulu !

    Itulah sedikit informasi mengenai Cara Membuat Scroll Persentase di Blog atau Website. Semoga apa yang saya sampaikan dapat bermanfaat untuk kalian.
    ", numPosts: 4, titleLength: "auto", thumbnailWidth: 178, thumbnailHeight: 100, noImage: "//1.bp.blogspot.com/-aR5w9KXuWGU/XhSDNRAVuhI/AAAAAAAAHG8/dLxcaZxSgh0v85JG0mWRMQyEwqMgpL1_gCLcBGAsYHQ/w178-h100-c/no-image.jpg", containerId: "related-post-8767658074115259026", newTabLink: false, widgetStyle: 3, callBack: function() {} };
    "+m+"")}r.innerHTML=o+=""+m,g.callBack()}},r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]); } })(); (function() { var postBody = document.querySelector('.post-body'); var firstPostImg = postBody.querySelector('img'); firstPostImg.classList.add('fullwidth'); })(); //]]>