ब्लॉगर में स्क्रॉलबार प्रतिशत मूल्य विजेट जोड़ें

नोज जैसवाल : सभी पाठकों मेरा प्यार भरा नमस्कार। मेरी पिछली पोस्ट को अत्यधिक पसंद करने के लिए आप सभी का ह्रदय से आभार। आज तकनीकी पोस्टों के क्रम में पेश है। 'ब्लॉगर में स्क्रॉलबार प्रतिशत मूल्य विजेट जोड़ें' कुछ ब्लॉगर मित्रों ने मुझसे पूछा है, कि ब्लॉगर में स्क्रॉलबार प्रतिशत मूल्य विजेट लगाने का तरीका बताएं। उन मित्रों को तो मैने मेल से विजेट लगाने का तरीका मेल कर दिया है, फिर ख्याल आया कि इसे पोस्ट के माध्यम से हिंदी में सरल रूप में पेश किया जाय। इसे लगाना बेहद आसान है,आप इस विजेट को बेहद आसानी से अपने ब्लॉग या वेबसाइट पर स्थापित कर सकते हैं। आप नीचे दिए बेहद आसान चरणों को अपनाएँ स्क्रॉलबार प्रतिशत मूल्य विजेट आपके ब्लॉग पर स्थापित हो जाएगा। आप इसका लाइव डेमो नीचे दिए डेमो बटन पर क्लिक कर देख सकते हैं।



Live Demo

विजेट को ब्लॉग पर लगाने का तरीका।


  • अपने ब्लॉगर एकाउंट में लांग इन हों। —>Template—>Edit HTML
  • अब यह कोड खोजें  ]]></b:skin> एंव नीचे दिया CSS कोड इसके ठीक ऊपर पेस्ट कर दें।

#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;
}

  • अब यह कोड खोजें। </head>

  •  </head> एंव नीचे दिया कोड इसके ठीक नीचे पेस्ट कर दें।
