Sunday, May 24, 2015

ব্লগস্পট ব্লগের ব্যাকগ্রাউন্ড করুন অ্যানিমেটেড হরেক রঙের !


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

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

ব্লগার বা ব্লগস্পট ব্লগে হরেক রঙের ব্যাকগ্রাউন্ড করার পদ্ধতিঃ


  • প্রথমে ব্লগার ডট কমে লগিন করে আপনার কাঙ্ক্ষিত ব্লগের ড্যাশবোর্ডে প্রবেশ করুন।
  • টেম্পলেট সেকশন থেকে Customize বাটন ক্লিক করুন। 
  • এরপর টেমপ্লেট এডিটর আসলে  Advanced > Add Css অপশনে গিয়ে নিচের কোডগুলো বসিয়ে টেমপ্লেট সেভ করুন।
body { animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */ -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */ -o-animation: colorBackground 20s infinite; /* Opera 12.00 */ } @keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-webkit-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-moz-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-o-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; 

নতুনরা কোডিং জানেন না অনেকেই। তাঁরা রং বা অন্য কিছু কাস্টমাইজিং করতে পারবেন না। তবে যারা কোডিং জানেন তাঁরা কোডগুলো কাস্টমাইজ করে আপনার পছন্দমত রং বা অন্যান্য বিষয় সাজিয়ে নিতে পারেন। নতুনদেরকে আবারো বলছি, কোন সমস্যা হলে আমাকে জানাবেন। আমি আপনাকে সাহায্য করার চেস্টা করব ইনশাল্লাহ ।

No comments: