আমরা অনেকেই আমদের ব্লগে ভাসমান বা Pop Up উইডগেট ব্যাবহার করে থাকি । সাধারনত দেখা যায় আমরা বিভিন্ন সোসাইল উইডগেট পপ আপ হিসাবে ব্যাবহার করে থাকি । যেমনঃ ফেসবুক লাইক বক্স, টুইটার ফলোয়ার বাটন ইত্যাদি । এটা যেহেতু সহজেই ব্যাবহারকারীর দৃষ্টি আকর্ষন করতে পারে তাই এটা বেশ কাজের।
কাল রাতে ঘুমতে গিয়ে শুয়ে শুয়ে ভাবছিলাম পরশু তো বাংলা নববর্ষ, ব্লগের ভিসিটরদের একটু বিশেষ কোনভাবে এই বাংলা নববর্ষের শুভেচ্ছা জানাতে পারলে কেমন হয় ব্যাপারটা । যেই ভাবা সেই কাজ অমনি লিখতে বসেগেলাম একটা জাভাস্ক্রিপ্ট কোড । আর তাই নিয়েই আজকের এই পোষ্টটা । আমি আজ আপনাদের সাথে শেয়ার করতে যাচ্ছি, সেই আমাদের পুর্ব সুপরিচিত পপ আপ একটা উইডগেট । না এটা কোন সোসাইল বক্স নই । আপনার ব্লগে এই উইডগেটটা অ্যাড করলে আপনার ব্লগে যখনি কোন একজন নতুন ভিসিটর আসবে, তখনি স্বংক্রিয়ভাবে তাকে একটা সুন্দর চোখ ধাধানো স্টাইলের পপ আপ বক্স দ্বারা বাংলা নববর্ষের শুভেচ্ছা জানাবে আপানার ব্লগ । এটাতে আমি যে স্ক্রিপ্টটা ব্যাবহার করেছি সেটা খুবি ইউজার ফ্রেন্ডলি এবং খুব দ্রুত লোড হয় । তাই আপনার ব্লগের লোডিং টাইম নিয়ে কোন চিন্তা করতে হবেনা । দেখতে হয়ত কোডটা একটু বড় কিন্তু সেটা আসলে উইডগেটটাকে একটু অধিক মাত্রায় ডিজাইন করেছি তাই, নববর্ষের শুভেচ্ছা বলে কথা :D । আর নিচের লিঙ্ক থেকে আপনি চাহিলে এই উইডগেটের ডেমোটা দেখেনিতে পারেন ।
এবার তাহলে শুরু করা যাকঃ
এটা খুবি সহজ করে আমি আপনাদের জন্য তৈরি করেছি । ইন্সটল করতে কোন প্রকার সমস্যা হবে বলে মনেকরি না । তারপরও কোন সমস্যা হলে নিচে কমেন্ট বক্স তো আছেই । এবার নিচের ধাপ গুলো অনুসরন করুনঃ
১। প্রথমে আপনাকে যেটা করতে হবে তা হলো, নিচের কোডটা কপি করুন একদম প্রথম থেকে শেষ পর্যন্ত ।
<div align="center"><style type='text/css'>
#ITfunFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:500px;
height:347;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#ITfunFBpop a.itfun24 {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#ITfunFBpop').animate({top:"50px"}, 1000);
// Widget by www.itfun24.com.com
$('a.itfun24').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='ITfunFBpop'>
<!-- Widget by www.itfun24.com Start -->
<center>
<b><a class="Mobile Updates">বাংলা নববর্ষের শুভেচ্ছা</a></b></center>
<center>
<iframe scrolling='no' img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_LPwyYe-t_jlZfe0V7JqVGSbhrk2Pc_jnRVpGfGnrTO6xEzlL5F5BFzof2qDawNgN6b_zz0J0tJ6QfK2ku7Fl2LDuNxzDA8yahHwRAgQ3ArhodGw9jTTlLJ85fu5mb9xn4QKRNH0WcShm/s1600/bangla_new_year_2_by_itfun24.jpg" width="450px" height="300px" border="0px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_LPwyYe-t_jlZfe0V7JqVGSbhrk2Pc_jnRVpGfGnrTO6xEzlL5F5BFzof2qDawNgN6b_zz0J0tJ6QfK2ku7Fl2LDuNxzDA8yahHwRAgQ3ArhodGw9jTTlLJ85fu5mb9xn4QKRNH0WcShm/s1600/bangla_new_year_2_by_itfun24.jpg" /></span></iframe></center>
<!-- Widget by www.itfun24.com End -->
<a class='itfun24' href='www.itfun24.com'>×</a>
<center style="float:right; margin-right:10px;">
<span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href=" http://is.gd/HOjRHK" rel="dofollow">Click Here</a></center>
</div></div>
২। এবার আপনার ব্লগারে লগিন করুন । তারপর ড্রপডাউন মেনু থেকে "Layout" সিলেক্ট করুন । বুঝতে অসুবিধা হলে নিচের ছবিটা দেখুন ।
৩। Layout এ ক্লিক করলে আপনি আপনার ব্লগের লেআউট অপশন গুলো দেখতে পাবেন । সেখান থেকে "Add a Gadget" এ ক্লিক করুন ।
৪। এবার একটা পপ আপ উইন্ডো ওপেন হবে । সেখান থেকে আপনি "HTML/JavaScript" এর পাশের প্লাস (+) বাটন এ ক্লিক করুন । ভালোভাবে বুঝতে নিচের ছবিটি দেখুন ।
৫। এবার একটা ফাকা বক্স ওপেন হবে । টাইটেলে কিছু দেবার দরকার নাই, নিচের বড় বক্সে আপনার কপি করা কোডটা পেস্ট করে Save এ ক্লিক করুন । ব্যাস আপনার কাজ শেষ । এবার সবকিছু ঠিকঠাক হয়ছে কিনা দেখবার জন্য আপনার ব্লগে একবার ঘুরে আসতে পারেন ।
বিদ্রঃ
- আপনি যদি একটু অ্যাডভান্স টাইপের ব্লগার হয়ে থাকেন তাহলে আপনি এই একই কাজটি আপনার টেম্পলেট এডিট করেও করতে পারেন । তারজন্য আপনাকে টেম্পলেট এডিট এ গিয়ে </body> ট্যাগের ঠিক উপরে উপরের দেওয়া পপ আপ কোডটা পেস্ট করে দিতে হবে ।
- আর আপনি চাইলে এই উইডগেটটা অন্য যেকোন বিশেষ দিনে আপনার ভিসিটরদের শুভেচ্ছা জানাতে ব্যাবহার করতে পারেন । যেমন ধরুন আপনি ইংরেজি নববর্ষে আপনার ভিসিটরদের Happy New Year এর শুভেচ্ছা দিতে চান । সেক্ষেত্রে আপনাকে শুধু আপনার পছন্দমত একটা Happy New Year এর ইমেজ আপলোড করে উপরের কোড থেকে ইমেজ এর লিঙ্কটা আপনার নতুন ইমেজের লিঙ্ক দ্বারা রিপ্লেস করে দিতে হবে । ইমেজ আপলোড নিয়ে বিস্তারিত আলোচনা করব অন্য একদিন অন্য একটা পোস্টে ।
পোষ্টটি ভালো লাগলে আপনার বন্ধুদের সাথে শেয়ার করুন এবং আপনার মুল্যবান একটা কমেন্ট রেখে যান ।
