ব্লগস্পট ব্লগে Google AdSense বিজ্ঞাপনের Popup Box যুক্ত করুন

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

আজ আমি আরেকটি গুরত্বপূর্ণ ব্লগার Widget আপনাদের সাথে শেয়ার করব। যারা ব্লগে Google AdSense সহ বিভিন্ন ধরনের বিজ্ঞাপন ব্যবহার করেন, তারা এই Popup Box টি ব্যবহার করে অনেক লাভবান হতে পারবেন। কারণ কেউ যখন আপনার ব্লগে ভিজিট করবে তখন এই Popup Box টি ব্লগের মধ্যখানে শো করবে, যা সবার দৃষ্টিগোচর হবে। ফলে দেখা যাবে আপনার ব্লগে বিজ্ঞাপন ক্লিক বেড়ে যাবে। আর আপনি নিশ্চয় জানেন যে, বিজ্ঞাপন ক্লিক বেড়ে যাওয়া মানেই হচ্ছে আপনার ব্লগের আয় বাড়া।

ইতিপূর্বে আমরা আপনাদের সাথে Scrolling Facebook Popup Like Box Widget সংক্রান্ত একটি পোষ্ট শেয়ার করেছিলাম। ইচ্ছে করলে আপনি ঐ উইজেটটি দেখে আসতে পারেন।

অনলাইনে টাকা উপার্জনের যত উপায় আছে তার মধ্যে Google Adsense হচ্ছে সবচেয়ে জনপ্রিয়। Google Adsense হতে নিঃসন্দেহে দীর্ঘ দিন যাবৎ অনলাইন হতে ভালমানের টাকা উপার্জন করতে পারবেন। শুধুমাত্র আপনার ইচ্ছা এবং কিছু পরিশ্রম থাকতে হবে। আসলে আমাদের আজকের বিষয় Google Adsense হতে টাকা আয় করা নিয়ে নয়। আমি আজ দেখাবে কিভাবে ব্লগে Google AdSense বিজ্ঞাপনের Popup Box যুক্ত করবেন। এটি Widget ফরমেটে হওয়া ব্লগে যুক্ত করার জন্য কোন প্রকার বাড়তি ঝামেলা পোহাতে হবে না। নিচের ছোট ট্রিকসটি ফলো করলেই এটি আপনার ব্লগে খুব সহজে যুক্ত হয়ে যাবে। লাইভ ডেমো দেখুন -  Live Demo

 কিভাবে যুক্ত করবেনঃ

• প্রথমে আপনার ব্লগে লগইন করুন।
• ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
• এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন। নিচের চিত্রে দেখুন -

• তারপর HTML/JavaScript এ ক্লিক করুন।
• এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।

X

xxxxxxxxxxxxxxxxxxxx

" data-ad-slot="xxxxxxxxxx" data-language="en-us">

• সবশেষে Gadget টি Save করুন। That's all. 

 পরিবর্তনঃ

• উপরের লাল চিহ্নিত xxxxxxxxxxxxx এর জায়গায় আপনার AdSense বিজ্ঞাপনের কোড বসাতে হবে।
• বিজ্ঞাপনের চার পাশে Border দিতে চাইলে উপরের নীল কালারের border:0px solid #000 এর জায়গায় border:1px solid #000 দেন।
• পিংক কালারের Width ও Height এর সাথে মিল রেখে আপনার AdSense বিজ্ঞাপন কোড নেবেন।

সতর্কতাঃ যেহেতু Google AdSense বিজ্ঞাপনের Popup Box ব্যবহার করা AdSense Policy এর পরিপন্থি সেহেতু এর ফলে আপনার ব্লগের কোন ক্ষতি হলে সে দায়িত্ব আপনার নিজেরই। তবে বর্তমান সময়ে অনেক ভালমানের ব্লগ/ওয়েবসাইটে এ ধরনের AdSense Popup Box ব্যবহার করতে দেখা যাচ্ছে। তবে এ ধরনের AdSense Popup Box ব্যবহারের ফলে আপনার ব্লগের আয় বাড়বে এটা নিশ্চিত করে বলা যায়।

Read More

ব্লগের Header এ যুক্ত করুন আকর্ষণীয় ডিজাইনের Social Media Icons

