Blogger Guide

Download Counter Plugin Blogger Me Kaise Install Kare

download counter plugin blogger me kaise install kare
Written by Rajat Das

Blogger par blog hai aur uspar aap download links bhi provide karte ho to aur aapko ye jaan na hai aapke blogger articles me jo download links hai wo kitne baar click hue hai to me aapko bataunga ki aap blogger me download counter plugin kaise install kar sakte hai

Ab apme me bahut log ye bhi soch rahe honge ki ye download counter aakhir hota kya hai aur ise kaise apne blog par implement kar sakte hai

Download Counter Plugin Kya hai?

Download Counter Plugin basically ek aisa code hai jise aapko apne blogger template me add karna hoga aur aap iss  ki help se apne article me provide kiye gaye link me hone waali sabhi click ko live show aur store kar sakte hai

Download Counter Plugin Blogger Me Kaise Install Kare ?

download counter plugin blogger me kaise install kare

Download Counter Plugin

Download Counter ke liye ham firebase database ka use kar karenge basically firebase me ham apne sabhi download link jo iss download Counter se click huye honge wo sabhi data hame firebase database me show hoga

Step 1: Create Your Firebase Account

Sabse pahle to aapko apne firebase me login karna hoga agar aapka account Firebase me nhi bana hua hai to aap apne Google Account se Firebase me Signup kar lijiye

Step 2: Create Your Project at Firebase

Firebase me login Karne ke baad aapko apne download counter ke liye ek Firebase Project Create karna hoga jisme aap apne sabhi link click ke database to store karenge

Create Project button par click kariye ab aapke saamne ek Pop-up windows open hoga jisme aapko apne Firebase Project ke liye ek Unique Name Choose karna hoga example ke liye maine apne Firebase Project ka name ( feedhindi-demo) rakha hai aap yaha koi bhi name enter kar sakte hai

Jab aap apna unique name select kar lenge to apko apna country select karna hai sab mandatory cheezo ko fill karne ke baad aapko CREATE PROJECT par click karke continue karna hai

Aapko automatically Project Overview page me redirect kar diya jayega, agar apko automatically redirect na kiya jaaye to aap Left Navigation se overview page par aa sakte

Overview page par aane ke baad aapko Authentication section par jaana hai aur ab aapko yaha par top right corner me “Web Setup” option show ho rha hoga iss option par click kare iske baad aapko ek code milega use kahi save kar lijiye aapka code kuch niche diye gaye code ki tarah hoga

<script src="https://www.gstatic.com/firebasejs/3.6.5/firebase.js"></script>
<script>
// Initialize Firebase
  var config = {
    apiKey: "SomeRandomLettersAndNumbers",
    authDomain: "something.firebaseapp.com",
    databaseURL: "https://something.firebaseio.com",
    storageBucket: "something.appspot.com",
    messagingSenderId: "1234567890"
  };
  firebase.initializeApp(config);
</script>

 

Step 3: Install Download Counter Plugin

Download counter ko install karne ke liye niche diye gaye steps ko follow kare

1. Blogger Dashboard me login kar lijiye jiske upar aap ye Plugin install kar sakte hai

2. Blogger Dashboard open karne ke baad aap Left Navigation se “Theme” section par click kare

3. Apne current theme ka ek backup bana lijiye kyuki agar koi problem hoti hai aapke blog ko wapas waisa hi banaya ja sake

4. Edit HTML par click kare

5. Ab aapko apne blogger theme ki sabhi coding dekhne ko milengi yaha par aapko CTRL + F short command ki madad se </head> search karna hai

6. Ab aapko wo code jo hamne Step 2 me Firebase se liya tha wo aapko </head> Tag se pahle paste kar dena hai

7.  CTRL + F short command ki madad se </body> Tag search karna hai

8. </body> tag se pahle aapko niche diye gaye code ko paste karna hai

<!-- Download Counter by FeedHindi -->
<script type="text/javascript">
//<![CDATA[  var dCounters = document.querySelectorAll('.counterCont');
  [].forEach.call(dCounters, function(dCounter){
    var el = dCounter.querySelector('a');
    var cId = dCounter.id;
    var dDatabase = firebase.database().ref('dCounter').child(cId);
  
    // get firebase data
    dDatabase.on('value', function(snap){
      var data = snap.val() || 0;
      dCounter.querySelector('span').innerHTML = data;
    });
    
    // set firebase data
    el.addEventListener('click', function(){
      dDatabase.transaction(function(dCount){
        return (dCount || 0) + 1;
      });
    });
  });
