খুব সহজে ওয়েবসাইট তৈরি(পব-১১)আপনার ব্লগে যুক্ত করে নিন ফেইসবুক চ্যাট এবং ফেইসবুক পেইজ লাইক অপশন

বিডি টিপটেকে আপনাদের স্বাগতম।বন্ধুরা আজকে আপনাদের সঙ্গে শেয়ার করবো কিভাবে আপনি আপনার ব্লগার ব্লগে একটি ফেসবুক চ্যাট বক্স ম্যাসেঞ্জার ওয়েডগেট যুক্ত করবেন সঙ্গে তাতে লাইক বাটনও থাকবে। চলুন দেখে নেওয়া যাক কিভাবে ব্লগে এই মজাদার ওয়েডগেট টি যুক্ত করবেন।

 

আপনার ব্লগে যুক্ত করে নিন ফেইসবুক চ্যাট এং ফেইসবুক পেইজ লাইক অপশন

Keyword:কিভাবে ব্লগে মেসেজ অপশন চালু করবেন,কিভাবে ব্লগে ফেইসবুক চ্যাট বক্স যুক্ত করবেন,ব্লগে যুক্ত করে নিন ম্যাসেজ অপশন,কিভাবে আপনার ব্লগে চ্যাটরুম যোগকরবেন,কিভাবে আপনার ব্লগে মেসেজ সুবিদা যুক্ত করবেন,কিভাবে ভিজিটরদের সাথে চ্যাট করবেন,ব্লগে যুক্ত করুন ফেইসবুক পেইজ লাইক বক্স,ব্লগে যুক্ত করুন ফেইসবুক লাইক অপশন,আপনার ব্লগে যুক্ত করে নিন ফেইসবুক চ্যাট এং ফেইসবুক পেইজ লাইক অপশন

প্রথমে আপনি আপনার ব্লগার ব্লগ লগইন করুন, এর পর ড্যাশবোর্ড থেকে Template অপশনে ক্লিক করুন।এবার আপনার টেমপেল্ট ব্যাকআপ করে নিন,এটা খুবই গুরুত্বপূর্ন।তারপর Edit HTML এ ক্লিক করুন।

এবার থিম এডিটর অপশন চলে আসবে সেখান থেকে আপনি CTRL+F প্রেস করেন এবং এই </head> ট্যাগ টি সার্চ করেন। এই ট্যাগ খুজে পেলে তার ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন।

<style type="text/css">

.chat_box {

  background: #fff;

  width: 270px;

  height: 435px;

  position: fixed;

  bottom: -400px;

  right: 60px;

  transition: all .3s;

  border: none;

  border-radius: 5px 5px 0 0;

  -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);

  -moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);

  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);

  overflow: hidden;

  z-index:1000000;

}

.pesan_chat {

  text-align: center;

  text-decoration: none;

  display: block;

  height: 100%;

  padding: 5px 5px 15px;

}

.chatheader {

  margin: 0 auto;

  padding: 0 10px;

  height: 35px;

  line-height: 35px;

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  text-align: left;

  display: block;

  cursor: pointer;

  background:#3a5897;

}

.pesan_chat p {

  color: #616161;

  font-size: 14px;

  margin: 10px;

}

.close-chatfb {

  position: absolute;

  top: 0;

  right: 0;

  font-family: Arial;

  font-size: 24px;

  font-weight: 700;

  cursor:pointer;

  width:24px;

  color: #fff;

  height:35px;

  line-height:35px;

  text-align:center;

  opacity: .7;

}

.maxi-chatfb,

.mini-chatfb {

  position: absolute;

  top: 0;

  right: 20px;

  font-family: Arial;

  font-weight: 700;

  cursor:pointer;

  width:18px;

  color: #fff;

  text-align:center;

  opacity: .7;

}

.maxi-chatfb {

  font-size: 24px;

  height:30px;

  line-height:30px;

}

.mini-chatfb {

  font-size: 20px;

  height:25px;

  line-height:25px;

  display: none;

}

.close-chatfb:hover,

.maxi-chatfb:hover,