সব ধরনের ব্লগ এবং ওয়েবসাইটের সুন্দর্য বৃদ্ধি করার জন্য Social Media Icons যুক্ত করে থাকেন। আর ব্লগার টেমপ্লেটের Header এ Social Media Icon যুক্ত করার ফলে আপনার কাঙ্খিত ব্লগটির সুন্দর্য আরও অনেকগুন বেড়ে যায়। এ জন্য সবাই চায় অন্য কোথাও এই Social Media Icon যুক্ত না করে সরাসরি Header এ যুক্ত করতে। আমি আজ যে পোষ্টটি শেয়ার করবো এটিতে আপনি ইচ্ছে করলে আনলিমিটেড আইকন ব্যবহার করতে পারবেন। আপনার ইচ্ছামত আইকন যুক্ত করতে, আবার পছন্দ না হলে বাদ দিতেও পারবেন। কাষ্টমাইজ করার জন্য "প্রযুক্তি ডট কম" এর তৈরী বেশ কিছু Social Media Icons Set  ডাউনলোড করার লিংক দেব। যার ফলে ইন্টারনেট হতে আপনাকে খুজে খুজে এ গুলি সংগ্রহ করতে হবে না। এই Social Media Icons যুক্ত করার ফলে শুধুমাত্র যে আপনার ব্লগের সুন্দর্য বৃদ্ধি পাবে তা নয়, পাশাপাশি আপনার Social Media গুলির অনেক ফ্যান বৃদ্ধি পাবে।

কিভাবে যুক্ত করতে হয়ঃ

• প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।

• এরপর কিবোর্ড হতে Ctrl+F চেপে ]]>

 অংশটি সার্চ করুন।

নিচের Css কোডগুলি কপি করে ]]>

 এর উপরে পেষ্ট করুন।

#social-icons-V2 {
  height:50px;
  width:40%;
  float:right;
  clear:both;
  z-index: 2;
  position: relative;
  margin-right:10px;
  margin-bottom:0px;
}
.social-media-icons-V2 {
  display:table
}
.social-media-icons-V2 ul {
  text-align:right;
  padding:5px 5px 0 0
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
}
.social-media-icons-V2 ul {
  margin-bottom:0;
  padding:0;
  float:right;
}
.social-media-icons-V2 li.media_icon {
  margin-left:6px;
  padding-left:0 !important;
  background:none !important;
  display:inline;
  float:left;
}
.social-media-icons-V2 li:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(-360deg);
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

• তারপর প্রথমে নিচের ফুল ট্যাগটি সার্চ করুন। ফুল ট্যাগটি খুজে না পেলে শুধুমাত্র লাল অংশটি সার্চ করুন।

 id='header' maxwidgets='1' showaddelement='no'>

• উপরের লাইনটির ঠিক উপরে নিচের কোডগুলি কপি করে পেষ্ট করুন।

 
• #

" target="_blank" title="Facebook">
 

#

" target="_blank" title="Twitter">
 

#

" target="_blank" title="Google+">
 

#

" target="_blank" title="Youtube">
 

#

" target="_blank" title="Pinterest">
 

#

" target="_blank" title="Rss">

• সবশেষে Save Template এ ক্লিক করুন।

কাষ্টমাইজেশনঃ

• # এর স্থলে আপনার Social Media Url দিন।
• যদি কোন আইকন Remove করতে চান তাহলে 
 অংশটি ডিলিট করুন।
• যদি নূতন আইকন যুক্ত করতে চান তাহলে এখান থেকে  Download করে নিন।

Read More

কিভাবে ব্লগারে Automatically Guest Author Box যুক্ত করতে হয়

ব্লগারের আকর্ষণীয় একটি ফিচার্স হচ্ছে Gust Blogging. ব্লগারের শুরুর দিকে এই Gust Blogging সুবিধা ছিল না। পরবর্তীতে ব্লগার সবার কথা বিবেচনা করে এই Gust Blogging সিস্টেম চালু করে। আপনি ইচ্ছা করলে আপনার পছন্দমত Gust Blogger এর সংখ্যা বাড়ীয়ে নিতে পারেন। যার ফলে সবাই মিলে বিভিন্ন পোষ্ট করে আপনার ব্লগের জনপ্রিয়তা শীর্ষে নিয়ে যেতে পারেন। তাছাড়া আপনার হাতে যখন সময় থাকবে না তখন Gust Blogger আপনার ব্লগিং চালিয়ে যতে সাহায্য করবে। তবে আমার আজকের টপিক Gust Blogging নিয়ে নয়। আমি আজ দেখাবো কিভাবে আপনার ব্লগে Automatically Guest Author Box যুক্ত করবেন। Automatically বলার কারণ হচ্ছে পোষ্ট করার পর বার বার এটি আপনার পোষ্টে যুক্ত করতে হবে না। শুধু একবার আপনার ব্লগার টেমপ্লেটে যুক্ত করে রাখলেই কে কোন পোষ্ট করল ব্লগ অটোমেটিক তা পোষ্টের নিচে এই ইমেজটির মত শো করবে।

