Monday, 9 December 2013

How To Embed The Contact Form

How To Embed The Contact Form

1. First, we have to add Blogger's contact form to the sidebar. Don't worry though, we will hide it later. Go to your blogger dashboard >> Layout >> Add a Gadget >> Contact Form. [this tutorial will help you out.]

2. Once you have added the widget to your blog's sidebar, copy the following code:

<form name='contact-form'>
<div>Name: </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Email *</div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Message *</div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
Code Credits: BW

3. Paste it wherever you want the Contact Form to appear. Example: When you are in the "editor" mode of your post/page, you can easily switch to the HTML mode and paste the code there.

Blogger HTML Mode

The advantage of adding this code is that you can edit it as you want! Suppose you wanna display some different text instead of "Name" or "Email". Suppose you wanna add images. Suppose you wanna style the contact form using CSS!

All this is possible as long as you have a basic working knowledge of HTML and/or CSS :)

Okay, so we have successfully embedded the contact form! Now the only thing left is to hide the Contact Form widget from the sidebar! Follow these simple steps:

How To Hide The Sidebar Widget


1. Go to your blogger dashboard >> Template >> Edit HTML

2. Find the following piece of code:

]]></b:skin>

3. Paste the following code directly above/before ]]></b:skin>

#ContactForm1{display: none !important;}

4. Hit Save template and you're done!

It was THAT simple! The Contact Form widget is hidden but it is still registered!
Important: The widget will still appear in your Layout tab. Make sure you don't remove it from there!.

Sunday, 8 December 2013

How To Add Drop Down Menu On Blogspot?


1. Go to blogger Dashboard and click on Layout.
2. Then Click on Add Gadget (Below Header not on sidebar) and Choose Html/JavascriptWidget.
3. Now Paste below code into it.
<div id='mbwnavbar'>
      <ul id='mbwnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
         <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Category #1</a></li>
                <li><a href='#'>Sub Category#2</a></li>
            </ul>
        </li>
      </ul>
    </div>
4. Now Change the text in Bold with appropriate label and also replace the url highlighted in red color (#).
5. To add another tab to the drop down menu then add below code before </ul>. or delete that code from above code to remove any menu.
 <li>
       <a href='#'>Contact</a>
 </li> 
6. Now we will add CSS, Go to Blogger Dashboard and click on Template and click onEdit Html. Backup your template before doing this.


7. Then Search for below code.

]]></b:skin>
8. Paste the below code above the code you searched in Step 7.
/**MBW mybloggersworld.com Navgation bar **/
#mbwnavbar {
    background: #464849;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;
}
#mbwnav {
    margin: 0;
    padding: 0;
}
#mbwnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbwnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left:1px solid #333;
    border-right:1px solid #333;
    height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
   color: #FFF;
   display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
      
}
#mbwnav li a:hover, #mbwnav li a:active {
    background: #028490;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
              
}
#mbwnav li {
    float: left;
    padding: 0;
}
#mbwnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbwnav li ul a {
    width: 140px;
}
#mbwnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
    left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
    left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
    position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
    background: #028490;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
  
}
#mbwnav li li a:hover, #mbwnavli li a:active {
    background: #70b6bd;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
}
 9. Save the template and you will have drop down menu added to your blog.

Customizing Above Widget

This part is completely optional. If the above provided plugin does not match the theme of your blog and want to customize to match template of your blog then change someHex code listed below.
  • Change #464849 to change background color of navigation bar which is currently dark grey.
  • Change #028490 to change the color of tab on mouse hover.
  • Change #028490 to change the color of Drop down menu
  • Change #70b6bd to change the color of Drop down on mouse hover.




Monday, 18 November 2013

Run Windows v1.01




Run Windows v1.01

Did anybody used Microsoft Windows v1.01. If not then here is a simulation for this version of Microsoft Windows.

 

click HERE  to see online simulation


Saturday, 2 November 2013

Facebook in Urdu Nastaleeq


Facebook, Twitter and Urdu Wikipedia  in Urdu Nastaleeq



  • Click on Install Stylish on this Plugin Page.
  • Refresh your browser or vist again on Plugin Page.and click Install with Stylish. 
  • Restart your browser and see facebook Urdu font in Nastaleeq.





Friday, 1 November 2013

Truecaller


Truecaller
With Truecaller, you can know the name of unknown number. Truecaller works on web site and  mobile app. Mobile app show you the name of unknown caller as their call is receiving on your mobile. The size of database of Truecaller is 700 millions contact across the world. Database consists on the number of app database and collected from social network website. To use this online you need to log in with your email or social site account. To visit website for search and download app please click HERE.





Steps to use online
1. Enter your desire number in search bar.
2. Log into you email.
3. See the result, if that is in database.



Wednesday, 16 October 2013

Should I Remove It


Should I Remove It helps you to decide which programs you should uninstall from your computer

The program named Should I Remove It helps you to make a better decision about uninstalling a program. If you found any program harmful for your pc just uninstall.

When you install Should I Remove It, It will make a list of installed program. This list if based upon the user experience who are already using Should I Remove It and remove any program by using this software. This software make a database of user experience and based upon database statistics, this program suggest to you the names of prgram you should delete from your pc.


Click HERE to visit website of software and download the software.