ব্লগে ট্যাবভিত্তিক গেজেট - উইজেট লাগানোর পদ্ধতি

আমার 'বাংলা হ্যাকস' ব্লগের ডানপাশের সাইডবারের উপরে একটি ট্যাবভিত্তিক গেজেটবক্স আছে। ব্লগার.কম ব্লগে ট্যাবড উইজেট (গেজেট) তৈরি করার পদ্ধতি জানতে চেয়ে একাধিক পাঠক আমাকে ইমেইল করেছেন। নিজস্ব হোস্টিং এর ওয়ার্ডপ্রেস ব্লগে এটা স্থাপন করার জন্য প্লাগইন আছে। কিন্তু ব্লগার.কম ব্লগে (ফ্রি অথবা হোস্টেড) এটা লাগানোর কোন সুবিধা নেই। কিন্তু এই সীমাবদ্ধতা আমরা নিজেরা একটু চেষ্টা করে দূর করতে পারি। এই ট্যাবভিত্তিক গেজেটবক্স ব্লগার.কম ব্লগে লাগানোর জন্য একাধিক কোড ব্লগের HTML অংশে স্থাপন করতে হয়। নতুন ব্লগারদের জন্য দুঃসাধ্য হতে পারে বিধায় আমি এতদিন এই কোডটি প্রকাশ করতে অনাগ্রহী ছিলাম। কিন্তু পাঠকদের উপর্যুপরি ইমেইল ও অনুরোধের প্রেক্ষিতে আমি পদ্ধতিটি সবিস্তারে বর্ণনা করলাম। আশা করি পদ্ধতিটি জটিলভাবে দেখবেন না। একটু সতর্ক হয়ে কাজ করলে আপনিও সফলভাবে এই ট্যাবড গেজেটটিকে নিজেদের ব্লগে স্থাপন করতে পারবেন।

এই ট্যাবভিত্তিক গেজেট স্থাপন করার নানারকম পদ্ধতি আছে। এর বেশিরভাগ এক্সটারনাল ফাইল সংযুক্ত করে করতে হয়। কিন্তু আমি যে কোডটি আপনাদেরকে দিচ্ছি, তার কোন এক্সটারনাল ফাইল লাগবে না। কোডের মধ্যেই যাবতীয় সমস্যার সমাধান করে দেয়া আছে। যদি এটা সফলভাবে স্থাপন করতে পারেন, তাহলে অন্যান্য পদ্ধতিও আরেকদিন আলোচনা করা যাবে।
There are many ways to add a tabbed gadget in blogger.com blog.
Blogger.com ব্লগে Tabbed Widget স্থাপন করার পদ্ধতিঃ

প্রথমে ব্লগার.কম এ গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন। ড্যাসবোর্ড থেকে সরাসরি Layout > Edit HTML ট্যাবে চলে যান। Expand Widget Templates লেখার পাশে টিক চিহ্ন দিয়ে দিন।

মোট পাঁচটি ধাপে ব্লগার.কম ব্লগে ট্যাবভিত্তিক উইজেট স্থাপন করতে হবে। প্রথম চারটি ধাপের কোড স্থাপন করাকালীন হুট করে SAVE করবেন না। একেবারে শেষে যখন বলবো ঠিক তখন সেভ করতে হবে।
This is the easiest method to add a tabbed widget gadget in blogger blog sidebar.
প্রথম ধাপঃ
HTML পাতার উপরের দিকে থাকা Variable definitions লেখার ঠিক নিচে নিম্নোক্ত কোডগুলো লিখে দিন।

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

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

দ্বিতীয় ধাপঃ
এবার ]]></b:skin> এর উপরে নিচের কোডটি কপি করে নিয়ে পেস্ট করে দিন।

/*---------- Tabbed widget start-------- */

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}

/*------- Tabbed widget end--------*/

তৃতীয় ধাপঃ
এবার </head> লেখার ঠিক উপরে নিচের কোডটি কপি করে দিন

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{

var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;

if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];

t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {

for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {
t.headingText = i + 1;
}

DOM_li = document.createElement("li");

t.li = DOM_li;

DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;

DOM_a.tabber = this;
DOM_a.tabberIndex = i;

if (this.addLinkId && this.linkIdFormat) {

aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}

DOM_li.appendChild(DOM_a);

DOM_ul.appendChild(DOM_li);
}

e.insertBefore(DOM_ul, e.firstChild);

e.className = e.className.replace(this.REclassMain, this.classMainLive);

this.tabShow(defaultTab);

if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};

tabberObj.prototype.navClick = function(event)
{

var
rVal,
a,
self,
tabberIndex,
onClickArgs;

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

a.blur();

if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};

tabberObj.prototype.tabHideAll = function()
{
var i;

for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

div = this.tabs[tabberIndex].div;

if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{

var div;

if (!this.tabs[tabberIndex]) { return false; }

this.tabHideAll();

div = this.tabs[tabberIndex].div;

div.className = div.className.replace(this.REclassTabHide, '');

this.navSetActive(tabberIndex);

if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = '';

return this;
};

function tabberAutomatic(tabberArgs)
{
var
tempObj,
divs,
i;

if (!tabberArgs) { tabberArgs = {}; }

tempObj = new tabberObj(tabberArgs);

divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}

/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>

চতুর্থ ধাপঃ
এবার <div id='sidebar-wrapper'> এর নিচে নিম্নোক্ত কোডগুলো লিখে দিন। (সাইডবার একাধিক থাকলে তার জন্য স্বতন্ত্র নাম্বার যেমন ১ অথবা ২ থাকবে।)

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>

[এখানে যদি তিনটি ট্যাব চান, তাহলে একটি লাইন সম্পূর্ণ ( <b:section class='tabbertab' id='tab4' maxwidgets='1'/>) মুছে দিন ]

একবার PREVIEW লেখাতে ক্লিক করে দেখে নিন কোন Error দেখাচ্ছে কি না। দেখাবে না আসা করি। তারপরও যদি কোন Error দেখায়, তাহলে HTML কোড বক্সের নিচে লেখা CLEAER EDITS লেখাতে ক্লিক করে প্রয়োগকৃত কোডগুলো পরিষ্কার করে নিন। এই বোতামটি চাপলে সেভ করার আগ মুহুর্ত পর্যন্ত যে পরিবর্তনগুলো করেছেন, তা সব মুছে যাবে। ভুল কোডের কোন প্রভাব টেমপ্লেটে পড়বে না। আবার প্রথম ধাপ থেকে শুরু করুন। প্রথম থেকে চতুর্থ ধাপ পর্যন্ত কোডগুলো স্থাপন করার পর আবারো PREVIEW লেখাতে ক্লিক করে দেখে নিন। কোন Error না দেখালে এবার SAVE TEMPLATE লেখাতে ক্লিক করে প্রয়োগকৃত কোডগুলো সংরক্ষণ করুন।

পঞ্চম ধাপঃ
এতক্ষণ কাজ করেছেন Layout > Edit HTML ট্যাবের মধ্যে। এবার Layout > Page Elements ট্যাবে চলে আসুন। এখানে সাইডবারের দিকে তাকালে নিচের ছবির মত অংশ দেখতে পারবেন।
এখানে 1, 2, 3, 4 লেখার ঠিক নিচে Add a Gadget লেখা লিংক রয়েছে। প্রথমে 1 লেখার নিচে একটি গেজেট স্থাপন করুন। এরপর 2 লেখাতে ক্লিক করলে আবারও Add a Gadget লেখাতে ক্লিক করে আরও একটি গেজেট লাগিয়ে নিন। এভাবে 3 এবং 4 নং ট্যাবে গেজেট বসিয়ে দিন। সবকটি ট্যাবে গেজেট বসানো হয়ে গেলে এই Page Elements পাতার উপরে ডানপাশে কমলা রঙের ব্যাকগ্রাউন্ডে লেখা SAVE লেখাতে ক্লিক করে পরিবর্তনগুলো সংরক্ষণ করুন। ব্রাউজারের অন্য ট্যাবে আপনার ব্লগে একবার রিফ্রেশ করুন। দেখতে পারবেন একটি দারুণ কাজের ট্যাব গেজেট কাজ শুরু করে দিয়েছে।

আশা করি সবকটি ধাপ সফলভাবে সম্পন্ন করতে পেরেছেন। পারলেন কি না তা জানানোর জন্য অনুরোধ করছি। এই টিউটোরিয়ালটি সম্পূর্ণ টেক্সটফাইলে ডাউনলোড করুন এখান থেকে।