সুত্রপাঠ

Blogger লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান
Blogger লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান

মাউসের পিছে রঙের খেলা

লেখকঃ Sardar Ferdous Ibn Motiur প্রকাশের সময় ৭ জানু, ২০১৩ মন্তব্য 0 মন্তব্য
টেক লাভার ভাই বোনদের জানাই শরত সকালের রোদেলা শুভেচ্ছা। আশাকরি আপনারা ভালো আছেন। ইদ আর পুজো পাশাপাশি এসেছে বাঙালীর দুয়ারে। তাই আমাদের সবার ঘরে ঘরে আনন্দের হিল্লোল। ইদের ব্যস্ততার ফাঁকে আমার ব্লগটি পড়ার সময় পাবেন কিনা জানিনা!

মাউসের কার্সরের পেছনে কিছু অক্ষর ঘুরে বেড়াচ্ছেন। মাউস নাড়ালে লেখাগুলো তালে তালে নাচতে থাকে। টেকটিউনসের কল্যাণে আমরা সেটা শিখে ফেলেছি। আজ আমি শেখাবো কিভাবে মাউসের কার্সরে টেক্সটের বদলে রঙের ছটা দেয়া যায়।
  •  ব্লগার ড্যাশবোর্ড থেকে  Design যান।
  •  Layout  এ যান এবং  Add a Gadget ক্লিক করুন।
  •  HTML/JavaScript সিলেক্ট করুন।
  • নিচের কোডটি কপি করে পেস্ট করুন।
<script type="text/javascript">

var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung

var bubbles=100; // jumlah maksmal gelembung

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}

function bubble() {

var c;

if (x!=ox || y!=oy){

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby

[c][/c]) {

bubb

[c][/c].left=(bubbx

[c][/c]=x)+"px";

bubb

[c][/c].top=(bubby

[c][/c]=y)+"px";

bubb

[c][/c].width="3px";

bubb

[c][/c].height="3px"

bubb

[c][/c].visibility="visible";

bubbs

[c][/c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby

[c][/c]) update_bubb(c);

setTimeout("bubble()", 40);

}

function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown;

}

window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}

window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height;

div.style.width=width;

div.style.overflow="hidden";

return (div);

}

</script>

  • gadget গ্যাজেট বা উইজেট এর শিরোনাম ফাঁকা রেখে সেভ করুন।
কাজ শেষ। এখন আপনার ব্লগ চেক করার পালা। যখন আপনার ব্লগে মাউস ঘোরাবেন দেখবেন এর চারপাশে গোলাপী বুদবুদ ।
টেক টিপস নিয়ে এটা আমার প্রথম টিউন।  আশাকরি আপনাদের ভাল লাগবে। এর এই টিউনটি আগে কেউ করে ফেললে আমি স্যরি । যদিও এই জ্ঞান গুলো “ইনভেনশান” নয় জাস্ট “ডিসকভারি”। একাধিক পোস্ট পাঠককে সহজভাবে বোঝার উপায় করে দিতে পারে। কিন্তু কপি পেস্ট প্রযোজনা কখনো আদর পেতে পারেনা।
বিস্তারিত পাঠ →

কিভাবে প্রতিটি পোস্টের নিচে সাবস্ক্রাইব লিংক যোগ করবেন!

লেখকঃ Sardar Ferdous Ibn Motiur প্রকাশের সময় মন্তব্য 0 মন্তব্য
ব্যস্ত জীবন ব্যস্ত মানুষ। তাই সবার পক্ষে প্রতিদিন কোন সাইট ভিজিট করা সম্ভব না। আগ্রহী পাঠকের তাই উচিত হবে সাইটটি সাবস্ক্রাইব করে নেয়া। যাতে নতুন কোন পোস্ট প্রকাশিত হওয়ার সাথে সাথে সে ইমেইলের মাধ্যমে সেটা জানতে পারে। প্রতিটি পোস্টের নিচে কিভাবে সাবস্কাইব বাটন যোগ করতে হবে আমার আজকের পোস্ট সেই বিষয়ে।

১।  ব্লগার ড্যাশবোর্ডে লগিন করো à  সেটিংস à লে আউট à এডিট  HTML এ যাও।

২।  "Expand Widget Templates" এ ক্লিক করো

৩। ctrl + F  চেপে    ]]>  ট্যাগটি খুঁজে বের করো।

৪। এখন  ]]>  ট্যাগের পূর্বে নিচের কোডটি যোগ করো।

.footerfeedbox {
background-color: #ffff66;
width: 90%;
margin: 10px 14px 20px 14px;
padding: 4px;
border: 1px solid #dddddd;
text-align: center;
}

৫। এবার ctrl + F চেপে নিচের কোডটি খুঁজে বের করো।

<div class='post-footer'>

৬। উপরের লাইনের ঠিক আগে নিচের কোডটি বসিয়ে দাও।

<div align='center'><div class='footerfeedbox'>
<a href="YOUR BLOG FEEDBURNER ADDRESS" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">
<img src='LINK TO FEEDBURNER ICON' alt="" style="border:0" />Like this article? Subscribe to the RSS feed!</a></div></div>

মনে রেখঃ  YOUR BLOG FEEDBURNER ADDRESS  এবং  LINK TO FEEDBURNER ICON  এর জায়গায় তোমার নিজের তথ্য দিতে হবে।

৭। তোমার কাজ শেষ। প্রিভিউ দেখে টেম্পলেট সেভ করো। যদি কিছু শেখাতে পারি তো ভাললাগা রেখে যাও।
বিস্তারিত পাঠ →

কিভাবে ব্লগারের কমেন্ট ফরম পরিবর্তন করা যায়।

লেখকঃ Sardar Ferdous Ibn Motiur প্রকাশের সময় মন্তব্য 1 মন্তব্য

ব্লগ সাইটের জন্য সব থেকে গুরুত্বপূর্ণ জিনিস কি বলতে পারবে? অবশ্যই মানসম্মত পোস্ট। আর লেখক যখন কষ্ট করে লেখেন তখন অবশ্যই মন্তব্য আশা করেন। আজ আমি অল্প কথায় বলব কিভাবে সিএসএস ব্যবহার করে মন্তব্য ফরমটি আকর্ষণীয় করা যায়। যদি তুমি কমেন্ট ফরমটি সহজে পরিবর্তন করতে চাও তবে নিচের কাজটি করো।







১। ব্লগার ড্যাশবোর্ডে লগিন করো। --> layout- -> Edit HTML
২। কন্ট্রোল + এফ চেপে ]]></b:skin>  খুঁজে বের করো।
৩। নিচের কোডটি কপি করে ]]></b:skin> এর ঠিক পূর্বে বসিয়ে দাও।





#comment-form iframe{
background:#7f9db9 url() no-repeat bottom right;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9 url() no-repeat bottom right;
border:7px solid #bababa;
}
#comment-form a{
color:#ffffff;
}

তুমি ইচ্ছে করলে কমেন্ট এর ব্যাকগ্রাউন্ড ইমেজ, রঙ, প্রশস্ততা, উচ্চতা ইচ্ছেমত বদলে নিতে পারো। এবার টেম্পলেট সেভ করো। কাজ শেষ।

বিস্তারিত পাঠ →
^ ☼☼উপরে যাও☼☼ ^