১৫ এপ্রিল, ২০১৫

ব্লগে যুক্ত করে নিন Scrolling Facebook Popup Like Box Widget

ব্লগে যুক্ত করে নিন Scrolling Facebook Popup Like Box Widget
4/ 5 stars - "ব্লগে যুক্ত করে নিন Scrolling Facebook Popup Like Box Widget" ব্লগ কিংবা ওয়েবসাইটে Facebook Like Box যুক্ত করার অর্থ হচ্ছে এর মাধ্যমে কিছু ফেইসবুক ফ্যান বাড়িয়ে নেওয়া। তাই বেশীরভাগ ক্ষেত্রেই দেখা যায় ...
-
ব্লগ কিংবা ওয়েবসাইটে Facebook Like Box যুক্ত করার অর্থ হচ্ছে এর মাধ্যমে কিছু ফেইসবুক ফ্যান বাড়িয়ে নেওয়া। তাই বেশীরভাগ ক্ষেত্রেই দেখা যায় যে, প্রায় প্রত্যেক ব্লগের ডান পাশে একটি Facebook Like Box রয়েছে। এই Facebook Like Box এর মাধ্যমে ভিজিটররা ব্লগ থেকে আপনার ফ্যান পেইজে লাইক দিয়ে থাকেন, যাতে তারা ভবিষ্যতে ফেইসবুকের মাধ্যমে আপডেট পোষ্ট গুলি দেখতে পায়। এ ক্ষেত্রে দেখা গেছে Facebook Like Box ব্লগের ডান পাশের Layout এ থাকার কারনে অনেকের দৃষ্টিগোচর হয় না। আর আপনি যদি এটিকে একটু ট্রিকস কাটিয়ে Popup এ দিতে পারেন তাহলে কেমন হতো, নিশ্চয় এটি সহজেই ভিজিটরদের দৃষ্টিগোচর হত। আমি যে Facebook Popup Like Box টি শেয়ার করছি এটি অত্যান্ত সুন্দর এবং স্টাইলিস্ট। ভিজিটররা ভিজিট করার সময় এটি আপনার ব্লগের উপর থেকে Scrolling করে নিচের দিকে নামবে, যা এটিকে আরও আকর্ষণীয় করে তুলবে। তাছাড়া আপনি ইচ্ছা করলে এটিতে বিভিন্ন ধরনরে কালার ইফেক্ট দিতে পারবেন। এখাণ থেকে লাইভ ডেমো দেখুন - Live Demo

Facebook-Popup-Like-Box
কিভাবে যুক্ত করতে হয়ঃ
  • প্রথমে আপনার ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • তারপর কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
  • এখন নিচের কোডগুলি কপি করে </body> এর উপরে পেষ্ট করুন।
    <style type='text/css'>
    #FBpop {
    position:fixed !important;
    position:absolute;
    top:-1000px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:300px;
    height:auto;
    padding:5px;
    background:#04BDFA;
    font:normal Dosis,
    Georgia, Serif;
    color:#111;
    -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:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    }
    #FBpop a.bsclose {
    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 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(window).bind(&quot;load&quot;, function() {
    // Animate Top
    $(&#39;#FBpop&#39;).animate({top:&quot;50px&quot;}, 1000);
    $(&#39;a.bsclose&#39;).click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>

<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
  • এরপর ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন।
  • তারপর HTML/JavaScript এ ক্লিক করুন।
  • এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
<div id='FBpop'>
<center>
<div class="fb-page" data-href="https://www.facebook.com/prozokti" data-show-cover="true" data-show-facepile="true" data-show-posts="false" width="300" height="250"></div>
</center>
<a class='bsclose' href='#'>&times;</a>
</div>
  • এখন Save Template এ ক্লিক করলেই কাজ OK.
কাষ্টমাইজেশনঃ
  • উপরের এই লাল অংশ হতে width:300px; পরিবর্তন করে নিতে পারেন।
  • এই লাল অংশ হতে background:#04BDFA; ব্যাকগ্রাউন্ড কালার পরিবর্তন করে নিতে পারেন।
  • এ অংশটিতে prozokti এর স্থলে অবশ্যই আপনার ফেইসবুক আইডির ইউজার নেম দিতে হবে।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

0 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

একটি মন্তব্য পোস্ট করুন

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: