বন্ধুরা আমার সালাম নিবেন । আজকে আমি আপনাদের সাথে দারুন মজার একটি ওয়েডগেট শেয়ার করবো । যারা আমার ব্লগের পুরনো ভিজিটর বন্ধু তারা আমার আগের থিমে দেখেছেন একটি পারসেন্ট স্টাইল ছিল মাউস Scroll করলেই সেটা ১% থেকে ১০০% পর্যন্ত শো করে । আজকে ঠিক আমি আপনাদের সাথে সেটাই শেয়ার করতে যাছি । আমার ব্লগে যারা নতুন তাদের চিন্তা করার কিছু নেই আমি নিচে ডেমো দিয়ে দিয়েছি । তাহলে নিচে থেকে দেখে নিন কিভাবে এই অসাধারন "  Scrollbar এ যুক্ত করুন স্টাইলিশ পারসেন্ট " আপনার ব্লগে যুক্ত করে আপনার ব্লগকে প্রফেশনাল লুক দিবেন ।





উপরের ফটো দেখে যদি বুঝেতে সমস্যা হয় নিচের ডেমো বাটনে ক্লিক করে দেখে নিন লাইভ ডেমো । আশাকরি আপনাদের পছন্দ হবে । 







ডেমো দেখার জন্য উপরের লিঙ্কে ক্লিক করে মাউসকে ওঠা নামা করুন । আশাকরি ডেমো দেখা শেষ হয়েছে । এবার দেখে নিন কিভাবে আপনার ব্লগে যুক্ত করবেন ।


কিভাবে আপনার ব্লগে স্টাইলিশ পারসেন্ট যুক্ত করবেন নিচের স্টেপ দেখুন !


  • প্রথমে আপনার ব্লগার ব্লগ লগইন করুন ।
  • ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।
  • এবার Edit HTML এ ক্লিক করুন তারপর আপনার কীবোর্ডের CTRL + F প্রেস করে নিচের ট্যাগটি খুজে বের করুন ।


]]></b:skin>


  • এবার উপরের কোডের ঠিক আগে বা উপরে নিচের CSS কোড গুলো বসিয়ে দিন ।



#BloggerSpiceScroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
background-color:#0CAFC7;
color: #030303;
border-radius: 3px;
}
#BloggerSpiceScroll:after {
content: " ";
position: absolute;
top: 50%;
right: -7px;
height: 0x;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: rgb(4, 189, 250);
}
@media screen and (max-width:600px){
#BloggerSpiceScroll{
display:none;
}



  • এবার Save এ ক্লিক করে নিচের স্টেপ দেখুন ।
  • একি ভাবে CTRL + F প্রেস করে নিচের ট্যাগটি খুজে বের করুন ।


<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 - $('#BloggerSpiceScroll').height() / 2;
    $('#BloggerSpiceScroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#BloggerSpiceScroll').fadeOut();
    }, 1500);
});
//]]>
</script>

  • উপরের ট্যাগটি খুজে পেলে তার ঠিক পরে নিচের কোড গুলো কপি করে পেস্ট করুন । 
  • কাজ সব শেষ এবার Save Template এ ক্লিক করে বেরিয়ে আপনার ব্লগে ভিজিট করে দেখুন । 

উপরের কোড থেকে না জেনে কোন ধরনের পরিবর্তন করতে যাবেন না ।


☞ আশাকরি আপনি কাজটি করতে সফল হয়েছেন । তাহলে কোন সমস্যা হলে কমেন্ট করুন । ভালো লাগলে বন্ধুদের সাথে শেয়ার করুন । সব সময় এসো বন্ধুর সঙ্গেই থাকুন । ব্লগার বিষয়ক যেকোনো হেল্প্র জন্য আমাদের ফেসবুক গ্রুপে যুক্ত হন । তাহলে আজকের মতো এই পর্যন্ত আবারও দেখা হবে নতুন কিছু নিয়ে ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।


শেয়ার করুন :→

একটি মন্তব্য পোস্ট করুন Blogger

  1. ভাই অবশ্যই কাজ করবে এটাত সহজ জিনিস চেস্ট করুন আমি এখুনি চেক করলাম সব ঠিক আছে । :) :-b

    উত্তরমুছুন

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!

 
Top
Blogger Widgets