Showing posts with label ওয়েব ডিজাইন. Show all posts
Showing posts with label ওয়েব ডিজাইন. Show all posts

Thursday, July 11, 2013

খুব সহজে আপনার ব্লগারে ব্যাক টু টপ বাটন যুক্ত করুন



আসসালামুয়ালাইকুম। কেমন আছেন সবাই? আশা করি মহান আল্লাহর রহমতে সবাই ভালই আছেন।আজকে আমি কিভাবে ব্লগারে (ব্লগস্পট) ব্যাক টু টপ বাটন (উইজেট) যুক্ত করতে হয় সেটাই শেয়ার করব।যারা জানেন তারা তো জানেনই তাই যারা জানেন না তাদের জন্য এই পোস্ট। প্রথমে বলে রাখি ব্যাক টু টপ বাটন ব্যবহার করার উদ্দেশ্য হচ্ছে ব্লগপেজ বা পোস্ট দেখতে দেখতে একদম নিচে নামার পর আবার স্ক্রল করে উপরে উঠতে ঝামেলা মনে হয় তাই এই বাটনটি যুক্ত করার ফলে আপনার ব্লগ ভিসিটররা সহজভাবে শুধু বাটনটি

তে ক্লিক করেই উপরে উঠতে পারবে আর উইজেটও আপনার ব্লগকে আরও সুন্দর করবে।
প্রথমে আপনার ব্লগারে লগিন করুন >> তারপর লেআউট থেকে একটি এইচটি এম এল/জাভাস্ক্রিপট যুক্ত করুন >> এবার জাভা স্ক্রিপটটিতে  নিচের কোডটা কপি করে এনে  পেস্ট করুন >> সবশেষে সেভ করুন। আপনার কাজ শেষ।


আপনার ব্লগের মাউস এর কারসার পরিবর্তন করুন এখনই ।


আজ আমি আপনাদের একটা মজার জিনিষ শেখাব । আপনার ব্লগের মাউসের কারসার কে আধুনিক ডিজাইন দিয়ে আরও আকর্ষণীয় করে তুলুন ।
নিচের পদ্ধতি গুলো অনুসরণ করুন।
১ . প্রথমে আপনার ওয়েব সাইট বা ব্লগ এ প্রবেশ করুন ।
২ . তারপর  WordPress সাইট এর জন্য Stylesheet (style.css) সিলেক্ট  করুন আর ব্লগষ্পট সাইট এর জন্য HTML/Java script সিলেক্ট  করুন  ।
৩ . নিচের কোড টি কপি করে পেস্ট করুন এবং সেভ তার করুন পর দেখুন মজা।

:কোড:

