Sunday, August 19, 2012

Show a Message To User By Clicking on Button



When We Click on any button in some PRO website's OR in PRO blogs we show the Pop-Up message with some kind of message for user which gives some instruction about the website OR blog OR about the special notifications for user.


What is This....?

If you want to show the visitor a message when he or she clicks on a button or a link you would maybe want to try this code.


Live Demo



Click Here


Codes

  • Copy below codes
  • Paste where you want to show

<style>
/*--- Message To User By Click On Button By www.fblatest.in --- */

.btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    margin-center:12px;
    float:center;
    padding:7px 21px;
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
/*--- Message To User By Click On Button By www.fblatest.in --- */
</style>

<!-- This Script by www.fblatest.in, Coded By: Krishna | Designing By: Hemant Verma-->

<!-- Start of Message Alert -->
<!-- Use this button in a form to pop-up a message when the user clicks it -->
<center>
<form>
<input type="button" value="Message" class="btnLogin" onClick="alert('Write Your Message Here'); return true">
</form>
</center>
<!-- End of Message Alert -->




Make Changes....!

  • Replace Message it with your button name.
  • Replace Write Your Message Here it with your message



Enjoy and Have Fun With Your Messages






Thanks for Visit Here Like Us on Facebook.
If Any Problem, Ask in Comments Follow US on Twitter.

Thursday, August 9, 2012

Add Google's Official Translator Widget



Google always provides us new kind of services and new kinds of plugins for our website and blogs. As we previously use the Flag Translating Widget for Blogger. Now we can use this Google's New Service named as Website Translator. This is very important and updated version of Google Translating Widget for Website and Blog's and we it's very easy and simple.





Google Says....!

Since we first launched the Website Translator plugin back in September 2009, more than a million websites have added the plugin. While we’ve kept improving our machine translation system since then, we may not reach perfection until someone invents full-blown Artificial Intelligence. In other words, you’ll still sometimes run into translations we didn’t get quite right.


Add Google's Official Translator Widget

 
  • Enter Your Website OR Blog's URL
  
  •  Click on Next
  • Choose Display mode as Horizontal, Vertical OR Dropdown Only.

  • Click on Get Code
  • Now Copy the meta code and paste that code before </head> 
  • Save Your Template.
  • Copy Next Code and paste where you want to show your Translate Widget.


Output Looks Like This....!

  • Select text and Output look like this.




Enjoy Your Translate Widget 







Thanks for Visit Here Like Us on Facebook.
If Any Problem, Ask in Comments Follow US on Twitter.

Wednesday, August 8, 2012

London Olympic Google Doodles 2012 for Blogger



Google world's most popular search engine supports to the London Olympics 2012 with making doodles and show them on the home page of Google and also we can play the events like today is basket ball event in the Olympics then Google sets the basket ball doodle on their home page.



Add Huddle Olympic Doodle


  • Copy below code and paste in our HTML Editor
  • Click on Preview Button.
<iframe allowtransparency="false" frameborder="1" height="260px" scrolling="no" src="http://www.google.com/logos/2012/hurdles-2012-hp.html" width="550px"></iframe></div>


Add Basket Ball Olympic Doodle


  • Copy below code and paste in our HTML Editor
  • Click on Preview Button.
 <iframe allowtransparency="false" frameborder="1" height="260px" scrolling="no" src="http://www.google.com/logos/2012/basketball-2012-hp.html" width="550px"></iframe></div>


Add Slalom Canoe Olympic Doodle


  • Copy below code and paste in our HTML Editor
  • Click on Preview Button.
  <iframe allowtransparency="false" frameborder="1" height="260px" scrolling="no" src="http://www.google.com/logos/2012/slalom_canoe-2012-hp.html" width="550px"></iframe>




Live Demo of Doodles....! Play Here



  • Double Click on Play button for start Huddle game.
  • Press Space Bar for Jump.




  • Click on Play button for start Basket Ball game.
  • Press two times Space Bar to drop ball into the net OR press double click for the same action. 




  • Click on Play button for start Slalom Canoe game.
  • Use arrow buttons OR move mouse with click to move the direction of boat.