.mini-chatfb:hover{

  opacity:1;

}

</style> 

   Get code

এবার একি ভাবে </body> এই ট্যাগ টি সার্চ করেন এবং খুজে পেলে এই ট্যাগ এর ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন।

<div class="chat_box" id="chat">

  <div class="chatheader" onclick='showhidechat()'>Like and Message Us 

  </div>

    <div class='close-chatfb' onclick='hidechatfb()'>&#215;</div>

    <div class='maxi-chatfb' id='maxi-chatfb' onclick='showhidechat()'>&amp;square;</div>

    <div class='mini-chatfb' id='mini-chatfb' onclick='showhidechat()'>&#95;</div>

  <div class="pesan_chat">

    <p>Like our facebook page and chat with US</p>

    <script type='text/javascript'>

//<![CDATA[

document.write('<iframe name="f11b13dc65e614" width="250px" height="310px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" data-src="https://www.facebook.com/v2.5/plugins/page.php?adapt_container_width=true&amp;app_id=&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2Fbz-D0tzmBsw.js%3Fversion%3D42%23cb%3Df100e25f3ae8bb8%26domain%3Dbdtipstech.blogspot.com%26origin%3Dhttps%253A%252F%252Fbdtipstech.blogspot.com%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Fbdtipstech%2F&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=false&amp;show_posts=true&amp;small_header=true&amp;tabs=messages&amp;width=250" style="border: none; visibility: visible; width: 250px; height: 310px;" class=""></iframe>');

//]]>

</script>

  </div>

</div>

<script>

//<![CDATA[

function showhidechat() {

  var o = document.getElementById("chat");

  "0px" !== o.style.bottom ? o.style.bottom = "0px" : o.style.bottom = "-400px";

  var o = document.getElementById("maxi-chatfb");

  "none" !== o.style.display ? o.style.display = "none" : o.style.display = "block";

  var o = document.getElementById("mini-chatfb");

  "block" !== o.style.display ? o.style.display = "block" : o.style.display = "none";

};

function hidechatfb() {

  var e = document.getElementById("chat").style.display = "none";

};

function init() {

var vidDefer = document.getElementsByTagName('iframe');

for (var i=0; i<vidDefer.length; i++) {

if(vidDefer[i].getAttribute('data-src')) {

vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));

} } }

window.onload = init;

//]]>

</script> 

Get code

উপর থেকে আপনি bdtipstech.blogspot.com দুবার আছে ওটা মুছে সেখানে আপনার ব্লগ ডোমেইন নাম বসান এবং bdtipstech মুছে সেখানে আপনার ফেসবুক অথবা ফেইসবুক পেইজ User নাম বসান।

Read More »

blog/website এযুক্ত করুন hidden ভিজিটর ট্রেকার আর হাতিয়ে নিন ভিজিটরের সব তথ্য

বিডি টিপ্স টেকে আপনাদের সবাইকে স্বাগতম।আশা করি সবাই ভাল আছেন।আজ আমি আপনাদের কিভাবে আপনার ওয়েবসাইটে হিডেন ভিজিটর ট্রেকার এড করবেন।এটি এড করলে আপনি আপনার ব্লগে উপর নজরদারি রাখতে পারবেন।নিচের চিত্রের দিকে লক্ষ্য করুন আপনি এটি এড করলে যা যা জানতে পারবেন:

১:recent page load activity:কোন দেশ থেকে আপনার ওয়েবসাইটে এসেছে,,আইপি।কোন রেফারেল লিংকের মাধ্যমে এসেছে এবং এক্সিট লিংক কি তা জানতে পারবেন।

2:came form:কোথা থেকে আপনার ওয়েবসাইটে এসেছে।
3:visit length:কতক্ষন আপনার ওয়েবসাইটে অবস্থান করেছে।

4:visitor path:কোথা থেকে এসেছে এবং কিকি পেইজ ভিউ করেছে তা জানতে প্পারবেন।

5:browser:কি ব্রাউজার সবচেয়ে বেশি ব্যবহার করা হয়েছে।