কিভাবে Automatically Author Box যুক্ত করবেনঃ

• প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।

• এরপর কিবোর্ড হতে Ctrl+F চেপে ]]>

 অংশটি সার্চ করুন।

নিচের Css কোডগুলি কপি করে ]]>

 এর উপরে পেষ্ট করুন।

.Prozokti-guest img {
margin:0;
border:0;
}
.Prozokti-guest-about {
font-size:13px;
margin:0 auto;
padding:3px;
width:625px;
min-height:125px; 
background:#EDF6FF;
margin:15px auto -10px -20px;
border:1px solid #F0F0F0;
}
.Prozokti-guest {
padding-top:15px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#93C0F9 solid 1px;
}
.Prozokti-guest-text {
float:right;
width:80%;
padding:5px;
text-align:left;
font:13px/1.6em arial,sans-serif;
text-align:justify;
margin-top: -14px;
margin-bottom: -12px;
padding:0;
}

• তারপর এই কোডটি সার্চ করুন data:post.body । এই কোডটি হয়তো আপনার ব্লগার টেমপ্লেটের একাধিক জায়গায় দেখতে পাবেন। আপনি ২য় টিতে Try করে দেখতে পারেন। ২য় টিতে কাজ না হলে ৩য় টি অথবা ১ম টিতে Try করবেন। তাহলে অবশ্যই হবে।
• উপরের অংশটির ঠিক নিচে এই কোডগুলি কপি করে পেষ্ট করুন।

Guest Author

About the Guest Author:

Write author Bio here

Follow her @ Twitter | Facebook | Google+

• আপনার ব্লগে যদি একাধিক Gust Author থাকে, তাহলে উপরের কোডটি না দিয়ে নিচের কোডগুলি ঠিক আগের জায়গায় পেষ্ট করুন।

Guest Author

About the Guest Author:

Write 1st author Bio here

Follow her @ Twitter | Facebook | Google+

Guest Author

About the Guest Author:

Write 2nd author Bio here

Follow her @ Twitter | Facebook | Google+

• উপরের পিংক কালারের মোঃ হারুন-অর-রশিদ/1st Guest Author Name এর জায়গায় আপনার নাম অথবা Gust Author নাম দিতে হবে। নামটি অবশ্যই পোষ্টের নাম এর সাথে মিল থাকতে হবে। অন্যথায় এই Author বক্সটি শো করবে না। নিচের চিত্রে দেখুন -

• উপরের বক্সের লাল চিহ্নিত অংশে আপনার Author এর Picture Url দিতে হবে।
• সবশেষে Save Template এ ক্লিক করুন। That's All.

Author Box কাষ্টমাইজেশনঃ

• উপরের প্রথম বক্সের Css কোড হতে Author বক্সের Height, Width, Margin, Border, Background কালার পরিবর্তন করতে পারবেন।
• এছাড়াও এই Css কোড গুলি কাষ্টমাইজ করে Author বক্সের অনেক পরিবর্তন করতে পারবেন।

Read More

কিভাবে ব্লগার থেকে Powered by Blogger লেখাটি Remove করতে হয়?

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

প্রত্যেক ডিফল্ট ব্লগে এমনকি অনেক কাষ্টম ব্লগেও উপরের চিত্রের এই লেখাটি ব্লগের Footer সেকশনে দেখা যায়। আপনার ব্লগটি যদি বাংলায় হয় তাহলে এই লেখাটি হুবহু উপরের ছবির মত হবে, আর যদি ব্লগটি English হয় তাহলে লেখাটি "Powered by Blogger" নামে দেখতে পাবেন। এই লেখাটি Desktop ভার্সনের পাশাপাশি Mobile ভার্সনেও দেখা যায়। বেশীরভাগ ব্লগারই এই লেখাটি পছন্দ করেন না বা তাদের ব্লগে রাখতে চান না। কিন্তু ব্লগার Template হতে এটি সরানোর জন্য ডিফল্ট কোন অপশন নেই। এই জন্য এটি সরানোর জন্য আজ বিস্তারিত আলোচনা করবো।

