বন্ধুরা আমার সালাম নিবেন । আজকে আমি আপনাদের সাথে দারুন মজার একটি ওয়েডগেট শেয়ার করবো । যারা আমার ব্লগের পুরনো ভিজিটর বন্ধু তারা আমার আগের থিমে দেখেছেন একটি পারসেন্ট স্টাইল ছিল মাউস 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 এ ক্লিক করে বেরিয়ে আপনার ব্লগে ভিজিট করে দেখুন ।
উপরের কোড থেকে না জেনে কোন ধরনের পরিবর্তন করতে যাবেন না ।
☞ আশাকরি আপনি কাজটি করতে সফল হয়েছেন । তাহলে কোন সমস্যা হলে কমেন্ট করুন । ভালো লাগলে বন্ধুদের সাথে শেয়ার করুন । সব সময় এসো বন্ধুর সঙ্গেই থাকুন । ব্লগার বিষয়ক যেকোনো হেল্প্র জন্য আমাদের ফেসবুক গ্রুপে যুক্ত হন । তাহলে আজকের মতো এই পর্যন্ত আবারও দেখা হবে নতুন কিছু নিয়ে ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্ হাফেজ ।
কাজ হল নাতো ;-(
উত্তরমুছুনভাই অবশ্যই কাজ করবে এটাত সহজ জিনিস চেস্ট করুন আমি এখুনি চেক করলাম সব ঠিক আছে । :) :-b
উত্তরমুছুন