আপনার ব্লগার ব্লগে যুক্ত করে নিন CSS নীল রঙ এর মেনু বার ।

বন্ধুরা আজকে আমি আপনাদের জন্য নিয়ে এলাম সুন্দর একটি নীল রঙ এর মেনু বার এটিতে dropdown কোন অপশন নাই । তাঁতে কি এটাও ভাল কাজ করে তাহলে আর দেরি করে লাভ কি এখুনি নীচে থেকে এর লাইভ ডেমো দেখে নিন । এবং দেখে নিন এটি কে কিভাবে আপনার ব্লগে যুক্ত করবেন ।










  এবার দেখে নিন কিভাবে আপনার ব্লগে যুক্ত করবেন ! 


১) আপনার ব্লগ এ জান তারপর Trmplate ক্লিক করে Edit HTML ক্লিক করুন । 

২) এবার Keybord এর Ctrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।


]]>



৩) এবার উপরের কোডটি খুজে পেলে তার ঠিক উপরে নীচের কোডটি কপি করে পেস্ট করুন ।



#BK_liClass { max-width: 974px;
height: 37px;
margin: 0;
padding: 6px 15px 0px 15px;
max-height: 42px;
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/TB7vF7YZJ_I/AAAAAAAAAxc/xxQ3xSdLEOk/s1600/navbg.png) no-repeat;
overflow:hidden;}
#BK_liClass ul { list-style-type: none;
float: left;
padding: 0px 0px 0px 0px;
margin: 0;
width: 970px; }
#BK_liClass ul li { float: left;
display: block;
height: 31px;
padding: 0px;
margin-right: 10px;
margin-bottom: 6px; }
#BK_liClass ul li:hover {
background: url(http://4.bp.blogspot.com/_lxBSX0YJV58/TB7ukms5YZI/AAAAAAAAAvs/QyQ656T-kmk/s1600/BK_liClass-hover-left.png) left; }
#BK_liClass ul li a:link, #BK_liClass ul li a:visited, #BK_liClass ul li a:active {
float: left;
color: #fff;
text-transform: uppercase;
display: block;
height: 29px;
font: bold 12px arial;
padding: 7px 10px 0px 10px;
margin: 0px;
text-decoration: none;}
#BK_liClass ul li a:hover {
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/TB7ulGiU_jI/AAAAAAAAAv0/bVvw8iniOvg/s1600/BK_liClass-hover-right.png) no-repeat top right !important; background: none;
color: #FFF;
height: 29px;
text-decoration: none; }
#BK_liClass .home a:link, #BK_liClass .home a:visited, #BK_liClass .current_page_item a:link, #BK_liClass .current_page_item a:visited {
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/TB7ulGiU_jI/AAAAAAAAAv0/bVvw8iniOvg/s1600/BK_liClass-hover-right.png) no-repeat top right !important; background: none;
color: #FFF; }
#BK_liClass .home, #BK_liClass .current_page_item {
background: url(http://4.bp.blogspot.com/_lxBSX0YJV58/TB7ukms5YZI/AAAAAAAAAvs/QyQ656T-kmk/s1600/BK_liClass-hover-left.png) left !important;
background: none;
position: relative;
z-index: 80 !important; }
/*End Top Nav-Bar Code*/



৪) এবার আপনার ব্লগ এর ড্যাশবোর্ড থেকে Layout এ ক্লিক করে HTML/Javascript এ ক্লিক করে Content ঘরে নীচের কোডটি কপি করে পেস্ট করুন ।




<div id='BK_liClass'>
<ul>
<li class='home'><a href='#' title='Home sweet home'>Home</a></li>
<li class='cat-item'><a href='#' title=''>About</a></li>
<li class='cat-item'><a href='#' title=''>Widgets</a></li>
<li class='cat-item'><a href='#' title=''>HTML</a></li>
<li class='cat-item'><a href='#' title=''>CSS</a></li>
<li class='cat-item'><a href='#' title=''>Blog Tips</a></li>
<li class='cat-item'><a href='#' title=''>Templates</a></li>
<li class='cat-item'><a href='#' title=''>Blogging</a></li>
<li class='cat-item'><a href='#' title=''>Contact Us</a></li>
<li class='cat-item'><a href='#' title=''>Edit</a></li>
</ul>
</div>



নোটঃ আপনি যদি আরও মেনু যুক্ত করতে চান তাহলে <li class='cat-item'><a href='#' title=''>#</a></li> যেকোনো একটি লাইনে বসিয়ে দিন ।


  এবার একটু এডিট করে নিতে হবে ! 


* উপরের # এর যাই গাই আপনি যে লিঙ্ক দিতে চান সেটি দিন । 

* নাম গুল Edit  মুছে সেখানে আপনার পছন্দ মতো নাম দিতে পারেন । 


* আশাকরি বুজতে কোন সমস্যা হল না কোন সমস্যা হলে যানাবেন । আমি হেল্প করতে চেষ্টা করবো । পোস্টটি থেকে আপনার সামান্য পরিমান উপকার হলে একটি কমেন্ট করে জানাবেন । ভাল থাকবেন । আল্লাহ্‌ হাফেজ । 


একটি মন্তব্য পোস্ট করুন

0 মন্তব্যসমূহ