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

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

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

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

লোডিং হতে দেরী হবার মূল কারন হলো আগে আপনার ব্লগের মূল পেজটি লোড হয় তারপর এই ওয়েলকাম পেজটি লোড হয়। এবং এই লোডিং এর কাজটি শেষ হতে এত বেশি সময় লাগে যে ভিজিটর পালিয়ে যাওয়ার সম্ভবনা আছে। সে কারনে অনেকেই হয়তো এটা লাগানো পছন্দ করবেন না।
চলুন শুরু করি।
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>

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

মজা