তৈরী করুন ব্লগের জন্য একটি প্রফেশনাল মানের 404 Error পেইজ


হ্যালো বন্ধুরা, TechRajjo.Com – Create Your Own Creativity তে আপনাকে স্বাগতম । কেমন আছেন সবাই ? নিশ্চয় ভালো আছেন । আর ভালো আছেন বলেই হয়তো আমাদের টেক রাজ্য থেকে আপনার পছন্দের এই আর্টিকেলটি পড়তে বসছেন । আমরা আমাদের টেক রাজ্যে প্রতিনিয়ত প্রযুক্তি বিষয়ক বিভিন্ন আর্টিকেল শেয়ার করে থাকি । যাতে মানুষ প্রযুক্তিকে সহজে জানতে ও বুঝতে পারে ।  তারই ধারাবাহিকতায় আজকে আপনাদের জন্য নিয়ে এসেছি প্রযুক্তি বিষয়ক আরেকটি আর্টিকেল । পোস্টের টাইটেল পড়ে এতক্ষণে নিশ্চয় বুঝে গেছেন যে, আজকে আমরা কোন বিষয় নিয়ে আলোচনা করবো ।

তার আগে আপনার কাছে আমাদের রিকুয়েস্ট, আপনি যদি আমাদের ব্লগটি সাবস্ক্রাইব না করে থাকেন, তাহলে এখনি সাবস্ক্রাইব করে নিন । তাহলে প্রযুক্তি বিষয়ক নিত্যনতুন আর্টিকেল সবার আগে পৌঁছে যাবে আপনার কাছে ।
তাহলে চলুন আর কথা না বাড়িয়ে মূল আলোচনায় ফিরে যাই ।

আজ আমরা আলোচনা করবো  কিভাবে প্রফেশনাল মানের একটি 404 Error পেইজ তৈরী করা যায়। পুরাতন টেমপ্লেটে যখন কোন কিছু সার্চ করে পাওয়া যেত না তখন ব্লগার ডিফল্টভাবে একটি Error পেইজ দেখাতো, যেটি ছিল আপনার কাঙ্খিত ব্লগটি থেকে সম্পূর্ণ আলাদা। কিন্তু আমি এখন আপনাদের সাথে যে পদ্ধতি শেয়ার করবো এই পদ্ধতিতে আপনি ভাল এবং আধুনিক ডিজাইনের একটি Error পেজ তৈরী করে নিতে পারবেন।

এবার আসুন জেনে নিই 404 Error পেজ কি এবং এর সুবিধাগুলো কি ? আর কেনই বা এটি প্রফেশনাল ? আর এটি কতটা আধুনিক ডিজাইনের সেটা আপনি পেজটি তৈরি করলেই বুঝতে পারবেন । তাই এটা নিয়ে আর বেশি কথা না বলি ।

তৈরী করুন ব্লগের জন্য একটি প্রফেশনাল মানের 404 Error পেইজ

404 Error পেজ কিঃ এটি হচ্ছে ওয়েবসাইটের একটি নির্দেশনামূলক পেইজ। যখন আপনি কোন ওয়েবসাইটে কোন প্রকার ভূল তথ্য বা লিংক দিয়ে সার্চ করবেন তখন এ পেজটি আপনাকে কিছু দিক নির্দেশনামূলক কথা জানাবে, যার মাধ্যমে আপনি হয়তো আপনার কাংখিত তথ্য বা ফলাফল পেয়ে যাবেন। মোট কথা হচ্ছে সঠিক ফলাফল পাওয়ার জন্য দিক নির্দেশনামূলক পেজ হচ্ছে এই 404 Error পেজ

এটিতে যা রয়েছেঃ এটিতে যে সকল ফিচার গুলো রয়েছে সেগুলি নিচে আমি পয়েন্ট আকারে দিয়ে দিলাম।
  • এটি সম্পূর্ণ পেইজ জুড়ে দেওয়া হয়েছে অর্থাৎ ওয়েবসাইটের সাইটবারের কোন প্রকার অপশন শো করবে না। যার ফলে এটিকে দেখতে আরো প্রফেশনাল দেখাবে।
  • ইউজার এর জন্য কিছু দিক নির্দেশনামূলক বার্তা দেওয়া আছে। এতে করে সে তার কাংখিত পেজটি পেয়ে যাবে।
  • পেছনের/আগের পেজে যাওয়ার জন্য JavaScript এর মাধ্যমে লিংক করে দেওয়া আছে। এর ফলে আপনার ইউজার যদি ভূল করে ব্রোকেন লিংকে প্রবেশ করে তাহলে এই অপশনের মাধ্যমে সে তার পূর্বে লিংকে ফিরে যেতে পারবে।
  • ইউজার যদি তার কাংখিত লিংক পেতে ব্যর্থ হন তাহলে সে আপনার Contact পেজের মাধ্যমে আপনকে ই-মেইলের মাধ্যমে জানাতে পারবে। এত করে যদি লিংকে কোন প্রকার ভূল থাকে তাহলে আপনি তা সংশোধন করে নিতে পারবেন।
  • হোম পেজের সাথেও লিংক করে দেওয়া আছে। 
  • একটি প্রফেশনাল মানের সার্চ বক্স যুক্ত করে দেওয়া হয়েছে, যাতে করে ইউজার ইচ্ছা করলে এই সার্চ বক্সের মাধমে তার কাংখিত পেজটি খুজে নিতে পারবে।
  • সর্বোপরি একটি অত্যাধুনকি 404 Error এর একটি লগো দেওয়া আছে। যেটি আপনার এ পেজটিকে আরও আকর্ষনীয় করে তুলবে এবং ইউজার সহজেই বুঝতে সক্ষম হবে যে, এটি একটি Error পেজের বার্তা।

