বন্ধুরা আজকে আমি আপনাদের জন্য নিয়ে এলাম সুন্দর একটি নীল রঙ এর মেনু বার এটিতে 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>
এবার একটু এডিট করে নিতে হবে !
* উপরের # এর যাই গাই আপনি যে লিঙ্ক দিতে চান সেটি দিন ।
* নাম গুল Edit মুছে সেখানে আপনার পছন্দ মতো নাম দিতে পারেন ।
* আশাকরি বুজতে কোন সমস্যা হল না কোন সমস্যা হলে যানাবেন । আমি হেল্প করতে চেষ্টা করবো । পোস্টটি থেকে আপনার সামান্য পরিমান উপকার হলে একটি কমেন্ট করে জানাবেন । ভাল থাকবেন । আল্লাহ্ হাফেজ ।
Tags
ব্লগার