Sunday, February 16, 2020

How To Job A Mega Driblet Downward Bill Of Fare Inwards Blogger

Over the previous twosome of years, the basis of the Blogosphere has progressed quite handsomely. Nowadays Bloggers too webmasters are concentrating to a greater extent than on their website’s designing rather than focusing on their content. Undoubtedly, having a beautiful website is the latest tendency too fifty-fifty visitors admire those blogs which are highly professional person inwards damage of their Layout, Header, Footer, Menu too etc. Therefore, having a construct clean too perfect navigation are the basic needs of each too every blog. However, bulk of blogs are all the same using the sometime navigation menus which kills the consummate presentation of a blog. If your site’s navigation is non perfect thus how tin yous facial expression your visitors to search your website inwards depth? Today nosotros volition larn how to practice a Fresh Mega Drop downward Menu for blogger blogs.




Why To Use Mega Drop Menu:

The biggest payoff of having a Mega navigation card is that it keeps the thinks together inwards ane place, thus your visitors won’t receive got to pass much fourth dimension inwards searching for a specific category of their interest. On the other hand, it volition come about your weblog facial expression construct clean too elegant because the consummate site navigation keeps things together.

How Mega Drop Down Menu Looks Like:

Unlike other mega menus, it has an elegant pattern which volition compliment your website or weblog because yous tin easily alter its color according to your desired needs. It is sparse inwards size thus it’s quite clear that it tin easily fit whatever site without whatever occupation whatsoever. Following is the animated representation of the MBL Mega Drop Down Menu.


Some Key Features Of MBL Mega Drop Menu:

Following are roughly of the initiatory of all features of the Drop card which volition non exclusively amuse yous but your visitors would dearest to play amongst it.
  • It supports almost every browser i.e. Firefox, Chrome too Internet explorer.  
  • You tin easily alter its color to gibe the color system of your website.
  • Unlike other menus, exclusively ane JavaScript is used thus it is extremely lite weighted.
  • It has a cute Email Subscription box inwards the driblet downward card that volition maximize your subscribers.

How To Create a Mega Drop Down Menu inwards Blogger:

