We know that before you execute this on blog you verify Authors Live Demo to know how the authors implemented on their BTFLAB blog.
Advantages for adding this widget menu
- Mashable Menu widget based on CSS3 and HTML code
- Option to distinct perfect 6 color combination
- Easy customizable code adding by following simple methods
- This widget no image used or Javascript and Performs well on all browsers
How to Add Mashable Drop Down Menu Bar for Blogger?
Sign into your blogger accountClick on “EDIT HTML” link Tab (Before your do implement on your blog backup template if anything goes wrong you can reuse it again)
Now search for code
]]></b:skin>After finding the code copy the below code and paste above to it
/* BC Mashable Blue Menu Ends*/div.mashmenu { /* colors */ background: none repeat scroll 0 0 #F3F6F9; /* color of the nav */ border-bottom: 1px solid #DCE5EE; /* border bottom : no hover color */ border-top: 1px solid white; color:black;}
div.mashmenu div.fnav { /* colors */ border:2px solid #F3F6F9; /* border top,left,right : no hover color */ border-bottom:none;}div.mashmenu div.fnav:hover{ /* colors */ border:2px solid #0054a2; /* border top,left,right : hover color */ border-bottom:none; background:white;}div.mashmenu div.fnav a.flink { /* colors */ color:#0054a2;}div.mashmenu div.fnav div.allContent { /* colors */ background: none repeat scroll 0 0 #F3F6F9; /* color of the nav */ border:2px solid #0054a2; /* border bottom,left,right : hover color */ border-top:none; color:black;}div.mashmenu div.fnav div.allContent a.slink { /* colors */ color:#0054a2;}div.mashmenu div.fnav div.allContent a.slink:hover { /* colors */ background-color: #5E88B4; color:white;}div.mashmenu div.fnav div.snav:hover div.insideContent{ /* colors */ background: white; border-left:1px solid white;}div.mashmenu div.fnav div.insideContent a { /* colors */ color:#0054a2; border-bottom:1px solid #5E88B4; /* border bottom : hover color */}div.mashmenu div.fnav div.insideContent a span:hover{ /* colors */ background-color: #5E88B4; color:white;}
div.mashmenu div.feat a.flink { /* colors */ color:#0054a2;}div.mashmenu div.feat a.flink:hover{ /* colors */ background-color: #5E88B4; color:white; border:none;}/* ===== BCMashable Blue Menu Ends======= */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}/* ====================*/div.mashmenu a { text-decoration:none; }div.mashmenu img { border:2px solid white; }div.mashmenu div.fnav div.allContent{ display:none; }div.mashmenu div.fnav div.allContent div.insideContent{ display:none; }div.mashmenu { font-family: "Arial", "Verdana", sans-serif; font-size:13px; width: 100%; position: relative; padding: 3px 0 0;}div.mashmenu div.fnav { margin:0px 0px 0px 3px; display:inline-block; position:relative; /* css3 */ -moz-border-radius:4px 4px 0px 0px; -webkit-border-radius:4px 4px 0px 0px; border-radius:4px 4px 0px 0px;}div.mashmenu div.fnav a.flink { padding:10px; display:block;}div.mashmenu div.fnav div.allContent { position:absolute; top:33px; left:-2px; max-width:550px; max-height:250px; overflow:hidden; /* css3 */ -moz-border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px; border-radius:0px 0px 4px 4px;}div.mashmenu div.fnav div.allContent:hover{ width:550px; height:246px;}div.mashmenu div.fnav:hover div.allContent { display:block;}div.mashmenu div.fnav div.allContent a.slink { margin:1px 0px 1px 1px; padding:10px; display:block; width:140px;}div.mashmenu div.fnav div.snav:hover div.insideContent{ display:block; position:absolute; top:0px; left:165px; width:410px; height:100%; padding-left:10px;}div.mashmenu div.fnav div.insideContent span.featured ,div.mashmenu div.fnav div.insideContent a { width:365px; float:left; overflow:hidden; padding:5px 0px; position:relative;}div.mashmenu div.fnav div.insideContent a img { float:left; width:100px; height:60px; padding-right:10px;}div.mashmenu div.fnav div.insideContent a span { position:absolute; top:20px; left:120px; padding:3px 3px ;}div.mashmenu div.feat { float:right; border:none; margin-right:10px; margin-top:5px;}div.mashmenu div.feat:hover{ border:none;}div.mashmenu div.feat a{ float:left; font-size:12px; border:none; padding:5px 5px;}div.mashmenu div.feat a:hover{ /* css3 */ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}/* =================== */
After successful adding the above code now, search for code (As per your Template style)
<div id='header-wrapper'>or
<header>
After finding the code, carefully observe that the below code must be added after
</b:section> </div>Copy the below code
<div class="mashmenu"> <div class="fnav"> <a href="#" class="flink" >Social Media + </a> <div class="allContent"> <div class="snav" > <a href="#" class="slink" >All Social Media</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> <div class="snav" > <a href="#" class="slink" >Facebook</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> <div class="snav" > <a href="#" class="slink" >Google+</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> <div class="snav" > <a href="#" class="slink" >Twitter</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> <div class="snav" > <a href="#" class="slink" >Youtube</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> </div><!-- end allContent --> </div><!-- end fnav1 --><div class="fnav"> <a href="#" class="flink" >Videos </a> </div><!-- end fnav --> <div class="feat"> <a>Featured : </a> <a href="Your-FB" class="flink" >Facebook </a> <a href="Your-G+" class="flink" >Google+ </a> <a href="Your-RSS" class="flink" >RSS</a> </div><!-- end fnav feat --> </div><!--end mashmenu -->
Customization:
- Change Write-Title-Of-Featured-Post-Here with your Post description
- Change Your-Image with the image URLs of definite posts.
- Change Your-Post-URL with the URLs of your posts.
- Change Your-FB, Your-G+ and Your-RSS with your Social ID / usernames
- For adding extra drop down menu to the above code, search for code <!-- end fnav1 --> and copy the below code and add the below code after to it. You can add
<div class="fnav"> <a href="#" class="flink" >Social Media + </a> <div class="allContent"> <div class="snav" > <a href="#" class="slink" >All Social Media</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> <div class="snav" > <a href="#" class="slink" >Facebook</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> <div class="snav" > <a href="#" class="slink" >Google+</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> <div class="snav" > <a href="#" class="slink" >Twitter</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> <div class="snav" > <a href="#" class="slink" >Youtube</a> <div class="insideContent"> <span class="featured" >Featured in Social Media</span> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> <a href="Your-Post-URL" > <img src="Your-Image" alt="" /> <span>Write-Title-Of-Featured-Post-Here</span> </a> </div><!-- end insideContent --> </div><!-- end snav --> </div><!-- end allContent --> </div><!-- end fnav1 -->
After successful adding and modification of the above code now “Save the Template” and preview your experiment.
Appreciation
If you enjoyed the above article and we helped you little bit then Subscribe to US for ensuing posts-Don't miss.Forward your suggestions and views via comments we always appreciates your valuable comments.
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments