ব্লগ বা ওয়েবসাইটের জন্য একটি অসাধারণ ফ্লোটিং লাইক বক্স - An Awesome Floating Like Box

আসসালামু আলাইকুম,
কেমন আছেন সকলে? আজকের ওয়েবসাইট ডিজাইন নিয়ে আমার ছোটো পোস্টে আপনাদের স্বাগতম।
অনেকদিন থেকেই চেষ্টা করছি ওয়েব ডিজাইন ক্যাটাগরিতে ভালো পোস্ট করার, কিন্তু কি করবো? আইডিয়াই পাইনা, আবার টপিক।
এবার আপনাদের একটা সিম্পল ফ্লোটিং লাইক বক্স (মাঝখানে টুইটারের ফলো বক্স রাখতে পারেন, আপনার ইচ্ছা)



প্রথমেই আমাদের নিচের কোড দেখতে হবে, ন্যাটিভ এইচটিএমএল আর সিএসএস দিয়ে রাইট করা কোড।

<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'/>

}

ডেমোঃ এই পেইজ নিজেই!



শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট