জেকোয়ারি প্লাগিন সমাচার পর্ব -১:::মিক্সিটাপ কি কিভাবে ব্যাবহার করবেন আপনার ওয়েব সাইটে ?::::

টিউনার রিদম এর ব্লগে আপনাদের সবাইকে স্বাগতম। 
এই সিরিজটিতে আমি আপনাদের জেকোয়ারি বিখ্যাত  সব প্লাগিন নিয়ে আলোচনা করব সাথে থাকুন। 
আজকে আপনাদের সাথে আলোচনা করব মিক্সিটাপ প্লাগিন নিয়ে বিভিন্ন ওয়েব  সাইটে ভিসিট করলে লক্ষ্য করবেন,Portfolio filer  অপশনে গেলে কয়েকটি বিভাগ থাকে যেমন ওয়েব ডিজাইন,ওয়েব অ্যাপ্লিকেশান,ওয়ার্ডপ্রেস,মোবাইল অ্যাপ্লিকেশান ইত্যাদি তো এর মধ্যে  থেকে ওয়েব ডিজাইনে ক্লিক করলে ওয়েব এর করা কাজ গুলো শো করে ওয়েব ডেভেলপমেন্ট এ ক্লিক করলে ওয়েব ডেভেলপমেন্ট এর করা কাজ গুলো শো করে তো এ কাজটি কিভাবে আমারা আমাদের ওয়েব সাইট এ করতে পারব তা আমার আজকের  আলোচ্য বিষয়।

টিউনটি পড়ার আগে নিচের বিষয় গুলো সম্পর্কে বেশ ভালো ধারনা থাকতে হবে।

• এইচটিএমএল 
• সিএসএস 
• জাভাস্ক্রিপ্ট  {বেসিক জানলেও চলবে তবে না জানলে ও সমস্যা নেই ,টিউনটি দেখতে পারবেন }
• জেকুউরি
• জেকুউরি ইউ আই { না জানলে ও সমস্যা নেই ,টিউনটি দেখতে পারবেন, জানা থাকলে ভাল আরকি }
• টুইটার বুটস্ত্রাপ

প্রথমে এই ওয়েব সাইট এ গিয়ে মিক্সিটাপ প্লাগিনটি ডাউনলোড করে নিন ,নিচের মত

এর পর ডাউনলোড হয়া শেষ হলে ফাইলটিকে এক্সট্রাট করুন । এর পর build নামে একটি ফোল্ডার আছে সেখানে  jquery.mixitup.min.js নামে একটি Js ফাইল আছে সেটি আপনার  টেমপ্লেটের Js নামক ফোল্ডারে কপি করে পেস্ট করুন ।

আমার টেম্পলেটাতে যাযা রয়েছে

ইনডেক্স ডট এইচটিএমএল  ফাইল

শুধু মাত্র ইনডেক্স ডট এইচটিএমএলে টুইটার-বুটট্র্যাপ কল করা আছে আর লেটেস্ট জেকুউরি কল আছে আর সিএসএস আর ফন্ট আর ইমেজ নামে  তিনটি ফোল্ডার আছে  এবং ইমেজ ফোল্ডারের ভিতরে ১৫টি ছবি আছে একই সাইজের এ ছাড়া আর কিছুই নেই, কারন আমি বেশি কন্টেন্ট রাখি নেই আপনাদের বুঝার সুবিধার জন্য,এইটি  ভালো ভাবে বুঝতে পারলে যেকোন টেম্পলেটে আপনার মিক্সিটাপ যুক্ত করতে পারবেন।

{ আপনারা মিক্সিটাপে ইমেজ ব্যবহার করার আগে সব ইমেজ একই সাইজ এর করে নিবেন Roit  নামক সফটওয়্যার এর সাহায্যে। }

এবার আসি মূল আলোচনায়  


build নামে একটি ফোল্ডার থেকে  কপি করা  jquery.mixitup.min.js নামে একটি Js ফাইলটি  Js নামক ফোল্ডারে রাখার পর এবার এইটিকে আমাদের টেম্পলতে কল করা হবে নিচের মত,footer এ জেকুউরি কল করলাম কারন প্রথমে  পেজ লোড হবে এর পর প্লাগিন লোড হবে এতে করে সাইট ফাস্ট থাকবে মানে বুঝাতে চেয়েছি একজন উজার যখন ওয়েব সাইটে ভিসিট করবে প্রথমে ওয়েব সাইটি লোড হয়ে  কিছু  অংশ তার সামনে প্রদর্শিত হবে এর পর ফুটারে গিয়ে জেকুউরি গুলো  লোড হবে । তাই সব সময় ফুটারে জেকুউরি ব্যাবহার করার চেষ্টা করবেন । তবে কিছু কিছু জেকুউরি প্লাগিন আছে যা হেডারে কল করতে হয় যেমন : প্রিলোডার আমি অন্য একটি টিউনে এইটি নিয়ে লিখব ।
        
 