এবার আসি কিভাবে এটি আপনার ব্লগে যুক্ত করবেন । কিন্তু তার আগে আরও কিছু কথা - আমি আপনাদের সাথে যে Error পেজটি শেয়ার করবো সেটি একটি প্রফেশনাল মানের 404 Error পেজ। এটিকে প্রফেশনাল বলার কারণ হচ্ছে এটি সম্পূর্ণভাবে CSS3 দিয়ে বেশ কিছু দিক নির্দেশনামূলক অপশনের মাধ্যমে এক নজরকারা ডিজাইন করা হয়েছে। এখন হয়তো ভাবছেন যে, এটি ব্লগে যুক্ত করা অনেক ঝামেলার কাজ হবে। কিন্তু আমি বলছি কোন প্রকার ঝামেলাই নেই। শুধু আমার নিচের টিপস গুলি অনুসরণ করলেই খুব সহজেই এই পেজটি তৈরী করে নিতে পারবেন।

কি ভাবে এটি ব্লগে যুক্ত করবেনঃ
  • প্রথমে ব্লগারের লগইন করুন।
  • তার পর Settings > Search Preferences এ যান।
  • এর পর Errors and Redirections অপশনের অধীনে Custom Page Not Found এর ডান পাশে একটি Edit এর অপশন দেখতে পাবেন। এটিতে ক্লীক করলেই একটি বক্স আসবে।
  • এই বক্সটিতে নিচের কোড গুলি কপি করে পেষ্ট করুন।
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>Oops!</font>
<font color='#666666'>আপনি হয়তো কোন ভূল লিংকে প্রবেশ করেছেন অথবা যে পেইজটি খুজছেন সেটি এখান থেকে সরিয়ে অন্যত্র নেওয়া হয়েছে !<br/>অনুগ্রহ করে লিংকটি যাচাই করে দেখুন অথবা আমাদের অনুসরণ করুনঃ</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>ইচ্ছে করলে আগের পেইজে যেতে পারেন।</a></li>
    <li>সমস্যা সম্পর্কে আমাদের জানাতে পারেন<a href='Contact Page Url'>এখানে ক্লিক করে</a> (<em>এটি আমাদের আরও ভাল পরিবেশন করতে সাহায্য করবে </em>)</li>
    <li>মূল পাতা যাওয়ার জন্য<a href='Home Page Url'>এখানে ক্লিক করুন।</a><br/></li>
<li>আপনি যা খুজছেন সেটি নিচের সার্চ বক্সে খুজে দেখতে পারেন।</li>
  </ol>
<br />
 <center>
  <div id="searchbox">
   <form action="/search" autocomplete="off">
    <input id="input" name="q" type="text" size="15" placeholder="Search for...." />
    <input id="submit" type="submit" value="Search" />
   </form>
  </div>
 </center>
  <p>
    <br/>
    <br/>
    <br/></p>
<p align='center'><font size='5'>Page Not Found!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 404 </font></p>
<style>
.status-msg-wrap {
    font-size: 100%;
    margin-left: 50px;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;}
#main-wrapper { width:98%!important;} .post { width:98%!important; }
#searchbox {
 display: block;
 clear: both;
 margin: 10px 0;
}
#searchbox #input {
 background: url("https://2.bp.blogspot.com/-LVr_GEuWpOc/VRk_8dP4_fI/AAAAAAAAD4E/nleFhOGnDV0/s1600/Search.png") no-repeat scroll 8px center transparent !important;
 padding: 7px 15px 7px 35px !important;
 color: #444;
 text-decoration: none;
 width:300px;
 font-size: 12px;
 font-family: "Arial Narrow",Arial,sans-serif;
 border: 1px solid #4C9ED9;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox #submit {
 color: #444;
 font-weight: bold;
 text-decoration: none;
 padding: 5px 5px;
 border: 1px solid #4c9ed9;
 cursor: pointer;
 height:32px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 background: #fbfbfb;
 background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
 background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
 background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>

Code ID No. TRCN-5190004
Download

  • Contact Page Url এ আপনার Contact পেজের লিংক দিয়ে দিন।
  • Home Page Url এ হোম পেজের লিংক দিন।
  • সবশেষে Save Changes এ ক্লিক করুন।

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

https://www.yourblog.blogspot.com/blablabla

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

তৈরী করুন ব্লগের জন্য একটি প্রফেশনাল মানের 404 Error পেইজ তৈরী করুন ব্লগের জন্য একটি প্রফেশনাল মানের 404 Error পেইজ Reviewed by CEO on Friday, May 10, 2019 Rating: 5

No comments:

It can be commented that the post was good. You can also comment on any problem. We will try to solve as much as possible.

Powered by Blogger.