ব্লগ টিপ্স
Showing posts with label ব্লগ টিপ্স. Show all posts
Showing posts with label ব্লগ টিপ্স. Show all posts

How to setup powerful Anti Adblock Killer Script for Blogger

How to setup powerful Anti Adblock Killer Script for Blogger

Hello everyone, today in this post I have shared a powerful anti-ad block script for your blog, it's not the old Arlina code, it's a new anti-ad block script, which will work on every browser available in the world.


What is Adblocker?

Adblock is a browser extension or application to remove ads on the web, because we know that blog ads sometimes annoy visitors, that's why internet users start using Adblock extension. As a blogger, we want to earn some income through advertisement, so it will help you if your blog is approved by Google Adsense.

What is Anti - Adblock Script?

Because Adblocker blocks ads, Anti-Adblocker forces users to forcefully remove adblock to access sites, with this users can't access your site by enabling Adblock.

Why to use Anti- Adblock Script?

If users visit your site with adblock, they won't see any ads on the site, if ads don't show, your AdSense income will be less, so to get rid of it, you need to use this script, it will work on all browsers with adblock..

How to use Anti-Adblocker Script in our blog?

As you follow the steps and it will suit all themes so you can use it easily. It's really easy to implement. Follow the steps given below;

Step 1:

First go to your blogger dashboard.

Step 2: 

Now go to the Themes option from the menu.

Step 3: 

Now from the Customize drop-down menu press on the Edit HTML. ( So we are going to edit the mother theme if you are new to this method we suggest you take a backup of your theme )

Step 4: 

Now Press of CTRL+F and search ]]></b:skin> tag.

Step 5: 

Now copy the anti-adblocker code above the ]]></b:skin> from the box.

1st Code Link


Step 6: 

Your First Job is done now copy the second code from the below link.

Step 7:  

Now past the second code above in the </body> Tag and save the theme. 

2nd Code Link



This code is copied from FineShop Design. This is the most powerful and updated anti ad blocker nowadays. If you like our anti adblocker script method, please share this post with your blogger friend and share it with blogger community.


যেভাবে একটি ব্লগ্স্পট সাইট থেকে সেই সাইটির টেমপ্লেট টি ডাউনলোড করবেন।

যেভাবে একটি ব্লগ্স্পট সাইট থেকে সেই সাইটির টেমপ্লেট টি ডাউনলোড করবেন।
আজ আমি আপনাদের সাথে এমন একটি ট্রিক শেয়ার করবো যার মাধ্যমে আপনারা খুব সহজেই আপনাদের পছন্দের ব্লগস্প্ট সাইট থেকে সেই সাইট টির টেমপ্লেট টি ডাউনলোড করে নিতে পারবেন। ট্রিক টা খুব ই সহজ এবং যে কেউ ই এ ট্রিক টা ব্যাবহার করে তার পছন্দের ব্লগার টেমপ্লেট টি পেতে পারেন।
 
এর জন্য আপনাকে যে কাজ টি করতে হবে তা নিম্নরুপ:
প্রথমে যে ব্লগস্প্ট সাইটির টেমপ্লেট টি নিতে চান সেই সাইট টি অপেন করুন
view page source
এবার মাউসের ডান বাটনে ক্লিক করে View Page Source নির্বাচন করুন। অথবা Ctrl+U চাপুন
template name in page source
এবার ছবির মত টেমপ্লেট টির নাম এবং ডাউনলোড লিংক পেয়ে যাবেন।
template name search in google
এবার টেমপ্লেট টির নাম কপি করে গুগল সার্চ দিন, সার্চ দেওয়ার সময় টেমপ্লেট টির নামের শেষে blogger template লেখাটি যুক্ত করুন।
হুম, হয়ে গেল। আপনি হয়ে গেলেন টেমপ্লেট চোর :পি

আসুন জানি, HTML5 কি?

আসুন জানি, HTML5 কি?

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকে আমরা একটি নতুন বিষয়টি নিয়ে আলোচনা করবো, আর সেটি হলো HTML5। এইচটিএমএলের নতুন সংস্করণ এইচটিএমএল৫। HTML 4.01 এর পূর্ববর্তী সংস্করণ 1999 সালে প্রকাশিত হয়েছিল। তারপর থেকে অনেক পরিবর্তন হয়েছে। HTML5 এর কাজ এখনও চলছে। কিন্তু অনেক ট্যাগ বিভিন্ন ব্রাউজারে এখন কাজ করে।

HTML5 কিভাবে কাজ শুরু করেছে?