কিভাবে এটি Remove করতে হয়ঃ এটিকে Remove করার জন্য আমি দুটি পদ্ধতি দেখাবো। তখন আপনি নিজেই বুঝতে পারবেন আপনি কোনটি বেছে নেবেন।

সকল পোষ্ট দেখুন

 প্রথম পদ্ধতীঃ

• প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।

• এরপর কিবোর্ড হতে Ctrl+F চেপে ]]>

 অংশটি সার্চ করুন।

এখন নিচের Css কোডটি কপি করে ]]>

 এর উপরে পেষ্ট করুন।

#Attribution1 {display:none;}

• সবশেষে Save Template এ ক্লিক করুন। এই হচ্ছে ১ম পদ্ধতী।

 দ্বিতীয় পদ্ধতীঃ

• উপরের চিত্রের মত ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
• তার Jump to Widget ম্যানু থেকে Attribution1 এ ক্লিক করুন। নিচের চিত্রে দেখুন -

• Attribution1 এ ক্লিক করার পর নিচের কোডটি দেখতে পাবেন।

•  উপরের এই লাইনটির লাল চিহ্নিত true এর স্থলে false লিখে Save Template এ ক্লিক করুন।
• তারপর আবার Layout এ ক্লিক করে টেমপ্লেট থেকে বেরিয়ে আসুন। এখন Layout এর নিচের দিকে এই ছবির মত একটি Attribution দেখতে পাবেন।

• উপরের ছবিতে Indicate করা Edit এ ক্লিক করলেই এটি Remove করার অপশন পাবেন। That's all.

নোটঃ পোষ্টটি পড়ার পর কে কি বলবেন জানি না। তবে আপাত দৃষ্টিতে ১ম পদ্ধতী একদম সহজ, আর ২য় পদ্ধতীতে একটু ঝামেলা পোহাতে হবে। তবে আমি যেটা সাপোর্ট করি সেটা হচ্ছে ১ম পদ্ধতী। কারণ ২য় পদ্ধতীতে Remove করলে এটি ব্লগ থেকে সম্পূর্ণরূপে মুছে যাবে। আর ১ম পদ্ধতীতে এটি শুধুমাত্র Hide করে রাখা হয়েছে। ২য় পদ্ধতীর প্রধান সমস্যা হচ্ছে এটি রিমুভ করার পর মোবাইল Template হতে Remove করার কোন অপশন থাকবে না। অর্থাৎ এটি আপনার মোবাইল ভার্সনে সব সময় শো করবে। কাজেই মোবাইল Template হতেও এটি Remove করতে চাইলে আপনাকে অবশ্যই ১ম পদ্ধতীটি বেছে নিতে হবে।

Read More

ব্লগার টেমপ্লেটে কিভাবে Font Awesome Icons ব্যবহার করবেন?

প্রত্যেক ব্লগারই তাদের কাঙ্খিত ব্লগটি-কে মনের মত করে ডিজাইন করতে চান। সবাই ব্লগ-কে প্রফেশনাল মানের করার জন্য চেষ্টার কোন ত্রুটি রাখেন না। কিন্তু দেখা যায় ওয়েব ডেভেলপমেন্ট সম্পর্কে অপার্যপ্ত জ্ঞান থাকার কারনে সবার পক্ষে ডিজাইন করা সম্ভব হয় না। আজকের এই পোষ্টির মাধ্যমে আপনি অন্তত বিভিন্ন রকম আইকন ব্যবহার করে আপনার ব্লগটি-কে কিছুটা হলেও প্রফেশনাল Look করতে পারবেন। আপনারা নিশ্চয় দেখে থাকেন যে, অনেক ব্লগ এবং ওয়েবসাইটে বিভিন্ন রকম আকর্ষণীয় ডিজাইনের আইকন ব্যবহার করা হয়। কিন্তু এ গুলি-কে ইমেইজ আকারে কোথাও খুজে পাওয়া যায় না। প্রকৃতপক্ষে ঐ গুলি কোন ইমেজ নয়। এ গুলি হচ্ছে এক ধরনের Font আইকন। যা একটি ওয়েবসাইটকে যেমনি আকর্ষণীয় করে তেমনি এর অনেক স্পিডও বাড়ীয়ে তুলে। ওয়েবসাইটে বেশী পরিমানে ইমেজ ব্যবহার করার ফলে যে বাড়তী চাপ পড়তো, এই Font আইকন ব্যবহারের ফলে আপনার ব্লগ/ওয়েবসাইট এই বাড়তী চাপ হতে রেহাই পাবে।

Font Awesome Icons কিঃ Font Awesome হচ্ছে এক ধরনের iconic font, যা ডিজাইন করা হয়েছে Bootstrap এর মাধ্যমে। এটি হচ্ছে এক ধরনের SVG (Scalable Vector Graphic) আইকন, যা আপনি ইচ্ছা করলে Customize করতে পারবেন এবং যে কোন ধরনের ব্লগ কিংবা ওয়েবসাইটে ব্যবহার করতে পারবেন। এই আইকন গুলি কোন নির্দিষ্ট আকারে Fixed করা নয়। আপনি ইচ্ছা করলে যে কোন সাইজের আইকন ব্যবহার করতে পারবেন। ছোট কিংবা বড় যে কোন ধরনের আইকন ব্যবহার করলে এর Graphically কোন পরিবর্তন হবে না। তাছাড়া আপনি ইচ্ছা করলে Css কোড ব্যবহার করে এটিতে যে কোন ধরনের কালার ইফেক্ট দিতে পারবেন। আপনি আমার ব্লগের ম্যানুবারের দিকে লক্ষ্য করলেই দেখবেন যে, আমি Font Awesome ব্যবহার করে কয়েকটি আইকন তৈরী করেছি।

কি ভাবে ব্লগে Font Awesome Icon যুক্ত করবেনঃ নিচের ছোট্ট এই ট্রিকসটি অনুসরণ করে আপনি ব্লগ কিংবা ওয়েবসাইটের যে কোন Html ও Web পেজে এই আইকন যুক্ত করতে পারবেন। নিচে দেখুন -

• প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।

• এরপর কিবোর্ড হতে Ctrl+F চেপে 

 অংশটি সার্চ করুন।

নিচের লাইনটি কপি করে 

 এর উপরে পেষ্ট করুন।

• এরপর Save Template এ ক্লিক করুন।

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

• এখন আপনাকে বেছে নিতে হবে যে, কোন কোডটি আপনার পেজে/টেমপ্লেটে ব্যবহার করত চান। এই জন্য আপনি Font Awesome এর অফিসিয়াল ওয়েবসাইট থেকে আপনার পছন্দের আইকনটি বেছে নিতে পারেন।
• ওখান থেকে পছন্দের আইকনটি বেছে নেওয়ার জন্য সার্চ বারে আইকনটির নাম লিখে তার উপরে ক্লিক করলে নিচের মত একটি করে Class দেখতে পাবেন। নিচে দেখুন

fa-home

">

• উপরের Class টির লাল অংশটি হচ্ছে আপনার কাঙ্খিত আইকন এর নাম। এই অংশে বিভিন্ন ফন্টের নাম দিয়ে আপনি ভিন্ন ভিন্ন আইকন ব্যবহার করতে পারবেন। তবে প্রত্যেকবারই এই fa-name

"> টি ব্যবহার করতেই হবে।আইকন কাষ্টমাইজঃ

• আপনি ইচ্ছে করলে নিচের Css কোডটি ব্যবহার করে আপনার Font আইকন গুলির সাইজ, কালার এবং বোর্ডারসহ আরও অনেক পরিবর্তন করতে পারবেন। উদাহরন স্বরূপ আমি Home আইকনটি দেখাচ্ছি -

.fa-home {
 font-size:20px;
 color:#000000;
 padding:5px;
 border:1px solid #000;
 float:left;
}

• এভাবে আইকন কাষ্টমাইজ করার সময় প্রত্যেকটি আইকন এর নামানুসারে Css কোড ব্যবহার করতে হবে। নিচে আমরা আরও কয়েক প্রকারের উদাহরণ দিচ্ছি-

 বড় আইকন যুক্ত করাঃ

• বড় আইনের জন্য fa-lg তার পর ধারাবাহিকভাবে fa-2x, fa-3x, fa-4x, ও fa-5x ক্লাসগুলি যুক্ত করে দিলে ৩৩% করে বৃদ্ধি পেতে থাকবে। নিচে দেখুন -

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

    

 Animated Icons যুক্ত করাঃ

• আইকন ঘুরানোর জন্য fa-spin এবং আইকন ৮ টি স্টেপে ঘুরানোর জন্য fa-pulse ব্যবহার করতে হবে। নিচে দেখুন কিভাবে করবেন -

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

    

 Stacked Icons যুক্ত করাঃ

• এখানে fa-stack হচ্ছে মূল Class এবং fa-stack-1x ও fa-stack-2x এর মাধ্যমে আইকনের সাইজ বড় ছোট করতে পারবেন এবং fa-inverse এর মাধ্যমে আইকনের কালার পরিবর্তন করা যাবে। নিচে দেখুন -

 
 

 
 

 
 

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

  

 Fixed Width Icons যুক্ত করাঃ

• আইকনের পরে fa-fw যুক্ত করে দিলেই হবে। এই আইকনগুলির মাপ নির্ধারিত করে দেয়া। নিচে দেখুন -

  Home
  Library
  Applications
  Settings

নোটঃ এভাবে আপনার পছন্দমত সকল ধরনের আইকন বিভিন্ন স্টাইলে আপনার ব্লগে যুক্ত করতে পারবেন। কারণ Font Awesome Icons এর সর্বশেষ ভার্সন 4.5.0-তে ৬০৫ ধরনের আইকন রয়েছে। আপডেট হওয়ার সাথে সাথে Style Sheet টি পরিবর্তন করে নিলেই আপনি তাদের সকল আপটে আইকনগুলিও ব্যবহার করতে পারবেন।

Read More

ব্লগে Facebook এবং Blogger Multi Tab কমেন্ট সিস্টেম যুক্ত করুন

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

কি ভাবে যুক্ত করতে হয়ঃ

• প্রথমে ফেইসবুক একাউন্টে লগইন করে একটি Facebook App ID তৈরী করে নিতে হবে। আপনার যদি Facebook App ID না থাকে তাহলে এখান থেকে Facebook App ID তৈরী করে নিতে পারেন।
• তারপর আপনার ব্লগার একাউন্টে লগইন করুন।
• এরপর Template > Edit Html এ ক্লিক করুন।
• তারপর কিবোর্ড হতে Ctrl+F চেপে 

 অংশটি সার্চ করুন।

এখন নিচের কোডগুলি 

 ট্যাগের উপরে পেষ্ট করুন।

• উপরের লাল চিহ্নিত অংশে আপনার Facebook এর App ID বসিয়ে দিন।
• এখন পুনরায় কিবোর্ড হতে Ctrl+F চেপে ]]>

 ট্যাগটি সার্চ করুন এবং নিচের কোডগুলি ]]> ট্যাগের উপরের পেষ্ট করুন।

