আপনার ব্লগার ব্লগে ছবির উপরে যুক্ত করুর পিন্টারেষ্ট বাটন!! [মেগাপোষ্ট]

বন্ধুরা আমার সালাম নিবেন। আশা নয় আমি মন থেকে বিশ্বাস করি আপনারা সকলে ভাল আছেন। আর আমিও আপনাদের দোয়া নিয়ে মোটামুটি ভাল আছি। বন্ধুরা আপনারা ভাবছেন কিভাবে ছবির উপরে পিন্টারেষ্ট উইজেট বাটন যোগ করা সম্ভব। ভাবার কোন কারণ নেই ছোট একটা কোডিং এর মাধ্যমে আপনারা আপনার ওয়েব সাইট বা ব্লগ সাইটে যোগ করতে পারেন। আর এই জগৎ অনেক ধরনের সামাজিক সাইট আছে। যেমন- ফেসবুক, টুইটার, বিং, ডগ, ইউটিউব, পিন্টারেষ্ট ইত্যাদি উল্লেখযোগ্য। আর পিন্টারেষ্ট সেই ধরনের একটি সামাজিক যোগাযোগ সাইট। তো বন্ধুরা আর বিস্তারিত নয় এবার মুল কাজের কথায ফিরে আসি। তো দেখুন তাহলে...

আসলে একটি কথা না বললে নয়। পিন্টারেষ্ট ব্যবহার করলে নিন্মোক্ত কিছু বৈশিষ্ট্য আপনারা লক্ষ্য করতে পারবেন। সেটা হলো ......

পিন্টারেষ্ট উইডেট ব্যবহারের কিছু বৈশিষ্টসমূহ। 

1. এটি উইজেটটি সহজভাবে ব্লগের শিরোনাম এবং URL সনাক্ত করতে পারবে। 
2. এটি সংক্রিয়ভাবে পোষ্ট শিরোনাম এবং বিস্তারিত বর্ণনা দখল করবে। 
3. ব্লগার তাদের নিজস্ব পিন বাটন সহজে ব্যবহার করতে পারবে। 
4. সহজে পিন বাটন Movable the pin button position।
5. এছাড়া ফায়ারবক্স, গুগল ক্রম, ওপেরা সহ সকল ব্রাউজারের সংঙ্গে সামঞ্জস্যপূর্ণ এই উইজেটটি।

কিভাবে আপনার ব্লগার ব্লগে যুক্ত করবেন।