After adding the CSS coding, search for the ending </head> tag and right after it paste the following code. (Tip: Make sure you paste the code between the ending </head> and opening <body> head tag.

<div id='scroll'></div>



  • अब यह कोड खोजें।</body>
  • </body>एंव नीचे दिया कोड इसके ठीक ऊपर पेस्ट कर दें।
  • अब टेम्पलेट को सेव कर दें।

<script type="text/javascript">
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

विजेट आपके ब्लॉग पर सफलतापूर्वक स्थापित हो चुका है।


क्या आपको यह लेख पसंद आया? अगर हां, तो ...इस ब्लॉग के प्रशंसक बनिए !!
इस पोस्ट का शार्ट यूआरएल चाहिए: यहाँ क्लिक करें। Sending request...
Comment With:
OR
The Choice is Yours!

50 कमेंट्स “ब्लॉगर में स्क्रॉलबार प्रतिशत मूल्य विजेट जोड़ें”पर

  1. शानदार विजेट मनोज जी थैंक्स.

    ReplyDelete
    Replies
    1. हिंदी ब्लॉगर्स चौपाल {चर्चामंच} पर पधारें, आपके विचार मेरे लिए "अमोल" होंगें | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | सादर .... Lalit Chahar

      Delete
    2. Babu sexena जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  2. Replies
    1. Vikas sexena जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  3. Great Widget Thanks....

    ReplyDelete
    Replies
    1. हिंदी ब्लॉगर्स चौपाल {चर्चामंच} पर पधारें, आपके विचार मेरे लिए "अमोल" होंगें | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | सादर .... Lalit Chahar

      Delete
    2. mohit sexena जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  4. शानदार विजेट मनोज जी थैंक्स.

    ReplyDelete
    Replies
    1. हिंदी ब्लॉगर्स चौपाल {चर्चामंच} पर पधारें, आपके विचार मेरे लिए "अमोल" होंगें | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | सादर .... Lalit Chahar

      Delete
    2. अर्चना अग्रवाल जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  5. वाह जी , कमाल का विजेट है ये तो , साथ साथ नीचे ऊपर होकर बताता रहता है कित्ता पढ लिया कित्ता अभी बाकी है ।

    ReplyDelete
    Replies
    1. अजय सर, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  6. Replies
    1. Babu Ram जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  7. बढिया विजेट शेयर करने के लिए धन्यवाद सर.

    ReplyDelete
    Replies
    1. हरीश बिष्ट जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  8. Replies
    1. पूरण जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  9. कमाल का विजेट मनोज जी थैंक्स.

    ReplyDelete
    Replies
    1. Amit Jain जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  10. सुन्दर विजेट मनोज सर थैंक्स.

    ReplyDelete
    Replies
    1. Shivam Kumar जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  11. मनोज जी
    बहुत सुन्‍दर और उत्‍क़ष्‍ठ विजेट है, आभार
    माइ बिग गाइड की इस नई कडी का अवलोकित कर टिप्‍पणी के माध्‍यम से उत्‍साहवर्धन करने का कष्‍ट करें,
    My Big Guide Idea Wall माइ बिग गाइड आइडिया वाल
    Turn the wireless electricity वायरलेस हो जाये बिजली

    ReplyDelete
    Replies
    1. Abhimanyu Bhardwaj जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  12. बढिया विजेट शेयर करने के लिए धन्यवाद सर.

    ReplyDelete
    Replies
    1. Prem Raj जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  13. बढिया विजेट

    ReplyDelete
    Replies
    1. piush pant जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  14. अच्छा विजेट धन्यवाद सर.

    ReplyDelete
    Replies
    1. Chintu Raj जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  15. मनोजजी प्रणाम में आपके ब्लॉग को नियमित पढ़ता हु आप एक अच्छे मार्ग दर्शक हे बहोत ही उमदा पोस्ट हे

    ReplyDelete
    Replies
    1. महेंद्र जी प्रणाम, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  16. बहोत ही उमदा पोस्ट

    ReplyDelete
  17. बहुत सुन्‍दर और उत्‍क़ष्‍ठ विजेट धन्यवाद.

    ReplyDelete
    Replies
    1. Baby Pande जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  18. Replies
    1. Dinesh shukla जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  19. बहुत सुन्‍दर और उत्‍क़ष्‍ठ विजेट धन्यवाद मनोजजी.

    ReplyDelete
    Replies
    1. pinky joshi जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  20. अच्छा विजेट धन्यवाद

    ReplyDelete
    Replies
    1. sanny chauhan जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  21. बहुत सुन्दर प्रस्तुति..
    ---
    हिंदी ब्लॉगर्स चौपाल {चर्चामंच} के शुभारंभ पर आपको सूचित करते हुए हर्ष हो रहा है कि आपकी पोस्ट को हिंदी ब्लॉगर्स चौपाल में शामिल किया गया है और आप की इस प्रविष्टि की चर्चा {रविवार} (01-09-2013) को हम-भी-जिद-के-पक्के-है -- हिंदी ब्लॉगर्स चौपाल चर्चा : अंक-002 पर की जाएगी, ताकि अधिक से अधिक लोग आपकी रचना पढ़ सकें। कृपया पधारें, आपके विचार मेरे लिए "अमोल" होंगें | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा |
    ---
    सादर ....ललित चाहार

    ReplyDelete
    Replies
    1. Lalit Chahar जी, आपका आभार।

      Delete
  22. बहुत अच्‍छी जानकारी।

    ReplyDelete
    Replies
    1. विकेश जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  23. Great Widget Thanks....

    ReplyDelete
    Replies
    1. Preeti Sexena जी, पोस्ट पर टिप्पणी के लिए धन्यवाद।

      Delete
  24. बहुत ही अच्छी जानकारी है . धन्यवाद ! मनोज जी .आपके सुझाव से विजेट सही स्थान पर लग गया. एक जानकारी चाहता हूँ ,ब्लॉग के लिए अच्छा टेम्पलेट कहाँ से डाउनलोड किया जाय ,टेम्पलेट change करने से एलिमेंट और विजेट पर क्या असर पड़ेगा.

    ReplyDelete
    Replies
    1. राजीव जी, आप गूगल पर फ्री ब्लॉगर टेम्पलेट लिख कर सर्च करेंगें तो आपको बहुत से अच्छे टेम्पलेट मिल जायेंगे। टेम्पलेट चेंज करने से आपके विजेट को कोई नुक्सान नहीं होगा। केवल विजेट की सेटिंग को आपको सही करना होगा। एक अहम् बात आप टेम्पलेट कोई भी पसंद करे उसकी कमान अपने हाथों में ही रखें। मेरे कहने का मकसद यह है टेम्पलेट में जो भी स्क्रिप्ट्स किसी दुसरे सर्वर पर होस्ट होती है। उन्हें आप अपने खुद के सर्वर जैसे गूगल डाक्स या गूगल कोड पर सेव कर लिंक को अपने सर्वर लिंक से बदल लें।

      Delete

Widget by:Manojjaiswal
Related Posts Plugin for WordPress, Blogger...
Online Marketing
Praca poznań w Zarabiaj.pl
 

Blog Directories

क्लिक >>

About The Author

Manoj jaiswal

Man

Behind

This Blog

Manoj jaiswal

is a 56 years old Blogger.He loves to write about Blogging Tips, Designing & Blogger Tutorials,Templates and SEO.

Read More.

ब्लॉगर द्वारा संचालित|Template Style by manojjaiswalpbt | Design by Manoj jaiswal | तकनीक © . All Rights Reserved |