পৃষ্ঠাসমূহ

বাঙালির লক্ষপ্রাণের বিনিময়ে অর্জিত স্বাধীনতা রক্ষা করার দায়িত্ব আমাদের সবার

মঙ্গলবার, ১৩ ডিসেম্বর, ২০১১

ব্লগার.কম সাইটে আকর্ষণীয় পেজপিল ইফেক্ট যুক্ত করুন

আজ আমি আপনাদের জন্য সুন্দর একটি পোস্ট নিয়ে হাজির হলাম। আজকের পোস্টে আপনাদের শিখিয়ে দেব কিভাবে আপনাদের ব্লগার.কম এ হোস্ট করা ব্লগে (ব্লগস্পট) এর এক কোনায় পেজপিল ইফেক্ট যুক্ত করবেন।

pagepeel ব্লগার.কম (blogspot.com) সাইটে আকর্ষণীয় পেজপিল ইফেক্ট যুক্ত করুন ... || Bangla technology, tutorial, tips and tricks web site
উপরের চিত্র দেখে নিশ্চয় বুঝে গেছেন। চলুন কিভাবে এটা করতে হয় তাই শিখে নেয়া যাক।
প্রথমে ব্লগার.কম এ লগইন করুন তারপর আপনার কাঙ্ক্ষিত সাইট এর ওভারভিউ ড্রপডাউন মেন্যু থেকে "Template" নির্বাচন করুন।
01 ব্লগার.কম (blogspot.com) সাইটে আকর্ষণীয় পেজপিল ইফেক্ট যুক্ত করুন ... || Bangla technology, tutorial, tips and tricks web site
মনে রাখবেনঃ আমি ব্লগার.কম নতুন ইন্টারফেস নিয়ে লিখেছে তাই যারা পুরাতন ইন্টারফেসেই আছেন তারা ব্লগার.কম এ লগইন করে কাঙ্ক্ষিত সাইট এর ডিজাইন বাটনে ক্লিক করুন।
এবার এখানে ব্লগার.কম এর নির্বাচিত সকল থিম প্রদর্শিত হবে তাই সেখানে কোন পরিবর্তন না করেই একদম নিচে চলে যান সেখানে "Edit Template" নামের একটা লিঙ্ক পাবেন সেখানে ক্লিক করুন তাহলে দেখবেন নিচের ছবির মত কোড এডিটর ওপেন হবে।
02 ব্লগার.কম (blogspot.com) সাইটে আকর্ষণীয় পেজপিল ইফেক্ট যুক্ত করুন ... || Bangla technology, tutorial, tips and tricks web site
এবার এইখানে </head> নামের ট্যাগ টি খুঁজে বের করুন এবং আমার দেয়া নিচের কোডটি </head> এই ট্যাগের আগে বসিয়ে দিন।

ব্লগার কোড

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://2.bp.blogspot.com/_p4Te9Li52fs/So9Qb5J1yWI/AAAAAAAAAAU/8_mR7vt-tCw/subscribe.png) no-repeat right top;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
এবার আবার খুঁজুন <body> ট্যাগ এবং <body> ট্যাগের পরে আমার দেয়া নিচের কোডটি যুক্ত করুন এবং "Save Template" বাটনে ক্লিক করুন।

ব্লগার কোড ২

মনে রাখেবনঃ উপরের কোডে ডিফল্ট ভাবে http://bdrong.com/ যুক্ত করা হয়েছে আপনারা সেখানে আপনাদের লিঙ্ক বসিয়ে দিবেন। আর আপনার সকল ইমেজ গুলোও পরিবর্তন করতে পারেন (ঐচ্ছিক)।
ব্যাস এবার আপনার ব্লগ দেখুন সুন্দর একটি পেজ পিল ইফেক্ট যুক্ত হয়েছে ঠিক সব প্রথমের ছবির মত।
এর দ্বারা পোস্ট করা এই সময়ে
লেবেলসমূহ: ,

কোন মন্তব্য নেই:

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

এতে সদস্যতা: মন্তব্যগুলি পোস্ট করুন (Atom)