HTML5 এর ওয়ার্ল্ড ওয়াইড ওয়েব সাথে (W3C) এবং ওয়েব হাইপারটেক্সট অ্যাপ্লিকেশন প্রযুক্তি ওয়ার্কিং গ্রুপ (WHATWG) মধ্যে সহযোগিতা করে তৈরির কাজ চলছে। WHATWG ওয়েব ফর্ম এবং অ্যাপ্লিকেশন তৈরির কাজ করছে এবং W3C এক্সএইচটিএমএল 2.0 নিয়ে কাজ করছিল। 2006 সালে তারা HTML-এর একটি নতুন সংস্করণ তৈরি করার সিদ্ধান্ত নিয়েছে।
HTML5 এর জন্য কিছু নিয়ম প্রতিষ্ঠিত হয়:
  • নতুন বৈশিষ্ট্য সমূহ এইচটিএমএল, সিএসএস, DOM এবং জাভাস্ক্রিপ্ট উপর ভিত্তি করে তৈরি করা উচিত
  • আলাদা প্লাগিনের ব্যবহার কমানোর কথা বলা হয়েছে (যেমন: ফ্ল্যাশ)
  • উন্নত ত্রুটি পরিচালনার ব্যবস্থা
  • আরও একাধিক স্ক্রিপ্টিং প্রতিস্থাপন করার সুবিধা যুক্ত করা
  • HTML5 এর স্বাধীন ডিভাইস হতে হবে
  • উন্নয়ন প্রক্রিয়ায় জনগণের কাছে দৃশ্যমান হবে

HTML5 এর - নতুন বৈশিষ্ট্য

  • 2D আঁকার জন্য <canvas> উপাদান
  • মিডিয়া প্লেব্যাক জন্য <video> এবং <audio> উপাদান
  • স্থানীয় সংগ্রহস্থলের জন্য সমর্থন
  • নতুন নির্দিষ্ট বিষয়বস্তুর উপাদান যেমন: <article>, <footer>, <header>, <nav>, <section>
  • নতুন ফর্ম নিয়ন্ত্রণ। যেমন ক্যালেন্ডার, তারিখ, সময়, ইমেইল, URL, অনুসন্ধান ইত্যাদি

HTML5 এর জন্য ব্রাউজার সাপোর্ট

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

নতুন উপাদানসমূহ:

ট্যাগ বর্ণনা
<article> নিবন্ধ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<aside> সাধারণত সাইডবারের জন্য ব্যবহৃত হয়
<bdi> একটি ভিন্ন দিক ফরম্যাটে লেখা প্রকাশের জন্য ব্যবহৃত হয়
<command> কমান্ড বাটন সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<details> অতিরিক্ত বিশদ ব্যাখ্যা ব্যবহারকারীর প্রদর্শন অথবা আড়াল করতে ব্যবহৃত হয়
<dialog> ডায়লগ বক্স অথবা উইন্ডোতে সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<summary> <details> উপাদানের সারমর্ম প্রদর্শনের জন্য ব্যবহৃত হয়
<figure> চিত্রাঙ্কনের, ডায়াগ্রামে, ছবি, কোড তালিকা ইত্যাদির স্বয়ংসম্পূর্ণ বিষয়বস্তু নির্ধারণ করা হয়
<figcaption> <figure> উপাদান জন্য ক্যাপশন ব্যবহৃত হয়
<footer> একটি বিভাগের জন্য পাদচরণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<header> একটি বিভাগের জন্য হেডার সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<hgroup> যখন একাধিক মাত্রার শিরোনাম থাকে, তখন <h1> থেকে <h6> উপাদানের সমষ্টিকে বুঝায়
<mark> চিহ্নিত / হাইলাইট টেক্সট সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<meter> একটি পরিচিত পরিসীমার মধ্যে স্কেলের পরিমাপ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<nav> নেভিগেশন লিঙ্কগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<progress> একটি টাস্ক অগ্রগতি প্রতিনিধিত্ব করে
<ruby> রুবি টীকা সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<rt> অক্ষরের একটি ব্যাখ্যা / উচ্চারণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<rp> Ruby টীকা সমর্থন করে না তা ব্রাউজারে দেখানোর জন্য ব্যবহৃত হয়
<section> নথিতে একটি অধ্যায় সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<time> তারিখ / সময় প্রদর্শনের জন্য ব্যবহৃত হয়
<wbr> লাইন বিরতির জন্য ব্যবহৃত হয়
<audio> শব্দ যুক্ত করার জন্য ব্যবহৃত হয়
<video> ভিডিও যুক্ত করার জন্য ব্যবহৃত হয়
<source> <video> এবং <audio> জন্য একাধিক মিডিয়া রিসোর্স যুক্ত করার জন্য ব্যবহৃত হয়
<embed> একটি বহিরাগত অ্যাপ্লিকেশন অথবা ইন্টারেক্টিভ বিষয়বস্তুর জন্য একটি ধারক
<track> <video> এবং <audio> এর জন্য টেক্সট গানগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<canvas> গ্রাফিক্স আঁকতে ব্যবহৃত হয়
<datalist> ইনপুট নিয়ন্ত্রণ জন্য পূর্ব নির্ধারিত অপশনের একটি তালিকা নির্দিষ্ট করে
<keygen> key-জুটি জেনারেটরের জন্য ব্যবহৃত হয়
<output> হিসাবের ফলাফল ব্যাখ্যা করার জন্য ব্যবহৃত হয়
এছাড়াও আরও অনেক ট্যাগ প্রতিনিয়ত যুক্ত হচ্ছে। আবার পাশাপাশি কিছু ট্যাগ বাদও পড়েছে। যেমন:
  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

