Category Archives: Html

facebook-like-box

How to display Facebook like box on website ?

Facebook like box is allows owner to provide his users to get latest updates of his website. Facebook like box is also be known as Facebook fan box. There is lots of social networking sites are present in the market now but today Facebook is more powerful way to explore your business worldwide. So i am going to tell you that how to display Facebook like box in your website so your visitors can easily be with you directly from your website. There is lots of people who are using plugin for this but i think there is no need to use any plugin this is very simple process to do and you don’t need any coding knowledge for this. Kindly follow these easy steps to show Facebook like box in your website.

1) Go to https://developers.facebook.com/docs/plugins/like-box-for-pages.

2) After going to like box page you have to fill some options shown below. See the screenshot.
facebook-like

3) After this you have to get like box code from clicking Get Code button and select the iframe tab and copy that code and paste it on your website where you want to display the like box and you’r done.
facebook-code

This is very simple process to get like box in your website. Hope this will helps you if you have any question or comments please feel free to ask.
Thanks for reading.



dropdown

Easy steps to create dropdown menu upto 3 levels

Most of developers who are start learning coding have been facing a lot’s of problem to create dropdown navigation which is very important part of a website. So this tutorial is to them who don’t know how the drop down navigation actually work and how it is very easy to create. So now we can start with HTML code first follow these methods and you will be master in dropdown menu. Creating dropdown menu is very easy as ever before.

Create HTML Code

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
      <ul>
         <li><a href="#">LevelA</a></li>
        <li><a href="#">Leve1B</a>
           <ul>
              <li><a href="#">Leve2A</a></li>
              <li><a href="#">Leve2B</a>
                 <ul>
                    <li><a href="#">Leve3A</a></li>
                </ul>
             </li>
         </ul>
     </li>
   <li><a href="#">Leve1C</a></li>
  </ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>	

The above code shows you the drop down menu of about us page.Now if your are run this on browser it looks very messy for this we need to create some CSS for setting this up well. So we have to make the dropdown appear below the parent page like we did right in about page so About us page is parent and Level 1, Level 2 etc is a child pages of About us page.



Find below CSS to make the stylish drop down and it works fine with that parent page. Sometimes peoples create dropdown but they actually didn’t know that how to make child pages related to that parent and it should appear below to the parent. So this CSS will help you to how does it work.

Style to Naviagtion

/* — Set up main naviagtion —- */
ul{
  margin:0;
  padding:0;
  list-style:none;
}

ul ul{
  display:none;
}

ul li{
  float:left;
  font:14px arial;
  position:relative;
}

ul li a{
  text-decoration:none;
  color:#ffffff;
  background-color:#000000;
  padding:10px 12px;
}

ul li a:hover{
background-color:#999999;
}

/* —– Level 1 —-*/
ul li:hover ul{
  display:block; 
  position:absolute;
  width:100px;
  background-color:#000000;
  margin-top:10px;
}

ul li:hover ul li{
float:none;
padding:10px 0;
}

ul li:hover ul li:hover{
  background-color:#999999;
  position:relative;
}

ul li:hover ul li a{
  background-color:transparent;
}

/* —– Level 2 —-*/
ul li:hover ul li ul{
  display:none;
}

ul li:hover ul li:hover ul{
  display:block;
  position:absolute;
  left:100px;
  top:0;
}

/* —– Level 3 —-*/
ul li:hover ul li ul li ul{
  display:none !important;
}

ul li:hover ul li ul li:hover ul{
  display:block !important;
  position:absolute;
  left:100px;
  top:0;
}

Hope this tutorial may be helpful to you and if you have any question or comments about this you can please fill this form below. I would like to help you anytime.
Good Luck !