બ્લોગમાં ડ્રોપ ડાઉન મેનૂ કેવી રીતે બનાવશો ?
બ્લોગમાં ડ્રોપ ડાઉન મેનૂ બનાવવાની રીત
1. સૌ પ્રથમ તમારા બ્લોગર બ્લોગનું ડેશબોર્ડખોલો.
2.બ્લોગનું ડેશબોર્ડ ખોલી. Laout પર click કરો.
3.Laout ખોલી Add a Gadget પર click કરો.
4. Add a Gadget માંHTML/Javascript પસંદ કરો
5.હવે HTML/Javascript માં નીચેના Box માંનો Codeને Copy કરી નાખો.
<!doctype html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</!doctype>
6. હવે Codeમાં હોમ લખેલ આગળ # ની નિશાની હોય ત્યા તમારા બ્લોગની લિંક મુકો.
7. હવે Codeમાં MENU1 લખેલ હોય ત્યાં તમારે મેનુ બનાવવાનુ હોય ત્યાં તે નામ લખો.
8. ઉપરની રીતે MENU2, MENU3 MENU4, MENU5, MENU6, MENU7 નામ લખો.
9. હવે Codeમાં MENU-1 ITEM-1 લખેલ હોય ત્યાં તમારે તમારી પોસ્ટ/ પેજનું નામ લખો. તથા MENU-1 ITEM-1 ની આગળ # ની નિશાની હોય ત્યા તમારી પોસ્ટ/પેજની લિંક મુકો.
10. ઉપરની રીતે MENU-1 ITEM-2, MENU-1 ITEM-3, MENU-1 ITEM-4, MENU-1 ITEM-5 નામ અને તમારી પોસ્ટ/પેજની લિંક મુકો.
11. હવે ઉપરના ડ્રોપ ડાઉન મેનુ વાળા HTML/Javascript Gadget ને Laout માં બ્લોગ પોસ્ટની ઉપર ગોઠવો
11. હવે તમારા બ્લોગના ડેશબોર્ડમાં Pagesમાં જઈ show pages as માંથી Don't show પસંદ કરો.
બસ હવે રાહ શાની જોવો છો તમારુ ડ્રોપ ડાઉન મેનુ તૈયાર છે.
આ બાબત આપના પ્રતિભાવ અને કોઈ મુશકેલી હોય તો કોમેન્ટ બોક્ષ માં જરુર આપશો.
ટિપ્પણીઓ નથી:
ટિપ્પણી પોસ્ટ કરો