আপনার ব্লগার ব্লগে যুক্ত করে নিন 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD9dDMQFp35VQM9g_5K9rrgZkS__5lqa4H6QId1Rk5zp4jgmxgl8_hjNEJh1biSwulsJOOQikG73Wjl-LxOb6K_OpKqUbTw41I9jMNZWDbMBQRl_l_G0E7xxUxpRscirvqCiwYG-7Aba6m/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51csYzWQhoYmNIG8_0YpE49ObndqaUDW7GkpvBm7T12-F-laAYhgl7lny3gqh9q51qXcfZIgitZYGdiQEDWFkL3T_tzJQAESpNPqMeY7rZHJtRgWZZI4QQUCW3rHH6nB-Pzw1gWfg39aO/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbz5vAvDZYb2qFb3OXkczohC67nAzGu6b4kzksFNO85O17msv7Qi1kMuWPDX-6zx2z8_ulaSULzsiWqFfkoZhgKxK9ga45KmON_MrON4qcMdMZ1PVzm-ZE7zygGi_HWTR1M3Th5zWZmXBd/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbz5vAvDZYb2qFb3OXkczohC67nAzGu6b4kzksFNO85O17msv7Qi1kMuWPDX-6zx2z8_ulaSULzsiWqFfkoZhgKxK9ga45KmON_MrON4qcMdMZ1PVzm-ZE7zygGi_HWTR1M3Th5zWZmXBd/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51csYzWQhoYmNIG8_0YpE49ObndqaUDW7GkpvBm7T12-F-laAYhgl7lny3gqh9q51qXcfZIgitZYGdiQEDWFkL3T_tzJQAESpNPqMeY7rZHJtRgWZZI4QQUCW3rHH6nB-Pzw1gWfg39aO/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  মুছে সেখানে আপনার পছন্দ মতো নাম দিতে পারেন । 

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

খবর বিভাগঃ ব্লগ টিপস

শেয়ার করুন