ব্লগস্পট ব্লগে Title Bar এর মধ্যে যুক্ত করুন ঘড়ি তারিখ সময় সাল !!!

ব্লগস্পট ব্লগে Title Bar এর মধ্যে যুক্ত করুন ঘড়ি তারিখ সময় সাল !!!

ব্লগস্পট ব্লগে Title Bar এর মধ্যে যুক্ত করুন ঘড়ি তারিখ সময় সাল !!!

<Script Language="JavaScript" Type="Text/JavaScript">

var mytime1=24;
function mytime2() {
mytime3=mytime1+6;
mytime4=mytime1+mytime3;
timexx=mytime1+mytime3+mytime4;
timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;
timexxxx=mytime1+mytime3/timexxx-16*timexx;
timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;
timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;
mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;
mytime6=Math.floor(mytime5);
mytime8=mytime6*mytime3/2+100;
mytime7 = window.setTimeout("mytime2()", mytime8);
var mytime9 = new Date();
var mytime10= mytime9.toLocaleString();
document.title = mytime10;}
function op(){mytime2()}
window.onload=op;

</script>

Awesome 10 Mouse Cursors for Bloggers!

Awesome 10 Mouse Cursors for Bloggers!
You can make your Blog stand out among others by changing your blog mouse cursor so that whenever anybody reaches your blog, their computer default mouse will change to the one you have configured with your blog.
Cursors-for-Bloggers
Here are 10 awesome cursors that can be used on blogger blogs. You only have to follow a few steps to get it working on your blog. Follow the instructions below.

Steps to Install a New Cursor to your Blog

1. Login to your blog “Dashboard” ==> “Templates”.
2. Now search for the closing head tag i.e. </head>.
3. Finally, copy and paste the code of the mouse that you love best before/above </head> tag.

Cursor.1
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Arrow_02.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor.2
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/bluemultiglit.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a> 
Cursor.3
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/tail2.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor.4
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/bounce.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor.5
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/apple-tmani.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor.6
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/aliendance.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor.7
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Fly_2.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor.8
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Halloween_2.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor.9
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Heart.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor.10
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/horse-ani1.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-XX-LagEYEvOrkV-wKU7ez-GE5Jadzt9P5NMN6olevO3jix7xbajL-lVw18cxJrUteXV6xng0X66QcSlKUJ21S-CERVHUVfX7yq5Y-Y1LA2bA9kDTmuaoGRJPREx4_zUXAdDTB-Amg/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>

আপনার ব্লগে লাইভ পোস্ট আপডেট উইডগেট বসিয়ে নিন ।

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


<script type="text/javascript">document.write('<script type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'feed.mikle.com/js/rssmikle.js"><' + '/script>');</script><script type="text/javascript">(function() {var params = {rssmikle_url: "http://bdforhad.blogspot.com/feeds",rssmikle_frame_width: "100%",rssmikle_frame_height: "300",frame_height_by_article: "",rssmikle_target: "_blank",rssmikle_font: "Arial, Helvetica, sans-serif",rssmikle_font_size: "12",rssmikle_border: "on",responsive: "on",rssmikle_css_url: "",text_align: "left",text_align2: "justify",corner: "on",scrollbar: "off",autoscroll: "on_mc",scrolldirection: "up",scrollstep: "3",mcspeed: "30",sort: "New",rssmikle_title: "on",rssmikle_title_sentence: "প্রযুক্তির ছোঁয়া",rssmikle_title_link: "http://www.bdforhad.blogspot.com",rssmikle_title_bgcolor: "#0066FF",rssmikle_title_color: "#FFFFFF",rssmikle_title_bgimage: "",rssmikle_item_bgcolor: "#FFFFFF",rssmikle_item_bgimage: "",rssmikle_item_title_length: "100",rssmikle_item_title_color: "#0066FF",rssmikle_item_border_bottom: "on",rssmikle_item_description: "title_only",item_link: "off",rssmikle_item_description_length: "150",rssmikle_item_description_color: "#666666",rssmikle_item_date: "gl1",rssmikle_timezone: "Etc/GMT",datetime_format: "%b %e, %Y %l:%M:%S %p",item_description_style: "text",item_thumbnail: "full",article_num: "10",rssmikle_item_podcast: "off",keyword_inc: "",keyword_exc: ""};feedwind_show_widget_iframe(params);})();</script><div style="font-size:10px; text-align:center; "><a href="http://www.bdforhad.blogspot.com" rel="dofollow" target="_blank" style="color:#CCCCCC;">BD FORHAD</a></div>

এবার আসি কোড বিশ্লেষণে। উপরের কোডটি আপনার সাইটে বসাতে হবে। তারপর সেখানে এডিট করতে হবে সামান্য। কোডগুলোতে দেখতে পাবেন দুইটি রঙিন রঙে দাগানো লেখা আছে। প্রথম লেখা অর্থাৎ http://bdforhad.blogspot.com/feeds এই লিংকের বদলে আপনি যে সাইটের আপডেট দিতে চান সেটার আরএসএস ফিড লিংক দিন। আর ব্লগার মারুফ ডট কম লেখাটির জায়গায় আপনি উইডগেটের টাইটেল বা ওয়েবসাইটটির নাম কিংবা আপনার ইচ্ছেমত যা খুশি দিতে পারেন। আর দৈর্ঘ্য প্রস্থ নিয়ে ভাববেন না। এই উইডগেট আপনার পজিশন অনুযায়ী মানিয়ে যাবে। এছাড়াও এটা রেসপন্সিভ হওয়ার কারণে মোবাইলেও দেখা যাবে ভালো। তারপর সেভ করুন। ব্যাস, যোগ হয়ে গেছে এই অসাধারন উইডগেটটি।

ব্লগারদের জন্য সুন্দর একটি SEO চেকার টুল !!

ব্লগারদের জন্য সুন্দর একটি SEO চেকার টুল !!
বন্ধু আজকে আমি আপনাদের জন্য দারুন একটি এসইও ( SEO ) টুল নিয়ে এলাম । আমার যারা ব্লগিং করি তারা সবাই জানি একটা ব্লগের জন্য এসইও SEO কতটা জরুরি তাই আজকের এই টুল থেকে আপনি খুব সহজে বুঝতে পারবেন আপনার ব্লগ পোস্ট কেমন SEO হয়েছে । নিচের টুলটি ব্যবহার কর যানতে পারবেন আপনার ব্লগ টাইটেল কত characters হয়েছে । মনে রাখবেন গুগল ৫৫ থেকে ৬১ characters টাইটেল  শো করে । তাই চেস্ট করবেন ৫৫ থেকে ৬১ অক্ষরের মধ্যে টাইটেল রাখতে এবং গুগল Search Description ১৫০ অক্ষর পর্যন্ত লিমট রেখেছে তাই আপানার Search Description ১৫০ এর মধ্যে রাখার চেস্ট করবেন । তাহলে আপনিও চেক করে নিন আপনার পোস্ট টাইটেল এবং Search Description কত অক্ষরের । এর জন্য নিচের বক্সে আপনার পোস্ট ULR বসিয়ে Count Characters বাটনে ক্লিক করুন । তাহলেই নিচে আপনার পোস্ট টাইটেল কত অক্ষরের সেটা শো করবে ।


☞ আজকে আমি যেহেতু আপনাদের আমার নতুন টুল এর সাথে পরিচয় করাব তাই এখানে টুলটি না দিয়ে আপনার আসল পেজ এর লিঙ্ক দিলাম সেখান থেকেই চেক করে নিন । এর জন্য নিচের বাটনে ক্লিক করুন ।



পোস্ট টাইটেল এবং  Description চেক করার জন্য নিচের বাটন ব্যবহার করুন !


☞ উপরের লিঙ্কে ক্লিক করলেই একটি পেজ ওপেন হবে সেখানে ফাকা বক্সে আপনার টাইটেল Url বসিয়ে Count Characters বাটনে ক্লিক করুন । তাহলে নিচে রেজাল্ট পেয়ে যাবেন ।
☞ তাহলে আজকের মতো এই পর্যন্ত আবারও দেখা হবে এই রকম নতুন কিছু নিয়ে ভালো থাকবেন সুস্থ থাকবেন । কোন সমস্যা হলে অবশ্যই যাবানে । পোস্টটি ভালো লাগলে বন্ধুদের সাথে শেয়ার করুন । আল্লাহ্‌ হাফেজ । নিচে আপনার প্রথম ফল্লও বাটন দিলাম আমাকে ফল্লও করতে পারেন ফেসবুকে । ধন্যবাদ ।

HTML টিউটোরিয়াল -১৫ >>(HTML কালার কোড)

HTML টিউটোরিয়াল -১৫ >>(HTML কালার কোড)
 
 
Color set করার তিনটি পদ্ধতি আছে। সাধারন কিছু কালার যেমন কালো, সাদা, লাল, সবুজ, নীল। এইচটিএমএল এ কালার value লেখার সময় সরাসরি এদের নাম লেখা হয়।নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।
figure 1
এইচটিএমএল-রং পদ্ধতি আরজিবি মান (HTML- Coloring system: rgb value)
আমি আপনাদেরকে নিরাপদ web design এর জন্য HTML rgb ব্যবহারের পরামর্শ দেব না কারন Non-IE browser, HTML rgb সাপোর্ট করে না। আপনারা যদি CSS শিখতে চান তাহলে আপনাদের উচিত এই বিষয় সম্বন্ধে জানা।
  • Red, Green এবং Blue এই তিনটি কালারের সমষ্টি হচ্ছে rgb ।
  • প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)।
  • rgb ফরমেটটি হল rgb(RED,GREEN,BLUE)।
