আসসালামু আলাইকুম,
কেমন আছেন সকলে? আজকের ওয়েবসাইট ডিজাইন নিয়ে আমার ছোটো পোস্টে আপনাদের স্বাগতম।
অনেকদিন থেকেই চেষ্টা করছি ওয়েব ডিজাইন ক্যাটাগরিতে ভালো পোস্ট করার, কিন্তু কি করবো? আইডিয়াই পাইনা, আবার টপিক।
এবার আপনাদের একটা সিম্পল ফ্লোটিং লাইক বক্স (মাঝখানে টুইটারের ফলো বক্স রাখতে পারেন, আপনার ইচ্ছা)
এবার আপনাদের একটা সিম্পল ফ্লোটিং লাইক বক্স (মাঝখানে টুইটারের ফলো বক্স রাখতে পারেন, আপনার ইচ্ছা)
প্রথমেই আমাদের নিচের কোড দেখতে হবে, ন্যাটিভ এইচটিএমএল আর সিএসএস দিয়ে রাইট করা কোড।
<style>
.grplusbd_floating_likebox{
position: fixed;
right: 0px;
top: 40%;
border-radius: 10px;
padding: 10px 15px;
background-color: rgba(0, 161, 255, 0.21);
height: 70px;
}
</style>
<div class="grplusbd_floating_likebox">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Ffacebook.com%2Fgrplusbd&width=49&layout=box_count&action=like&show_faces=false&share=true&height=65&appId" width="60" height="100" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
কোডের ব্যাখ্যাঃ
প্রথমে একটা স্টাইল ট্যাগের মাঝে আমি সিএসএস এপ্লাই করেছি। সেখানে এর পজিশন ফিক্সড করে স্থির রেখেছি। রাইট ০ পিএক্স দিয়ে ডান দিকে ০ পিক্সেল প্যাডিং, মানে কোনো ফাক না থাকার ব্যাবস্থা করেছি। টপ ৪০% দিয়ে উপর থেকে ৪০% নিচে নামিয়েছি। এতেই এটি পেজের ডান পাশে মাঝামাঝি অংশে ভেসে থাকে বা ফ্লোট করে। বর্ডার রেডিয়াস ১০ পিএক্স দিয়ে বর্ডার গোলাকার করেছি। প্যাডইং ১০পিক্স ১৫পিএক্স দিয়ে মাঝের কন্টেন্ট মারজিন করেছি। ব্যাকগ্রাউন্ড কালারে আরজিবিএ এপ্লাই করে অর্ধ স্বচ্ছ রঙ এপ্লাই করেছি। হাইট ৭০পিক্সেল রেখেছি।
আবার যদি সাথে ক্লোজ বাটন রাখতে চানঃ
আবার যদি সাথে ক্লোজ বাটন রাখতে চানঃ
<style>
.grplusbd_floating_likebox{
position: fixed;
right: 16px;
top: 40%;
border-radius: 10px;
padding: 10px 15px;
background-color: rgba(0, 161, 255, 0.21);
height: 70px;
}
.orthi-textlightbox-area-close {
background-color: black;
color: white;
border-radius: 50%;
padding: 10px;
float: right;
border: 1px solid black;
box-shadow: 0 0 10px 0 rgba(33, 157, 216, 0.82);
margin-top: -30px;
margin-right: -30px;
cursor: pointer;
-webkit-user-select: none;
}
</style>
<script>
function grplusbd_floating_likebox(){
var w1 = document.getElementById('grplusbd_floating_likebox');
var w2 = ('display: none;');
w1.style= w2;
}
</script>
<div class="grplusbd_floating_likebox" id="grplusbd_floating_likebox" style="display:inline;">
<button class="orthi-textlightbox-area-close" onclick="grplusbd_floating_likebox()"><button class="orthi-textlightbox-area-close" onclick="grplusbd_floating_likebox()"><i class="fa fa-times" aria-hidden="true"></i></button>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Ffacebook.com%2Fgrplusbd&width=49&layout=box_count&action=like&show_faces=false&share=true&height=65&appId" width="60" height="100" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
কোডের ব্যাখ্যাঃ
নতুন কিছুই না, ছোটো একটা জাভাস্ক্রিপ্ট দিয়েছি আর ক্রস বাটনের জন্য সিএসএস অ্যাড করে দিয়েছি।
{ক্রস বাটন কাজ করাতে হলে ফন্ট অসাম এনাবেল করা থাকতে হবে, এনাবেল করা না থাকলে হেড ট্যাগের নিচে নিচের কোড পেস্ট করে সেইভ করুন,
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
}