اين القالب المرفق اخي لم اجده
لكن على اي حال لتغيير القائمة اذهب الى قالب مدونتك ثم إبحث عن هذا الكود
كود بلغة HTML:
<div class='menuku'>
<ul>
<li class='home'><a href='/'>Home</a></li>
<li><a href='#'>Drop menu</a>
<ul>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Drop menu 2</a>
<ul>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Menu 3.1</a></li>
<li><a href='#'>Menu 3.2</a></li>
<li><a href='#'>Menu 3.3</a></li>
<li><a href='#'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Drop menu 3</a>
<ul>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://creatingwebsite-maskolis.blogspot.com/2012/07/johny-joss-banget-template-joss-untuk.html'>Instruction to use</a></li>
<li><a href='http://johnytampan.blogspot.com/p/sample-page_13.html'>Sample Page</a></li>
</ul>
</div>
ثم ضع مكانه هذا الكود التالي
كود بلغة HTML:
<link href='http://alijafarian.com/demos/bootstrap-multi-column-dropdown-menu/css/bootstrap-3.1.1.min.css' rel='stylesheet' type='text/css'/>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.content {
width: 80%;
margin: 50px auto;
padding: 20px;
}
.content h1 {
font-weight: 400;
text-transform: uppercase;
margin: 0;
color: #fff;
}
.content h2 {
font-weight: 400;
text-transform: uppercase;
color: #333;
margin: 0 0 20px;
}
.content p {
font-size: 1em;
font-weight: 300;
line-height: 1.5em;
margin: 0 0 20px;
}
.content p:last-child {
margin: 0;
}
.content a.button {
display: inline-block;
padding: 10px 20px;
background: #ff0;
color: #000;
text-decoration: none;
}
.content a.button:hover {
background: #000;
color: #ff0;
}
.content.title {
position: relative;
background: #333;
}
.content.title h1 span.demo {
display: inline-block;
font-size: .5em;
padding: 10px;
background: #fff;
color: #333;
vertical-align: top;
}
.content.title .back-to-article {
position: absolute;
bottom: -20px;
left: 20px;
}
.content.title .back-to-article a {
padding: 10px 20px;
background: #f60;
color: #fff;
text-decoration: none;
}
.content.title .back-to-article a:hover {
background: #f90;
}
.content.title .back-to-article a i {
margin-left: 5px;
}
.content.white {
background: #fff;
box-shadow: 0 0 10px #999;
}
.content.black {
background: #000;
}
.content.black p {
color: #999;
}
.content.black p a {
color: #08c;
}
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
@media (max-width: 480px) {
.content {
width: 90%;
margin: 50px auto;
padding: 10px;
}
}
</style>
<!--/.content-->
<nav class='navbar navbar-default' role='navigation'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>Beach Backpacks</a>
</div>
<!--/.navbar-header-->
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>One Column <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Two Column <b class='caret'/></a>
<ul class='dropdown-menu multi-column columns-2'>
<div class='row'>
<div class='col-sm-6'>
<ul class='multi-column-dropdown'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here that's extra long so we can see how it looks</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</div>
<div class='col-sm-6'>
<ul class='multi-column-dropdown'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Three Column <b class='caret'/></a>
<ul class='dropdown-menu multi-column columns-3'>
<div class='row'>
<div class='col-sm-4'>
<ul class='multi-column-dropdown'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</div>
<div class='col-sm-4'>
<ul class='multi-column-dropdown'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</div>
<div class='col-sm-4'>
<ul class='multi-column-dropdown'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li><a href='#'>Link</a></li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://alijafarian.com/demos/bootstrap-multi-column-dropdown-menu/js/bootstrap-3.1.1.min.js' type='text/javascript'/>