Red, Green এবং Blue এর মান:
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue
এইচটিএমএল-রং পদ্ধতি:হেক্সাডেসিমাল (HTML- Coloring system: Hexadecimal)
প্রথম প্রথম Hexadecimal system বুঝতে একটু কারন এই system একটু জটিল ও কঠিন। practice করার মাধ্যমে বিষয়টি অনেক সহজ হয় যাবে। এই Hexadecimal system সকল ক্ষেত্রে গ্রহনযোগ্য এবং বহুল ব্যবহৃত। Hexadecimal system টি ইন্টারনেটের standard color।
Hexadecimal হল ৬ digit কালারের উপস্থাপন। প্রথম দুটি digit(RR), Red value নির্দেশ করে পরবর্তি দুটি digit(GG), Green value নির্দেশ করে এবং সর্বশেষ দুটি digit(BB), Blue value নির্দেশ করে।
এইচটিএমএল হেক্সাডেসিমাল রং
bgcolor="#RRGGBB"
এইচটিএমএল -রং কোড (HTML- Color code: breaking the code)
নিচে টেবিলে দেখানো হয়েছে কিভাবে বর্ণ Hexadecimal system এর Numbering system কে বর্ধিত করে ১৬ digit এ উন্নীত করে।
figure 2
তাই বর্ণকে নম্বর হিসাবে ব্যবহার করা হয়। এই বর্ণকে পরে নম্বরে রুপান্তর করা হয়।নিচে একটি উদাহরন দেয়া হলো।
একটি বাস্তব হেক্সাডেসিমাল:
bgcolor="#FFFFFF"
এখানে "F" হচ্ছে সবোর্চ্চ পরিমান এবং এই কালারটি ("#FFFFFF") সাদা কালার নিদের্শ করে। নিচে বিষয়টি বিস্তারিত আলোচনা করা হয়েছে।
হেক্সাডেসিমাল সূত্র:
(15 * 16) + (15) = 255
উপরের সূত্রটি বাস্তব। প্রথমে F এর মান(১৫) কে ১৬ দ্বারা গুন করে পরবর্তি মানের সাথে যোগ করতে হবে। ২৫৫ মানটি যেকোন প্রাথমিক কালারের মানের ক্ষেত্রে সর্বোচ্চ।নিচে আরও উদাহরন দেয়া হলো।
উদাহরন:
bgcolor="#CC7005"
CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5

HTML টিউটোরিয়াল -১৪ >>(HTML লিস্ট)

HTML টিউটোরিয়াল -১৪ >>(HTML লিস্ট)
 
 
ওয়েব পেজে যদি তালিকা বা লিস্ট প্রদর্শন করাতে চান তখন এইচটিএমএল এ ৩ ধরনের লিস্ট করার ট্যাগ আছে, প্রয়োজনমত যেকোন একটি ব্যবহার করতে পারেন।
Unordered List :
এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে। যেমনঃ
1.<ul>
2.<li>Bangla</li>
3.<li>English</li>
4.<li>Social Science</li>
5.<li>Mathemetaics</li>
6.</ul>
প্রদর্শন:
  • Bangla
  • English
  • Social Science
  • Mathematics
