பொதுவாக blog அல்லது website உருவாக்கி அதிகமான post-களை உள்ளிடு செய்தால் தான் நமக்கு AdSense போன்ற விளம்பர நிறுவனங்கள் வருமானத்தை தரும்.
இந்த ஒரு பக்க website என்பது எதோ ஒரு ,tool-ஐ செயல்பட வைப்பதன் மூலம் பணம் ஈட்டலாம்.
எடுத்துக்காட்டாக,
IFSC finder
YouTube video downloaded
Audio compressor
Image resizer
Age calculator
AdSense approval checker
Etc.,
இது போன்ற ஆன்லைன் டூல்-களை ஒரு பக்க website-ஆக உருவாக்கினால் அதற்கு பெயர் தான் one page website.
நாம் இன்று பார்க்கப்போவது இது போன்ற one page website -ஐ எப்படி உருவாக்கலாம்?
Single page website domain
முதலில் நம் website-க்கு தேவையான top level domain.அதனை வாங்கிக்கொள்ளவும்.உதாரணத்திற்கு இந்திய வங்கிகளின் IFSC code மற்றும் தொலைபேசி எண் ஆகியவற்றை தரும் ஒரு பக்க வெப்சைட் உருவாக்கம் செய்யலாம்.
இலவச blogger வெப்சைட்
இலவசமாக responsive template-கள் இணையதளத்தில் கிடைக்கிறது.அதனை டவுன்லோடு செய்து எளிமையாக கூகிள்-ன் ப்ளாக்கரில் import செய்து single page website -ஐ உருவாக்கலாம்.
ப்ளாக்கரில் ஒரு பக்க இணையதளத்தை உருவாக்கி அதிக பார்வையாளர்கள் பெரும்பட்சத்தில் அது கூகிளில் முதல் இரு பக்கங்களில் ரேங்கிங் பெறும்.இதனால் அதிக பார்வையாளர்களை பெற முடியும் மற்றும் வருமானம் ஈட்ட முடியும்.
கற்றுக்கொள்ளும் விதமாக HTML+CSS code இதனுடன் இணைத்துள்ளேன்.
IFSC Finder
<!DOCTYPE html>
<?xml version="1.0" encoding="UTF-8" ?>
<head>
<link rel="icon" href="Favicon URL" sizes="30x30">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!---pop code str--->
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.gallary{
width:100%;
}
.gallary div{
float:left;
margin:0 right;
</style>
<!---Privacy Policy str-->
<button type="button" class="btn btn-primary" style="float:right;margin:auto" data-toggle="modal" data-target="#myModal">Privacy Policy</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Privacy Policy</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!----- Disclaimer code str----------->
<button type="button" class="btn btn-primary" style="float:right;margin:auto" data-toggle="modal" data-target="#myModal">Disclaimer</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Disclaimer</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!---bank code str--->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" /><link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://drive.google.com/uc?id=1nPdfEuUV7yNTj5Bztf3n_ZEc0YtWwPfn" />
<!-- partial:index.partial.html -->
<br />
<br />
<div class="row">
<div id="form-content" class="center-align">
<form class="col s12" onsubmit="submitCode()">
<div class="row">
<div class="col s12">
<h2 class="teal-text">Address By IFSC</h2>
</div>
<div class="col m2"></div>
<div class="input-field col m6 s12">
<i class="material-icons prefix">account_balance</i>
<input id="ifsc_code" type="text" class="validate" maxlength="11" minlength="11" required autofocus />
<label for="ifsc_code">TYPE BANK IFSC CODE</label>
</div>
<div class="input-field col m2 s12 ">
<button class="btn">Search</button>
</div>
<div class="col s2"></div>
</div>
</form>
</div>
</div>
<div class="row">
<div id="bank" class="center-align"></div>
</div>
<center>
<p>
Description
</p></center>
<div class="center-align">
<h6> <a href="https://github.com/razorpay/ifsc/wiki/API" target="_blank"></a> </h6> <a href="https://www.bankaddressbyifsccodes.in/" class="red-text" target="_blank"></a>
<br />
ROCKER MIX TEACH <a href="#" class="teal-text" target="_blank"></a>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js'></script><script src="./script.js"></script>
<script src='https://drive.google.com/uc?id=1txEqLydpduenxFSZLv0Ro0nCTVpTqflR'></script>
<html b:css='false' b:responsive='true' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title>Bank Dddress Details Through IFSC Code</title>
<b:skin><![CDATA[
body{background:#fff}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'>
.jpeg)
.jpeg)
0 Comments