1 Create A New Page
Go to Blogger Dashboard and select "Pages" on the left vertical menu. Then Press "New Pages" button to create a new page.
2 Set the Page's URL
Blogger does not allow a page's URL to be changed once it is set in. The system also automatically generated a page URL by some formula which does NOT result in SEO friendly URL. It would be ideal to control the URL so that it's human friendly, which also means it's SEO friendly.Fortunately a page's URL is generated according to the page's title if we enter the page title and save the page quickly enough. So to control the page's url to be like "myblog.blogspot.com/p/member.html", type "member" in the page title and save the page immediately. Do it quickly so that Blogger would not assign some system generated url that is not human friendly.
After you have saved the page, you can come back to change the page title and the URL will not be changed once it was created.
3 Paste the HTML and Javascript codes into the page
The codes need to be copied as HTML in the page. Copy the following codes in the box and paste the code as "HTML" in the page.First go to your Page Editor and switch to HTML code by clicking the HTML button:
Then copy the HTML and Javascripts in the following box and paste it into your new page as HTML. Use your mouse to hightlight and select all the contents within the box. Then press "Ctrl-C" to copy the contents into computer's paste buffer. Go to the blogger page editor and paste "Ctrl-V" into the page as HTML content.
4 Save your page and that's it
<form id="member-form">
<input id="memberfieldID" name="id" type="text" placeholder="Member id Here"/><br/>
<input id="membersearchBTN"type="submit" value="Search"/>
</form>
<br/>
<div id='form-result-message' style='font-size:1.2em; color:#25a186;'></div>
<br/>
Type 1234 on above input field will redirect you to /p/1234.html page, which is the only member page that exists.<br/>
<br/>
Type any other input on the above input field will result in unsuccessful search message.<br/>
<br/>
<style>
#memberfieldID{
font-size: 1.5em;
}
#memberfieldID::placeholder { color: #88b5ab; font-size:1em;font-style: italic;}
#membersearchBTN{
font-size: 1.5em;
background-color:#25a186;
color:#fff;
border: none;
margin-top: 5px;
border-radius: 5px;
cursor: pointer;
}
</style>
<script type="text/javascript">
var QueryString = function () {
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
var query_string = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = decodeURIComponent(pair[1]);
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(decodeURIComponent(pair[1]));
}
}
return query_string;
}();
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function httpGet(theUrl)
{
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function getRootUrl() {
return window.location.origin?window.location.origin+'/':window.location.protocol+'/'+window.location.host+'/';
}
var rootURL=getRootUrl();
var member_id = getParameterByName("id");
if (member_id) {
url=rootURL+"p/"+member_id+".html";
var content=httpGet(url);
if (content.indexOf("Sorry, the page you were looking for in this blog does not exist.") !== -1){
document.getElementById('memberfieldID').value = member_id;
document.getElementById('form-result-message').innerHTML = "Search Result:<br/>** We cannot find a page for member "+member_id+". Please try again. **";
} else {
window.location.replace(url);
}
};
</script>