Just similar our previous tutorials, the steps are pretty much straightforward too basis hardly accept 10 minutes to consummate the integration. Just follow the next instructions correctly.

  • Go To Blogger.com >> Your Site >> Template.
  • Try to brand a habit of creating a Backup of templates earlier editing it.
  • Select Edit HTML >> Proceed.
  • Now inside the template search for ]]></b:skin> and glue the next Style canvas coding.
  2. /*  MBL Mega Drop Down Menu Bar For Blogger (www.mybloggerlab.com) */
  3. ul.dropmenu{
  4. position: relative;
  5. margin: 0px;
  6. padding: 1px 0px 0px 0px;
  7. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprFmx0ywr-FojQjQmWdDJ14cgCPd676DWfGS4cbC5k9Dbfyo6GgF05HoOtpn9YR6BLYwu1Upnsud4zsyYcP2GAhYy_BtB_GFjJPZHe9XJsrlkchaUUnQbHFwtvAOKIknD7-9WAUTHSCk/s1600/navigation.png) repeat-x scroll 0 0;
  8. display:block;
  9. height: 35px;
  10. font-family:Verdana,Arial,Helvetica,sans-serif;
  11. font-size: 12px;
  12. }
  13. .dropmenu li{
  14. position: relative;
  15. list-style: none;
  16. float: left;
  17. margin: 0px;
  18. padding: 0px;
  19. }
  20. .dropmenu li a{
  21. height: 22px;
  22. padding: 9px 30px 0px 15px;
  23. display: block;
  24. cursor: point;
  25. border-right: corporation 1px #4a779d;
  26. color: #FFFFFF;
  27. text-transform: uppercase;
  28. text-decoration: none;
  29. }
  30. .dropmenu li span{
  31. display: block;
  32. float: right;
  33. height: 10px;
  34. width: 10px;
  35. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6JvTsjad_dyoTIgzwmjRxvnncLa0GVKhVJZYxO0iDQKgfncRPjtp7idjUKrQQKpV7OQQ2DgYSoiX-tTqyFaE3dIspbpba4ElsuYH65b5TRcW8tacn084Z_G45QXJ4WgPtshoDCVKTy0/s1600/arrow_up.png) repeat-x scroll 0 0;
  36. position: absolute;
  37. top: 12px;
  38. right: 10px;
  39. }
  40. .dropmenu li  a:hover span{
  41. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsByPmg0wX7cfqRPqyrwbTInTJ5mKgNzVjY9CyoURDdenfW8bMreJkFJ-QKpqolaKIukKzi4fHelsJgm6NW_3pNPdYXpIPhd4iJCkZDGyVaFp8xbx_G3VQZNb6HWJD3DGV98-eR5oICo/s1600/arrow_hover.png) repeat-x scroll 0 0;
  42. }
  43. .dropmenu li:hover ul, .dropmenu li:hover div{
  44. display: block;
  45. }
  46. .dropmenu ul{
  47. position: absolute;
  48. display: none;
  49. width: 140px;
  50. padding: 0px;
  51. margin: 0px;
  52. border-bottom: 1px corporation #ccc;
  53. background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_WYGULnNFUKkIHXa-F8meuQjlaDkZR3Tkfll-6yIyEMtYOUE6VLzKAMsCl9Zj7ZygYW0BaBL4MkPFcvYYYTMxyEYO5hjc7kEYY29qOZToBItjkMCHwdJ01USczwcu5e2gVoFoU5YxEg/s1600/gradient.png) repeat-x scroll 0 0;
  54. }
  55. .dropmenu ul li{
  56. border: 0;
  57. float: none;
  58. }
  59. .dropmenu ul a {
  60.   border: 1px corporation #ccc;
  61.   border-bottom: 0;
  62.   white-space: nowrap;
  63.   display:block;
  64.   color: #0657AD;
  65.   text-decoration: underline;
  66.   text-transform: none;
  67. }
  68. a.selected, a:hover{
  69. color: #0657AD !important;
  70. background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_WYGULnNFUKkIHXa-F8meuQjlaDkZR3Tkfll-6yIyEMtYOUE6VLzKAMsCl9Zj7ZygYW0BaBL4MkPFcvYYYTMxyEYO5hjc7kEYY29qOZToBItjkMCHwdJ01USczwcu5e2gVoFoU5YxEg/s1600/gradient.png) repeat-x scroll 0 0;
  71. }
  72. a.selected span{
  73. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsByPmg0wX7cfqRPqyrwbTInTJ5mKgNzVjY9CyoURDdenfW8bMreJkFJ-QKpqolaKIukKzi4fHelsJgm6NW_3pNPdYXpIPhd4iJCkZDGyVaFp8xbx_G3VQZNb6HWJD3DGV98-eR5oICo/s1600/arrow_hover.png) repeat-x scroll 0 0;
  74. }
  75. .dropmenu ul a:hover {
  76. color:#F67A00 !important;
  77. text-decoration: none;
  78. background-color: #F0F0F0;
  79. background-image: none;
  80. }
  81. .dropmenu div ul{
  82. position: relative;
  83. display: block;
  84. }
  85. .dropmenu li div{
  86. background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_WYGULnNFUKkIHXa-F8meuQjlaDkZR3Tkfll-6yIyEMtYOUE6VLzKAMsCl9Zj7ZygYW0BaBL4MkPFcvYYYTMxyEYO5hjc7kEYY29qOZToBItjkMCHwdJ01USczwcu5e2gVoFoU5YxEg/s1600/gradient.png) repeat-x scroll 0 0;
  87. border: 1px corporation #ccc;
  88. padding: 5px;
  89. display: none;
  90. position: absolute;
  91. }
  92. .dropmenu li div ul{
  93. border: none;
  94. background: none;
  95. position: relative !important;
  96. }
  97. .dropmenu li div a{
  98. border: none;
  99. border-bottom: 1px corporation #ccc;
  100. }
  101. .dropmenu li div div{
  102. display: block;
  103. position: relative;
  104. background: none;
  105. border: none;
  106. }
  107. .dropmenu li div div a{
  108. display: inline;
  109. border: none;
  110. color: #666;
  111. text-decoration: underline;
  112. padding: 0px;
  113. margin: 0px;
  114. text-transform: none;
  115. }
  116. .dropmenu li div div a:hover{
  117. color: #000;
  118. text-decoration: none;
  119. }
  120. ul.left{
  121. float: left;
  122. width: 145px;
  123. }
  124. ul.right{
  125. float: right;
  126. width: 145px;
  127. }
  128. .small{
  129. color: #666;
  130. font-size: 10px;
  131. padding: 10px 5px 8px 5px !important;
  132. display: block;
  133. clear: both;
  134. }
  135. .products{
  136. width: 300px;
  137. padding: 15px !important;
  138. }
  139. .products ul{
  140. width: 100%;
  141. }
  142. .products ul li{
  143. border-bottom: 1px corporation #ccc;
  144. height: 40px;
  145. padding: 10px 0px;
  146. }
  147. .products h2{
  148. font-size: 16px;
  149. padding: 2px 0px 3px 0px;
  150. margin: 0px;
  151. }
  152. .products p{
  153. color: #666;
  154. font-size: 10px;
  155. padding: 0px;
  156. margin: 0px;
  157. }
  158. .products img{
  159. float: left;
  160. padding-right: 10px;
  161. }
  162. .products  ul li a{
  163. display: inline;
  164. border: none;
  165. color: #666;
  166. text-decoration: underline;
  167. padding: 0px;
  168. margin: 0px;
  169. text-transform: none;
  170. }
  171. .products  ul li  a:hover{
  172. color: #000 !important;
  173. text-decoration: none;
  174. background: none !important;
  175. }

  177. .tutorials{
  178. width: 300px;
  179. }


  182. input{
  183. border:1px corporation #4A779D;
  184. padding: 3px 8px;
  185. margin-bottom: 8px;
  186. width: 164px;
  187. }
  188. label{
  189. padding: 0px 0px 4px 0px;
  190. display:block;
  191. }
  192. button{
  193. background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprFmx0ywr-FojQjQmWdDJ14cgCPd676DWfGS4cbC5k9Dbfyo6GgF05HoOtpn9YR6BLYwu1Upnsud4zsyYcP2GAhYy_BtB_GFjJPZHe9XJsrlkchaUUnQbHFwtvAOKIknD7-9WAUTHSCk/s1600/navigation.png) repeat-x scroll 0 0;
  194. color: #FFF;
  195. border:1px corporation #4A779D;
  196. padding: 4px 10px;
  197. width: 180px;
  198. }

  200. .emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}

  202. .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px corporation #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

  204. .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px corporation #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

  • Again search for </head> too higher upward it glue the next JQuery coding.
  4. <script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script> 
  5. <script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script> 
  6. <script>
  7. $(document).ready(function(){
  8. $("#nav-one").dropmenu();
  9. });
  10. </script>
  • Now Save your template yesteryear pressing Save template button.