5:recent keyword activity: কি কিওয়ার্ড সার্চ হয়েছে।
6:exit link activity:এটির মাধ্যমে যদি কেউ যদি আপনার ব্লগে এক্সটার্নাল মাধ্যমে বের হয় তাহলে জানতে পারবেন।
7:Recent Visitor Activity :কি অপেরেটেররে মাধ্যমে,এন্ট্রি পেইজ,এক্সিট পেইজ,পেইজ ভিউ,ভিজিট টাইম সবকিচু এখানে পাবেন।
And Many more.

কিবাভে যোগ করবেন:প্রথমে সোজা এখানে গিয়ে সাইন আপ করুন।সাইন আপ করে লগইন করুন। লগ ইন করার পর projects থেকে add project এ ক্লিক করুন।তাহলে নিচের চিত্রের মত দেখতে পাবেন।

এখানে সবগুলো বক্স সঠিক পূরন করুন এবং পাশ থেকে invisible tracking এ ক্লিক করবেন।এখানে ইমেইলের মাধ্যমে report পেতে চাইলে তা নির্ধারণ করে না চাইলে none দিয়ে দিবেন।তারপর add project ক্লিক করবেন।তাহলে নিচের চিত্রের মত দেখতে পাবেন।

এখান থেকে যে যার মত প্ল্যাটফর্ম নির্বাচন করে ওয়েবসাইটে এড করে নিবেন।
যেমন:ব্লগ নির্বাচন করলে আপনাকে html কোড দিবে যা আপনাকে আপনার ব্লগে লেঅউট থেকে html/java script হিসেবে যোগ করতে হবে।

যোগ করার কিছুক্ষন এই ওয়েবসাইটে লগ ইন করলে ভিজিটরের অনেক তথ্য পাবেন।
পোস্টটি ভাল লাগা নালাগা সমন্ধ্যে আমাদের কমেন্ট করে জানাবেন আর রেটিং দিবেন।ধন্যবাদ।

Read More »

খুব সহজে ওয়েবসাইট তৈরি(পর্ব-১২)ব্লগে যুক্ত করুল এমূহর্তে আপনর সাইটে কতজন ভিজিটর আছে

 Bd tips tech এ আপনাদের স্বাগতম।একটু একটু করে আমরা খুব সহযে ওয়েবসাইট তৈরির ১১টি পর্ব লিখে ফেলিছি।আজ আপনাদের সাথে ১২তম পর্বটি লিখতে যাচ্ছি।আজ আমি আপনাদের দেখাবে কিভাবে আমরা আমাদের ব্লগারে সাইটে অনলাইনে কতজন ভিজিটর আছে তা কিভাবে জানা যায় ।এটি যোগ করলে এই মূহুর্তে আপনার ব্লগ বা সাইটে কতজন ভিজিটর অনলাইনে আছে তা আপনি এবং আপনার ভিজিটর দেখাতে পারবেন।

এমূহর্তে আপনর সাইটে কতজন ভিজিটর আছে 

Keyword:ব্লগার টিপস ট্রিক্স,কিভাবে ব্লগ খুলবেন,কিভাবে ব্লগ থেকে ইনকাম করবেন,ব্লগের ভিজিটর বৃদ্ধি করার উপায়,ব্লগের এসইও,ব্লগের সৌন্দর্য বৃদ্ধি,বিডি টিপস ট্রিক্স,বিডি ব্লগ,বাংলা ব্লগ,বিডি টেক টিউনস,BD Technology,bd tips tricks,bd tricks tips,bd tech tunes,bangla vlog

কিভাবে এড ব্লগ বা সাইটে কতজন ভিজিটর আছে

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

২) তারপর Layout এ ক্লিক করুন

৩) Layout এর ভিতর থেকে Add a Gadet ক্লিক করে এর ভিতর থেকে HTML/JavaScript সিলেক্ট করতে হবে।

৪) তার পর Title ঘরে কনটেন্ট এর নাম দিবেন যেমন: Online Counter । Content এর ঘরে ভিতরে নিচ থেকে আপনার পছন্দমত কোড গুলো কপি করে বসিয়ে দিন

<!-- BEGIN: Powered by Supercounters.com -->

