ব্লগস্পটে তৈরী করুন হোমপেজ(ওয়েলকাম পেজ) অথবা আন্ডার কনশস্ট্রাকশন পেজ

এই লেখাটি গতকাল দিয়েছিলাম, কিন্তু লেখাটি দেওয়ার পরেই কি মনে করে যেন আবার লেখাটিতে দেওয়া লিঙ্ক গুলো চেক করতে গেলাম, দেখলাম একটা লিঙ্কও কাজ করছে না। আবার নেটের লাইনে সমস্যা ছিল তাই তা এডিটও করতে পারছিলাম। যাই হোক আজকে আবার সময় করতে পারলাম।
ব্লগস্পটেও আপনি চাইলে আপনার পছন্দ মতো হোমপেজ বা ওয়েলকাম পেজ লাগাতে পারবেন। হোস্টিং এর কোন প্রয়োজন নেই।
ডেমো দেখুন এখানে

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

এটা খুবই জরুরি কেননা ব্লগস্পটে আলাদা হোমপেজ তৈরী করতে গেলে বেশ অনেক খানি সি এস এস এবং জাভাস্ক্রিপ্ট এতে যুক্ত করতে হবে। এবং তা লোডিং হতেও প্রচুর সময় নেয়।

লোডিং হতে দেরী হবার মূল কারন হলো আগে আপনার ব্লগের মূল পেজটি লোড হয় তারপর এই ওয়েলকাম পেজটি লোড হয়। এবং এই লোডিং এর কাজটি শেষ হতে এত বেশি সময় লাগে যে ভিজিটর পালিয়ে যাওয়ার সম্ভবনা আছে। সে কারনে অনেকেই হয়তো এটা লাগানো পছন্দ করবেন না।
চলুন শুরু করি।
leightbox.css
leightbox.js
prototype.js
এই ফাইল তিনটি ডাউনলোড করুন ।
এরপর মাই ডাটানেস্ট এ ফাইল তিনটি আপলোড করুন। এ ফাইল তিনটি আপলোড করার আগে আপনাকে রেজিস্ট্রেশন করে নিতে হবে।
এখানে আপলোড করার পর একটা জিনিষ লক্ষ্য রাখতে হবে আপনার আপলোড ফাইলগুলো সম্ভবত "প্রাইভেট" হয়ে আছে। এক্সেস পারমিশনে গিয়ে সেগুলো হিডেন করে নিতে হবে।
আর যারা এত ঝামেলার মধ্যে যেতে চান না তাদের জন্য আমি লিংক গুলো সরাসরি দিয়ে দিচ্ছি। (আমি বেশ অনেকদিন আগে আপলোড করেছিলাম)।
leightbox.css এর জন্য ইউ আর এল হবে http://www.mydatanest.com/files/kangalini/31976_qhg2p/leightbox.css

leightbox.js এর জন্য ইউ আর এল হবে http://www.mydatanest.com/files/kangalini/31977_stluo/leightbox.js

prototype.js এর জন্য ইউ আর এল হবে
http://www.mydatanest.com/files/kangalini/31986_4qzco/prototype.js

এবার মূল কাজ। ব্লগারে লগ ইন করুন। যথাক্রমে লে আউট এবং এডিট এইচ টি এম এল এ যান।
</head> লেখাটি খুজে বের করুন।( CTRL+F লিখে সাহায্য নিতে পারেন)।
এবার </head> এর উপরে নিচের লেখাটি যুক্ত করে দিন।

<!--Welcome-UnderConstuction-Page-Starts-->
<link rel="stylesheet" type="text/css" href="http://mydatanest.com/files/*****/leightbox.css"/>
<script type="text/javascript" src="http://mydatanest.com/files/*****/prototype.js"></script>
<script type="text/javascript" src="http://mydatanest.com/files/*****/leightbox.js"></script>
<!--Welcome-UnderConstuction-Page-Stops-HELP-samehood-->

আপনাদের জন্য একটু সুবিধা করে দেই।আপনারা যারা ফাইল তিনটি আপলোড করেন নি তাদের জন্য নিচের কোডটি যুক্ত করতে হবে।

<!--Welcome-UnderConstuction-Page-Starts-->
<link rel="stylesheet" type="text/css" href="http://www.mydatanest.com/files/kangalini/31976_qhg2p/leightbox.css"/>
<script type="text/javascript" src="http://www.mydatanest.com/files/kangalini/31986_4qzco/prototype.js"></script>
<script type="text/javascript" src="http://www.mydatanest.com/files/kangalini/31977_stluo/leightbox.js"></script>
<!--Welcome-UnderConstuction-Page-Stops-HELP-samehood-->

প্রয়োজন অনুসারে লেখা পরিবর্তন করে নিন।
সেভ করুন।
এবার আপনার ব্লগের লে আউটে ফিরে আসুন। এড এ গেজেট এ ক্লিক করুন। এবং সেখান থেকে html/javascript এ ক্লিক করুন। তারপর নিচের লেখাটি যুক্ত করে দিন।

<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>ব্লগে স্বাগতম</h1>
<p>ব্লগটি তৈরী করেছেন <a href="ইউ আর এল ">samehood</a></p></div>
<a href="আপনার ব্লগের ইউ আর এল" class="lbAction" rel="deactivate">আপনার ব্লগে প্রবেশ করুন</a></div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

এই ইলিমেন্ট লাগানোর ব্যাপারে কিছুটা সাবধানতা অবলম্বন করতে হবে। চেষ্টা করবেন এটা যাতে হেডারের নিচে কিংবা ব্লগের ব্লগপোষ্টের উপরের দিকে লাগানো সম্ভব হয়। আর তা যদি সম্ভব না হয় তাহলে এটা কাজ করবে না, কেননা ব্লগের অন্যান্য সাইডবার কিংবা ব্লগপোষ্টের আগে এটাকে লোডিং হতে হবে।

আর আপনি যদি এর ব্যাকগ্রাউন্ড ওভারলে কালার কিংবা ট্রান্সপারেন্সিতে পরিবর্তন আনতে চান তাহলে leightbox.css file এ নিচের লেখাটা পরিবর্তন করতে পারেন। ( এবং সেক্ষেত্রে আপনাকেই এ ফাইলটি আপলোড করতে হবে। উপরের leightbox.css এর ইউ আর এল টি আর কাজ করবে না )

div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;

খুজে বের করুন, এবং তারপরে যুক্ত করুন

background-color:#000; //color default - back
-moz-opacity: 0.8; //opacity default at 80%
opacity: 0.8; //opacity default at 80%
filter: alpha(opacity=80); //opacity default at 80% for IE
}

এই ওয়েলকাম পেইজটি যদি সম্পূর্ণ নতুন পেইজে দেখাতে চান তাহলে অপ্টিসিটি এবং মজ-অপ্টিসিটি ১.০ করতে হবে অর্থাৎ সম্পূর্ণ অস্বচ্ছ।

এই পেইজটি আপনার ব্লগের সকল পেইজে ওপেন হবার সময় দেখা যাবে। আপনি যদি এই পেইজটি কেবল মাত্র আপনার ব্লগের (http://xxxxx.blogspot.com http://xxxxx.blogspot.com/samhood_dam_boring.html) হোম্পেজে দেখাতে চান তাহলে আপনাকে আর একটু কাজ করতে হবে।
লে আউট থেকে এডিট এইচ টি এম এল এ যান। Expand Widget Templates এ মার্ক করুন (ডানপাশের উপরের দিকে)।
কন্ট্রোল+এফ বাটনে চেপে নিচের লেখাটি খুজে বের করুন।

<b:widget id='HTML3' locked='false' title='UNIQUE WORD OR TITLE HERE' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

এবং সেখানে নিম্নোক্ত

<b:widget id='HTML3' locked='false' title='UNIQUE WORD OR TITLE HERE' type='HTML'>
<b:includable id='main'>

লেখাটির পড়ে

<b:if cond='data:blog.url == data:blog.homepageUrl'>

এবং

<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

লেখাটির পড়ে

</b:if>

লেখাটি যুক্ত করুন।

আর কেবল মাত্র একটি নির্দিষ্ট পেইজে এই ওয়েলকাম পেইজটি লাগাতে চাইলে উপরের

<b:if cond='data:blog.url == data:blog.homepageUrl'>

এর বদলে নিচের লেখাটা শুধু যুক্ত করুন।

<b:if cond='data:blog.url == "আপনার ব্লগস্পটের পেইজ ইউ আর এল"'>

একই ভাবে আপনি আপনার ব্লগের ওয়েলকাম পেজের বদলে আন্ডারকনস্ট্রাকশন পেজ (সংস্কারমূলক) লাগাতে পারেন। কাজ ঠিক আগের মতই ......

<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">
<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href="আপনার ইউ আর এল">Samehood</a></p>
<p>This Page Is Under Construction</p>
<p>Sorry For The Inconvenience</p>
<p>Come Back Within An Hour :)</p>
</div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

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

মজা

8 thoughts on “ব্লগস্পটে তৈরী করুন হোমপেজ(ওয়েলকাম পেজ) অথবা আন্ডার কনশস্ট্রাকশন পেজ”

  1. লিঙ্ক গুলো আমি ভালভাবে চেক করে দিয়েছি। কোন সমস্যা নেই। কারো যদি বুঝতে বা কাস্টমাইজ করতে কোন সমস্যা হয় কমেন্টস বক্সে লিখে যাবেন, সাধ্যমত সাহায্য করব। ধন্যবাদ।

  2. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » ব্লগে যুক্ত করুন লো

  3. ধন্যবাদ,টিউটরিয়ালটি নতুনভাবে দেয়ার জন্য। আপনার নিয়মিত লেখা আশা করছি। একটি মানসম্পন্ন মেধা ভিত্তিক শিক্ষা ব্যবস্থা তৈরী করতে, আমাদের প্রয়াসে আপনাকে পেয়ে আমরা গর্বিত।

  4. @টিউটো, একটা মেইল করেছি আশা করি দেখবেন। কমেন্ট বক্সে বলা গেল না। “বিভাগ প্রধান” আগ্রহী। কিন্তু যোগ্যতা কেবল একটাই, আগ্রহ। আর কিছু নাই।

  5. আপনি যেভাবে বলেছেন সেভাবে ব্লগস্পটে ওয়েলকাম পেজ যুক্ত করলেও কি পেজ লোড হতে অনেক সময় নেবে ?একটু ক্লিয়ারলি বুঝিয়ে বলবেন কি ?আপনার পোস্ট টা খুবই উপকারী। কিন্তু আরও সহজবোধ্য হলে ভাল হত ।যেমন স্ক্রিনশট দিয়ে দিতে পারতেন প্রত্যেক টা ধাপের জন্য । যাই হোক অনেক অনেক ধন্যবাদ । ভাল থাকুন।
    .-= নার্ডীবয়´র শেষ পোস্ট: ..Paz Vega :a spanish actress =-.

  6. এর উপরে আপনি যে লেখাটি যুক্ত করটে বলছেন তা করা যায় না।নিচের লেখাটি আসে।
    Edit Template
    Edit the contents of your template.
    We were unable to save your template
    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup.
    আপনি যেভাবে করতে বলেছেন ঠিক সেভাবেই করেছি।তবুও হচ্ছেনা।
    আপনি বলেছেন এর উপরে নিচের লেখাটা লিখতে:

    আমি লিখেছি:

    প্রথমবার নিচের এই লেখাগুলোর ওয়ার্ড পরিবর্তন করে অন্য ওয়ার্ড দিয়েছিলাম।কিন্তু <!- এই চিহ্ন গুলো আপনি যেভাবে দিয়েছেন সেভাবেই দিয়েছিলাম,কাজ করেনি।পরেরবার আপনার ওয়ার্ডগুলোকে ঠিক রেখে শুধু সাইট এড্রেস টা দিয়েছি,তবুও কাজ করেনি।

    কষ্ট করে যদি জানাতেন কোথায় ভুলটা তাহলে কৃতার্থ হতাম।ধন্যবাদ।
    .-= নার্ডীবয়´র শেষ পোস্ট: ..Paz Vega :a spanish actress =-.

  7. এর উপরে আপনি যে লেখাটি যুক্ত করটে বলছেন তা করা যায় না।নিচের লেখাটি আসে।=hed tagএর উপরে আপনি যে লেখাটি যুক্ত করতে বলছেন তা করা যায় না।নিচের লেখাটি আসে।

    প্রথমবার নিচের এই লেখাগুলোর=Welcome-UnderConstuction-Page-Starts, Welcome-UnderConstuction-Page-Stops-HELP-samehood

    আমার মন্তব্যে এইচটিএমএল কোডগুলি আসেনি।স্ক্রিনশট দেওয়ার মত কোন টুল ও এখানে নেই।তাই দিতে পারলাম না
    .-= নার্ডীবয়´র শেষ পোস্ট: ..Paz Vega :a spanish actress =-.

Leave a Comment