Adding the Mega Drop Down Menu To Blogger

Now amongst inwards your template search for the next chunk of coding. Remember it is not necessary that yous receive got the exact same coding, simply facial expression for the similar coding. TIP: To Find the coding rapidly Search for "Header1" or "(Header)". 

  3. <div id='header-wrapper'> 
  4. <div class='headerleft'> 
  5. <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
  6. <b:widget id='Header1' locked='true' title=' (Header)' type='Header'/>
  7. </b:section> 
  8. </div>
Once yous receive got institute the Similar coding thus below it glue the next Mega Menu HTML Coding. 


  4. <ul id="nav-one" class="dropmenu"> 
  5. <li> 
  6.     <a href="#">Home</a> </li><li> 
  7.     <a href="#">Forum</a><ul> 
  8.         <li><a href="#">Support</a></li> 
  9. <li><a href="#">Help</a></li> 
  10. <li><a href="#">Examples</a></li>
  11. <li><a href="#">Your work</a></li>
  12. </ul> 
  13. </li> 
  14. <li> 
  15.     <a href="#item3">Downloads</a><ul> 
  16.        <li><a href="#">Tools</a></li> 
  17.        <li><a href="#">Office</a></li> 
  18.        <li><a href="#">Custom projects</a></li> 
  19. </ul> 
  20. </li>  
  21. <li> 
  22. <a href="#">Products</a> 
  23. <div class="products">
  24. <ul> 

  26. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh-wMkJwtZnTRoLp2OqpKNXwX491BuoCPIJzQQ8y5v_787iTC_dNIOGtvxaQBgjxuAD2ZoNYfiX6w9rMQCJfPNaASiuPg8VyUQHPc17srIU5UvaTqwzbf9Thb3_x_NEiTi0gh2TbI3Xx0/s1600/1.jpg" width="40" height="40" alt=" the basis of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inwards Blogger" border="0" /><h2>Featured Box</h2><p><a href="#">More data virtually this product</a></p></li> 
  28. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhnIalOt6XOxcAbN0l5_hlMow4_ARA9SoQvNdHN-d7amVYUuOtDL171iNDqsn0ZdKw9KUI83yzuhHeaR4NTHNx0qJ47U7fGb6sZCIh4gxvF6-TEiB3iFFBzwGrGcW-woImkyv6VdQ8F2Q/s1600/2.jpg" width="40" height="40" alt=" the basis of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inwards Blogger" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More data virtually this product</a></p></li> 
  30. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8RHcD573jeW34LzltGEUsoR6k_lLqGFG8oVRXNurNi7HJzTbAQB0BLLHuN6zkKFUDhQbf1h9K1Syf2QkHRiq9PPq8Wid854dmeBi1AUXu7ZVzgNiGfi_ye9GRk0-k0eEk_pEJyJv_ik/s1600/3.jpg" width="40" height="40" alt=" the basis of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inwards Blogger" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More data virtually this product</a></p></li> 
  31.  
  32. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8RHcD573jeW34LzltGEUsoR6k_lLqGFG8oVRXNurNi7HJzTbAQB0BLLHuN6zkKFUDhQbf1h9K1Syf2QkHRiq9PPq8Wid854dmeBi1AUXu7ZVzgNiGfi_ye9GRk0-k0eEk_pEJyJv_ik/s1600/3.jpg" width="40" height="40" alt=" the basis of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inwards Blogger" border="0" /><h2>Image Processor</h2><p><a href="#">More data virtually this product</a></p></li> 
  34. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRqTwc_y46Dy3qCmvLIAylKlOtwbSxwu2WiMIBcQ9SD8LNuG6xeRN2_O8ESra6Y-ONV30y-xQlX1NdjMY0Tjz64oBi56Os7Atsz_xRNJTjQ0oWJnqJGHAT_EY_rTFPKwQ9GD8M0W9gRE/s1600/5.jpg" width="40" height="40" alt=" the basis of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inwards Blogger" border="0" /><h2>Registry Class</h2><p><a href="#">More data virtually this product</a></p></li> 
  36. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh32iLSnbuxQRRhQLfSamqoyNkUwAuPVaJ8fskNlbOTDN2Abv1vDsXSdYDtoWgaw7C9B1JZOHtRUfRuX_Tg1ayquC6H7yiAe9BSBV70LqRbHaikzVHjnYRsbUrWTcndGB9pC5yWqX83_oM/s1600/6.jpg" width="40" height="40" alt=" the basis of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inwards Blogger" border="0" /><h2>Data Validation</h2><p><a href="#">More data virtually this product</a></p></li> 
  38. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG67bbGevLRJGHzfZWJS3WLsrlt1dsAR1T03xuYMGMsnMygojR_ed-ucE5wOu36o6rJ5p4WlrnEtJ9SSOM1n7nVrzAJNjEcNYYvszMdy6dEf0rqJ9EqFxo3Ld5Gv90_ZfbdD141nm_lk/s1600/7.jpg" width="40" height="40" alt=" the basis of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inwards Blogger" border="0" /><h2>Ajax Tables</h2><p><a href="#">More data virtually this product</a></p></li> 
  39. </ul>

  41. <div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
  42. </div>
  43. </li>
  44. <li> 

  46. <a href="#">Tutorials</a> 
  47. <div class="tutorials">
  48. <ul class="left"> 
  49. <li><a href="#">Javascript</a></li> 
  50. <li><a href="#">Python</a></li> 
  51. <li><a href="#">PHP</a></li> 
  52. </ul>
  53. <ul class="right"> 
  54. <li><a href="#">HTML/CSS</a></li> 
  55. <li><a href="#">ASP.NET</a></li> 
  56. <li><a href="#">Actionscript</a></li> 
  57. </ul>
  59.  <div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
  60. </div>
  61. </li>
  62. <li> 

  64. <a href="#">Links</a> <ul> 
  65.   <li><a href="#">Programming</a></li> 
  66.   <li><a href="#">Inspiration</a></li> 
  67.    <li><a href="#">My websites</a></li> 
  68.    <li><a href="#">Clients</a></li> 
  69.    <li><a href="#">Cool stuff</a></li> 
  70.    <li><a href="#">Sitebase</a></li> 
  71.    <li><a href="#">Other</a></li> 
  72. </ul> 
  73. </li>
  74. <li> 

  76. <a href="#">Subscribe Now</a> 
  77. <div class="emailsub">
  78.         <div class="emailupdatesform">
  79.         <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MYBLOGGERLAB', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your electronic mail here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your electronic mail here...&#39;;}" onfocus="if (this.value == &#39;Enter your electronic mail here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
  80. </li>
  81. </ul>
Customization:
Replace MYBLOGGERLAB amongst your RSS Feed Email Subscription Username.
Replace All Light Pink,Light Orange,Light Blue Links According to your needs.


From The Editor’s Desk:
We promise yous receive got enjoyed the feast, this calendar week nosotros receive got shared almost 3 totally unique widgets i.e. Twitter Man, Sticky Footer too this Mega Menu. Our Developers are busy inwards creating a novel Blogger Template thus come about your figures cross. If yous receive got whatever difficulty piece adding this Mega Menu experience gratuitous to enquire till thus Peace, Blessings too Happy learning.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)