আপনার ব্লগ বা ওয়েবসাইট এ যোগ করুন স্ক্রোলিং Pop Up সোসাল Widget

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

কিভাবে অ্যাড করবেনঃ

১। প্রথমে আপনার ব্লগারে লগিন করুন ।

২। ড্রোপডাউন মেনু থেকে Layout সিলেক্ট করে Add Gadget এ যান ।

• এসইও সম্পর্কে কিছু কথা - নতুনদের জন্য ।

৩। তারপজ HTML/JavaScript সিলেক্ট করে ফাকা বক্সে নিচের কোডটি সম্পূর্ন পেস্ট করুন ।

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type='text/css'>  #IGsocialslide{  background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOPSkaoZ_LtWibIB1S7x8THe3pIa4EU02JWA8vVVfCDy2VmQpBCkvueq-xA_v8FNiYeyyY8TlFmzAM76Sj6gXptNjIkmqXAoLTYukKlwJXfo2-mSzVs66DGE5YHQaz0Od3mexYfpX3ByI/s1600/NBT_Orange.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">Don't forget to join our community!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FYOUR_FACEBOOK_URL_NAME&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>   <div style="float:left; margin:15px;"><a href="https://twitter.com/YOUR_TWITTER_USER_NAME" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class='clear'></div>  </div>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type='text/css'>  #IGsocialslide{  background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOPSkaoZ_LtWibIB1S7x8THe3pIa4EU02JWA8vVVfCDy2VmQpBCkvueq-xA_v8FNiYeyyY8TlFmzAM76Sj6gXptNjIkmqXAoLTYukKlwJXfo2-mSzVs66DGE5YHQaz0Od3mexYfpX3ByI/s1600/NBT_Orange.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">Don't forget to join our community!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FYOUR_FACEBOOK_URL_NAME&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>   <div style="float:left; margin:15px;"><a href="https://twitter.com/YOUR_TWITTER_USER_NAME" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class='clear'></div>  </div>  

৪। তারপর Save বাটন এ ক্লিক করুন ।

৫। আর আপনার বুঝতে সমস্যা হলে এখানে ক্লিক করে দেখে নিন কিভাভে Layout এ HTML/JavaScript কোড ইউজ করবেন স্ক্রিনশট সহ ।

কাস্টোমাইজেশানঃ

• উপরের কোডের নীল রঙ্গে মার্ক করা লেখাটা আপনার ফেসবুক পেজের লিঙ্ক নেম (যেমনঃ http://fecebook.com/all4fun.bd এখানে শুধু all4fun.bd দিতে হবে আগের http://facebook.com/ ট্যাঁ বাদ যাবে) দ্বারা রিপ্লেস করে দিন ।
• উপরের সবুজ রঙের মার্ক করা লেখাটা আপনার টুইটার নেম দ্বারা রিপ্লেস করুন (যেমনঃ SLsagor) ।