.comments-page{background-color:#FFF;border:1px dotted #93DAF8;border-radius:10px;margin-top:5px}
#blogger-comments-page{padding:0 5px;display:none}
.comments-tab{float:left;padding:5px;margin-right:3px;cursor:pointer;background-color:#b5e5fa;border-radius:2px}
.comments-tab-icon{height:14px;width:auto;margin-right:3px}
.comments-tab:hover{background-color:#eeeeee}
.inactive-select-tab{background-color:#d1d1d1}

• এখন আবার কিবোর্ড হতে Ctrl+F চেপে  ট্যাগটি সার্চ করুন এবং নিচের কোডগুলি এই ট্যাগটির নিচে পেষ্ট করুন।

 

  
    Comments
 

 

  Comments
 

 

  

   
 

• এরপর Save Template এ ক্লিক করলেই কাজ OK. 

Read More

কিভাবে ব্লগারে Html ও JavaScript ইনকোডার/পার্সার টুল যুক্ত করবেন

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

কিভাবে যুক্ত করবেনঃ

• প্রথমে আপনার ব্লগে লগিং করুন।
• তার পর Page > New Page থেকে একটি নূতন পেইজ তৈরী করে নেন। আপনি ইচ্ছা করলে যে কোন পোষ্ট পেইজেও এই টুলটি যুক্ত করতে পারবেন।
• নিচের কোড গুলো HTML Editor এ পেষ্ট করুন।

• পেষ্ট করার পর আপনার পেইজটি সেভ করুন/পাবলিশ করুন। তাহলেই কাজ ওকে।
• আপনি ইচ্ছা করলে আমার মতো পেইজে থেকে কমেন্ট সেকশনটি বন্ধ করে রাখতে পারেন। কমেন্ট বক্স বন্ধ করার জন্য পেইজের ডানের Option এর Reader Comments থেকে Don't allow, Hide exiting সিলেক্ট করে Done এ ক্লিক করতে হবে।
• আজ এই পর্যন্ত। ধন্যবাদ সবাইকে।

Read More

Windows 8 Tiles Style Social Media Widget

Hello bloggers, hope everyone are doing good. We all know that there are unlimited benefits available in social media platforms for promoting our blog/ website. Today we will learn and add an unique social media widget in our blogger blog which is looks like windows 8 titles. In this widget you can link up your social media profiles. (RSS feed, Facebook, Twitter, Google Plus, LinkedIn, YouTube, StumbleUpon and Pinterest.) This is an extra colorful attraction to concentrate your readers for subscribing. I have already applied it to our test blog. So, before you apply it on your blog, you can simply watch a demo.

ALSO REED: How To Customize Blogger's Comment Box To Get More Comments?

View Demo...

1. Sign in to Blogger blog

2. Click on your blog title

3. Click Layout from left side menu

4. Choose a suitable widget position and click Add a Gadget

5. Select HTML/Javascript

6. Now simply paste the below codes in the box

RSS-USERNAME

">

FACEBOOK-USERNAME

">

TWITTER-USERNAME

">

G+PROFILE-ID

">

LINKEDIN-USERNAME

">

YOUTUBE-USERNAME

">

STUMBLEUPON-USERNAME

">

PINTEREST-USERNAME

">
7. Replace the following areas with your own details...

▪ Replace RSS-USERNAME with your blog's RSS feed link.

▪ Replace FACEBOOK-USERNAME with your Facebook username.

▪ Replace TWITTER-USERNAME with your own Twitter username.

▪ Replace G+PROFILE-ID with your Google Plus profile ID.

▪ Replace LINKEDIN-USERNAME with your LinkedIn username.

▪ Replace YOUTUBE-USERNAME with your Youtube username.

▪ Replace STUMBLEUPON-USERNAME with your Stumbleupon username.

▪ Replace PINTEREST-USERNAME with your Pinterest username..

8. Now click Save button to done everything.

9. Reload your blog to see this nice widget is working on your blog.

If any problem you will face please do not late to let me know. I will assist you with smiles.
Have Fun Pals.

Written By: Ashraful Haque Saimoom

Read More

How To Submit A Blog To Technorati Directory?

What is Technorati?

---

Technorati is one of the most popular and biggest blog directory which have large number of verified blogs in their database. Technorati also is a blog search engine and index and rank your blog. If you will get top 10 rank for your blog then you will get smart web traffic from Technorati. So, as a blogger I think it is recommended to claim your blog into Technorati. This will also help to index your blog faster in search engines.

ALSO READ: ↓

• How To Submit And Verify Sitemap To Google Webmaster Tools?
• How To Submit Blogger Sitemap In Bing And Yahoo?

How to submit and verify blog to Technorati?

---

1. First register an account at Technorati. (skip if already registered)

2. Log in to your account.

3. Click on your username from right top corner to access your account.

4. Fill up your profile elements and click Update Account.

5. Scroll down at bottom in My claimed blogs section.

6. Type your blog URL in Start a blog claim and click Claim button.

7. Then enter your all blog details.

a) Blog title.
b) Blog URL.
c) RSS feed URL.
d) Three linking blog URL that linked to your blog.
e) Blog description (1000 characters maximum).
f) Select three categories that suits your blog.
g) Type your blog’s tag words to describe your blog.

8. Now click Proceed to the next step to go forward.

9. Now back to your profile page and click Check Claim button of your newly claimed blog.

10. Copy the claim token and paste it anywhere in a new blog post (new post is important)

11. Once you published your blog post, click Verify Claim Token button from Technorati.

Note:
■ Many people do a major mistake to enter their claim token is, they paste the token code in existing published post. This is wrong. The token code must be appear in your RSS feed. So, you have to publish a new post including the token code. Because, Technorati uses your feeds to confirm the presence of token code.
In short, first claim your blog in Technorati and then publish a new post with the claim token code.

■ Allow at most 3 days to get approval.

---

---

We are waiting to hear from you about his post and also suggest us if you know other blog directories to submit.
Have a nice day dear. 

Written By: Ashraful Haque Saimoo

Read More