<style type="text/css">body, a:hover {cursor: url(http://ani.cursors-4u.net/cursors/cur-11/cur1089.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/06/24/s-pink-premium-pointer.html" target="_blank" title="S Pink Premium Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="S Pink Premium Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

আপনার ব্লগে যোগ করুন পৃষ্ঠা নাম্বার

বিস্-মিল্লাহির রাহমানির রাহীম । প্রথমে সবাই কে সালাম জানাই আসসালামু আলাইকুম ওয়া রাহমাতুল্লাহ ! সালামটা গ্রহণ করবেন । আপনারা সবাই কেমন আছেন । আপনারদের দোয়াই আমি ভালো আছি । আজ আমি আপনাদের দেখাব কীভাবে আপনার ওয়েবসাইট / ব্লগে পৃষ্ঠা number যোগ
করবেন । আপনাদের মধ্যে যাদের ওয়েবসাইট / ব্লগ আসে কিন্তু ওয়েবসাইট / ব্লগে পৃষ্ঠা number যোগ করা নেই তাদের জন্য এই পোস্ট । আপনার ওয়েবসাইটে / ব্লগ এ যদি পৃষ্ঠা number না থাকে তাহলে একজন ভিজিটর কীভাবে জানবে যে আপনার ওয়েবসাইটে / ব্লগে কয়টি পৃষ্ঠা আছে তাছাড়া সে প্রথম পৃষ্ঠার পোস্ট গুলো পড়ে চলে যাবে । তাহলে আপনিই দেখুন ওয়েবসাইটে / ব্লগ পৃষ্ঠা number যোগ করা দরকার কি না । এটার চিত্র ঃ
এটা দুই ভাবে করা যায় । এক ভাবে হল HTML দিয়ে অন্যটি হল Widget দিয়ে । আমি আপনাদের দেখাব সহজ নিয়মে আর সহজ নিয়মটি হল Widget দিয়ে । HTML দিয়েও করা যায় কিন্তু সেটা অনেক কঠিন । তাই আমি Widget দিয়ে করাচ্ছি ।
আসুন এবার কাজে আসি ।
১। প্রথমে আপনার ওয়েবসাইটে / ব্লগের ড্যাশবোর্ড এ যান ।
২। তার পর লেআউট থেকে একটি গ্যাজেট যুক্ত করুন এ ক্লিক করুন ।
৩। এর পর HTML/JavaScript গ্যাজেট টি যোগ করুন করুন ।
৪। এবার নিচের কোড টি copy করে গ্যাজেট টিতে paste করুন ।
কোড টি বড় বলে ভয় পাবেন না । এটা কাজ ঠিকই করবে ।

                                    কোডটি হলঃ

<style type='text/css'>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #aeaeae;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#0a8be5;
border:1px solid #000000;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#aeaeae none repeat scroll 0 0;
border:1px solid #aeaeae;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #aeaeae;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}
</style>
<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=5;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span>'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span><a href="/">1</a></span>';
}else{
 html += '<span><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div><span > Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '<span><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span>'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div><span > Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<a href="http://tutdeve.blogspot.com"></a>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

 ধন্যবাদ সবাই কে ।

Tuesday, July 9, 2013

আপনার ব্লগের জন্য নিন কিছু অসাধারণ marquee টেক্সট এর এইচটিএমএল কোড



আসসালামুয়ালাইকুম, আশা করি সবাই ভালো আছেন। আজকে আমি আপনার ব্লগের জন্য অসাধারণ কিছু marquee text এর এইচটিএমএল কোড দিব। যেগুলো আপনার ব্লগকে আকর্ষণীয় ও চমকপ্রদ করে তুলবে। প্রথমে জেনে নিন এই "Marquee Text" জিনিস টা কি?? মানুষ এটা খায় না পরে? :D




MARQUEE TEXT:

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


* ব্লগার এ লগ ইন করুন , তারপর Dashboard>Layout>Add a gagdet>HTML/Java Script*

Marquee Scrolling Text Codes

Right To left (০১) 
<marquee direction="right">   TEXT   </marquee>

ফলাফল  ঃ  TEXT  


Multiple Lines(০২) 

<marquee direction="right">   TEXT <br> TEXT <br> TEXT <br> TEXT   </marquee>

 

ফলাফল  ঃ TEXT
TEXT
TEXT
TEXT




Color Lines(০৩)

<marquee bgcolor="   #FF0000   " style="color:   #FFFFFF   ">   TEXT   </marquee>


ফলাফল  ঃ 
TEXT
Color Lines(০৪) 

<marquee bgcolor="   #6600FF   " style="color:   #FFFFFF   ">   TEXT   </marquee>

ফলাফল  ঃ 
TEXT


Color Lines(০৫)

<marquee bgcolor="   #000000   " style="color:   #FFFFFF   ">   TEXT   </marquee>

ফলাফল  ঃ 
TEXT




Color Lines(০৬) 

<marquee bgcolor="   #000000   " style="color:   #FFFFFF   ">   TEXT   </marquee>

ফলাফল  ঃ
TEXT



Wednesday, May 22, 2013

কিভাবে ব্লগে যুক্ত করবেন মাউস থেকে ঝরে পড়া ইনপেক্ট?



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

 আসুন শুরু করি :



1.প্রথমেই www.blogger.com               এ যান এবং আপনার ব্লগ এ লগিন করুন ।
2. তারপর উপরের বার থেকে Design      তারপর  নিচে Add a gadget
3.এখন HTML/Javascript             সিলেক্ট করুন এবং নিচের কোডটুকু HTML/Javascript            তে পেষ্ট করুন
4. তারপর সেইভ করুন।




<script type='text/javascript'>
// <![CDATA[
var colour="blue";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
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;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

আসাকরি কমান্ড করতে ভলবে না। ধন্যবাদ আপনাকে।

আপনার ব্লগে একটি এনিমেটেড লেখা যুক্ত করুন দুনিয়ার সবচেয়ে সহজ পদ্ধতিতে

আজ আমি আপনাদের শিখাবো কিভাবে আপনার ব্লগে একটি চলন্ত লেখা যোগ করতে হয়। এটা খুব সহজ একটা কোড যেটি দিয়ে আপনি আপনার ব্লগে HTML উইজেট এ যোগ করে যেকোন লেখা বিগ্গাপন এবং নোটিস হিসেবে ইউজ করতে পারবেন।
আপনার ব্লগে একটি এনিমেটেড লেখা যুক্ত করতে আপনাকে নিচের কোড গুলি ইউজ করতে হবে:
লেখা গুলি বাম থেকে ডানে দেখাতে নিচের কোড টি ইউজ করুন
<marquee direction="left">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>
লেখা গুলি ডান থেকে বামে দেখাতে নিচের কোড টি ইউজ করুন
<marquee direction="right">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>
techtunes
লেখা গুলি নিচ থেকে উপরে দেখাতে নিচের কোড টি ইউজ করুন
<marquee direction="up">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>
লেখা গুলি উপর থেকে নিচে দেখাতে নিচের কোড টি ইউজ করুন
<marquee direction="down">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>

Tuesday, April 30, 2013

চমৎকার একটি ব্লগার Wiget

undefined

বন্ধুরা কেমন আছেন? অনেক দিন পর আসলাম। যাই হোক কথা বেশী বলবো না। আমি আজ নিয়ে আসলাম একটি Social Widget  ব্লগার এর জন্য। নিচে এর LIVE DEMO দেখে নিন।

এটিকে আপনার করে নিতে হলে যা করনীয়
১. প্রথমই আপনার ব্লগে প্রবেশ করুন
২. তারপর আপনি সোজা Layout  এ গিয়ে Add Gadget  এ ক্লিক করে HTML/JavaScript  টি Select  করে নিন।
৩. তারপর নিচের কোডটি Select  করে নিন


  • ·        ফেসবুক এর জন্য  EASiblu নামটি পালটিয়ে আপনার Username  দিয়ে নিন
    ·        টুইটার এর জন্য EAShiblu  নামটি পালটিয়ে আপনার Username  দিয়ে নিন
    ·        গুগল+ এর জন্য 103593204016755715965  নামটি পালটিয়ে আপনার Username  দিয়ে নিন
    ·        আপনার FeedBurner  পাল্টান http://feeds.feedburner.com/projuktirkhela

    ৪. এবার আপনি SAV E  দিয়ে দিন।
    ভাল লাগলে বা সমস্যা হলে মন্তব্য করে জানাবেন।
 ফেসবুক এ লাইক দিন লাইভ আপডেট পাওয়ার জন্য।

Facebook Twitter Delicious Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Review