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

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

404 Error পেজ কি?

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

প্রফেশনাল 404 Error পেজঃ

আমি আপনাদের সাথে যে Error পেজটি শেয়ার করবো সেটি একটি প্রফেশনাল মানের 404 Error পেজ। এটিকে প্রফেশনাল বলার কারণ হচ্ছে এটি সম্পূর্ণভাবে CSS3 দিয়ে বেশ কিছু দিক নির্দেশনামূলক অপশনের মাধ্যমে ডিজাইন করা হয়েছে। আপনি ইচ্ছা করলে এই লিংটি থেকে এর একটি ডেমো দেখে আসতে পারেন।

এটিতে যা রয়েছেঃ

এটিতে যে সকল ফিচার গুলো রয়েছে সেগুলি নিচে আমি পয়েন্ট আকারে দিয়ে দিলাম।

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

কি ভাবে এটি ব্লগে যুক্ত করবেন?

উপরের প্রফেশনাল মানের 404 Error পেজ সম্পর্কে পড়ার পর আপনারা হয়তো ভাবছেন যে, এটি ব্লগে যুক্ত করা অনেক ঝামেলার কাজ হবে। কিন্তু আমি বলছি কোন প্রকার ঝামেলাই নেই। শুধু আমার নিচের টিপস গুলি অনুসরণ করলেই খুব সহজেই এই পেজটি তৈরী করে নিতে পারবেন।

প্রথমে ব্লগারের লগইন করুন।
তার পর 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDevP8V5RU0Ukw1fsLYpPxNJT0HAN_3RN0MSjKvnybpg7vK26biYag-7EGSrnBKrB4_qW5Yl9pIRtz8AR2fqKArO-0R30FGmp5rJsRx3lmfRId3x931IFLhuBXwnWQqiUue3Iu8y5b2C1w/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>

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

কিভাবে চেক করবেন?

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

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