<center><script type="text/javascript" src="http://widget.supercounters.com/tab.js"></script><script type="text/javascript">var sc_tab_var = sc_tab_var || [];sc_tab(1355224,"left","center")</script><br><noscript><a href="http://www.supercounters.com/">Tumblr Online Counter</a></noscript>

</center>

<!-- END: Powered by Supercounters.com -->

                                      GET CODE                                        

এখানে left এবং center আপনার ব্লগের ডিজান অনুযায়ি পরিবর্তন করে নিন।সবশেষে সেভ করে বেরিয়ে আসুন।এবার আপনার ব্লগে গিয়ে দেখুন।ভাল লাগলে আবশ্যই জানাবেন।আমরা আছি,

আমাদের ফেইসবুক গ্রুপ facebook group
ফেইসবুক পেইজ facebook page
ইউটিউব চ্যানেল Youtube

Read More »

খুব সহজে তৈরি করুন ওয়েবসাইট(পর্ব-৮)ব্লগের পোস্টের টাইটেলের নিচে এড বসান

খুব সহহজে ওয়েবসাইট তৈরির ৮ম পর্বে আপনাদের সবাইকে স্বাগতম।আশাকরি সবাই ভাল আছেন।এই পর্বে আমি দেখাবো কিভাবে ব্লগে প্রতিটি পোস্টের টাইটেলের নিচে

Read More »

ব্লগে যুক্ত করুন স্টাইলিশ শেয়ার বাটুন

আসসালামু আলাইকুম,আশা করি ভালই আছেন, আমাদের যাদের ব্লগ আছে তারা নিশ্চই জানেন যে শেয়ার বাটনের কত টুকু দরকার একটি ব্লগের জন্য। আর তা যদি হয় ভিসিটরটিউন এর মতন তাহলে কেমন হয়। তাহলে এখনই আপনার থিম বা কোড ইডিটরে যান। এবং যেখানে বাটন বসাতে চান সেখানে নীচের যে কোন একটা কোড বসান।

১ম ডিজাইন

কোড ঃ-

<div class="don-share" data-style="icons" data-limit="5"> <div class="don-share-total"> </div> <div class="don-share-facebook"> </div> <div class="don-share-twitter"> </div> <div class="don-share-google"> </div> <div class="don-share-linkedin"> </div> <div class="don-share-pinterest"> </div> <div class="don-share-stumbleupon"> </div> <div class="don-share-delicious"> </div> <div class="don-share-reddit"> </div> <div class="don-share-tumblr"> </div> <div class="don-share-buffer"> </div> <div class="don-share-vk"> </div> </div> <script type="text/javascript"> (function() { var dr = document.createElement('script'); dr.type = 'text/javascript'; dr.async = true; dr.src = '//bit.ly/1GKKj20'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr); })(); </script>

২য় ডিজাইন

কোড ঃ-

<div class="don-share" data-style="icons" data-limit="5"> <div class="don-share-total"> </div> <div class="don-share-facebook"> </div> <div class="don-share-twitter"> </div> <div class="don-share-google"> </div> <div class="don-share-linkedin"> </div> <div class="don-share-pinterest"> </div> <div class="don-share-stumbleupon"> </div> <div class="don-share-delicious"> </div> <div class="don-share-reddit"> </div> <div class="don-share-tumblr"> </div> <div class="don-share-buffer"> </div> <div class="don-share-vk"> </div> </div> <script type="text/javascript"> (function() { var dr = document.createElement('script'); dr.type = 'text/javascript'; dr.async = true; dr.src = '//bit.ly/1GKKj20'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr); })(); </script>

৩য় ডিজাইন

কোড ঃ-

<div class="don-share" data-style="icons" data-limit="5"> <div class="don-share-total"> </div> <div class="don-share-facebook"> </div> <div class="don-share-twitter"> </div> <div class="don-share-google"> </div> <div class="don-share-linkedin"> </div> <div class="don-share-pinterest"> </div> <div class="don-share-stumbleupon"> </div> <div class="don-share-delicious"> </div> <div class="don-share-reddit"> </div> <div class="don-share-tumblr"> </div> <div class="don-share-buffer"> </div> <div class="don-share-vk"> </div> </div> <script type="text/javascript"> (function() { var dr = document.createElement('script'); dr.type = 'text/javascript'; dr.async = true; dr.src = '//bit.ly/1GKKj20'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr); })(); </script>

