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 coloum will change with iso file name before click ok check there once now we need click on the start button First we need select the la
Read more

Error:yum install telnet Loaded plugins: refresh-packagekit, rhnplugin This system is not registered with RHN. RHN support will be disabled. Setting up Install Process No package telnet available. Error: Nothing to do

Image
Solution:                 Here I will install the rhel 6.4 in vmware and I will try to install the packages in rehl but I will get this error which are mentioned the top For yum installations we want register with redhat But here I have an another solutions Required RHEL DVD image If have image just connect to a vm or copy it locally Here I will connect to a vm ware Goto the below command #cd /etc/yum.repos.d/ This source file for reading the yum command Then type the ls command to view is there any files available on there If there no files available just create new file what our wish with the .repo extension ,here I will create a file name dvd.repo Here no files available after create file Open the file and edit it like below   Now to try to install the packages with the yum command not only for telnet you will use it for all of yum instillation
Read more