Wednesday, June 5, 2019

How To Practice A Mega Drib Downwardly Card Inwards Blogger

Over the previous pair of years, the globe of the Blogosphere has progressed quite handsomely. Nowadays Bloggers as well as 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 as well as fifty-fifty visitors admire those blogs which are highly professional person inward damage of their Layout, Header, Footer, Menu as well as etc. Therefore, having a construct clean as well as perfect navigation are the basic needs of each as well as every blog. However, bulk of blogs are yet using the one-time navigation menus which kills the consummate presentation of a blog. If your site’s navigation is non perfect as well as hence how tin y'all await your visitors to search your website inward 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 inward ane place, hence your visitors won’t direct hold to pass much fourth dimension inward searching for a specific category of their interest. On the other hand, it volition continue your spider web log facial expression construct clean as well as 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 y'all tin easily alter its color according to your desired needs. It is sparse inward size hence 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 unopen to of the initiative features of the Drop card which volition non entirely amuse y'all but your visitors would dearest to play amongst it.
  • It supports almost every browser i.e. Firefox, Chrome as well as Internet explorer.  
  • You tin easily alter its color to check the color system of your website.
  • Unlike other menus, entirely ane JavaScript is used hence it is extremely lite weighted.
  • It has a cute Email Subscription box inward the drib downward card that volition maximize your subscribers.

How To Create a Mega Drop Down Menu inward Blogger:

Just similar our previous tutorials, the steps are pretty much straightforward as well as globe hardly direct hold 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: venture 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 venture #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 venture #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 venture #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 venture #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 venture #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 venture #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 venture #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 venture #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 venture #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> as well as inward a higher house 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 inward your template search for the next chunk of coding. Remember it is not necessary that y'all direct hold the exact same coding, but facial expression for the similar coding. TIP: To Find the coding speedily 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 y'all direct hold constitute the Similar coding as well as hence 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 globe of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inward Blogger" border="0" /><h2>Featured Box</h2><p><a href="#">More data most 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 globe of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inward Blogger" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More data most 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 globe of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inward Blogger" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More data most 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 globe of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inward Blogger" border="0" /><h2>Image Processor</h2><p><a href="#">More data most 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 globe of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inward Blogger" border="0" /><h2>Registry Class</h2><p><a href="#">More data most 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 globe of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inward Blogger" border="0" /><h2>Data Validation</h2><p><a href="#">More data most 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 globe of the Blogosphere has progressed quite handsomely How To Create a Mega Drop Down Menu inward Blogger" border="0" /><h2>Ajax Tables</h2><p><a href="#">More data most 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 e-mail here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your e-mail here...&#39;;}" onfocus="if (this.value == &#39;Enter your e-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 y'all direct hold enjoyed the feast, this calendar week nosotros direct hold shared almost iii totally unique widgets i.e. Twitter Man, Sticky Footer as well as this Mega Menu. Our Developers are busy inward creating a novel Blogger Template hence continue your figures cross. If y'all direct hold whatever difficulty spell adding this Mega Menu experience costless to enquire till as well as hence Peace, Blessings as well as Happy learning.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)