আমাদের কথা খুঁজে নিন
যেভাবে আপনার ব্লগে পারসেন্ট ভেলু ক্রুল গেজেট যুক্ত করবেন।সময়ের সেরা ওয়েভ গেজেট না দেখে মিস করবেন না।
শুরুতেই ডেমো দেখুন এখানে
প্রথমেই আপনার টেম্পলেট এর ব্যাকআপ নিয়ে নিন।
প্রথমে লগ-ইন করে ব্লগার ডেসবোর্ডে যান।তারপর Go to Template >> Edit HTML and search for the ]]></b:skin> tag.
তারপর নিচের কোডটুকু ]]> </b:skin> এই কোর্ডের উপর পেস্ট করুন।
#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> tag এর পরে নিচের কোডটি পেস্ট করুন।(Tip: Make sure you paste the code between the ending </head> and opening <body> head tag.
<div id='scroll'></div>
সবশেষে </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>
এবার আপনার টেম্পলেটটি সেভ করুন।ভাল লাগলে এবং কোন সমস্যা হলে আশা করি কমেন্ট করবেন।ধন্যবাদ।
আমার ব্লগটি ঘুরে আসার দাওয়াত রইল http://riyad21.blogspot.com/
অনলাইনে ছড়িয়ে ছিটিয়ে থাকা কথা গুলোকেই সহজে জানবার সুবিধার জন্য একত্রিত করে আমাদের কথা । এখানে সংগৃহিত কথা গুলোর সত্ব (copyright) সম্পূর্ণভাবে সোর্স সাইটের লেখকের এবং আমাদের কথাতে প্রতিটা কথাতেই সোর্স সাইটের রেফারেন্স লিংক উধৃত আছে ।