এর পর  আমি একটি Div নিয়েছি যার নাম দিয়েছি mixitup-Filter-menu এর পর Ul এর ক্লাস দিয়েছি Filter এর পর আমার যতটি লিস্ট আইটেম দরকার  ততটি  নিয়েছি আর আপনারা Ul li এর পর a দিবেন না তাহলে কিন্তু কাজ করবে না ।আমরা সব সচরাচর Ul li a নিয়ে থাকি তবে এইটি যেহেতু লিস্ট আকারে থাকবে  কোন প্রকার লিংক হবে না । Data filter এ যে নাম থাকবে আপনার লিস্ট আইটেমে  একি  নাম হতে হবে,শুধু একটি ছোট পরিবর্তন হবে তা হল Data -Filter এ  ক্লাস এর আগে একটি করে ডট সাইন বসবে । { All এর  আগে  ডট  দিবেন না }  আর লিস্ট আইটেমে আপনি যে কোনো নাম দিতে পারেন যেমন আমি কিছু কার্টুন চরিত্রের নাম দিয়েছি।এবং ইউজার যে কার্টুন চরিত্রে ক্লিক করবে তার ছবি শো করবে ।
 {  বিঃদ্রঃ Filter এবং Data-Filter এই দুটি মিক্সিটাপ এর ক্লাস এইদুটি আপনি নিজের মত করে লিখতে পারবে না  আপনাকে নিচের মত করে লিখতে হবে  । }          
       

আউট -পুট

এর পর ওপরের ডিভ এর পর আরও একটি ডিভ নিন ,এর পর আপনার পছন্দ মত  ক্লাস এর নাম দিন,  ডিভ  এর  ভিতরে আমরা  লিস্ট আইটেম এর  কন্টেন্ট দিব,ওপরের ছবিটি লক্ষ্য করুন সেখানে spider-man, mickey-mouse Tom-And-Gerry এ নামে কয়েকটি লিস্ট আছে,তো আমাদের গোল হচ্ছে উজার যখন Tom-and-Gerry তে ক্লিক করবে তখন Tom -And-Gerry এর ছবি উজার এর কাছে শো করবে  শুধু তাই নয় spider-man, mickey-mouse উজার যে আইটেম এ ক্লিক করুক না কেন তার ছবি শো করবে,কারন উজার তো শুধু Tom-and-Gerry তে ক্লিক করবে না সে ওপরের দেয়া যেকোন আইটেমে ক্লিক করতে পারে । তো এই কাজটি করার জন্য নিচের মত কোডিং করে ফেলুন ।      

 এর পর আপনি যে কয়টি আইটেমের কন্টেন্ট দেখাতে চান ততটি কপি করে পেস্ট করুন,যেমন আমি চাইছি Tom-and-Gerry, spider- man, mickey-mouse,doremon প্রত্যেকটির ৩ টি করে ইমেজ উজার এর সামনে প্রদর্শিত হবে । কোড এর  আউটপুটটি হবে এই রকম ।

আচ্ছা এবার আপনাদের কোডটা বুঝিয়ে দি কিভাবে আমি কোডটি লিখেছি ,আশা করছি ১ নং ডিভ এর কাজ টা   আপনারা বুজেছেন ,তো সেটি আর বলতে চাচ্ছি না ,  দ্বিতীয় নাম্বার ডিভে  আমি menu-list-items নামে একটি ক্লাস  নিয়েছি  আপনি আপনার মনের মত যে কোন একটি  ডিভ নিতে পারেন সমস্যা নেই । এর তার ভিতরে <div class="mix  tom-and-jerry mixitup-images" >  তো এইখানে mix ক্লাসটি মি নিজে থেকে দিনেই এটা  মিক্সিটাপ এর ক্লাস এটা আপনাকে অবশই দিতে হবে । এর পর আমি দিয়েছি ক্যাটাগরি নেম Tom-And-Jerry  আর এখানে  আপনি ভুলেও ১ নং ডিভ এর মত  ক্যাটাগরি নেম {.Tom-And-Gerry}  এর আগে ডট দিবেন না,দিয়ে থাকলে কিন্তু কাজ করবে না ,এর পর আমরা আমাদের নিজেদের একটি ক্লাস দিয়েছি সিএসএস দিয়ে  স্টাইল করার জন্য  { mixitup-image } নামে ।এর পর আছে data-my-order="1" এইটি ও মিক্সিটাপ এর ক্লাস এইটিও আপনাকে ব্যাবহার করতে হবে । যায়  হোক আশা করছি বুঝাতে পেরেছি ।  
  