Enjoy With Google Hacked Content....! 






Thanks for Visit Here Like Us on Facebook.
If Any Problem, Ask in Comments Follow US on Twitter.

Tuesday, August 7, 2012

Create A Calculator Using JavaScript CSS HTML



AS we all know that mathematics is very important for us and we can create any calculation using calculator and we can also create and develop calculator by using all of the programming language like C, C++, Java, etc. bt today we willl give the Calculator which is made by HTML CSS and JavaScript.

You can easily use calculator on your Blog/website very easily.This Calculator is made by using JavaScript, CSS, HTML.


Codes of Calculator













Thanks for Visit Here Like Us on Facebook.
If Any Problem, Ask in Comments Follow US on Twitter.

Sunday, August 5, 2012

Show HTML and Other Codes With Code Language Name



As we give previously Show HTML and Other Codes in blogger, Now this is new and updated widget with tutorials of blogger where you can show your codes in blogger with coding language name like jQuery, HTML, CSS, JavaScript etc, this tutorial is very simple and very highly customize with CSS Codes. It's a very Pro widget be'coz it include the orange bar where you can mention the code name with your site name.




Series of Show Codes in Blogger






Add CSS Codes of Widget

  • Login to Blogger > Dashboard
  • Go to Design > Edit HTML
  • Search for 
]]></b:skin>
  • Paste below code before ]]></b:skin>
/*------Codes By www.fblatest.in------*/


pre{
position:relative;
background:#333;
color:white;
font-family:Monaco, Courier, MonoSpace;line-height:1.8;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font-size:12px;padding:10px;margin:0 0 25px 0;overflow:auto}pre code{padding:0;color:white;background:#333;white-space:pre
}


