spd
Hi Friends.......Today I am sharing tutorial for Creating a online screenshot generator tool . You can capture screenshot of a site with desired size of image. Here is My Site For Example http://webshot.mobie.in
My Site is best viewed in smartphones and desktop !! because i am using bootstrap and jquery for my site.
So lets start-
STEP(1) - Copy the code given below and paste it in "_header" file.
<!-- Sets initial viewport load and disables zooming --><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/><!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><link href="http://picdroid.mobie.in/bootstrap.min.css" rel="stylesheet"/><script src="http://vmstatic.wapkafile.com//js/jquery-1.10.2.min.js"></script><script src="http://vmstatic.wapkafile.com//js/bootstrap.min.js"></script><link href="http://vmstatic.wapkafile.com//css/web.css" rel="stylesheet"/><link rel="stylesheet" href="http://netaji420.tk/css/amelia.css"/>
<style type="text/css">
.btn-blue { background-color: hsl(195, 79%, 43%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#56c5eb", endColorstr="#1798c4"); background-image: -khtml-gradient(linear, left top, left bottom, from(#56c5eb), to(#1798c4)); background-image: -moz-linear-gradient(top, #56c5eb, #1798c4); background-image: -ms-linear-gradient(top, #56c5eb, #1798c4); background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0%,#56c5eb), color-stop(100%, #1798c4)); background-image: -webkit-linear-gradient(top, #56c5eb, #1798c4); background-image: -o-linear-gradient(top,#56c5eb, #1798c4); background-image: linear-gradient(#56c5eb, #1798c4); border-color: #1798c4 #1798c4 hsl(195, 79%, 38%); color: #333 !important; text-shadow: 0 1px 1px rgba(255, 255, 255,0.33); -webkit-font-smoothing: antialiased;}
</style>
<style type="text/css">img {border-radius: 6px;box-shadow: 4px 4px 4px #fff;-moz-box-shadow: 4 4 4px #fff;-webkit-box-shadow: 4 4 5px #fff;box-shadow: 4px 4px 4px #fff;}
.btn-custom { background-color: hsl(0, 0%, 16%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5b5b5b", endColorstr="#282828"); background-image: -khtml-gradient(linear, left top, left bottom, from(#5b5b5b), to(#282828)); background-image: -moz-linear-gradient(top, #5b5b5b, #282828); background-image: -ms-linear-gradient(top, #5b5b5b, #282828); background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%, #282828)); background-image: -webkit-linear-gradient(top, #5b5b5b, #282828); background-image: -o-linear-gradient(top,#5b5b5b, #282828); background-image: linear-gradient(#5b5b5b, #282828); border-color: #282828 #282828 hsl(0, 0%, 11%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33); -webkit-font-smoothing: antialiased; }
</style>
<style type="text/css">
.question{ background-color: hsl(195, 79%, 43%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#56c5eb", endColorstr="#1798c4"); background-image: -khtml-gradient(linear, left top, left bottom, from(#56c5eb), to(#1798c4)); background-image: -moz-linear-gradient(top, #56c5eb, #1798c4); background-image: -ms-linear-gradient(top, #56c5eb, #1798c4); background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0%,#56c5eb), color-stop(100%, #1798c4)); background-image: -webkit-linear-gradient(top, #56c5eb, #1798c4); background-image: -o-linear-gradient(top,#56c5eb, #1798c4); background-image: linear-gradient(#56c5eb, #1798c4); border-color: #1798c4 #1798c4 hsl(195, 79%, 38%); color: #333 !important; text-shadow: 0 1px 1px rgba(255, 255, 255,0.33); -webkit-font-smoothing: antialiased;}
</style>
Copy code
<style type="text/css">
.btn-blue { background-color: hsl(195, 79%, 43%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#56c5eb", endColorstr="#1798c4"); background-image: -khtml-gradient(linear, left top, left bottom, from(#56c5eb), to(#1798c4)); background-image: -moz-linear-gradient(top, #56c5eb, #1798c4); background-image: -ms-linear-gradient(top, #56c5eb, #1798c4); background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0%,#56c5eb), color-stop(100%, #1798c4)); background-image: -webkit-linear-gradient(top, #56c5eb, #1798c4); background-image: -o-linear-gradient(top,#56c5eb, #1798c4); background-image: linear-gradient(#56c5eb, #1798c4); border-color: #1798c4 #1798c4 hsl(195, 79%, 38%); color: #333 !important; text-shadow: 0 1px 1px rgba(255, 255, 255,0.33); -webkit-font-smoothing: antialiased;}
</style>
<style type="text/css">img {border-radius: 6px;box-shadow: 4px 4px 4px #fff;-moz-box-shadow: 4 4 4px #fff;-webkit-box-shadow: 4 4 5px #fff;box-shadow: 4px 4px 4px #fff;}
.btn-custom { background-color: hsl(0, 0%, 16%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5b5b5b", endColorstr="#282828"); background-image: -khtml-gradient(linear, left top, left bottom, from(#5b5b5b), to(#282828)); background-image: -moz-linear-gradient(top, #5b5b5b, #282828); background-image: -ms-linear-gradient(top, #5b5b5b, #282828); background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%, #282828)); background-image: -webkit-linear-gradient(top, #5b5b5b, #282828); background-image: -o-linear-gradient(top,#5b5b5b, #282828); background-image: linear-gradient(#5b5b5b, #282828); border-color: #282828 #282828 hsl(0, 0%, 11%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33); -webkit-font-smoothing: antialiased; }
</style>
<style type="text/css">
.question{ background-color: hsl(195, 79%, 43%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#56c5eb", endColorstr="#1798c4"); background-image: -khtml-gradient(linear, left top, left bottom, from(#56c5eb), to(#1798c4)); background-image: -moz-linear-gradient(top, #56c5eb, #1798c4); background-image: -ms-linear-gradient(top, #56c5eb, #1798c4); background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0%,#56c5eb), color-stop(100%, #1798c4)); background-image: -webkit-linear-gradient(top, #56c5eb, #1798c4); background-image: -o-linear-gradient(top,#56c5eb, #1798c4); background-image: linear-gradient(#56c5eb, #1798c4); border-color: #1798c4 #1798c4 hsl(195, 79%, 38%); color: #333 !important; text-shadow: 0 1px 1px rgba(255, 255, 255,0.33); -webkit-font-smoothing: antialiased;}
</style>
Copy code
STEP(2)-- now create two new files in filebrowser ..for example 1st file- "downloadscreenshot.html" and 2nd file "screenshot.html"
STEP(3)-- Now open "Screenshot.html" and paste the following code
<div class="btn btn-custom" style="border-radius:7px; width:90%;"><div style="padding-top: 25px;padding-bottom: 25px;padding-right: 10px;padding-left: 10px;">
<fieldset><form method="get" action="downloadscreenshot.html?format={_$format|}&site={_$site|}&y={_$y|}&x={_$x|}" class="form-horizontal"><input type="hidden" name=":get-done:" value="a"/><font color="red"></font><div class="form-group"><label class="control-label" for="inputDefault" align="left"><h4>┋ URL of Website</h4></label><input type="text" name="site" value="" class="form-control" id="inputDefault"/></div><div class="form-group"><label class="control-label" for="inputDefault"><h4>┋ Width</h4></label><input name="x" type="text" class="form-control" value="{_$x|240}" id="inputDefault"/></div>
<div class="form-group"><label class="control-label" for="inputDefault"><h4>┋ Height</h4></label><input type="text" name="y" class="form-control" value="{_$y|320}" id="inputDefault"/></div><div class="form-group"><label for="select" class="col-lg-2 control-label"><h4>┋ Image Type</h4></label><div class="col-lg-10"><select class="form-control" id="select" name="format"><option value="{_$format |JPEG}">JPEG</option><option value="{_$format |PNG}">PNG</option></select></div></div><div align="center"><div id="formsubmitbutton"><input type="Submit" value="✔ Generate" class="btn btn-blue" style="width:320;"></input></div></div></form></fieldset></div></div>
Copy code
<fieldset><form method="get" action="downloadscreenshot.html?format={_$format|}&site={_$site|}&y={_$y|}&x={_$x|}" class="form-horizontal"><input type="hidden" name=":get-done:" value="a"/><font color="red"></font><div class="form-group"><label class="control-label" for="inputDefault" align="left"><h4>┋ URL of Website</h4></label><input type="text" name="site" value="" class="form-control" id="inputDefault"/></div><div class="form-group"><label class="control-label" for="inputDefault"><h4>┋ Width</h4></label><input name="x" type="text" class="form-control" value="{_$x|240}" id="inputDefault"/></div>
<div class="form-group"><label class="control-label" for="inputDefault"><h4>┋ Height</h4></label><input type="text" name="y" class="form-control" value="{_$y|320}" id="inputDefault"/></div><div class="form-group"><label for="select" class="col-lg-2 control-label"><h4>┋ Image Type</h4></label><div class="col-lg-10"><select class="form-control" id="select" name="format"><option value="{_$format |JPEG}">JPEG</option><option value="{_$format |PNG}">PNG</option></select></div></div><div align="center"><div id="formsubmitbutton"><input type="Submit" value="✔ Generate" class="btn btn-blue" style="width:320;"></input></div></div></form></fieldset></div></div>
Copy code
STEP-(4)- Now open "downloadscreenshot.html" file and paste the following code
<div align="center"><h2>{_$site|}</h4></br></div></br><div align="center"><div class="carousel-inner"><div class="item active"><img src="http://mini.s-shot.ru/{_$x|}x{_$y|}/{_$x|}/{_$format|}/?{_$site|}"/></div></div></div></br></br></br><br/><br/><div align="center"><button class="btn btn-default btn-lg btn-block"><a href="http://mini.s-shot.ru/{_$x|}x{_$y|}/{_$x|}/{_$format|}/?{_$site|}"><h2><font color="black">Download Screenshot</font></h2></a></button></div>
Copy code
Copy code
Thats it Your online screenshot tool is created....if any problem occurs then please reply.....thanks
Junior