এর পর আউট পুট আসবে

এর পর একটি সিএসএস ফাইল খুলুন অ্যান্ড আপনার ইনডেক্স.এইচটিএমএলে কল করান  এর পর নিচের মত কোড লিখে ফেলুন আপনার সদ্য খুলা সিএসএস ফাইলটিতে

 কোডটিতে লক্ষ্য করুন DIV No 2 এর যে ক্লাসটি  ব্যাবহার করা হয়েছে সেটি এইখানে কল করা হয়েছে,কোডটিতে বলা হয়েছে  .menu-list-items  এর ভিতরের ক্লাস mix কে ডিসপ্লে none করুন ।
এর পর একটি জাভাস্ক্রিপ্ট ফাইল খুলুন অ্যান্ড আপনার ইনডেক্স.এইচটিএমএলে কল করান  এর পর নিচের মত কোড লিখে ফেলুন আপনার সদ্য খুলা জাভাস্ক্রিপ্ট ফাইলটিতে

এইখানে আপনার  DIV No 2 এর যে ক্লাসটি  ব্যাবহার করা হয়েছে সেটি এইখানে কল করা দিন তাহলে আপনার মিক্সিটাপটি কাজ করবে ।

আউট পুট

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

আউট পুট

কাজ প্রায়  শেষ  আপনারা চাইলে আরও নিত্য নতুন Effect যুক্ত করতে পারেন
তো সেটি করার জন্য আপনার জাভাস্ক্রিপ্ট ফাইলটি ওপেন করুন যে রকম আছে সে রকম  থাকবে  জাস্ট .mixItUp এর ভিতরে সেকেন্ড বন্ধনী এর ভিতরে Animation এর পর Effects এর বিভিন্ন নাম দিন নীচের কোডিংটি দেখুন

এইগুলো  Animation  এর Effect try  করে দেখতে পারেন
fade
scale
translateX
translateY
translateZ
rotateX
rotateY
rotateZ
stagger


সোর্স ফাইল গুলো ডাউনলোড করে দেখুন

 আর এই লিঙ্ক গুলো দেখতে পারেন ।
১. https://mixitup.kunkalabs.com/docs/#prop-animation-effects
২. https://github.com/patrickkunka/mixitup



ধন্যবাদ সবাইকে টিউনটি পড়ার জন্য।
                                
আমার আপডেট টিউন গুলো সবার আগে ইমেল এ পেতে আপনারা ক্লিক করুন এবং ইমেইল দিয়ে ভেরিফাই করুন : টিউনার»রিদম দত্ত  

বিভিন্ন সোসিয়াল সাইট এ আমাকে খুজে পেতে নিচের আইকন গুলোতে ক্লিক করুন।

বিঃদ্রঃ  আমার অনুমতি ছাড়া আমার ব্লগ এর পোস্ট অন্য কোথাও দিবেন না যদি দিতে চান আমার ব্লগ নাম উল্লেখ করে দিবেন।

আমার সকল পোস্ট পড়তে  নিচের ইমেজটিতে ক্লিক করুন

             

             

বিস্তারিত পড়ুন »

:::::জেনে নিন ফীড বার্নার কি? কি ভাবে আপনাদের ওয়েব সাইট বা ব্লগ এর কনটেন্ট ভিজিরদের কাছে পাঠাবেন ইমেল এর মাধ্যমে :::::::: { ~ Loyal টিউন ~ }

আজকে আমি আপনাদের সাথে গুগল এর একটি জনপ্রিয় সার্ভিস ফীড বার্নার নিয়ে আলোচনা করব।

চলুন এক নজরে দেখে নেয়া যাক কি কি থাকছে আজকের টিউনেঃ

• Introduction টু গুগল ফীড বার্নার
• কিভাবে  ফীড বার্নার ইন্সটল করবেন  
• কিভাবে  ফীড বার্নার ব্যাবহার করতে হয়
• ব্লগার ডট কম এ কিভবে এইটি সেট করবেন
• ফাইনালি কিভাবে ওয়ার্ডপ্রেস এ কিভাবে এইটি ব্যাবহার করবেন
• আরও অনেক কিছু         

Introduction টু গুগল ফীড বার্নার

ফিড বার্নার কি ?

Feed (web Data Format)
Rss (Rich Site Summary)
Email Subscribe + Latest update via mail
Feed burner হল আরএসএস ওয়েব সার্ভিস ফীড , যার মাধ্যমে ব্লগ/ওয়েব সাইটের নতুন নিউজ/পোষ্ট ভিজিটর এর  মাঝে সয়ংক্রিয়ভাবে পৌছে দেয়া যায় । আপনারা বিভিন্ন ব্লগ বা ওয়েবসাইটে দেখে থাকবেন যে লিখা থাকে আর.এস.এস বা  Subscribe এই লিখা টি। এই খানে যারা Subscribe করবে তাদের কাছে আপনার ওয়েব সাইট এর আপডেট কনটেন্ট গুলো চলে যাবে ফলে তারা ওয়েব সাইট ভিজিট  না করে আপনার ওয়েব সাইট এর গুরুতপূর্ণ কনটেন্ট গুলো দেখতে পারবে  Feed burner ব্যবহার এর ফলে আপনাদের ব্লগে ভিজিটর ও বাড়ার ও সম্ভাবনা রয়েছে ।

কিভাবে  ফীড বার্নার ইন্সটল করবেন

ফীড বার্নার এর ইমেইল সাবস্ক্রাইব সুবিধাটি গ্রহণ করার জন্য নিচের স্টেপ গুলো ভালো ভাবে লক্ষ্য করুন,আমি প্রথমে ব্লগার এর জন্য দেখাবো এর পর ওয়ার্ডপ্রেস এ কিভাবে এইটি সেট করবেন সেটি নিয়ে ও আলোচোনা করব ।  

প্রথমে আপনার জিমেইল অ্যাকাউন্ট দিয়ে  লগিন করে নিন ,এর পর নিচের এড্রেসটি আপনার ওয়েব ব্রাওজার এর এড্রেস বার এ লিখুন ।

https://feedburner.google.com

এর পর নিচের মত একটি পেজ আসবে , চীর্ণিত অংশ টিতে আপনার ওয়েব সাইট এর URL টি দিন উদাহরণ হিসেবে আমার ওয়েব সাইট এর URL টি দিলাম । নিচের পেজটি ওয়েব সাইট এর URL দেবার পর নেক্সট এ ক্লিক করুন।  

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

 ওপরের অপশনটি সিলেক্ট করার পর নেক্সট বাটন এ ক্লিক করুন। এর পর নিচের মত একটি পেজ আসবে এইখানে আপনার ওয়েব সাইট এর ডিফল্ট টাইটেলটি শো করবে আপনি চায়লে এডিট করে দিতে পারেন।ফীড এড্রেসটি আপনি চায়লে শর্ট করে দিতে পারেন, আমি আমার মত করে দিয়েছি।সব ডিটেলস ঠিক মত দেবার পর নেক্সট বাটন  চাপুন ।      

এর পর আপনাকে অভিনন্দন জানাবে।নিচে সিলেক্ট করা যে এড্রেসটি রয়েছে সেটি আপনার ওরজিনিয়াল ফীড এড্রেস এইটি আপনি কপি করে রাখতে পারেন এবং সবার  সাথে শেয়ার করতে পারেন । এর পর নেক্সট বাটন এ ক্লিক করুন      

এর পর নিচের মত একটি পেজ আসবে এইখান থেকে আপনি চায়লে কাস্টমাইজ করতে পারেন যে মন ফিড-বার্নার এর পেজটি যখন উজার এর সামনে প্রেজেন্ট হুবে,ডিফল্ট ভাবে যদি ওপেন করাতে চান তাহলে কোন কিছু সিলেক্ট না করে নেক্সট বাটন এ ক্লিক করুন,আর আপনি  চায়লে   SmartCast  ও  iTunes podcasting এর মাধ্যমে  MP3 গুলি, ভিডিও, ছবি, এবং অন্যান্য ডিজিটাল মিডিয়া লিঙ্ক ইত্যাদি ব্যাবহার করে পেজটিকে আও সুন্দর   করতে পারেন  আরো বিস্তারিত তালিকা জন্য প্রয়োজনীয় উপাদান যোগ করতে পারেন । আমি  বাকি অপশন  যে রকম  আছে সেরকম সিলেক্ট করে নেক্সট বাটন ক্লিক করলাম ।Podcast author এ আমি আমার নাম দিলাম আপনি আপনার নাম দিতে পারেন।

  এর পর আবার নেক্সট চাপুন

       
 তৈরি হয়ে গেল আমাদের ফিডবার্নার । এর পর ফীডবার্নার এর হোম পেজ এ যেতে ফীডবার্নার এর লোগো তে ক্লিক করুন

এর পর Feed Title এ ক্লিক করুন

এর পর Publicize ট্যাব এ ক্লিক করুন

  এর পর Email Subscriptions ট্যাব এ ক্লিক করুন

    এর পর নিচের Active বাটন এ ক্লিক করুন এবং সেভ করুন

এর পর Communication Preferences এ ক্লিক করুন

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

এর পর সেভ করুন । এর  ইমেলটা কোন টাইম এ সেন্ড হবে টা সেট করে দিন নিচের মত

 এর পর  ইমেল টা ইউজার  এর সামনে ওয়েব পেজ এর  পোস্টটা  কিভাবে আসবে  টা সেট করুন ।আমি আমার মত করে দিয়েছি ।এই কাজটি করতে BuzzBoost এই অপশন এ যান

ব্লগস্পট সাইটে  কিভাবে  ফীড বার্নার ব্যাবহার করবেন

 এইখানে আরও অনেক অপশন আছে সে গুলো আপনারা নিজেরাই পারবেন বলে আশা করছি ।
এখন আমরা এইটা ব্লগস্পট সাইট এ ইন্সটল করবো ।
 এইটি ব্লগস্পট এ ইন্সটল করার জন্য প্রথমে আপনার ব্লগার.কম এ লগিন করে নিন অ্যান্ড Layout এ  ক্লিক করুন

এর পর  Add a Gaget এ ক্লিক করুন

এর পর Html/JavaScript এই অপশন টিতে ক্লিক করুন । এর পর নিচের মত একটি উইন্ডো আসবে এইখানে আপনি  Subscription Management এর কোড গুলো পেস্ট করে দিন

কপি করে পেস্ট করুন ।

এর সেভ এ ক্লিক করুন
আপনার ওয়েব সাইট এ যান তার পর নিচের মত Email Subscription box  আসবে

আরও একটি উপায় আছে Email Subscription বক্স আনার

এর পর  নিচে আপনার ফীড এড্রেস অ্যান্ড টাইটেল দিন

এর পর সেভ করুন নিচের মত Email Subscription বক্স দেখতে পারবেন ।

এইটি তেমন দেখতে তেমন একটি সুন্দর না আপনি যদি এইচটিএমএল ও সিএসএস এর কাজ জেনে থাকেন তাহলে খুব সহজে এই স্টাইল টা  Change করতে পারবেন এছাড়া  গুগল এ সার্চ করলে হাজার হাজার রেডিমেট  Email Subscription Box পাবেন ।
যায় হোক আমরা এখন এইখানে Email দিয়ে  টেস্ট করছি ।

এর পর কেপছা এন্ট্রিটি পূরণ করুন

এর পর  complete subscription Request এ ক্লিক করুন .এর আপনার ইমেলে একটি মেইল যাবে।
 

দেখুন মেইলটি চলে এসেছে

 এর পর যে খানে ইমেলটি যাবে  লিংকটিতে  ক্লিক করে সাবস্ক্রাইবটি কনফার্ম করুন

এবার থেকে এই ইমেইল আপনার আপডেট  টিউন গুলো নির্দিষ্ট সময় এ চলে আসবে।

ওয়ার্ডপ্রেস সাইটে  কিভাবে  ফীড বার্নার ব্যাবহার করবেন 

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

    এর পর Arbitrary  টেক্সট  টি ড্রাগ করে

সাইড বারে ড্রপ করুন

 এর পর নিচের মত একটি টেক্সট ফিল্ড আসবে

ওপররের  নিয়ম অনুসরণ করুন, Subscription Management এর কোড গুলো পেস্ট করে দিন

এর পর নিচের মত আউটপুট দেখতে পারবেন।

টিউনাররা কিভাবে টেকটিউনস এ ফীড বার্নার ইমেল সাবস্ক্রাইব সার্ভিসটি চালু করবেন

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

আশা করছি  ওপরের দেখানো নিয়ম গুলো যদি ঠিক মত করতে পেরেছন । প্রথমে https://feedburner.google.com এর পর Publicize থেকে Subscription Management  এ যান

ওপরের লাল কালি দিয়ে ব্লক করা অংশটি  কপি করুন এর পর ALT+SHIFT+A চাপুন

 কপি করা লিংকটি এইখানে পেস্ট করে দিন

 এর পর আপডেট দিন ।

বিস্তারিত পড়ুন »