Showing posts with label গ্রাফিকস. Show all posts
Showing posts with label গ্রাফিকস. Show all posts

ব্লগের কোণগুলোকে বাঁকা করার পদ্ধতি

rounded or curvy corner with simple css codeউপরেরর ছবিটি দেখুন। হেডারের কোনাগুলো গোলাকার হয়ে গেছে। খেয়াল করেছেন কি "বাংলা হ্যাকস" ব্লগের বর্ডারের কোনাগুলোও গোলাকার দেখাচ্ছে। এটা করা কিন্তু খুব সহজ। খুব সামান্য পরিমাণ CSS কোড ব্লগের HTML কোডের মধ্যে বসিয়ে দিয়ে কোন ব্লগ বা ওয়েবসাইটের কর্ণারকে এইরকম বাঁকা করার কাজটি করা যায়। আমরা এই সামান্য একটি বৈশিষ্ট্য যোগ করে নিজের ব্লগের চেহারাকে আরও আকর্ষণীয় ও দৃষ্টিনন্দন করে পাঠকের সামনে উপস্থাপন করতে পারি। কিভাবে তা সম্ভব? আপনি কি আপনার ব্লগার.কম ব্লগের বিভিন্ন অংশের কোণাগুলো এরকম করে গোলাকার করতে চান? যদি আপনার উত্তর হ্যাঁ হয়, তাহলে নিচে লেখা পরামর্শ অনুসরণ করুন।

# আমাদেরকে এই কাজটি করার জন্য ব্লগের ড্যাশবোর্ডে লগইন হয়ে Layout> Edit HTML ট্যাবে কাজ করতে হবে। Make your blogger/ blogspot blog's corner round or curve with css code.
আপনার ব্লগের কোন অংশের কর্ণারকে গোলাকার করতে চান? তা আগে চিন্তা করে ঠিক করে নিন। তাহলে কাজ করা সহজ হবে।
১। মূল ব্লগশরীরের বাহিরের অংশকে বাঁকিয়ে ফেলার পদ্ধতিঃ
এরকম বাংলা হ্যাকস ব্লগে রয়েছে। #outer-wrapper লেখাটিকে খুঁজে বের করুন। এই লেখাটির ঠিক নিচে বিভিন্ন কোড রয়েছে। শেষে একটি দ্বিতীয় ব্রাকেট } রয়েছে। এই দ্বিতীয় ব্রাকেটের ঠিক উপরে নিচের কোডটি লিখে দিয়ে PREVIEW দেখুন। পছন্দ হলে SAVE TEMPLATE লেখাতে ক্লিক করে পরিবর্তনগুলো সংরক্ষণ করুন।
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
এখানে 10px মানটি পরিবর্তন করে 15, 20 ইত্যাদি করে নিয়ে পরীক্ষা করে দেখুন।

সাইডবারের কোণগুলিকে বাঁকা করার পদ্ধতিঃ
তাহলে #sidebar-wrapper1 লেখাটি খুঁজে বের করুন। এখানে 1 অথবা 2 অথবা 3 অথবা 4 যে কোন নম্বরের সাইডবার হতে পারে। এখানে থাকা কোডগুলোর নিচে দ্বিতীয় ব্রাকেট শেষ হবার আগে একই কোড বসিয়ে দিন।
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
এখানে 10px মানটি পরিবর্তন করে দেখুন কোনটা পছন্দ হয়।

৩। পোস্ট পাতার কোণগুলিকে গোলাকার করার পদ্ধতিঃ
তাহলে #main-wrapper { অংশের নিচে দ্বিতীয় ব্রাকেট শেষ হবার আগে একই কোড বসাতে হবে।

# যদি নির্দিষ্ট কোন একটি কোণকে বাঁকা করতে চান, তাহলে নিচের কোড ব্যবহার করুন।
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;

এই কোড ব্যবহার করলে উপরের বামপাশের কোন গোলাকার হয়ে যাবে। এভাবে শুধুমাত্র উপরের ডানপাশ, কিংবা নিচের ডান অথবা বামপাশ গোলাকার করতে পারবেন।

ব্লগবডির বিভিন্ন অংশের কোনগুলিকে বাঁকা করার পরে আরও একটি ইফেক্ট যোগ করা যায়। আপনি ইচ্ছে করলে "ছায়া" (Shadow) দিতে পারেন। এর জন্য উপরের কোডের নিচেই আবারো কিছু কোড যোগ করতে হবে।
-moz-box-shadow:0 0 15px #FFFF00;-webkit-box-shadow:0 0 15px #FFFF00;
এখানে 15px মানটিকে এবং #FFFF00; কালার কোডের মানটিকে পরিবর্তন করে দেখতে মনমতো একটি বৈশিষ্ট্য বেছে নিতে পারবেন। (বিভিন্ন রঙের কোড "কালার চার্ট" থেকে সংগ্রহ করুন)

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

'ব্লগার ডিজাইনার' দিয়ে নিজের টেমপ্লেট নিজেই সম্পাদনা করুন

এবার নিজের ব্লগ নিজেই ডিজাইন করুন। হ্যাঁ, বন্ধুরা এতদিন ব্লগার.কম এর দেয়া ডিফল্ট টেমপ্লেটগুলো নিয়ে যাদের মনক্ষুন্নতা ছিল, তাদের জন্য আনন্দের খবর নিয়ে আমি আজ উপস্থিত হয়েছি। এখন থেকে নিজের ব্লগের টেমপ্লেট নিজেই ডিজাইন করতে পারবেন। অত্যাধুনিক সব ডিজাইন নিয়ে গুগল আপনার সেবার জন্য প্রস্তুত হয়েছে। আর এইসব ডিজাইন পরিবর্তন করার জন্য কোন xml ফাইল আপলোড করতে হবে না, কোথাও কোন HTML এডিট করতে হবে না।
  • সাধারণত আপনি www.blogger.com এ লগইন করেন, তাই না? এবার www.draft.blogger.com এ গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন।
  • ড্যাশবোর্ডের Layout ট্যাবে গেলে একেবারে ডানপাশে একটি নতুন লিঙ্ক দেখতে পারবেন।
  • নাম Template Designer
blogger new template designer

  • এক অন্যভুবনে প্রবেশ করবেন।
  • এখানে স্ক্রিন দুটি অংশে বিভক্ত। উপরের অংশটি টেমপ্লেট ডিজাইনার এবং নিচে আপনার ব্লগের প্রিভিউ।

  • templates menu in blogger new template designer panel
  • উপরের ডিজাইনার অংশের বামপাশের মেনুটি খুব শক্তিশালী। এখানে চারটি প্রধান মেনু আছে। সেগুলো হল: Templates, Background, Layout এবং Advanced
  • প্রয়োজনীয় সব কমান্ড এখান থেকেই প্রয়োগ করা সম্ভব।
  • Templates মেনু থেকে আপনি মোট চার রকমের টেমপ্লেট ডিজাইন এখান থেকে পাবেন। নাম: Simple, Picture window, Awesome এবং Watermark, তবে একটির তিনটিসহ বাকীগুলোর চারটি করে ভিন্নতা আছে। অতএব আপনি মোট ১৫ রকমের ডিজাইন এখান থেকে সিলেক্ট করতে পারবেন। যদি আপনার ব্লগের টেমপ্লেট কাস্টমাইজ করা হয়, তাহলে প্রথমে স্ক্রিণের মাঝামাঝি থাকা You've customized this template. Remove customizations লেখাতে ক্লিক করে কাস্টমাইজেশনগুলো মুছে ফেলুন।
  • Background মেনু থেকে ব্লগের কালার থীম পরিবর্তন করার সাথে সাথে ব্যাকগ্রাউন্ড হিসেবে বিভিন্নরকমের ছবি নির্বাচন করতে পারবেন। ব্যাকগ্রাউন্ড থীম পরিবর্তন করার জন্য Background Image লেখার নিচের ছবিতে ক্লিক করুন।
  • Background menu in blogger template designer
  • Abstract, The Arts, Business, Celebrations, Entertainment, Family, Food & Drink, Health & Beauty, Hobbies & Crafts, Home & Garden, Nature, Patterns, Recreation, Science, Shopping, Technology, Textures এবং Travel শিরোনামের অসংখ্য ছবি থেকে যে কোন একটাকে ব্যাকগ্রাউন্ড ছবি হিসেবে বেছে নিতে পারবেন।
  • Layout menu in blogger template designer
  • Layout মেনু থেকে ব্লগের কলাম সংখ্যা পরিবর্তন করতে পারবেন। এতকাল যারা ডিফল্ট দুইটি কলাম নিয়ে কাজ করতে করতে বিরক্ত হয়ে গেছেন, তাদের জন্য এই সুবিধাটি সত্যিই কাজে দেবে। এখান থেকে কয়টি কলাম দিয়ে ব্লগ সাজাতে চান, তা নির্বাচন করুন। এই Layout মেনুটি তিনটি সাবমেনুতে বিভক্ত। Body layout, Footer layout এবং Adjust width, ফুটার লেআউট দিয়ে ফুটারে কয়টি কলাম রাখতে চান, তা নির্বাচন করতে পারবেন। Adjust width দিয়ে ব্লগ ও সাইডবারের কলামগুলোর আকার বড়-ছোট করতে পারবেন।
  • Advanced menu in blogger new template designer
  • Advanced মেনু দিয়ে আপনার ব্লগের বিভিন্ন অংশের টেক্সট কালার ও ফন্ট পরিবর্তন করতে পারবেন।
  • স্ক্রিণের নিচে থাকা ব্লগ প্রিভিউতে পরিবর্তনগুলো খেয়াল রাখুন। যদি পছন্দ হয়, তাহলে উপরে ডানপাশে থাকা APPLY TO BLOG লেখা বোতামে ক্লিক করে পরিবর্তনগুলো ব্লগে প্রয়োগ করুন।
  • একটু লক্ষ্য করে দেখুন যে স্ক্রিণের ঠিক মাঝামাঝি অংশে Reset post to template default, যদি কোনরকম ভুলত্রুটি হয়ে যায়, তাহলে এখানে ক্লিক করে ডিফল্ট অবস্থায় ফিরে যেতে পারবেন।
