How To Add A Reading Progress Bar In WordPress Post Without Plugin | Hindi

Hello Dosto Mera Internet Gyan Me Aap Sabhi Ka Suwagat Hai. Dosto Yadi Aap Bhi Blogging Karte Hai To Ye Post Aapke Liye Bahut Hi Usefull Hone Wala Hai. Yadi Aap New WordPress Blog Banana Chahte Hai To Aap Bahut Hi Aasani Se Bana Sakte Ho. Blogging Ke Baare Me Ham Aapko Puri Details Se Jaankari Denge.

Recent Post :

  1. Generetepress Premium Theme Free Me Download Kaise Kare ?
  2. WordPress Blog Theme Se Post URL Se #More Ko Remove Kaise Kare ?
  3. Blog Me Social Share Button Add Kaise Kare WIthout Plugin Ke ?
  4. Blog Me Author Box Add Kaise Kare? WIthout Plugin In GP Theme.
  5. Google Search Engine Me Post Par Star Rating Show Kaise Kare ?

What Is Reading Progress Bar ?

Reading Progress Bar Kya Hai ? Dosto Yadi Aap Bhi Blogging Karte Hai To Iske Baare Me Jaanna Bahut Hi Jaruri Hai. Kyoki Isi Chhote Chhote Jaankari Ke Madad Se Aap Apne Blog Ko Ek Professional Blog Bana Sakte Ho.

Dosto Jab Bhi Aap Kisi Blog Ke Post Ko Read Karte Hai To Kuch Blog Me Aapko Reading Progress Bar Dikhai Deta Hai. Reading Progess Bar Ke Madad Se Hame Ye Pata Chalta Hai Ki Ham Is Blog Post Contents Ko Kitna Read Kar Chuke Hai Aur Kitna Read Karna Baki Hai. Aap Niche Screenshot Me Dekh Sakte Hai Ki Reading Process Baar Kis Tarh Se Dikhai Deta Hai.

Reading Progress Bar Ko Blog Me Add Kare Ya Nhi ?

Dosto Ye Baat Bhi Jaanna Bahut Hi Jaruri Hai, Kyoki Ho Sakta Hai Ki Aapke Blog Ki Speed Par Koi Effect Ho Sakta Hai. Dosto Yadi Aap Jyada Plugin Use Karte Hai To Aapka Blog Ki Speed Slow Ho Sakti Hai. Isliye Ham CSS Code Ke Madad Se Reading Progress Bar Ko Add Karenge Jisse Ko aapke Blog Par Koi Effect Nhi Padega. Dosto Iska Use Karne Se Aapka Blog Aur Bhi Attractive Show Hoga. Aap Iska Use Jarur Kare.

How To Add Reading Progress Bar In Blog ?

Dosto Reading Progress Bar Ko Apne Blog Me Kaise Lagaya Jata Hai ? Iske Baare Me Ham Aapko Pura Details Se Jaankari Dene Wale Hai. Dosto Agar Aapko WordPress Blog Me Kisi Bhi Theme Ko Customize Karna Hai To Aap Hamse Contact Kar Sakte Hai. Chaliye Jaante Hai Blog Me Reading Progress Bar Add Kaise Karte hai ? Aap Niche Diye Gye Step Ko Follow Kijiye.

Step 01. Dosto Sabse Pahle Aap Apne Blog Dashboard Par Jaiye.

Step 02. FIr Aap Apearance Par Jaiye.

Step 03. Fir Aap Element Par Jaiye.

Step 04. Fir Aap New Element Par Click Kijiye.

Step 05. Ab Aapko Kuch Is Tarh Se Dikhai De Rha Hoga.

Yaha Pe Aap Hook Ko Select Kare Fir Create Par Click Kr De.

Step 06. Iske Baad Aapko Kuch Is Tarh Se Dikhai De Rha Hoga.

Yaha Par Title Me Aap Reading Process Bar Likhe. Fir Aap Niche Me Niche Diye Gye Code Ko Copy Kare Aur Paste Kar De.

<style>
#site-navigation{
  margin-top:10px!important;
}

.web-insights-reading-meter {
  position: fixed;
  top: 0!important;
  z-index: 1111;
  width: 100%;
  background-color: #f1f1f1;
}

.web-insights-progress {
  width: 100%;
  height: 10px;  z-index: 1111;
  background: #ccc;
}

.progress-bar {
  height: 10px;
  background-color:tomato;
  width: 0%;
}
</style>

<div class="web-insights-reading-meter">
  <div class="web-insights-progress">
    <div class="progress-bar" id="myBar"></div>
  </div>  
</div>

<script> 
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>

Step 07. Fir Aapko Niche Me Kuch Stting Karna Hai. Jise Ki Imge Me Show Ho Rha Hai.

Execute PHP Ko Tick Lagaye.

Fir Aap Display Rules Par Jaye

Yaha Pe Location Me Aap Post Ko Select Kare. Fir Publish Par Click Kar Dena Hai. Fir Dosto Aapke Bog Post Me Reading Progress Bar Show Hone Lagega.

Conclusion:

Dosto Yadi Aap GP Theme Use Kar Rhe Hai To Ye Trick Work Karenga. Dosto Umeed Karta Hu Ki Ye Post Aap Achchha Laga Hoga. Is Post Ko Aap Vote ( Rating) Jarur Kare. Yadi Aap Blogging Se Related Kisi Bhi Prakar Ka Help Chahiye Ya Jaankari Chahiye To Aap Hame Niche Comment Box Me Bindas Comment Kar Sakte Hai.

Hello Dosto Mera Name Madhav Netam Hai. Main, Mera Internet Gyan, Mera General Knowledge Ka founder Hu. Dosto Mujhe Blogging Karna Bahut Pasand Hai. Main Internet Se Naye Naye Jaankari Leta Rahta Hu Aur Apne Visiter Ke liye Naye Naye Technical Related Jaankari Deta Hu. Aur Main Internet Se Sabka Help Karta Hu Mujhe Help Karna Bahut Achchha Lagta Hai

Sharing Is Caring:

1 thought on “How To Add A Reading Progress Bar In WordPress Post Without Plugin | Hindi”

Leave a Comment