• প্রথমে আপনার ব্লগার ব্লগে ড্যাশবোর্ডে প্রবেশ করুন। 
• তার পর ড্যাশবোর্ড হতে ড্রাপ ডাউন মেনু থেকে টেমপ্লেট নির্বাচন করুন। 
• এবং এডিট টেমপ্লেটটি ক্লিক করুন। 
•  এবার আপনারা Ctrl+F চেপে </body> খুজে বের করুন।
• </body> ট্যাগের উপরে এবার আপনারা নিচের কোডটুকু হুবাহু কপি করে পেষ্ট করুন।

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVjTLffcWoR-WgPPwJx6AVvx5yxBYJy0A2aJ6pq-vP4PO_ga1RGTRAioKLU9E8Ezk5cl8THdXLfN3_U1axucGlXqwjiJaZAmRwqHmc55A8llCuXyq8vx_6PMDMVSiGq42Lh54vzXwBDF2x/s1600/BloggerSpice+Pinterest-Pinned.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script id='spice-pin' type='text/javascript'>
/*<![CDATA[*/
jQuery(document).ready(function($){$('body').append('<img style="visibility:hidden;" class="loadpinitbutton" src="'+custom_pinit_button+'" >');$('#spice-pin').hide();var l;var m;var n;$('.loadpinitbutton').load(function(){m=$('.loadpinitbutton').outerWidth(true);n=$('.loadpinitbutton').outerHeight(true);$('.loadpinitbutton').remove()});var o=$('#spice-pin').html().indexOf("helplogger.blogspot.com");o!=-1&&hoverCheck();function hoverCheck(){$('.entry-content img,.post-body img,.entry-summary img').not('.nopin,.nopin img').mouseenter(function(){$('.pinit-visibility').css("visibility","hidden");clearTimeout(l);var a=$(this);var b=parseInt(a.css("margin-top"));var c=parseInt(a.css("margin-left"));var d;var e;switch(pinit_button_position){case'center':d=a.position().top+a.outerHeight(true)/2-n/2;e=a.position().left+a.outerWidth(true)/2-m/2;break;case'topright':d=a.position().top+b+5;e=a.position().left+c+a.outerWidth()-m-5;break;case'topleft':d=a.position().top+b+5;e=a.position().left+c+5;break;case'bottomright':d=a.position().top+b+a.outerHeight()-n-5;e=a.position().left+c+a.outerWidth()-m-5;break;case'bottomleft':d=a.position().top+b+a.outerHeight()-n-5;e=a.position().left+c+5;break}var f=a.prop('src');var g=a.closest('.post,.hentry,.entry').find('.post-title,.entry-title,.entry-header');var h=g.text();if(typeof pinit_button_before==='undefined'){pinit_button_before=''}if(typeof pinit_button_after==='undefined'){pinit_button_after=''}if(g.find('a').length){pinitURL=g.find('a').attr('href').replace(/\#.+\b/gi,"")}else{pinitURL=$(location).attr('href').replace(/\#.+\b/gi,"")}var i='<div class="pinit-visibility" style="display:none;position: absolute;z-index: 9999;" ><a href="http://pinterest.com/pin/create/button/?url='+pinitURL+'&media='+f+'&description='+pinit_button_before+h+pinit_button_after+'" style="display:block;outline:none;" target="_blank"><img class="pinimg" style="-moz-box-shadow:none;-webkit-box-shadow:none;-o-box-shadow:none;box-shadow:none;opacity: 0.8;background:transparent;margin: 0;padding: 0;border:0;" src="'+custom_pinit_button+'" title="Pin on Pinterest" ></a></div>';var j=a.parent().is('a')?a.parent():a;if(!j.next().hasClass('pinit-visibility')){j.after(i);if(typeof l==='undefined'){j.next('.pinit-visibility').attr("onmouseover","this.style.opacity=1;this.style.visibility='visible'")}else{j.next('.pinit-visibility').attr("onmouseover","this.style.opacity=1;this.style.visibility='visible';clearTimeout(pinitOnHover)")}}var k=j.next(".pinit-visibility");k.css({"top":d,"left":e});k.css("visibility","visible");k.stop().fadeTo(300,1.0,function(){$(this).show()})});$('.entry-content img,.post-body img,.entry-summary img').on('mouseleave',function(){if($.browser.msie){var a=$(this).next('.pinit-visibility');var b=$(this).parent('a').next('.pinit-visibility');l=setTimeout(function(){a.stop().css("visibility","hidden");b.stop().css("visibility","hidden")},3000)}else{$('.pinit-visibility').stop().fadeTo(0,0.0)}})}});
//]]>
</script>

• এবার আপনার ব্লগারের টেমপ্লেটটি সেভ করুন এবং প্রিভিউ করে দেখুন কাজ হয়েছে।

এবার বন্ধরা আপনাদের একটি কাজ অবশ্যই করতে হবে। সেটা আপনার ব্লগার টেমপ্লেটটিতে একটি সাধারন জাভাস্কিপ্ট আছে সেটা পরিবর্তন করতে হবে। 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

তো বন্ধুরা এবার আগেরমত টেমপ্লেটটি সেভ করুন। তো আপনার কাজ শেষ। বন্ধুরা আগামীতে আরো নতুন কিছু নিয়ে আপনাদের সামনে হাজির হব ততদিন পর্যন্ত আপনার আমাদের সাথে থাকুন। আর যদি কোন কিছু বুঝতে সমস্যা হয় তাহলে কমেন্টের মাধ্যমে জানাতে ভুলবেন না। আল্লাহ হাফেজ।