এই Template Designer অংশে টেমপ্লেটের সৌন্দর্য পরিবর্তন করার পর উপরে ডানে থাকা Back to Blogger লেখাতে ক্লিক করে ব্লগের নিয়মিত ড্যাশবোর্ডে প্রবেশ করুন। যথারীতি Layout অংশের Page Elements ট্যাবে ব্লগের বিভিন্ন কলামে প্রয়োজনীয় গেজেটগুলো স্থাপন করতে পারবেন।
Redesign your blogger template with blogger new template designer.
আমার কাছে এই নতুন টেমপ্লেট ডিজাইনগুলি সত্যিই ভাল লেগেছে। দিনে দিনে প্রযুক্তি পরিবর্তন হয়ে যাচ্ছে। মানুষের রুচি, সৌন্দর্যবোধ পাল্টাচ্ছে। সময়ে সাথে সাথে মানুষ নতুন কিছু পাবার জন্য উন্মুখ হয়ে উঠেছে। মানুষের এই নতুন চাহিদার প্রতি সম্মান করে ব্লগার তাদের ডিজাইনেও যে পরিবর্তন এনেছে, তা সত্যি প্রশংসার দাবীদার। ব্লগের বর্ডার, পোস্ট অংশ, সাইডবারের গোলাকার কর্ণার, ব্লগ বডির অর্ধস্বচ্ছ ভাব ব্লগলিখিয়েদেরকে সন্তুষ্ট করবে এ আমি জোর গলায় বলতে পারি। নতুন ওয়েব দুনিয়ায় আপনার পরিচিতিকে অন্যভাবে উপস্থাপন করতে এই বৈশিষ্ট্যগুলো সহায়তা করবে। তবে সার্বিকভাবে ব্লগ লোডিং টাইম একটু বেশি লাগছে বলেই আমার কাছে মনে হয়েছে (এটা আমার ধীরগতির ইন্টারনেট কানেকশনের জন্যও হতে পারে)।

# মনে রাখুন যে এটা blogger.com এ পাওয়া যাবে না। পাওয়া যাবে draft.blogger.com সাইটে। অর্থাৎ এখনও এই সুবিধাটি নিয়ে পরীক্ষা নিরীক্ষা চলছে। কোনরকম সমস্যা হয়ে গেলে ব্লগার কর্তৃপক্ষ ক্ষতিপূরণের দায়িত্ব নেবে না।
নিচের ছবিটি একটি ডেমো ব্লগের। আপনাদের উদ্দেশ্যে নমুনা হিসেবে উপস্থাপন করছি।

demo blog design by draft.blogger.com template designer

প্রথম থেকে আজ পর্যন্ত উবুন্টু'র ডিফল্ট ডেস্কটপ ওয়ালপেপার

লিনাক্সকে মানুষের ঘরে ঘরে পৌঁছে দেবার স্বপ্ন নিয়ে যাত্রা শুরু হয়েছিল "উবুন্টু" লিনাক্সের। সাধারণ ব্যবহারকারীর জন্য আরো সহজ, আরো সুবিধাজনক করে তৈরি করার জন্য উবুন্টু ক্রমাগত নিজেকে উন্নত থেকে উন্নততর করে চলেছে। শুরু হয়েছিল ২০০৪ সালের অক্টোবর মাস থেকে। সেই থেকে প্রত্যেক ছয় (৬) মাস পরপর উবুন্টুর এক একটি রিলিজ বের হচ্ছে। আরো বেশি সফটওয়ার, ড্রাইভার নিয়ে উবুন্টু ক্রমাগত শক্তিশালী হয়ে উঠছে। ফলে সারা বিশ্বের সাধারণ ব্যবহারকারীদের মনোযোগ আকৃষ্ট হতে দেরী হয়নি। "মানুষের জন্য লিনাক্স" - এই শ্লোগানকে বুকে ধারণ করে এগিয়ে চলা 'উবুন্টু' লিনাক্স তার অগ্রযাত্রায় প্রত্যেক নতুন রিলিজে বিভিন্ন এপ্লিকেশন, ড্রাইভার ও সুবিধার সাথে ব্যবহারকারীকে একটি নতুন ওয়ালপেপার উপহার দিয়েছে। উবুন্টু ৪.১০ থেকে আজ পর্যন্ত যে সব ডিফল্ট ডেস্কটপ ওয়ালপেপার ব্যবহার করা হয়েছে সেইগুলো একত্রিত করে আজকের লেখাটি প্রকাশ করলাম।

