Doctor blogger : Drop down menu πάνω από τον τίτλο της σελίδας

Σύνδεση στον λογαριασμό σας Blogger
Σχεδίαση / Επεξεργασία HTML

Aλλαγες στην επεξεργασία HTML στο blogger

ctrl F λειτουργεί μόνον όταν ο κέρσορας είναι μέσα στο πρότυπο, και ανοίγει ένα κουτάκι, οπου γράφετε τη λέξη κλειδί η τη φράση που ψάχνετε, και αμέσως χρωματίζονται οι αντίστοιχες φράσεις

Το τμήμα κώδικα body{ που θα βρείτε λίγο παρακάτω από το ξεκίνημα του κώδικα της σελίδας σας αντικαταστήστε το με τον παρακάτω κώδικα¨:
(LIVE DEMO)

body{ background:#22232E; padding-top:41px;/*match height of fixed header*/ margin-top:-41px;/*match height of fixed header*/ margin:0; color:#999999; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } a:link{color:#9a9694;text-decoration:none;outline:none} a:visited{color:#999999;text-decoration:none;outline:none} a:hover{color:#ffffff;text-decoration:underline;outline:none} a img{border-width:0}

Αυτό μέχρι να φτάσετε στον κώδικα του /* Header ----------------------------------------------- */

Βρείτε τώρα με Ctrl + F την ετικέτα ]]></b:skin>
Πριν από αυτήν επικολλήστε τον παρακάτω κώδικα:

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic {background:#900622 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7hrTJSakNpVXqVU_87KMkU4yGjS2pZUcc9j5zwYKVfK9upefrs9VM63F_kOWH-rGW2fdlD33M1zkZgLDwRoMglmA73gTv_M7SdNhI-72SXIddD6eZR2dhzjClg5gfjW9HRLFp2gyJpuJA/s1600/menudown.gif) repeat-x top center;width:100%;margin:0 auto;padding:0 auto;border-bottom:1px solid #333} #menuwrapper {width:930px;margin:0 auto;height:41px;} .clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;} #menubar {width:100%;} #menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:Arial;} #menubar a {display: block;text-decoration: none;padding: 13px 12px 13px 12px;font-size:12px;font-weight:bold;text-transform:none;color:#d1d8e5;border-left:1px solid #84001A} #menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizgje79HB_VzyrR-hKAOxgsk9NLr99xHofgVSqOflTFJGpDnD6SCQJxaM_UddKFtf7C_x8nMyHkq6FrdOuhY9t20jbh4zaPvkH7hSd6PT7ka8YTHYsQzWXcBF-rySO20KkgMUHi4zZw3s/s1600/arrow.gif);background-repeat: no-repeat;padding: 13px 20px 13px 12px;background-position: right center;} #menubar li {float: left;position: relative;} /* hide from IE mac \*/ #menubar li {position: static; width: auto;} /* end hiding from IE5 mac */ #menubar li ul, #menubar ul li {width:180px;} #menubar ul li a {text-align:left;color:#d1d8e5;padding: 6px 12px;font-size: 12px;font-weight:bold;text-transform:none;font-family:Arial;border:none;} #menubar li ul {z-index:100;position: absolute;display: none;background:#7D0019;padding-bottom:5px;} #menubar li ul {-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;} #menubar li ul {-moz-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6);filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;} #menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#7D0019;color:#d1d8e5;text-decoration:none;} #menubar li:hover ul, #menubar li.hvr ul {display: block;} #menubar li:hover ul a, #menubar li.hvr ul a {color:#d1d8e5;background-color:transparent;text-decoration:none;} #menubar li ul li.hr {border-bottom:1px solid #9A001F; border-top:1px solid #5D0013; display:block; font-size: 1px; height: 0px; line-height: 0px; margin:4px 0; } #menubar ul a:hover {background-color: #3B0B0B!important;color: #d1d8e5 !important;text-decoration:none;} /* Fixed Position ----------------------------------------------- */ #inner{padding-top:41px;} #fixed {position:fixed;top:0;left:0;width:100%;height:41px;z-index:999;} #fixedinner{text-align:center;background:transparent;height:41px;position:relative;z-index:999;} * html, * html body{overflow-y:hidden;height:100%;} * html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; } * html #fixedinner{margin-right:17px;} * html #fixed {position:absolute;} * html #outer-wrapper {height:100%;overflow:auto}

Αποθηκεύστε το πρότυπό σας.
Πηγαίνετε τώρα στα "Στοιχεία Σελίδας"
Επιλέξτε προσθήκη gadget - Html/JavaScript και επικολλήστε τον παρακάτω κώδικα

<div id='fixed'>
 <div id='fixedinner'>
 <div id='menuwrapperpic'>
 <div id='menuwrapper'>
 <ul id='menubar'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a> <ul>
<li><a href='#'>Facebook</a></li>
<li class='hr'></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Linkedin</a></li>
<li class='hr'></li>
<li><a href='#'>Myspace</a></li>
<li><a href='#'>Delicious</a></li>
<li class='hr'></li>
<li><a href='#'>StumbleUpon</a></li>
<li><a href='#'>FriendFeed</a></li>
</ul>
</li>
<li><a href='#'>Colors</a></li>
<li><a href='#'>Columns</a></li>
<li><a href='#'>Styles</a></li>
<li><a href='#'>Topics</a></li>
<li><a href='#'>Sidebars</a></li>
<li><a href='#'>Most Dwonloads</a></li>
<li><a class='trigger' href='#'>More</a> <ul>
<li><a href='#'>Editorial</a></li>
<li class='hr'></li>
<li><a href='#'>Off Topic</a></li>
</ul>
</li>
<li><a href='#'>Submit Themes</a></li>
</ul>
<br class='clearit'/> </div>
<div style='clear:both;'>
</div>
</div>
</div>
<!-- end fixedinner --> </div>
<!-- end fixed -->

Αντικαταστήστε τα # με δικά σας links τύπου π.χ. http://www.bloggertipsandtricks.net και βάλτε τους τίτλους που εσείς θέλετε. Μπορείτε να προσθέσετε ή να αφαιρέσετε ετικέτες για μεγαλύτερο ή μικρότερο menu αναλόγως τις ανάγκες της σελίδας σας.