Inspect Element ব্যবহার করে সহজেই ডিজাইন করুন নিজের সাইট !!

0
250

আমরা যখন বিভিন্ন ওয়েবসাইটে ভিজিট করি তখন নিজের সাইট এর জন্য অনেক কিছুই ভাল লাগে। কিন্তু কোড না জানার  জন্য আমরা তা করতে পারিনা।

আমরা চাইলে আমাদের সাইট এর জন্য এমন অনেক কিছু করতে পারি সহজেই। CSS কোড কপি করে একই ডিজাইন প্রয়োগ করতে পারেন আপনার সাইটে।

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

Mozilla Firefox(version ১৩.0.2থেকে ১৬.০.২) এ Inspect Element কাজ করে। তাই আপনার ব্রাউজার যদি অন্য কোনটা হয়ে থাকে তাহলে আগে লেটেষ্ট ভারশান ডাউনলোড করে নিন।

এরপর  নিচের নিয়মগুলো অনুসরন করুন(এটি একটি উদাহরণ) :-

১.  এই  সাইটটি ভিজিট করুন। একই্সাথে নিজের সাইটটি new tab এ open করুন।

2. আপনার tourist-spots এর হেডার ইমেজটি ভাল লেগে থাকে তাহলে হেডার ইমেজ এর উপর কার্সর রেখে ডান বাটনে ক্লিক করে view ইমেজ দিয়ে ইমেজটি সেভ করুন। তারপর আপনার মিডিয়া লাইব্রেরীতে এটি যোগ করুন।

৩. এরপর ইমেজটির উপর কারসর রেখে ডান বাটনে কি্লিক করে inspect element কি্লিক করুন।আপনি দেখতে পাবেন সাইটির ডানে Style. CSS সেখানে ক্লিক করুন। দেখতে পাবেন Mozilla editor window টি ওপেন হয়েছে।সেখানে হেডার অংশের CSS কোড টুকু কপি করে আপনার Style.css এর হেডার অংশে কপি করুন। তারপর…

Inspect Element ব্যবহার করে সহজেই ডিজাইন করুন নিজের সাইট !!

৪.মিডিয়া লাইব্রেরী ওপেন করে এডিট (Edit)এ কিল্ক করুন।লিঙ্কটি কপি করে হেডার কোডে background url টি যোগ করুন।সেভ বাটনে ক্লিক  করুন।

৫. header.php ফাইল ওপেন করে wrapper অংশে নিচের কোড পেস্ট করুন।<div>

<div id=”header” onclick=”location.href='<?php bloginfo(‘url’); ?>’;” style=”cursor: pointer;”>

</div>

৬. সেভ করে নিজের সাইট রিলোড করুন দেখতে পাবেন আপনার কাঙ্খিত হেডার ইমেজটি যোগ হয়েছে।

৭.এটি একটি উদাহরন ছিল।চাইলে আপনি এই পদ্ধতি ব্যবহার করে আপনার হেডার ইমেজটি যোগ করার জন্য Inspect element করে কোড কপি করে আপনার ইমেজ height,width,background url যোগ করে এবং header.php তে wrapper অংশে কোডটি যোগ করে আপনার সাইট রিলোড দেওয়ার মাধ্যমে যোগ করুন আপনার কাঙ্খিত হেডার ইমেজ।

ধন্যবাদ আপনাদের কষ্ট করে পোস্টটি পড়ার জন্য। কোন কিছু না বুঝলে মন্তব্যে আমাকে জানান। আর নতুন হিসেবে লিখায় কোন ভুল থাকলে ক্ষমা করে দিবেন আশা করি।এছাড়া ও নানা মজার বিষয় জানতে আমাদের সাইট থেকে ঘুরে আসতে পারেন।

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

fifteen + 9 =