Ubuntu 4.10 Warty WarthogUbuntu 4.10 Warty Warthog
প্রথম উবুন্টুর ডিফল্ট ওয়ালপেপার। খুব গাঢ় বাদামী রঙের এই ওয়ালপেপারের ডানপাশে নিচে ততোধিক গাঢ় রঙে উবুন্টুর লোগো লেখা আছে।
Ubuntu 5.04 Hoary HedgehogUbuntu 5.04 Hoary Hedgehog
উবুন্টু ৫.০৪ এ এসে ডিফল্ট ওয়ালপেপারের মাঝে একটি আলোর ঝলক চোখে পড়ছে। চারপাশের আঁধারের মাঝে উবুন্টু একটি আলোর আশা নিয়ে সূর্যের মতো উদিত হতে চলেছে- এরকম আশাবাদ এতে প্রতিফলিত হয়েছে।
Ubuntu 5.10 Breezy BadgerUbuntu 5.10 Breezy Badger
উবুন্টু ৫.১০ তে এসে আলোর রোশনাই একটু বেশি উজ্জ্বল। মাঝখান থেকে আলোর উৎস চারপাশে রশ্মি ছড়িয়ে দিচ্ছে এরকমই বোধহয় দর্শনটি ছিল। মাঝে যথারীতি উবুন্টুর লোগো লেখা আছে। তবে এটাই শেষ। এর পর ডিফল্ট ডেস্কটপ ওয়ালপেপারে আর কখনও উবুন্টুর লোগো লেখা হয়নি।
Ubuntu 6.06 Dapper DrakeUbuntu 6.04 Dapper Drake
উবুন্টু ৬.০৪ এ এসে আবার গাঢ় কালচে বাদামী রঙ চারপাশ ছেয়ে ফেলেছে। মনে হচ্ছে কোন অশনী সংকেত যেন। কিন্তু তার মধ্যেও আলোর ছটা হারিয়ে যায়নি। বরং নিজেকে তীব্রভাবে প্রকাশ করার একটা বাসনা রয়েছে যেন।
Ubuntu 6.10 Edgy EftUbuntu 6.10 Edgy Eft
উবুন্টু ৬.০৬ এর ডিফল্ট ডেস্কটপ ওয়ালপেপারে আলো উজ্জ্বলতা বেড়ে গেছে অনেকগুণ। মনে হয় মানুষের মুখের উজ্জ্বলতার একটা প্রতিফলন।
These are Ubuntu Linux's default desktop wallpaper since 4.10.
Ubuntu 7.04 Feisty FawnUbuntu 7.04 Feisty Fawn
উবুন্টু ৭.০৪ এর ওয়ালপেপারের উজ্জ্বলতা পূর্ববর্তী রিলিজের মতোই। এবারে আলোর রশ্মিগুলো একটু এদিক ওদিক দিক পরিবর্তন করেছে মাত্র।
Ubuntu 7.10 Gutsy GibbonUbuntu 7.10 Gutsy Gibbon
উবুন্টু ৭.১০তে গাঢ় রঙের ব্যাকগ্রাউন্ডে তীব্র আলোর ঝলকানি স্পষ্টভাবে লক্ষ্যনীয়।

Ubuntu 8.04 Hardy HeronUbuntu 8.04 Hardy Heron
উবুন্টু'র প্রত্যেকটা রিলিজের নাম আফ্রিকার কোন না কোন প্রাণীর নামে রাখা হয়। কিন্তু সেইসব প্রাণীর কোন ছবি ডেস্কটপ ওয়ালপেপারে এই প্রথম উবুন্টু ৮.০৪ এ ব্যবহার করা হল। এবারের সারস পাখিটি শিরদাঁড়া সোজা করে ভবিষ্যতের দিকে তাকিয়ে আছে। ডেস্কটপ কম্পিউটারের জগতে লিনাক্স এক নতুন ইতিহাস সৃষ্টি করতে যাচ্ছে, এ বোধহয় তারই নিদর্শন।
Ubuntu 8.10 Intrepid IbexUbuntu 8.10 Intrepid Ibex
পোড়া মাটির রঙে সাজানো উবুন্টু ৮.১০ এর ডেস্কটপ ওয়ালপেপার। আফ্রিকার তীব্র রোদে পোড়া মাটির স্পষ্ট প্রতিচ্ছবি যেন এবারের ওয়ালপেপারটি।

Ubuntu 9.04 Jaunty JackalopeUbuntu 9.04 Jaunty Jackalope
উবুন্টু ৯.০৪ লিনাক্সের ডেস্কটপ ওয়ালপেপারটি আগের ওয়ালপেপারগুলির ধারাবাহিকতা রক্ষা করতে পারেনি। এবারেরটি কেমন যেন হতাশার রঙে ডোবানো।
Ubuntu 9.10 Karmic Koala
বাদামী রঙের রাজত্ব যেন শেষ হয়ে গেছে উবুন্টু ৯.১০তে এসে। আমি নিজেও প্রথমবার বুট করে অবাক হয়ে গেছি। প্রথম কয়েক মিলিসেকেন্ড বুঝতেই পারছিলাম না এটা উবুন্টু নাকি অন্য কোন ডিস্ট্রো। এক উজ্জ্বল কমলা রঙে রাঙানো এবারের ডেস্কটপ ওয়ালপেপার। তাকিয়ে থাকতে থাকতে নিমেষেই মন ভালো হয়ে যায়।

এই রিলিজটিই বর্তমানে চলছে। আগামীতে আসছে উবুন্টু ১০.০৪। এই রিলিজের ডেস্কটপ ওয়ালপেপার কেমন হবে, তা নিয়ে ব্যাপক জল্পনা কল্পনা চলেছিল। শেষে একটি সিদ্ধান্ত নেয়া সম্ভব হয়েছে। এবং তা সবার সামনে প্রকাশও করা হয়ে গেছে। দেখতে কেমন সেই আগামী এপ্রিল মাসের ২৮ তারিখে প্রকাশ হওয়া উবুন্টুর ডেস্কটপ ওয়ালপেপার? তা জানতে উবুন্টু ১০.০৪ (লুসিড লিঙ্কস) ডিফল্ট ডেস্কটপ ওয়ালপেপার শীর্ষক পোস্টটি একবার পড়ে দেখুন।

(পোস্টে ব্যবহৃত এই ছবিগুলো ছোট আকারের, তাই ডেস্কটপ হিসেবে ব্যবহার উপযোগী নয়।)

ফেসবুকের ডিফল্ট অবতারের বিকল্প কিছু ছবি

default facebook avatarফেসবুকের ডিফল্ট অবতার

ফেসবুকে অনেকেরই একাউন্ট আছে। বিভিন্ন প্রয়োজনে আমরা প্রতিনিয়ত ফেসবুকের দ্বারস্থ হই। ফেসবুকের প্রোফাইলে নিজের একটি ছবি দেখানোর ব্যবস্থা আছে। নতুন একাউন্ট খোলামাত্র সেখানে উপরের ছবিটি স্থাপিত হয়ে যায়। "মাথার উপরে হালকা একটু চুল উপরে উঠে গেছে" এই ধরণের ডিফল্ট অবতার ইমেজটি আমাদের অনেকেরই পছন্দ নয়। তাই হয়তো আপনি তা পাল্টিয়ে নিজের সত্যিকারের ছবিই অবতার হিসেবে আপলোড করেছেন। কিন্তু আপনি যদি তা না করে থাকেন, অর্থাৎ সরাসরি নিজের ছবি দেখাতে না চান, তাহলে একটু অন্যরকম ছবি ব্যবহার করছেন না কেন?
একটু অন্যরকম কিন্তু আকর্ষণীয় রহস্যময় ছবি যদি ফেসবুকের প্রোফাইলের অবতার ইমেজ হিসেবে লাগাতে পারতেন, তাহলে কতই না মজা হত তাই না? ঠিক সেরকমের কিছু ছবি নিয়ে আজ আমি আপনাদের কাছে উপস্থিত হয়েছি।

নিচের ছবিগুলো দেখুন। পছন্দ না হয়ে যাবে কোথায়? এরকম মোট ৬৯টি ছবি প্রকাশ করেছে "Instafunda" ব্লগ তার 69 alternatives to default facebook image পোস্টটিতে। এই বিশাল রহস্যময় ভান্ডার থেকে আমি আপনাদের জন্য বাছাই করে ১০টি অবতার ছবি নিয়ে এসেছি। দেখুন তো পছন্দ হয় কি না?

_________


ব্যবহার করুন এবং ফেসবুক বন্ধুদের সামনে নিজেকে একটু অন্যরকমভাবে উপস্থাপন করুন।

ছবি ও ওয়েবলিংককে লাইটবক্স দিয়ে আকর্ষণীয় করে তোলার পদ্ধতি

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

এই কাজটি করার জনপ্রিয় একটি টুল হল Lytebox, এর মাধ্যমে শুধু ছবি নয়, একটি সম্পূর্ণ ওয়েবসাইটকেও ফ্রেমের মধ্যে একটু অন্যরকমভাবে উপস্থাপন করা যায়। নিচের ছবিগুলো দেখুনঃ
Use lytebox on your photo blog. It is a real funny way to make some special effect on images.
ছবি ১:
lytebox image effectএকটি ছবিকে ফ্রেমের মধ্যে দেখা যাচ্ছে। চারপাশ কালো হয়ে গেছে। মাঝখানে ছবিটি স্পষ্টভাবে জ্বলজ্বল করছে।

ছবি ২:
website on lytebox frameএকটি সম্পূর্ণ ওয়েবসাইটকে ফ্রেমের মধ্যে দেখানো হয়েছে। আপনার ব্লগের কোন পোস্টে লিঙ্ক করা ওয়েবসাইট ভিজিট করার জন্য পাঠককে আর ব্লগ ছেড়ে চলে যেতে হবে না। কিংবা আলাদা ট্যাব খুলতে হবে না।

ছবি ৩:
grouped image on lytebox effect frameএটা কয়েকটি ছবি দিয়ে তৈরি একটি গ্রুপ ফ্রেম। প্রদর্শিত ছবির উপর মাউস নিয়ে গেলে Next Button দেখা যাবে ডানপাশে আর বামপাশে দেখা যাবে Previous Button

ছবি ৪:
slideshow on lytebox frameএটা স্লাইড শো। কয়েকটি ছবি মিলে তৈরি। পরবর্তী ছবি দেখার জন্য "গ্রুপ ইমেজ" ফ্রেমে যেমন Next বোতাম চাপতে হতো, তেমন করে এখানে কোন বোতাম নেই। স্বয়ংক্রিয়ভাবে পরপর ছবি দেখাতে থাকবে।

