আমরা যখন বিভিন্ন ওয়েবসাইটে ভিজিট করি তখন নিজের সাইট এর জন্য অনেক কিছুই ভাল লাগে। কিন্তু কোড না জানার জন্য আমরা তা করতে পারিনা। আমরা চাইলে আমাদের সাইট এর জন্য এমন অনেক কিছু করতে পারি সহজেই। CSS কোড কপি করে একই ডিজাইন প্রয়োগ করতে পারেন আপনার সাইটে।
Mozilla Firefox বা Google Chrome এ Inspect Element কাজ করে। তাই আপনার ব্রাউজার যদি অন্য কোনটা হয়ে থাকে তাহলে আগে লেটেষ্ট ভারশান ডাউনলোড করে নিন। চাইলে ফায়ারফক্সে FireBug অ্যাড-অন দিয়েও করতে পারেন।
এরপর নিচের নিয়মগুলো অনুসরন করুন(এটি একটি উদাহরণ) :-
এরপর নিচের নিয়মগুলো অনুসরন করুন(এটি একটি উদাহরণ) :-
১. যে সাইটটি পছন্দ সেটি ওপেন করুন। একই সাথে নিজের সাইটটি new tab এ open করুন।
2. আপনার পছন্দের সাইটের এর ধরুন হেডার ইমেজ পছন্দ। হেডার ইমেজ এর উপর কার্সর রেখে ডান বাটনে ক্লিক করে view ইমেজ দিয়ে ইমেজটি সেভ করুন। তারপর আপনার মিডিয়া লাইব্রেরীতে এটি যোগ করুন।
৩. এরপর ইমেজটির উপর কারসর রেখে ডান বাটনে কি্লিক করে inspect element কি্লিক করুন।আপনি দেখতে পাবেন সাইটির ডানে Style. CSS সেখানে ক্লিক করুন। দেখতে পাবেন Mozilla editor window টি ওপেন হয়েছে।সেখানে হেডার অংশের CSS কোড টুকু কপি করে আপনার Style.css এর হেডার অংশে কপি করুন।
৪.মিডিয়া লাইব্রেরী ওপেন করে এডিট (Edit)এ ক্লিক করুন।লিঙ্কটি কপি করে হেডার কোডে background url টি যোগ করুন।সেভ বাটনে ক্লিক করুন।
৫. header.php ফাইল ওপেন করে wrapper অংশে নিচের কোড পেস্ট করুন।
৬. সেভ করে নিজের সাইট রিলোড করুন দেখতে পাবেন আপনার কাঙ্খিত হেডার ইমেজটি যোগ হয়েছে।
৭.এটি একটি উদাহরন ছিল।চাইলে আপনি এই পদ্ধতি ব্যবহার করে আপনার হেডার ইমেজটি যোগ করার জন্য Inspect element করে কোড কপি করে আপনার ইমেজ height,width,background url যোগ করে এবং header.php তে wrapper অংশে কোডটি যোগ করে আপনার সাইট রিলোড দেওয়ার মাধ্যমে যোগ করুন আপনার কাঙ্খিত হেডার ইমেজ।
ধন্যবাদ আপনাদের কষ্ট করে পোস্টটি পড়ার জন্য।
0 comments:
Post a Comment