pre[rel]{padding-top:40px}pre[rel]:after{content:attr(rel);position:absolute;top:0;background:#F3A01E;padding:4px;left:0;right:0;font-size:36px;line-height:0;color:white;font:bold 20px "myriad-pro-1",Verdana;


/*------Codes By www.fblatest.in------*/
  •  Save Your Template
 

How to Add it in Post....?

  • After adding the CSS part
  • Go to Posting > Edit HTML 
  • Paste below code where you want to show the HTML CSS and others codes.
<pre class="lang-js" rel="HTML Codes By www.fblatest.in"><code><p>Write Your Codes Here
</code></pre>


Make Changes....!

  • Replace it HTML Codes By www.fblatest.in with coding language and with your site URL.
  • Replace Write Your Codes Here it with your codes.




If Any Problem Comes, Ask In Comments






Thanks for Visit Here Like Us on Facebook.
If Any Problem, Ask in Comments Follow US on Twitter.

Wednesday, August 1, 2012

Student Registration Form in HTML CSS For Project



A simple and professional Student Registration Form which is create in HTML and CSS and which has a very professional look and very easily create with using HTML and designed by the CSS language.




Codes for S.R.F

<html>
<head>
<title>Student Registration Form</title>
<style type="text/css">
h3{font-family: Calibri;
font-size: 22pt;
font-style: normal;
font-weight: bold;
color:SlateBlue;
text-align: center;
text-decoration: underline }
table{
font-family: Calibri;
color:white;
font-size: 11pt;
font-style: normal;
text-align:; background-color: #eff3f6;
color: #000; border-collapse: collapse;
border: 2px solid navy}
table.inner{border: 0px}

.btnLogin
{
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:15px;
background:#a1d8f0;
background:-moz-linear-gradient(top, #badff3, #7acbed);
background:-webkit-gradient(linear, center top,
center bottom, from(#badff3), to(#7acbed));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#badff3', EndColorStr='#7acbed')";
border:1px solid #7db0cc !important;
cursor: pointer;
padding:11px 16px;
font:bold 11px/14px Verdana, Tahomma, Geneva;
text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
color:#fff;
-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px,
rgba(0,0,0,0.1) 0 1px 1px;
-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px,
rgba(0,0,0,0.1) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px,
rgba(0,0,0,0.1) 0 1px 1px;
margin-center:12px;
float:center;
padding:7px 21px;
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
background:#a1d8f0;
background:-moz-linear-gradient(top, #7acbed, #badff3);
background:-webkit-gradient(linear, center top, center bottom,
from(#7acbed), to(#badff3));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}

</style>
</head>

<body>
<h3>STUDENT REGISTRATION FORM</h3>
<form action="form.php" method="POST">

<table align="center" cellpadding = "10">
<!----- First Name ------------------->
<td>FIRST NAME</td>
<td><input type="text" name="First_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Last Name -------------------->
<tr>
<td>LAST NAME</td>
<td><input type="text" name="Last_Name"
maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Date Of Birth ----------------->
<tr>
<td>DATE OF BIRTH</td>

<td>
<select name="Birthday_day" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>

<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>

<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>

<option value="31">31</option>
</select>

<select id="Birthday_Month" name="Birthday_Month">
<option value="-1">Month:</option>
<option value="January">Jan</option>
<option value="February">Feb</option>
<option value="March">Mar</option>
<option value="April">Apr</option>
<option value="May">May</option>
<option value="June">Jun</option>
<option value="July">Jul</option>
<option value="August">Aug</option>
<option value="September">Sep</option>
<option value="October">Oct</option>
<option value="November">Nov</option>
<option value="December">Dec</option>
</select>

<select name="Birthday_Year" id="Birthday_Year">

<option value="-1">Year:</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>

<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>

<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
</select>
</td>
</tr>

<!----- Email Id -------------->
<tr>
<td>EMAIL ID</td>
<td><input type="text" name="Email_Id" maxlength="100" />
</td>
</tr>

<!----- Mobile Number --------->
<tr>
<td>MOBILE NUMBER</td>
<td>
<input type="text" name="Mobile_Number" maxlength="10" />
(10 digit number)
</td>
</tr>

<!----- Gender ---------------->
<tr>
<td>GENDER</td>
<td>
Male <input type="radio" name="Gender" value="Male" />
Female <input type="radio" name="Gender" value="Female" />
</td>
</tr>

<!----- Address -------------->
<tr>
<td>ADDRESS <br /><br /><br /></td>
<td><textarea name="Address" rows="4" cols="30">
</textarea></td>
</tr>

<!----- City ----------------->
<tr>
<td>CITY</td>
<td><input type="text" name="City" maxlength="30" />
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Pin Code ------------->
<tr>
<td>PIN CODE</td>
<td><input type="text" name="Pin_Code" maxlength="6" />
(6 digit number)
</td>
</tr>

<!----- State --------------->
<tr>
<td>STATE</td>
<td><input type="text" name="State" maxlength="30" />
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Country ------------->
<tr>
<td>COUNTRY</td>
<td><input type="text" name="Country" value="India"
readonly="readonly" /></td>
</tr>

<!----- Hobbies ------------->

<tr>
<td>HOBBIES <br /><br /><br /></td>

<td>
Drawing
<input type="checkbox" name="Hobby_Drawing" value="Drawing" />
Singing
<input type="checkbox" name="Hobby_Singing" value="Singing" />
Dancing
<input type="checkbox" name="Hobby_Dancing" value="Dancing" />
Sketching
<input type="checkbox" name="Hobby_Cooking" value="Cooking" />
<br />
Others
<input type="checkbox" name="Hobby_Other" value="Other">
<input type="text" name="Other_Hobby" maxlength="30" />
</td>
</tr>

<!----- Qualification---------->
<tr>
<td>QUALIFICATION <br /><br /><br /><br />
<br /><br /><br /></td>

<td>
<table class="inner">

<tr>
<td align="center"><b>Sl.No.</b></td>
<td align="center"><b>Examination</b></td>
<td align="center"><b>Board</b></td>
<td align="center"><b>Percentage</b></td>
<td align="center"><b>Year of Passing</b></td>
</tr>

<tr>
<td>1</td>
<td>Class X</td>
<td><input type="text" name="ClassX_Board"
maxlength="30" /></td>
<td><input type="text" name="ClassX_Percentage"
maxlength="30" /></td>
<td><input type="text" name="ClassX_YrOfPassing"
maxlength="30" /></td>
</tr>

<tr>
<td>2</td>
<td>Class XII</td>
<td><input type="text" name="ClassXII_Board"
maxlength="30" /></td>
<td><input type="text" name="ClassXII_Percentage"
maxlength="30" /></td>
<td><input type="text" name="ClassXII_YrOfPassing"
maxlength="30" /></td>
</tr>

<tr>
<td>3</td>
<td>Graduation</td>
<td><input type="text" name="Graduation_Board"
maxlength="30" /></td>
<td><input type="text" name="Graduation_Percentage"
maxlength="30" /></td>
<td><input type="text" name="Graduation_YrOfPassing"
maxlength="30" /></td>
</tr>
<tr>
<td>4</td>
<td>Masters</td>
<td><input type="text" name="Masters_Board"
maxlength="30" /></td>
<td><input type="text" name="Masters_Percentage"
maxlength="30" /></td>
<td><input type="text" name="Masters_YrOfPassing"
maxlength="30" /></td>
</tr>


<tr>
<td></td>
<td></td>
<td align="center">(10 char max)</td>
<td align="center">(upto 2 decimal)</td>
</tr>
</table>

</td>
</tr>

<!----- Course ------------->
<tr>
<td>COURSES<br />APPLIED FOR</td>
<td>
BCA
<input type="radio" name="Course_BCA" value="BCA">
B.Com
<input type="radio" name="Course_BCom" value="B.Com">
B.Sc
<input type="radio" name="Course_BSc" value="B.Sc">
B.A
<input type="radio" name="Course_BA" value="B.A">
</td>
</tr>

<!----- Submit and Reset ------>
<tr>
<td colspan="2" align="center">
<input type="submit" class="btnLogin" value="Submit"
tabindex="4">
<input type="submit" class="btnLogin" value="Reset"
tabindex="4">
</td>
</tr>
</table>

</form>

</body>
</html>

Make Changes....!

  •  Replace with your own form action <form action="form.php" method="POST">



Thanks for Visit Here Like Us on Facebook.
If Any Problem, Ask in Comments Follow US on Twitter.

Saturday, July 28, 2012

Blogger Dynamic Page Loading Effect



Many websites like Facebook, Google, Blogger having their own loading effect, when we visit on site and site take some loading time and in that time shows the loading effects on the all sites, you can also add a diffrenet and PRO loading effect like Blogger Dynamic Loading Effect with a bar.




Add Blogger Dynamic Page Loading Effect

  • Login to Blogger > Dashboard 
  • Go to Design > Edit HTML
  • Search for
</head>
  • Paste below code above </head>
<style>
/*  Blogger Dynamic Style Page Loading Effect By www.fblatest.in */
#fb-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJ213Jl0TONL-GO09tFjdv9qsoaMG2BCJoAelsS08cgRIWCRRMA2T-wi8__e28rUNE-wWSZqBwZ_5nLSKM0QMCC_jtd_uo4QE6LlJZVWnZoUsIWR-DmdiffrsM_YNXQu_WXf4al7QnlWu/s1600/index.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.FB #fb-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#fb-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #FF6600;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#fb-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("FB");


$("#header").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#fb-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#fb-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>
  • Now Search for
<body>
  • Paste below code after <body>
<div id='fb-loading'><div id='fb-progress-bar'></div><div id='fb-loader'>Loading...</div></div>
  • Save Your Template





If Any Problem, Ask In Comment 





Thanks for Visit Here Like Us on Facebook.
If Any Problem, Ask in Comments Follow US on Twitter.