নেভিগেশন মেনুঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-তিন

ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল পর্ব ৩ এ আপনাদের সবাইকে স্বাগতম। থিসিস থিম নিয়ে আমার আগের পোস্ট সমুহ দেখে নিতে পারেন

ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল (পর্ব ১)

ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল (পর্ব ২)

গত পর্বে আমি আপনাদের থিসিস থিমে নেভমেনু যুক্ত করা এবং এবং কালার করা দেখিয়েছিলাম, আজকে আমি আপনাদের নেভমেনু স্টাইল করা দেখাব।

প্রথমে দেখুন নেভমেনুর ব্যাকগ্রাউন্ডে ইমেজ যুক্ত করা ,

প্রথমে আপনার মেন্যুর ব্যাকগ্রাউন্ড ইমেজ তৈরি করুন, এবং সার্ভারে আপলোড করুন , এবার ওয়ার্ডপ্রেস ব্লগে লগইন করুন ও  থিসিস এর   Custom File Editor   ড্রপডাউন থেকে  Custom.css   সিলেক্ট করুন  এবং নিচের এই সিএসএস কোডটি লিখে সেভ করুন।

.custom ul.menu { background:transparent url('https://tutorialbd.com/wp-content/mages/YOUR-IMAGE-HERE.gif') ;
left:-2.0em; height:5.2em; width:100.8em; padding:0.6em 0; border:none; position:relative; }
	.custom ul.menu a { background:transparent; border:none; color:#fff; letter-spacing:0px; text-transform:lowercase; font-family:verdana; font-size:1.4em; padding:0.5em 2.0em; margin-right:0.1em; }
		.custom ul.menu .tab-home a { margin-left:2.0em; }
			.custom ul.menu .current a, .custom ul.menu a:hover { background:#fff; color:#000; }

উপরের CSS কোডটিতে যেখানে লাল কালারের কোডটি দেওয়া সেখানে আপনার মেনু ব্যাকগ্রাউন্ড ইমেজের লিঙ্ক দিন। (https://tutorialbd.com/wp-content/mages/YOUR-IMAGE-HERE.gif)
এবার আপনার ব্লগটি রিফ্রেশ করে দেখুন মেনুতে ব্যাকগ্রাউন্ড ইমেজ যুক্ত হয়েছে।

এবার দেখুন প্রত্যেক মেন্যুয়ের সাথে কেমন করে আইকন যুক্ত করবেন

প্রথমে আপনার মেন্যুর আইকন সার্ভারে আপলুড করুন , এবার ওয়ার্ডপ্রেস ব্লগে লগইন করুন ও  থিসিস এর   Custom File Editor   ড্রপডাউন থেকে  Custom.css   সিলেক্ট করুন  এবং নিচের এই সিএসএস কোডটি লিখে সেভ করুন।


.custom ul.menu { border:none; }
.custom ul.menu a { color:#666; padding-top:0.9em; text-indent:2.4em; border:none; background: url('https://tutorialbd.com/wp-content/mages/YOUR-ICON-HERE.png) 0 0 no-repeat !important; }
.custom ul.menu a:hover, .custom ul.menu .current a:hover { color:#666; }

উপরের CSS কোডটিতে যেখানে লাল কালারের কোডটি দেওয়া সেখানে আপনার মেনু আইকনের লিঙ্ক দিন। (https://tutorialbd.com/wp-content/mages/YOUR-ICON-HERE.gif)
এবার আপনার ব্লগটি রিফ্রেশ দিয়ে দেখুন আপনার ব্লগের মেন্যুয়ের সাথে আইকন যুক্ত হয়েছে। 



পরবর্তী পোষ্ট করা পর্যন্ত আপনাদের কাছ থেকে এখানেই বিদায় নিচ্ছি সবাই ভাল থাকবেন ধন্যবাদ।

Leave a Comment