আপনি ইচ্ছে করলে সিএসএস দিয়ে গোল চিহ্নের পরিবর্তে অন্য চিহ্নও দিতে পারেন এগুলি সিএসএস এ আলোচনা হবে।
Ordered List:
কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন যেমনঃ
1.<ol>
2.<li>iPad</li>
3.<li>iPhone</li>
4.<li>MacBook Air</li>
5.</ol>
প্রদর্শন
  1. iPad
  2. iPhone
  3. MacBook Air
ol এলিমেন্টে start নামে একটা এট্রিবিউট ব্যবহার করে কত থেকে শুরু হবে এটা ঠিক করা যায় যেমন উপরের লিস্ট টি যদি ১০ থেকে দেখাতে চান তাহলে
1.<ol start="10">
2.<li>iPad</li>
3.<li>iPhone</li>
4.<li>MacBook Air</li>
5.</ol>
প্রদর্শন
10. iPad
11. iPhone
12. MacBook Air
li তে value নামের একটা এট্রিবিউট ব্যবহার করে যেকোন আইটেমের নাম্বার পরিবর্তন করা যায় যেমন:
1.<ol>
2.<li value="5">iPad</li>
3.<li value="10">iPhone</li>
4.<li value="15">MacBook Air</li>
5.</ol>
প্রদর্শন
5. iPad
10. iPhone
15. MacBook Air
Definition list নামে আরেকটা লিস্টিং ট্যাগ আছে এটা খুব ব্যবহার হয়না, এটা দিয়ে একটু ভিন্নভাবে তালিকা দেখানো যায় যেমন:
01.<dl>
02.<dt>Preliminary analysis</dt>
03.<dd> in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them</dd>
04.<dt>Systems analysis, requirements definition</dt>
05.<dd>Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs</dd>
06.<dt>Systems design</dt>
07.<dd>Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.</dd>
08.<dt>Development</dt>
09.<dd>The real code here</dd>
10.</dl>
প্রদর্শন
Preliminary analysis
    in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them
Systems analysis, requirements definition
    Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs
Systems design
    Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.
Development
    The real code here

HTML টিউটোরিয়াল -১৩ >>(HTML ও CSS)

HTML টিউটোরিয়াল -১৩ >>(HTML ও CSS)
 

আজ আমরা CSS এর অন্যান্য উপাদান গুলো যেমনঃ CSS ফন্ট, CSS এর color প্রোপার্টি, CSS বক্স মডেল ইত্যাদি সম্পর্কে জানবো যেগুলো HTML কোড লিখতে আমাদের কাজে লাগবে।
HTML এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে CSS ফন্ট গুরুত্বপূর্ণ। এজন্য বেশ কিছু CSS প্রোপার্টিজ আছে যেগুলির বহুল ব্যবহার প্রচলিত।
নিচের সেগুলির উদাহরণ সহ আলোচনা করা হলঃ
CSS ফন্ট
  • font-family প্রোপার্টিজ দিয়ে এলিমেন্টের ফন্ট কি হবে সেটা ঠিক করা যায়।
  • font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের টেক্সটের সাইজ বা আকার কত বড় হবে।
  • CSS এর color প্রোপার্টি দ্বারা HTML এলিমেন্টের টেক্সটের রং নির্ধারণ করা হয়।
  • <font> ট্যাগটি HTML এর পুরনো ভার্সনে কাজ করে HTML 5 এ কাজ করেনা।
উদাহরণ
figure 1
figure 2
CSS বক্স মডেল
অনেক সময় অনেক লেখা এবং ছবিকে বক্সের ভেতরে উপস্থাপন করার দরকার হয়।
CSS দিয়ে তৈরি এই বক্স ব্রাউজারে দেখা যায়।
Border- প্যাডিং এবং কনটেন্ট চারিদিকে লাইনের সৃষ্টি করে। বর্ডারের ব্যাকগ্রাউন্ড কালার থাকে।
উদাহরণ
figure 3
figure 4
Margin- বর্ডারের চারিদিকে একটি এলাকাকে ক্লিয়ার করে । মার্জিনের কোনো ব্যাকগ্রাউন্ড কালার থাকে না।
Padding-কনটেন্ট চারিদিকে একটি এলাকাকে ক্লিয়ার করে । প্যাডিং বক্সের ব্যাকগ্রাউন্ড কালার থাকে।
content- বক্সের কনটেন্ট যেখানে টেক্সট ও ইমেজগুলো আবির্ভূত হয় ।
উদাহরন
figure 5
figure 6
আইডি এট্রিবিউট
  • কয়েকটি বাদে প্রায় প্রত্যেকটি HTML এলিমেন্টে id এট্রিবিউট ব্যবহার করা যায়।
  • id এট্রিবিউটের মান ইচ্ছেমত দিতে পারেন।
  • সহজ কথায় id হচ্ছে এলিমেন্টির একটা নাম। এই নাম ধরে CSS এ এলিমেন্টটিকে সিলেক্ট করা হয় এবং স্টাইলিং করা হয়।
উদাহরণ
figure 7
figure 8
ক্লাস এট্রিবিউট
HTML id এট্রিবিউটের মত class আরেকটা এট্রিবিউট আছে। প্রায় সব HTML এলিমেন্টে এটা ব্যবহার করতে পারেন।
ধরুন আপনার একটা HTML ডকুমেন্টে ১০ টা হেডিং আছে ২টি h1, ৩টি h3, h2 ... এরকম আরও। এখন আপনি যদি চান যে সবগুলি h1 এর রং লাল এবং সবগুলি h3 এর রং বেগুনি হবে, তো কি করবেন, প্রতিটি হেডিং এর আইডি দিবেন? এবং প্রতিটি আইডি ধরে ধরে পরে CSS লিখবেন? উত্তর হল না। কেননা এই সমস্যার সমাধানের জন্যই CSS ক্লাস।
যেহেতু h1 দুটির রং দিব লাল তাই এইদুটি হেডিং এর আমি একই ক্লাস দেব এভাবে h3 ৩টিরও একই ক্লাস দেব। এরপর সেই ক্লাস ধরে স্টাইলিং।
উদাহরণ
figure 9
figure 11

HTML টিউটোরিয়াল -১২ >>(HTML ও CSS])

HTML টিউটোরিয়াল -১২ >>(HTML ও CSS])
 
 
 
এত দিন আমরা আপনাদেরকে HTML সম্পর্কে ধারণা দিয়েছি। আজ আমরা আপনাদেরকে HTML এর HTML কমেন্ট ট্যাগ ও HTML এ CSS এর ব্যবহার দেখাব। এখানে আমরা CSS সম্পর্কে বেসিক কিছু আলোচনা উপস্থাপন করেছি।
HTML কমেন্ট ট্যাগ
  • কমেন্ট ট্যাগ <!-- and --> HTML ডকুমেন্টে কমেন্ট করার ক্ষেত্রে কাজে লাগে।
  • অন্যান্য ট্যাগ মত কমেন্ট এরও opening tag এবং closing tag আছে।
  • <!-- Opening Comment</li>
  • -- > Closing Comment
  • ওয়েব ডেভেলপার হিসাবে আপনি অনেক কাজ অসম্পূর্ণ রাখতে পারেন সেক্ষেত্রে অসম্পূর্ণ কাজটিকে <!— -- > কমেন্ট ট্যাগ এর ভিতর রাখতে পারেন।
  • কমেন্ট ট্যাগ এর ভিতর কোন কিছু রাখলে তা ব্রাউজারে দেখা যায় না।
উদাহরণ
figure 1
figure 2
HTML ও CSS
HTML দিয়ে ডিজাইনের সময় স্টাইলিং করতে গেলে CSS কোড লাগে কারন CSS এর মাধ্যমে HTML এ তৈরীকৃত পেজটি আরও দৃষ্টিনন্দন করা যায়। একটা HTML পেজে <head> ট্যাগের ভিতর <style> ট্যাগ দিয়ে CSS কোড যোগ করে পেজ স্টাইলিং করা যায়। এটা হচ্ছে ইন্টারনাল CSS আর যদি CSS কোড বেশি হয়ে যায় তখন CSS কোড আলাদা ফাইলে লেখা হয়।স্টাইলিং করার জন্য সাধারণত CSS কোড আলাদা ফাইলে লেখা হয়। তবে আপনাদের বুঝার সুবিধার্থে উদাহরণ সমূহে ইন্টারনাল CSS দিয়ে করা হয়েছে। আপনারা CSS সম্পর্কে আরও বিশদভাবে ভাবে জানতে পারবেন CSS টিউটোরিয়াল থেকে যা আর কিছুদিনের মধ্যেই প্রকাশিত হবে।
নিচে সংক্ষেপে CSS এর গুরুত্বপূর্ণ উপাদানগুলো আলোচনা করা হলঃ
  • CSS অর্থ হল ক্যাসকেডিং স্টাইল শিট
  • CSS এর সিনট্যাক্স তিনটি অংশ নিয়ে গঠিত।