তো, এতসব ইফেক্ট আপনার ব্লগার.কম এ খোলা ব্লগে কিভাবে আনবেন? খুব সহজে এটা করা সম্ভব।
It is very easy to implement lytebox effect in blogger.com blog.
  1. ব্লগার.কম এ লগইন করুন।
  2. Layout> Edit HTML ট্যাবে যান। সেখানে <head> এর পরে নিচের কোডটি স্থাপন করুন।
  3. <script language='javascript' src='http://sites.google.com/site/banglahacks/lyteboxfiles/lytebox.js' type='text/javascript'/>
    <link href='http://sites.google.com/site/banglahacks/lyteboxfiles/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
  4. সেভ করুন।
  5. ব্যাস প্রাথমিক কাজ হয়ে গেল। আপনার ব্লগ এখন Lytebox জাভাস্ক্রিপ্ট দিয়ে ইমেজগুলোকে বিশেষ ইফেক্টের মাধ্যমে প্রদর্শন করার জন্য প্রস্তুত।
এবার জেনে নিন কিভাবে কোন ছবিকে লাইটবক্স ইফেক্ট যুক্ত করে প্রকাশ করবেন।

১.১ ডাইরেক্ট লিংকযুক্ত কোন ছবিঃ
<a rel="lytebox" href="http://sites.google.com/site/banglahacks/tools/presentbox.png" title="This is a little gift from me."> <img style="width: 95px; height: 95px;" src="http://sites.google.com/site/banglahacks/tools/presentbox.png" alt="Image check" /></a>
উপরের কোডে বিশেষভাবে rel="lytebox" কোডটি লক্ষ্য করুন। এই কোডটি ছবির লিংকে বসাতেই হবে।

১.২ ব্লগারে আপলোড করা ছবিঃ
ব্লগারে কোন ছবি আপলোড করলে সাধারণত নিচের কোডের মতো কোড তৈরি হয়। (এটা পোস্ট এডিটরে Edit Html ট্যাবে ক্লিক করলে দেখা যায়। আপনাকে এই ট্যাবেই কাজ করতে হবে)
<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQeZ1smXMcioKs6Mvx0NcMEu0fNCEnirhr-RlxGAKYZj-yaTRgfxBVR7J_vBJzp9Wk_abuBXm0Q9Ke2SfGVmAMtizwxG9X3wHtZ6Sxxca9shAUn1oYJoS65ltsOOvugvnOqadEbeNnToc/s1600/loginscreen.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 169px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQeZ1smXMcioKs6Mvx0NcMEu0fNCEnirhr-RlxGAKYZj-yaTRgfxBVR7J_vBJzp9Wk_abuBXm0Q9Ke2SfGVmAMtizwxG9X3wHtZ6Sxxca9shAUn1oYJoS65ltsOOvugvnOqadEbeNnToc/s320/loginscreen.png" alt="lubuntu10.04 login screen" title="Lubuntu Linux based on LXDE" id="BLOGGER_PHOTO_ID_5443749782829202914" border="0" /></a>
এখানে সাধারণত আপলোড করা ছবির দুইটি লিংক থাকে। এর মধ্যে যে লিংকের মধ্যে লেখা আছে s1600-h। এখানে -h লেখাটি মুছে দিন। তারপর যথারীতি rel="lytebox" লিখে দিন। পোস্টটি প্রকাশ করুন। হয়ে গেল।

ওয়েবসাইটকে ফ্রেমের মধ্যে দেখানোঃ
এর জন্য কোড হবে নিচের মতো:-
<a href="http://www.google.com/" rel="lyteframe" title="Search Google" rev="width: 500px; height: 400px; scrolling: no;">Google Search</a>

<a href="http://www.banglahacks.com/" rel="lyteframe" title="Bangla hacks" rev="width: 900px; height: 400px; scrolling: no;">Bangla Hacks</a>
এখানে দুটো বিষয় খেয়াল রাখতে হবে। rel="lyteframe" এবং rev । যে আকারের ফ্রেমে ওয়েবসাইটটি দেখা চান, তা এই rev এর পরে লিখে দিতে হবে। যেমন আমি গুগল.কম দেখতে চেয়েছি width: 500px; height: 400px আকারের ফ্রেমে এবং "বাংলা হ্যাকস" সাইটটি দেখতে চেয়েছি width: 900px; height: 400px আকারের ফ্রেমে।

৩। গ্রুপ ফ্রেমে একাধিক ছবি দেখানোঃ
এর জন্য কোড হচ্ছে
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi6ClbXJk5V7GUpkx7AVtDkx-ej0CZzSj4Ox2uWKp6MKpoPZOPFylI3JZTGk_3h_bzuMfO_VMkakTZlUkZ-NavXb4H6ncIDT9KJ9crb8iJIUjVQgLyIZqtG_9DiouFOxz1gc-1yw1tnoY/s200/ubuntufader.png" rel="lytebox[Ubuntu]" title="Ubuntu Fader">Ubuntu Fader</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju6zLfSoUzkHojc3z38YLEDdSETgFfoZuLNfqyAN7o74_-8fZbz-0rGZ45apuTAINJ4-s0iPZvbHXmwkMey2d7rTqpexIuMOmaUrkePzULkOGxptakXBYiT8nW7Yb4irqhY-Wrt8Z2VgY/s200/ubuntu-logo2.jpg" rel="lytebox[Ubuntu]" title="Ubuntu Logo">Ubuntu Logo</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5Ql_hgya2Q_Xyh963hLbhy2DwN38D4VY4EV-F1v515c4q0IRrh80OJP0ARQYBl7ZaudpCAj9zx4eY4rFeOF_K_MnZ8WhaRPT6jWQ51f5atwDuuubGQUzgzIi0FYE9f_7bGoUhyphenhyphenEU6xY/s200/NASA.jpg" rel="lytebox[Ubuntu]" title="Nasa Image. Spacecraft start to space.">Nasa Image. Spacecraft start to space.</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhhYuAmuRIJ7FqeXO61fbCO9_-E25MPnkTHvU7a77M-_5FhLIqOsj2PvVQmIE_mJUKDfY00vv84Pc21ffJTDdkjvRhgDnF-nELSHWKMROAzpKifT2U-28zdOhEURu1Ka0Y2_2YCqIgNg/s200/ubuntulogocopy.jpg" rel="lytebox[Ubuntu]" title="Ubuntu Logo Desktop Wallpaper">Ubuntu Logo Desktop Wallpaper</a>
এখানে আমি চারটি ছবি ব্যবহার করেছি। পরপর ছবির লিংকগুলো দিয়ে দিতে হবে। এবং rel কোড হিসেবে দিতে হবে lytebox[Ubuntu] এখানে Ubuntu হল গ্রুপ নাম। rel="lytebox[Ubuntu]" প্রত্যেকটা ছবির মধ্যেই দিতে হবে।

৪। স্লাইড শো তৈরিঃ
ফ্রেমের মধ্যে স্লাইড শো তৈরি করা Lytebox দিয়ে খুব সহজ। নিচের কোডটি দেখুন
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi6ClbXJk5V7GUpkx7AVtDkx-ej0CZzSj4Ox2uWKp6MKpoPZOPFylI3JZTGk_3h_bzuMfO_VMkakTZlUkZ-NavXb4H6ncIDT9KJ9crb8iJIUjVQgLyIZqtG_9DiouFOxz1gc-1yw1tnoY/s200/ubuntufader.png" rel="lyteshow[Ubuntu]" title="Ubuntu Fader">Ubuntu Fader</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju6zLfSoUzkHojc3z38YLEDdSETgFfoZuLNfqyAN7o74_-8fZbz-0rGZ45apuTAINJ4-s0iPZvbHXmwkMey2d7rTqpexIuMOmaUrkePzULkOGxptakXBYiT8nW7Yb4irqhY-Wrt8Z2VgY/s200/ubuntu-logo2.jpg" rel="lyteshow[Ubuntu]" title="Ubuntu Logo">Ubuntu Logo</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5Ql_hgya2Q_Xyh963hLbhy2DwN38D4VY4EV-F1v515c4q0IRrh80OJP0ARQYBl7ZaudpCAj9zx4eY4rFeOF_K_MnZ8WhaRPT6jWQ51f5atwDuuubGQUzgzIi0FYE9f_7bGoUhyphenhyphenEU6xY/s200/NASA.jpg" rel="lyteshow[Ubuntu]" title="Nasa Image. Spacecraft start to space.">Nasa Image. Spacecraft start to space.</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhhYuAmuRIJ7FqeXO61fbCO9_-E25MPnkTHvU7a77M-_5FhLIqOsj2PvVQmIE_mJUKDfY00vv84Pc21ffJTDdkjvRhgDnF-nELSHWKMROAzpKifT2U-28zdOhEURu1Ka0Y2_2YCqIgNg/s200/ubuntulogocopy.jpg" rel="lyteshow[Ubuntu]" title="Ubuntu Logo Desktop Wallpaper">Ubuntu Logo Desktop Wallpaper</a>
এখানে আমি উপরের গ্রুপ শো এর ছবিগুলোই ব্যবহার করেছি। কিন্তু rel হিসেবে ব্যবহার করেছি lyteshow, অতএব সম্পূর্ণ কোডটি হয়ে দাড়িয়েছে rel="lyteshow[Ubuntu]"। এখানে Ubuntu হলো স্লাইডটির নাম।

মনে রাখুন যেঃ
  • 'বাংলা হ্যাকস' ব্লগে লাইটবক্স ইফেক্ট প্রয়োগ করা হয় নাই। কিন্তু আপনাদের জন্য একটি ডেমো ব্লগ তৈরি করেছি। সেখানে প্রত্যেকটা ইফেক্টের নমুনা দেখুন এই পোস্টে
  • প্রত্যেকটা ছবির লিংকের মধ্যে title ট্যাগ ব্যবহার করতে হবে।
  • ব্লগ সম্পূর্ণ লোড না হওয়া পর্যন্ত Lytebox Effect করবে না।
  • ইন্টারনেট এক্সপ্লোরার, অপেরা, ফায়ারফক্স ব্রাউজারে এই কোড সুন্দরভাবে প্রদর্শিত হয় কোনরকম সমস্যা করে না
  • আবিষ্কারকের মূল ওয়েবসাইট ঠিকানা: Lytebox

উবুন্টুর নতুন লোগো, থিম, ব্রান্ড, ওয়েবসাইট ইত্যাদি

উবুন্টু ১০.০৪ এ শুধু যে অপারেটিং সিস্টেমের ভার্সন নাম্বার পরিবর্তন হচ্ছে তা নয়। সাথে সাথে অপারেটিং সিস্টেমের কিছু নিজস্ব উপাদান যেমন বুটিং স্পিড, সফটওয়ার ম্যানেজমেন্ট, লোগো, বিভিন্ন আইকন, বাটন, থিম ইত্যাদিতেও পরিবর্তনের ছোঁয়া লাগতে যাচ্ছে। লোগো এবং থিম পরিবর্তনের প্রভাব উবুন্টুর ওয়েবসাইটেও প্রতিফলিত হবে। উবুন্টুর ব্র্যান্ডিং এ এই যে ব্যাপক পরিবর্তন আসতে যাচ্ছে, তার কিছু নমুনা ইতিমধ্যে প্রকাশ করা হয়েছে। এরকম কিছু উদাহরণ নিচে আপনাদের উদ্দেশ্যে নিবেদন করা হল।
new ubuntu 10.04 logoনতুন উবুন্টু লোগোubuntu10.04 logoনতুন উবুন্টু লোগা
xubuntu 10.04 logoজুবুন্টু লোগোspread ubuntu logoস্প্রেড উবুন্টু
Ubuntu forum logoপরিবর্তিত উবুন্টু ফোরাম লোগো
ubuntu 10.04 lucid lynx boot screenউবুন্টু ১০.০৪ বুট স্ক্রিণnew gtk theme
ubuntu10.04 gtk themeনতুন Gtk থিম
proposed ubuntu 10.04 CD Coverপ্রস্তাবিত সিডি কভার ডিজাইন
new color theme ubuntu web siteউবুন্টুর নতুন ডিজাইনের নতুন রঙে রাঙানো ওয়েবসাইট
new spread ubuntu website
নতুন থিম দিয়ে সাজানো স্প্রেড উবুন্টু সাইটubuntu fridge websiteউবুন্টু ফ্রিজ সাইট
new xubuntu websiteনতুন জুবুন্টু সাইট
tshirt and pictogram design on new ubuntu themeনতুন লোগোকে মাথায় রেখে সাজানো টিশার্ট ও পিকটোগ্রাম
ubuntu10.4 notepad
নোটপ্যাড
ubuntu 10.04 toys and souvenirsউবুন্টু লোগো ও ডিজাইনযুক্ত কিছু নিত্য ব্যবহার্য দ্রব্যাদির অলংকরণ ভাবনা। এখানে আছে মগ, কলম, ল্যাপটপ স্টিকার, পিনব্যাজ

খবর ও ছবিগুলো নেয়া হয়েছে Brand এবং Brand2 সাইট দুটি থেকে

উবুন্টু ১০.০৪ (লুসিড লিঙ্কস) ডিফল্ট ডেস্কটপ ওয়ালপেপার

উবুন্টু ১০.০৪(লুসিড লিঙ্কস) ডিফল্ট ডেস্কটপ ওয়ালপেপারইতিমধ্যে আপনারা জেনেছেন যে উবুন্টু ১০.০৪ লুসিড লিঙ্কস লিনাক্সের আলফা ভার্সন প্রকাশিত হয়েছে। আর এই নতুন রিলিজের থীম নিয়েও যে নতুন ভাবনা তার সাথেও আপনারা পরিচিত হয়েছেন। জেনেছেন যে লুসিড লিঙ্কস থেকে পাঁচ বছরের পুরনো হিউম্যান থীম বাদ যাচ্ছে। কিন্তু এই নতুন LTS এর ডিফল্ট ডেক্সটপ কি হবে তা নিয়ে জল্পনা কল্পনা ছিল। আমরা ভেবেছিলাম যে উবুন্টু ১০.০৪ (লুসিড লিঙ্কস) এর ডিফল্ট ওয়ালপেপার হয়তো লিঙ্কস এর ছবি দিয়েই হবে। কিন্তু এবার সব জল্পনা কল্পনার অবসান ঘটিয়ে ডিফল্ট ডেস্কটপ ওয়ালপেপার প্রকাশ করা হয়েছে।

উপরের ছবিটিই উবুন্টু ১০.০৪ (লুসিড লিঙ্কস) এর ডিফল্ট ডেস্কটপ ওয়ালপেপার। বাদামী রঙের হালকা প্রলেপ একে আকর্ষণীয় করেছে সন্দেহ নেই। কিন্তু ম্যাকের মতো দেখতে বলে এর সমালোচনাও কম হচ্ছে না।
Ubuntu 10.04 (Lucid Lynx) default wallpaper has published.
উপরের ছবিটিতে ক্লিক করলে বড় ছবি খুলে যাবে। সেখান থেকে মাউসের রাইট বোতাম ক্লিক করে Save as করুন। অথবা এখানে ক্লিক করে ডাউনলোড করুন।

রেজুলুশন: ১৬০০×১০০০ পিক্সেল, সাইজ ১.৪ মেগাবাইট

এই ইমেজটির নাম "warty" । কারণ প্রথম যখন warty রিলিজ প্রকাশ করা হল, তখন সিদ্ধান্ত নেয়া হয়েছিল যে উবুন্টুর পরবর্তী সবকটি রিলিজের ডিফল্ট ওয়ালপেপারের নাম "warty" রাখা হবে।
 

পাঠকের প্রতিক্রিয়া

কিছু কথা

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

Search This Blog

© 2009-2014 Bangla Hacks | Design by: Bangla Hacks. Powered by: Blogger