How add a menu in blogger


In blogger most we are using the basic template style only but blogger able to allow the custom design also here I will now goto add the menu bar in my blog
Step 1:After login to the blogger goto the template and select the custom html

Step 2: then click on the jump to widget and select the header 1

Step 3: now  below coding page will open

Step 4: add the following line to the yellow color marked place
<ul class='Orange' id='menu_wrap'><li class='button'><a href='add your blogger label link'>your button name</a></li><li class='button'><a href=' add your blogger label link '>Windows Server</a></li><li class='button'><a href=' add your blogger label link '>you button name</a></li><li class='button'><a href=' add your blogger label link '> your button name </a></li><li class='button'><a href='add you facebook or google profile link'> your button name </a></li> <li class='search'><a href='#'/><input placeHolder='Search' type='text'/></li></ul>
Step 4:And also add the css code link below just paste it

For this goto begin of the and find below button and click on it will expended

It will expened like below

After content just paste the below css code with out changes
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:800px;height:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Blue,.Blue .button a{color:#d9eef7;background: #00adee;border-right:solid 1px #0078a5;background: -moz-linear-gradient(top, #00adee 0%, #0078a5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00adee), color-stop(100%,#0078a5));background: -webkit-linear-gradient(top, #00adee 0%,#0078a5 100%);background: -o-linear-gradient(top, #00adee 0%,#0078a5 100%);background: -ms-linear-gradient(top, #00adee 0%,#0078a5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00adee', endColorstr='#0078a5',GradientType=0 );background: linear-gradient(top, #00adee 0%,#0078a5 100%);}.Blue .button a:hover,.Blue .button a:focus{background: #0095cc;background: -moz-linear-gradient(top, #0095cc 0%, #00678e 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0095cc), color-stop(100%,#00678e));background: -webkit-linear-gradient(top, #0095cc 0%,#00678e 100%);background: -o-linear-gradient(top, #0095cc 0%,#00678e 100%);background: -ms-linear-gradient(top, #0095cc 0%,#00678e 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0095cc', endColorstr='#00678e',GradientType=0 );background: linear-gradient(top, #0095cc 0%,#00678e 100%);}.Blue .button a:active{background: #0078a5;background: -moz-linear-gradient(top, #0078a5 0%, #00adee 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0078a5), color-stop(100%,#00adee));background: -webkit-linear-gradient(top, #0078a5 0%,#00adee 100%);background: -o-linear-gradient(top, #0078a5 0%,#00adee 100%);background: -ms-linear-gradient(top, #0078a5 0%,#00adee 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0078a5', endColorstr='#00adee',GradientType=0 );background: linear-gradient(top, #0078a5 0%,#00adee 100%);}.search{position:relative;float:right;margin-top:10px;}.search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: inset 1px 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}.search a:before {width:6px;height:6px;border:2px solid  #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}.search a:after {left:24px;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}li a:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li a:before, li a:after {margin:-7px 0 0;background: #000;}
step 5: now click on the save template


Now check the blogger the button added successfully




Comments

Post a Comment

Popular posts from this blog

Enable the SSL in jetty web server

Image
Enable the SSL in jetty web server Operating system : Ubuntu 16.04.03 Jetty server :9.4.7 First enter the following command java -jar start.jar –-add-to-startd=ssl This command will make a directory in the jetty called start.d and also copy the file ssl.ini ,Copy the keystore from the modules/ssl/keystore to etc/ssl We need to add the two lines in the ssl.ini /opt/Jetty_Ssl/start.d Add this two lines end of the document --module=ssl --module=https Find my ssl.ini file below Goto modifying the editing on the start.ini We need to enter the following line in start.ini in end of the document jetty.ssl.port=8443 Find my start.ini file below # --------------------------------------- # Module: ssl # Enables a TLS(SSL) Connector on the server. # This may be used for HTTPS and/or HTTP2 by enabling # the associated support modules. # --------------------------------------- --module=ssl ### TLS(SSL) Connector Configuration ## Connector hos...
Read more

How to install Edubuntu in Windows through oracle VM

Image
How to install EdUbuntu in oracle virtual box My system ======== Host machine : windows 10 Virtual software : Oracle virtual box Processor           : core i5 RAM                 : 8GB   For download the edubutu goto this site https://www.edubuntu.org/download Once you get the iso image file Click on the new button After getting the create virtual machine console fill the following details Now click on the create button Now provide the hard disk space  and click on the create button Once its created goto setting on the top Need to choose the image from the Storage option and click on the empty   below the controller:IDE ,Then click on the choose virtual optical disk file Browse the image file and select Edubuntu iso file Now click on the open and once its selected the properly the empty...
Read more

How to configure the apache2 in the ubuntu 16.04 Step by Step

Image
How to configure the apache2 in the ubuntu 16.04 Step by Step Refer the video for configure apache2 in youtube For installing the apache2 configuration first we need to update the apt get repository now we need to install the apche2 with the following command         #apt-get install apache2 Give the following command to start the apache2     #service apache2 star     t for checking the service status     #service apche2 status Now we going to allow the apche2 service through firewall for that we need to check the firewall status this will shows which are the ports allowed by the firewall now we enable the apche2 with following command           #ufw app list   this command will show the which are the service available in the ubuntu16.04 here showing following the apache apache – only 80 por...
Read more