১। সিলেক্টর(Selector)
২। প্রোপার্টি(Property)
৩। ভ্যালু(Value)
Selector {property: value}
  • সিলেক্টর হলো নির্দিষ্ট একটি ট্যাগ যেটি আপনি নির্বাচন করতে চান।
  • প্রোপার্টি হচ্ছে অ্যাট্রিবিউট যেটাকে পরিবর্তন করা হয়।
  • আর প্রত্যেকটি প্রোপার্টির একটি নির্দিষ্ট ভ্যালু থাকে।
যেমনঃ Body {color: red}
একাধিক ভ্যালুর ক্ষেত্রে ভ্যালু গুলোকে সেমিকোলন দিয়ে পৃথক করা হয়।
যেমনঃ P { text-align: left; color: green}
একটি HTML ডকুমেন্ট এর সাথে তিন ভাবে স্টাইল শিট যুক্ত করা হয়। সেগুলো হলোঃ
১. এক্সটার্নাল স্টাইল শিট (Extarnal Style Sheet)
  • একই স্টাইল অনেকগুলো পেইজে প্রয়োগ করার ক্ষেত্রে এক্সটার্নাল CSS(স্টাইল শিট) হল আদর্শ উপায়।
  • এক্সটার্নাল স্টাইল শিটের মাধ্যমে একটি মাত্র ফাইল পরিবর্তন করে আপনি সম্পূর্ণ ওয়েভ সাইটের চেহারা পরিবর্তন করে দিতে পারেন।
  • প্রতি পেইজে অবশ্যই <link> ট্যাগ ব্যবহার করে স্টাইল শিটের সাথে লিঙ্ক করতে হয়। <link> ট্যাগ বসাতে হয় <head> সেকশনের ভেতরে।
উদাহরণ
figure 3
figure 4
২. ইন্টারনাল স্টাইল শিট (Internal Style Sheet)
  • যখন কোন ডকুমেন্টে একটি ইউনিক স্টাইল থাকে তখন ইন্টারনাল স্টাইল শিট ব্যবহার করা উচিত ।
  • হেড (head) সেকশনে স্টাইল<style>ট্যাগ ব্যবহার করে স্টাইল শিট নির্ধারণ করতে হবে।
উদাহরণ
figure 5
figure 6
৩. ইনলাইন স্টাইলস(Inline Styles)
  • এটি হচ্ছে CSS style ট্যাগকে HTML কোড এর ভিতর ব্যবহার করার নিয়ম।
  • যখন এলিমেন্টএর সিঙ্গেল অকারেন্সে কোন ইউনিক স্টাইল প্রয়োগ করতে হয় তখন ইনলাইন স্টাইল ব্যবহার করা হয়।
  • ইনলাইন স্টাইল প্রয়োগের জন্য সংশ্লিষ্ট ট্যাগে অ্যাট্রিবিউট ব্যবহার করা হয়।
  • স্টাইল অ্যাট্রিবিউট যে কোন CSS প্রোপার্টি বহন করতে পারে ।
figure 7
figure 8
পরের টিউটরিয়ালে আমরা আরও কিছু CSS এলিমেন্ট সম্পর্কে জানবো।

HTML টিউটোরিয়াল -১১ >>(HTML Computer Code)

HTML টিউটোরিয়াল -১১ >>(HTML Computer Code)
 
 
 
HTML Computer Code এলিমেন্টসমূহ
figure 1
HTML Code ফরম্যাটিং
  • code tag এর মাধ্যমে আপনার text কে computer code এর মত করে লেখতে পারেন।
  • এটা সাধারণ ভাবে text এর font face, size, এবং letter spacing পরিবর্তন করতে পারে।
উদাহরণ
figure 2
figure 3
HTML কিবোর্ড ফরম্যাটিং
  • HTML <kbd> ট্যাগ দ্বারা কিবোর্ড ইনপুটকে বুঝায়
উদাহরণ
figure 5
figure 6
HTML Sample ফরম্যাটিং
  • HTML <samp> ট্যাগ দ্বারা computer output sample বুঝায়।
উদাহরণ
figure 7
figure 8
HTML variable ফরম্যাটিং
  • HTML <var>ম্যাথম্যাটিক্যাল ভেরি্যেবল বুঝানোর ক্ষেত্রে এই ট্যাগটি ব্যবহার করা হয়।
উদাহরণ
figure 9
figure 10
HTML pre ফরম্যাটিং
  • pre ট্যাগের সুবিধা হল HTML coding এর সময় যেভাবে আমরা লাইন ব্রেক, স্পেস নির্দেশ করে দিবো ঠিক সেভাবে টেক্সট প্রদর্শিত হবে।
  • অর্থাৎ যেভাবে কোড লিখবেন সেভাবেই আউটপুট দেখাবে।
উদাহরণ
figure 11
figure 12
Subscribe to: Posts (Atom)