0
আজ আমি আপনাদের জন্য সুন্দর একটি পোস্ট নিয়ে হাজির হলাম। আজকের পোস্টে আপনাদের শিখিয়ে দেব কিভাবে আপনাদের ব্লগার.কম এ হোস্ট করা ব্লগে (ব্লগস্পট) এর এক কোনায় পেজপিল ইফেক্ট যুক্ত করবেন।
উপরের চিত্র দেখে নিশ্চয় বুঝে গেছেন। চলুন কিভাবে এটা করতে হয় তাই শিখে নেয়া যাক।
প্রথমে ব্লগার.কম এ লগইন করুন তারপর আপনার কাঙ্ক্ষিত সাইট এর ওভারভিউ ড্রপডাউন মেন্যু থেকে “Template” নির্বাচন করুন।
মনে রাখবেনঃ আমি ব্লগার.কম নতুন ইন্টারফেস নিয়ে লিখেছে তাই যারা পুরাতন ইন্টারফেসেই আছেন তারা ব্লগার.কম এ লগইন করে কাঙ্ক্ষিত সাইট এরডিজাইন বাটনে ক্লিক করুন।
এবার এখানে ব্লগার.কম এর নির্বাচিত সকল থিম প্রদর্শিত হবে তাই সেখানে কোন পরিবর্তন না করেই একদম নিচে চলে যান সেখানে“Edit Template” নামের একটা লিঙ্ক পাবেন সেখানে ক্লিক করুন তাহলে দেখবেন নিচের ছবির মত কোড এডিটর ওপেন হবে।
এবার এইখানে </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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUo2Ab6P9jy9_toZeTCN8aE7m8P8jZnzCwEo-_cNEQpwVzULQpv4QEGYRuUMqudPirFWpIRs2KOkeUWecQHiCKlA8XRRxtos7KIIhYIAKXAKrhsZLNYfRBii7LRY96vHH4l7dzrkGXc6xH/) 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” বাটনে ক্লিক করুন।
ব্লগার কোড ২
<div id='pageflip'> <a href='http://www.tech-infobd.com/'> <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZShXaHqSfiANXdxP75HI_lOt74FQO_zb-8YuymsUbWnLVMUjMeDAuKzWKMMJNXlkeCe3L5IK5GnXQRTP0pP_lemCggM8liap-yUpoUNm9DFwDaxGUDAfWY-6Vy2z1JAcUTyFuG2keqJHR/'/></a> <div class='msg_block'></div> </div>
মনে রাখেবনঃ উপরের কোডে ডিফল্ট ভাবে http://www.tech-infobd.com/ যুক্ত করা হয়েছে আপনারা সেখানে আপনাদের লিঙ্ক বসিয়ে দিবেন। আর আপনার সকল ইমেজ গুলোও পরিবর্তন করতে পারেন (ঐচ্ছিক)।
ব্যাস এবার আপনার ব্লগ দেখুন সুন্দর একটি পেজ পিল ইফেক্ট যুক্ত হয়েছে ঠিক সব প্রথমের ছবির মত।
No comments:
Post a Comment