//]]>
</script>

Save kar dijiye theme ko

Step 4: How To Display Download Counter

Jab bhi aapko koi download link ya koi bhi aisa link jiske upar kiye gaye click ko jaankari aapko chahiye hogi waha niche diye gaye code ka istemal kare

<div class="counterCont" id="{$}">
  <a href="{#}">Download</a>
  <span class="counterStat">...</span>
</div>

Post write karte waqt by defualt Composes section me hota hai jo code hai aapko HTML section me paste karna hoga

Aapko iss HTML Code me kuch change karne hai “{$}” isko aapke koi bhi unique name se replace karna hai har baar jab aap ye Code use karenge to aapko diffrent name daalna hoga
Secondly aapko “{#}” ko apne Downloadable link se replace karna hoga

Congratulations! Aapne download counter plugin ko apne blogger blog me Successfully apply kar liya hai

Wait aapne abhi sirf Firebase database aur download counter ke functionalities ko hi apne blogger theme me add kiya hai iss waqt agar aap apne download button ko dekhenge to wo achha nhi dikhega

Agar aap download button ko thoda stylish banana chahate hai to aapko iske liye apne theme me CSS add karna hoga, to chaliye button ko thoda stylish look diya jaaye

Download Button 2 Style me available hai apko ji pasand aaye wo use kar sakte hai

Download Counter Style 1

/*-- Download Counter by FeedHindi -- */
.counterCont {
  margin: 5px auto;
  margin-top: 60px;
  width: 150px;
  position: relative;
  text-align: center;
}
.counterCont a  {
  display: block;
  text-decoration: none;
  color: #f2f2f2;
  padding: 10px 0;
  background: #3498db;
  text-shadow: 0 1px 1px #555;
  box-shadow: inset 0 -1px 5px rgba(255, 255, 255, 0.3);
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 3px solid #2980b9;
  border-radius: 5px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.counterCont span {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  margin-bottom: 5px;
  padding: 10px 0;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  background: #efefef;
  color: #555;
  text-shadow: 0 1px 1px #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.counterCont span:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  border-top: 7px solid #efefef;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  margin-left: -7px;
  margin-top: -1px;
  height: 0;
  width: 0;
}

Download Counter Style 2

/*-- Download Counter by FeedHindi -- */
.counterCont {
  margin: 5px auto;
  width: 150px;
  position: relative;
  right: 15px;
  text-align: center;
}
.counterCont a  {
  display: block;
  text-decoration: none;
  color: #f2f2f2;
  padding: 10px 0;
  background: #3498db;
  text-shadow: 0 1px 1px #555;
  box-shadow: inset 0 -1px 5px rgba(255, 255, 255, 0.3);
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 3px solid #2980b9;
  border-radius: 5px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.counterCont span {
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  line-height: 50px;
  margin-left: 5px;
  padding: 0 10px;
  box-shadow: -2px 0px 7px rgba(0, 0, 0, 0.3);
  background: #efefef;
  color: #555;
  text-shadow: 0 1px 1px #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.counterCont span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  border-right: 7px solid #efefef;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-top: -7px;
  margin-right: -1px;
  height: 0;
  width: 0;
}

Upar aapko dono download button style diye gaye hai aapko inme se kisi ek CSS ko apne theme me add karna hoga

Search for </b:skin> short command CTRL + F ki madad se uske baad aapke ye css add karke apne theme ko save kar dena hoga

That’s all! Great aapne apne blog me download counter plugin install kar liya hai
Agar aapko koi problem aaye to aap comment section me bataye 🙂
Thanks

About the author

Rajat Das

Hey Readers! :) Kaise hain aap? Mera naam Rajat Das hai aur me Feed Hindi Blog ka CEO and Founder hoon.... Feed Hindi Blog par aapko Internet se realated, helping, how to, android and more... jaise topic par article provide kiye jaate hai hai wo bhi Hindi Me

6 Comments

Leave a Comment