ඔයාලගෙ බ්ලොග් එකට දා ගන්න ඔන්න අද මම Drop Down Menu එකක් ගෙනවා කොහොමද කියල බලන්නකෝ
01. Blogger Dashboard > Layout එකට යන්න
02. Add a Gadget ,click කරලා HTML/JavaScript තොරන්න
03.මම දිල තියන ඔය code එක එකට කරන්න copy Paste කරන්න
<style> /* code on www.allbloggingtricks.com */ ul.abtmenubar li a { display: block; padding: 3px 8px; } ul.abtmenubar li { padding: 0; } ul.abtmenubar li.dir { padding: 7px 20px 7px 12px; } ul.abtmenubar ul li.dir { padding-right: 15px; } ul.abtmenubar ul a { padding: 4px 5px 4px 12px; } ul.abtmenubar ul a:hover { padding: 3px 5px 3px 11px; border: solid 1px #ddd; background-color: #eee; font-weight: bold; } ul.abtmenubar, ul.abtmenubar li, ul.abtmenubar ul { list-style: none; margin: 0; padding: 0; } ul.abtmenubar { position: relative; z-index: 597; float: left; } ul.abtmenubar li { float: left; min-height: 1px; line-height: 1.3em; vertical-align: middle; } ul.abtmenubar li.hover, ul.abtmenubar li:hover { position: relative; z-index: 599; cursor: default; } ul.abtmenubar ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } ul.abtmenubar ul li { float: none; } ul.abtmenubar ul ul { top: 1px; left: 99%; } ul.abtmenubar li:hover > ul { visibility: visible; } ul.abtmenubar { font: bold 12px Arial, Helvetica, sans-serif; } ul.abtmenubar li { padding: 3px 12px; background-color: #000; color: #fff; } ul.abtmenubar li.hover, ul.abtmenubar li:hover { background-color: #222; } ul.abtmenubar a:link, ul.abtmenubar a:visited { color: #fff; text-decoration: none; } ul.abtmenubar a:hover { color: #fff; text-decoration: underline; } ul.abtmenubar a:active { color: #fff; } ul.abtmenubar ul { margin-left: -6px; width: 170px; padding-bottom: 9px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYR6UIyz_D65T_CndWgWEgPTvpFVIMehd72CpoRKFRKlKKHHkgPkBQ5qmKYtvzglDLlR92KzxJGOcgb6_pKF4UgtOYdkikCtADeZA-xcbPNtYRLj5ko1IcXbd2OGU4Xs_XDlaXJoWZaY/s1600/abtmenubar_pane.png) 0 100% no-repeat; color: #000; font-size: 11px; font-weight: normal; } ul.abtmenubar ul li { background-color: transparent; color: #000; } ul.abtmenubar ul li.hover, ul.abtmenubar ul li:hover { background-color: transparent; } ul.abtmenubar ul li.empty { padding: 12px 12px 7px !important; font-weight: bold; } ul.abtmenubar ul a:link, ul.abtmenubar ul a:visited { color: #000; } ul.abtmenubar ul a:hover { color: #000; text-decoration: none; } ul.abtmenubar ul a:active { color: #000; } ul.abtmenubar ul ul { display: none; } ul.abtmenubar *.dir { padding-right: 12px; background-image: none; background-position: 100% 50%; background-repeat: no-repeat; } </style> <ul class="abtmenubar abtmenubar-horizontal" id="nav"> <li><a href="Your Link URL">Home</a></li> <li><a class="dir" href="Your Link URL">Solutions</a> <ul> <li class="empty">Industries</li> <li><a href="Your Link URL">Broadcast and media</a></li> <li><a href="Your Link URL">Education</a></li> <li><a href="Your Link URL">Financial services</a></li> <li><a href="Your Link URL">Government</a></li> <li><a href="Your Link URL">Life sciences</a></li> <li><a href="Your Link URL">Manufacturing</a></li> <li class="empty">Solutions</li> <li><a href="Your Link URL">Consumer photo</a></li> <li><a href="Your Link URL">Mobile</a></li> <li><a href="Your Link URL">Print publishing</a></li> <li><a href="Your Link URL">Pro photography</a></li> <li><a href="Your Link URL">Professional video</a></li> <li><a href="Your Link URL">Applications</a></li> <li><a href="Your Link URL">Communication</a></li> <li><a href="Your Link URL">Learning</a></li> <li><a href="Your Link URL">Web conferencing</a></li> <li><a href="Your Link URL">Web publishing</a></li> <li><a href="Your Link URL">All solutions ›</a></li> </ul> </li> <li><a class="dir">Products</a> <ul> <li><a href="Your Link URL">Acrobat Connect Pro</a></li> <li><a href="Your Link URL">Acrobat family</a></li> <li><a href="Your Link URL">Adobe AIR</a></li> <li><a href="Your Link URL">After Effects</a></li> <li><a href="Your Link URL">ColdFusion</a></li> <li><a href="Your Link URL">Creative Suite family</a></li> <li><a href="Your Link URL">Dreamweaver</a></li> <li><a href="Your Link URL">Flash</a></li> <li><a href="Your Link URL">Flex</a></li> <li><a href="Your Link URL">Illustrator</a></li> <li><a href="Your Link URL">InDesign</a></li> <li><a href="Your Link URL">Enterprise Suite</a></li> <li><a href="Your Link URL">Mobile products</a></li> <li><a href="Your Link URL">Photoshop family</a></li> <li><a href="Your Link URL">Adobe Premiere Pro</a></li> <li><a href="Your Link URL">Scene7 OnDemand</a></li> <li><a href="Your Link URL">All products ›</a></li> </ul> </li> <li><a class="dir">Support</a> <ul> <li><a href="Your Link URL">Support home</a></li> <li><a href="Your Link URL">Customer Service</a></li> <li><a href="Your Link URL">Knowledgebase</a></li> <li><a href="Your Link URL">Books</a></li> <li><a href="Your Link URL">Training</a></li> <li><a href="Your Link URL">Support programs</a></li> <li><a href="Your Link URL">Forums</a></li> <li><a href="Your Link URL">Documentation</a></li> <li><a href="Your Link URL">Updates</a></li> <li><a href="Your Link URL">More ›</a></li> </ul> </li> <li><a class="dir" >Communities</a> <ul> <li class="empty">By user</li> <li><a href="Your Link URL">Designers</a></li> <li><a href="Your Link URL">Developers</a></li> <li><a href="Your Link URL">Educators</a></li> <li><a href="Your Link URL">Partners</a></li> <li class="empty">By resource</li> <li><a href="Your Link URL">Adobe Labs</a></li> <li><a href="Your Link URL">Adobe TV</a></li> <li><a href="Your Link URL">Forums</a></li> <li><a href="Your Link URL">Exchange</a></li> <li><a href="Your Link URL">Blogs</a></li> <li><a href="Your Link URL">Experience Design</a></li> </ul> </li> <li><a class="dir" >Company</a> <ul> <li><a href="Your Link URL">About Adobe</a></li> <li><a href="Your Link URL">Press</a></li> <li><a href="Your Link URL">Investor Relations</a></li> <li><a href="Your Link URL">Corporate Affairs</a></li> <li><a href="Your Link URL">Careers</a></li> <li><a href="Your Link URL">Showcase</a></li> <li><a href="Your Link URL">Events</a></li> <li><a href="Your Link URL">Contact Adobe</a></li> <li><a href="Your Link URL">Become an affiliate</a></li> <li><a href="Your Link URL">More ›</a></li> </ul> </li> <li><a class="dir" href="http://www.bloggertrix.com/">Downloads</a> <ul> <li><a href="Your Link URL">Downloads home</a></li> <li><a href="Your Link URL">Trial downloads</a></li> <li><a href="Your Link URL">Updates</a></li> <li><a href="Your Link URL">Exchange</a></li> <li class="empty">Readers and Players</li> <li><a href="Your Link URL">Get Adobe Reader</a></li> <li><a href="Your Link URL">Get Flash Player</a></li> <li><a href="Your Link URL">Get Adobe AIR</a></li> <li><a href="Your Link URL">Get Shockwave Player</a></li> <li><a href="Your Link URL">Get Media Player</a></li> <li><a href="Your Link URL">More ›</a></li> </ul> </li> <li><a class="dir" href="http://www.bloggertrix.com/">Store</a> <ul> <li><a href="Your Link URL">Store home</a></li> <li><a href="Your Link URL">Software</a></li> <li><a href="Your Link URL">Fonts</a></li> <li><a href="Your Link URL">Books</a></li> <li><a href="Your Link URL">Support programs</a></li> <li><a href="Your Link URL">Your account</a></li> <li><a href="Your Link URL">Volume licensing</a></li> <li><a href="Your Link URL">Store offers</a></li> <li><a href="Your Link URL">Other ways to buy ›</a></li> </ul> </li> </ul>
- මේ තැන් වලට ඔයාගෙ menu bar එකේ main tital දෙන්න
- ඔයාගෙ blog එකෙ නම දෙන්න
- menu bar එකේ අතුලට එන tital මේ තැන් වලට දෙන්න ( මම තැන් දෙක තුන විතරයි
highlight කරල තියෙන්නෙ )
- tital වල ලින්ක් දෙන්න
menu bar එකේ අතුලට එන tital එකක් මකනවානම් <li><a href="Your Link URL">Store offers</a></li> විඩියට අදාල පේලියම මකන්න
04.දැන් save කරන්න