ভাল লাগলে শেয়ার এবং অবশ্যই একটি কমেন্ট করতে ভুলবেন না

Read More »

ব্লগের জন্য সুন্দর একটি কন্ট্রোল প্যানেল(ব্লগার দিয়ে প্রফেশনাল ওয়েবসাইট তৈরি পর্ব-৩)

(bd tips tech)বিডি টিপ্স টেকে আপনাদের স্বাগতম।আশাকরি সবাই ভাল আছেন।ব্লগ দিয়ে ওয়েবসাইট তৈরির গত দুই পর্বে আমি ব্লগারের ড্যাশবোর্ড,ডিজাইন এবং সেটিং নিয়ে মোটামুটি আলোচনা করেছি।

ব্লগের জন্য সুন্দর একটি কন্ট্রোল প্যানেল

আসুন গুগুল ব্লগ দিয়ে নিজের ওয়েব সাইট তৈরি করি,কিভাবে ব্লগ/ওয়েব সাইট তৈরি করবেন ও সেখান হতে আয় করবেন,ওয়েবসাইট তৈরি করার নিয়ম,ওয়েবসাইট তৈরি করুন,ফ্রি ওয়েব সাইট তৈরি,বিনা খরচে তৈরী করুন ওয়েব সাইট,বিনামূল্যে বানান নিজের ওয়েবসাইট,ব্লগ, ব্লগার এবং ব্লগিং কি? ব্লগিং করার জন্য সেরা ১২ টি ব্লগিং সাইট,একটি নতুন ব্লগের জন্য backlink বৃদ্ধি করার ৫টি পদ্ধতি ,নিয়ে নিন কিছু অসাধারন টেমপ্লেট আপনার ব্লগার ব্লগের জন্য,bd tech tunes,trick bangla

আজ আমি দেখাবে কিভাবে ব্লগে একটি সুন্দর কন্ট্রোল প্যানেল যোগ করবেন।সাধারণত ব্লগে কন্ট্রোল প্যানেল থাকে না তা আপনাকে মেনুয়্যালি যোগ করে নিতে হবে।
আপনি যখন আপনার ব্লগে ভিজিট করবেন এবং যদি লগিন করা থাকে তাহলে আপনি আপনার ব্লগের উপরে এই কন্ট্রোল প্যানেল দেখতে পাবেন।আপনি ছাড়া আর কেউ এই কন্ট্রোল প্যানেল দেখতে পারবে না।উপরের এই কন্ট্রোল প্যানেল এ ব্লগের মূল কন্ট্রোল প্যানেলে যা থাকে সেগুলো এখানে থাকবে।এখান থেকে যে কোন টাতে ক্লিক করলেই আপনি সেইখানে চলে যাবেন।

আগের পোস্টগুলিঃ 
খুব সহজে তৈরি করুন ওয়েবসাইট(পর্ব-১)

 খুব সহজে তৈরি করুন ওয়েবসাইট (পর্ব-২)
খুব সহজে ওয়েবসাইট তৈরি(পর্ব-৪)ব্লগে যুক্ত করুন ছবি সহ related post widget
খুব সহজে তৈরি করুন ওয়েবসাইট (পর্ব-৫)ব্লগে যুক্ত করুন ছবি ছাড়া related post widget 
খুব সহজে তৈরি করুন ওয়েবসাইট (পর্ব-৬)পোস্টের মাঝখানে এড বসান সহজে 
 খুব সহজে তৈরি করুন ওয়েবসাইট(পর্ব-৭)ব্লগের পোস্টের টাইটেলের নিচে শেয়ার বাটুন যুক্ত করুন
খুব সহজে তৈরি করুন ওয়েবসাইট(পর্ব-৮)ব্লগের পোস্টের টাইটেলের নিচে এড বসান
ব্লগে যুক্ত করুন অটোমেটিক রিড মোর অপশন

কিভাবে যোগ করবেনঃ
যোগ করা জন্য আপনাকে নিচের ধাপ গুলো ফলো করতে হবে।

প্রথমে ব্লগের আইডি বের করাঃ
ব্লগের আ্ইডি বের করা জন্য আপনার ব্লগের লগিন করুন তারপর যে ব্লগটিতে এটি যোগ করতে চান সেই ব্লগের যে কোন জায়গায় যান যেমন সেটিং এ যান।
এবার দেখুন উপরে BlogID=XXXXXXXXXXXXXXXXXX এ ধরনের মোট ১৮ টি অক্ষর আছে এটি আপনার ব্লগের আইডি এটি কপি করে নোটপ্যাডে পেস্ট করে রাখুন।


এবার কিছু কোড যোগ করতে হবে তাহলে আপনি সফল ভাবে এটি করতে পারবেন।

প্রথমে আপনার ব্লগের Template এ যান।
Edit Template এ ক্লিক করুন।
এবার কোডের ভিতরে ক্লিক করে ctrl+f চেপে নিচের কোডটি খুজুন।

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

যদি এটি না পান তাহলে <body> কোডটি খুজুন।
যদি খুজে পান তাহলে এবার নিচের কোডটুকু এর নিচে বসিয়ে দিন।

<span class='item-control blog-admin'>
<style>
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}
.control-panel a:hover {text-decoration:none; color:#FC8F44;}
</style>
<div class='control-panel'>
<ul>
<li><a href='http://www.blogger.com/home'>My Blogs</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar'>New Post</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/target=page'>New Page</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts'>All Posts</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments'>Comments</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements'>Layout</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'>Edit HTML</a></li>
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li>
<li><a href='/' target='_blank'>New Tab</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'>Settings</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>

Get code
এবার সব লাল কালারে জায়গায় আপনার ব্লগের আইডিটি দিন।এবং সেভ করুন।তারপর ব্লগে যান দেখুন মজা।আশাকরি পোস্টটি আপনাদের ভাল লেগেছে।একটি কমেন্ট করে যাবেন।

Read More »

easily create a professional website(part-7)How to add Infinite Scrolling to Blogger

Welcome to bd tips tehc.today will show how to add your blog Infinite Scrolling.Instead of showing Older / Newer posts links, we can load posts dynamically.This tutorial will show you how to implement Ajax based loading script that will add Infinite Scrolling to Blogger.

 

How to add Infinite Scrolling to Blogger

keyword:how to add Infinite Scrolling,add blogger Infinite Scrolling post,add blogger Infinite Scrolling,how add blogger Infinite Scrolling,add blogger Infinite Scrolling,বল্গে যুক্ত লোড মোর ইফেক্ট,কিভাবে বল্গে সি মোর ইফেক্ট যুক্ত করবেন,বল্গে লোড মোর পোস্ট যুক্ত করার উপায়

Adding Infinite Scrolling to Blogger

Log into your Blogger account and click on your blog where you want to add it.

Go to 'Template' and click the 'Edit HTML' button to open the Template editor > click anywhere in the code area and press CTRL + F keys (or Command + F) to open the search box

Type the tag below in the search box and press ENTER to find it:

</head>

Just above the </head> tag, add the following scripts/css styles:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

!function(a){function b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var b=a("<div></div>").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide());b=b.find(g).children();a(g).append(b),window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load();f.find("img").hide();f.find("a").show();h=!1})):f.hide())}function c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),c=i.scrollTop()+i.height();150>a-c&&b()}var d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var g=a('<a href="javascript:;" >LOAD MORE POSTS</a>');g.click(b);i.scroll(c);f=a('<div class="load-more"></div>');f.append(g);f.append(e);f.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})}(jQuery);

//]]>

</script>

</b:if></b:if>

 Get code

Note: This code uses jQuery library, so if you already have jQuery on your page, please remove the line in red highlighted above.

 Click 'Save template' button and check the  Infinite Scrolling in your Blogger blog.

Read More »