বন্ধুরা আজকে আমি আপনাদের ফেসবুক লাইক বক্স এর এক ভিন্ন স্টাইল এর সাথে পরিচয় করাবো । আশাকরি ইতি মধ্যে অনেকে এই স্টাইল এর লাইক বক্স ব্যবহার করছেন কিন্তু যারা এখুন ব্যবহার করছেন না বা এই স্টাইল দেখেননি বা খুজে পাননি তাদের জন্য নিয়ে এলাম আজকের এই পোস্ট । যাই হোক ফেসবুক লাইক বক্স সম্পর্কে বেশি কিছুই বলার নাই এটা দারুন জনপ্রিয় একটি ওয়েডগেট সেটা ব্লগার হোক বা ওয়ার্ডপ্রেস হোক বা অন্য কোন প্লাটফর্ম হোক । আমারা অনেকে অনেক ফেসবুক লাইক বক্স ব্যবহার করি কিন্তু আজের টা Side out লাইক বক্স । নীচে ডেমো দেখুন বুজতে পারবেন ।
☞ উপরের ফটো দেখুন বা ডেমোতে ক্লিক করে লাইভ ডেমো দেখে আসুন । আশাকরি আপনাদের পছন্দ হবে । যদি ভালো লাগে এবং ব্যবহার যোগ্য মনে হয় তাহলে দেখে নিন কিভাবে আপনার ব্লগার ব্লগে যুক্ত করবেন ।
১// আপনার ব্লগ লগইন করুন । ড্যাশবোর্ড থেকে Edit HTML এ ক্লিক করে নীচের কোড খুজুন
</head>
২// উপরের কোড খুজে পেলে তার ঠিক উপরের বা আগে নীচের কোড কপি পেস্ট করুন ।
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
নোটঃ উপরের কোড যদি আগে থেকেই আপনার ব্লগে অ্যাড থাকে তাহলে আবার যুক্ত করতে হবেনা ।
৩// এবার ড্যাশবোর্ড থেকে Layout > Add a Gadget > HTML/Javascript এ ক্লিক করুন ।
৪// এবার Title ঘর ফাকা রেখে Content ঘরে নীচের কোড গুলো কপি পেস্ট করুন ।
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.abtlikebox{background: url("http://1.bp.blogspot.com/-76xZQlbCN14/U4K0M0xSieI/AAAAAAAADtM/0LBLtPvv7oE/s1600/fb1-right_copy.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.abtlikebox span a{color: gray;text-decoration:none;}
.abtlikebox span a:hover{text-decoration:underline;}
}
</style>
<div class="abtlikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fasobondhublog&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>widget from :<a href="http://asobondhu.blogspot.com/"> এসো বন্ধু </a></span>
</div>
</div>
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.abtlikebox{background: url("http://1.bp.blogspot.com/-76xZQlbCN14/U4K0M0xSieI/AAAAAAAADtM/0LBLtPvv7oE/s1600/fb1-right_copy.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.abtlikebox span a{color: gray;text-decoration:none;}
.abtlikebox span a:hover{text-decoration:underline;}
}
</style>
<div class="abtlikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fasobondhublog&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>widget from :<a href="http://asobondhu.blogspot.com/"> এসো বন্ধু </a></span>
</div>
</div>
নোটঃ উপরের কোড এর asobondhublog মুছে সেখানে আপনার ফেসবুক পেজ Url বসান । আর উপরের কোড এর নীল রঙ্গের লিঙ্ক মুছে আপনি ইছে মতো ফটো দিতে পারেন । যেমনঃ নীচে আমি কিছু দিলাম ।
৩// এবার Save এ ক্লিক করে সেভ করে নিন । ব্যাস এবার আপনার ব্লগ ভিজিট করুন । আশাকরি আপনি কাজটি করতে সফল হয়েছেন ।
➥ তাহলে এই নতুন স্টাইল আপনার ব্লগে উপভোগ করুন । পোস্টটি ভালো লাগলে অবশ্যই বন্ধুদের সাথে শেয়ার করুন । আমি জানি যারা ব্লগার ব্লগে পুরনো তাদের ভালো নাও লাগতে পারে । যাই হোক কোন সমস্যা হলে অবশ্যই জানাবেন আমি হেল্প করার চেষ্টা করবো । ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্ হাফেজ ।
Thanks for good tutorial http://worldcup-24.blogspot.com/
উত্তরমুছুনধন্যবাদ সুন্দর একটি কমেন্ট এর জন্য ।
উত্তরমুছুন