Check out my Tutorial On Making a movie website and making a monthly income of $500 - $1500.
http://makeamoviemoney.blogspot.co.uk/
Thanks a lot. Sorry for such a short post, Just so busy with work.
Sunday, 1 September 2013
Friday, 30 August 2013
Adding an advanced media player to your movie website.
Adding a more advanced media player to your movie website.
This is another take on the last episode we made: We are going to implement this into your website:
This is a really nice designed media player using the HTML5 and it is designed by VideoJs. Go to the website and you can even customize your media player design and download it as a new package. But for this tutorial we will be using the default package. It is so simple and can get your movie website / business up and running straight away!
Lets get started. By now you should already know how to make a header footer and body.
So lets place all of this code in a centered body.
But first we need to link the JavaScript you can download these and host them yourself but it is easy for me to explain using the provided urls'.
This is another take on the last episode we made: We are going to implement this into your website:
This is a really nice designed media player using the HTML5 and it is designed by VideoJs. Go to the website and you can even customize your media player design and download it as a new package. But for this tutorial we will be using the default package. It is so simple and can get your movie website / business up and running straight away!
Lets get started. By now you should already know how to make a header footer and body.
So lets place all of this code in a centered body.
But first we need to link the JavaScript you can download these and host them yourself but it is easy for me to explain using the provided urls'.
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
Now we need to set our parameters. as seen in the last tutorial we start with the <video> Tag.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster ="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
Now I shall break down the code:
<video id="example_video_1"
giving the id for the css for further editing
class="video-js vjs-default-skin"
Declaring the skin base
controls preload="auto" width="640" height="264"
Now this is setting the controls to auto and the desired width and height of the player
poster ="http://video-js.zencoder.com/oceans-clip.png"
The image that the browser shows before you press play
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
Now telling you where should I locate the movie, so you declare the source and type of movie you can tell this
by looking at the extension type which is .mp4
The final code is this:
<body> <center><video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster ="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> </video> </center> </body>
Hope you enjoy and keep updated for my next post!
Thursday, 29 August 2013
How to create an Movie Website.
How to create an Movie Website.
We will be using CSS and Html5 To create a simple Media player.
In future tutorials I will be showing you how to incorporate other players into your website. But for now we will use this:
Firstly you want to create a header, body, Footer. Which can all be found out on how to make by going here:
http://webtechtutz.blogspot.co.uk/2013/08/website-layout-part-1-tutorial-header.html
http://webtechtutz.blogspot.co.uk/2013/08/website-layout-part-2-tutorial-body.html
http://webtechtutz.blogspot.co.uk/2013/08/PageWrappingCss.html
Now once you have this I would firstly start by putting it in its own div.
SO lets make a proper start:
<Div id="MoviePlayer">
</Div>
HTML5 has designed a video tag for ease of use so lets begin we need to use <video> </video>
Inside these tags we can set the width and height of the player. So we so this by simply adding these properties.
<video width="320" height="240" controls> </video>
Now we add the source of the movie/ where it is located by path:
<source src="./Media/movie.mp4" type="video/mp4">
Or you can change the movie type along with the extension. as you see below. In the third line of code.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
easy stuff. now the browsers that this doesnt work in:
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES
Now adding the code that will play and do all the things you would expect of a basic media player:
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
and we need to use javascript to tell if play is paused or playing or not.
<script>
var Video=document.getElementById("video1");
function playPause()
{
if (Video.paused)
Video.play();
else
Video.pause();
}
function Big()
{
Video.width=560;
}
function Small()
{
Video.width=320;
}
function Normal()
{
Video.width=420;
}
</script>
using button onclicks function this is made easy and simply add this directly above your code in the div that you set and it is all ready to go!
Thanks again, I might make a site tutorial like putlocker also if you comment that you like.
We will be using CSS and Html5 To create a simple Media player.
In future tutorials I will be showing you how to incorporate other players into your website. But for now we will use this:
Firstly you want to create a header, body, Footer. Which can all be found out on how to make by going here:
http://webtechtutz.blogspot.co.uk/2013/08/website-layout-part-1-tutorial-header.html
http://webtechtutz.blogspot.co.uk/2013/08/website-layout-part-2-tutorial-body.html
http://webtechtutz.blogspot.co.uk/2013/08/PageWrappingCss.html
Now once you have this I would firstly start by putting it in its own div.
SO lets make a proper start:
<Div id="MoviePlayer">
</Div>
HTML5 has designed a video tag for ease of use so lets begin we need to use <video> </video>
Inside these tags we can set the width and height of the player. So we so this by simply adding these properties.
<video width="320" height="240" controls> </video>
Now we add the source of the movie/ where it is located by path:
<source src="./Media/movie.mp4" type="video/mp4">
Or you can change the movie type along with the extension. as you see below. In the third line of code.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
easy stuff. now the browsers that this doesnt work in:
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES
Now adding the code that will play and do all the things you would expect of a basic media player:
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
and we need to use javascript to tell if play is paused or playing or not.
<script>
var Video=document.getElementById("video1");
function playPause()
{
if (Video.paused)
Video.play();
else
Video.pause();
}
function Big()
{
Video.width=560;
}
function Small()
{
Video.width=320;
}
function Normal()
{
Video.width=420;
}
</script>
using button onclicks function this is made easy and simply add this directly above your code in the div that you set and it is all ready to go!
Thanks again, I might make a site tutorial like putlocker also if you comment that you like.
Wednesday, 28 August 2013
ASP.Net Tutorial 1 Free and Easy
ASP.Net Tutorial 1
The basics:
Using c# code above your HTML to hold variables:
The basics:
Using c# code above your HTML to hold variables:
@{ } <!DOCTYPE html>
Then you can add a object such as date and time:
var currentDateTime = DateTime.Now;
so then it looks like this:
@{
var currentDateTime = DateTime.Now;
and then you can implement the variable into your html such as this:
<body>
<h1>Helloe</h1>
<p>WebTechTuts</p>
<p>Right now it's @currentdatetime PM</p>
</body>
Now with using the above steps we can make a simple calculator.
var a = 4;
var b = 5;
var theSum = a + b;
using the basic programming numeracy skills you can then incorporate that code
into a body tag like we learnt above.
IF Statements
if(Whatever){
message = "Welcome";
}
This is bassically showing you if whatever = something then messagebox = welcome
Very basic more coming very soon this is getting harder as we go through so keep studying!
Tuesday, 27 August 2013
Make money with Ad Shortener
Hey lets make even more money online!
Also if you are wondering about my promised ASP.NET Tutorials do not worry I am not ignoring them I am just getting my head around the syntax and different web forms used.
Okay lets get started. So obviously you need an account. Sign up here: http://adf.ly/UiFvf
Sign in and it should look like this:
now you want to shorten a link so go to here on the page:
shorten your link and place it on your website. People click and you make money as they are redirected all 100% safe.
Thanks for reading and come back soon!
Also if you are wondering about my promised ASP.NET Tutorials do not worry I am not ignoring them I am just getting my head around the syntax and different web forms used.
Okay lets get started. So obviously you need an account. Sign up here: http://adf.ly/UiFvf
Sign in and it should look like this:
Thanks for reading and come back soon!
Make Money With NeoBux! Easy & Short
- Go to http://www.neobux.com/ and sign up
- Now you have logged in and come to the main page
- you want to click view advertisements
- and from their you have a page of ads
- Simply click and click the red dot and you are done.
- See the FAQ or Forum for info on payments!
This is my second money making tutorial. Comment if you want more.
Monday, 26 August 2013
Setting up ASP.NET With Pictures
Setting up ASP.NET
Today I am going to start off with a simple installation of ASP.NET. To some this might be complicated or to others it maybe very easy, but still I will show you how to do so. Lets begin!
3. Simply Click Install at the bottom right of the installation wizard
4. Now click accept at the terms and conditions page
5. And wait for it to finish downloading, This will take a while aprox: 30-40 mins.
6. Now click finish and you are done.
Now to start up the software:
You need to click register online for your free key:
Goto the hyperlink and then enter your basic information and receive your free key.
Now you are done well done.
Get ready for another tutorial tomorrow.
Today I am going to start off with a simple installation of ASP.NET. To some this might be complicated or to others it maybe very easy, but still I will show you how to do so. Lets begin!
- Download from this website ASP.NET Download Page
- Open your downloaded File and come to this Page:
4. Now click accept at the terms and conditions page
5. And wait for it to finish downloading, This will take a while aprox: 30-40 mins.
6. Now click finish and you are done.
Now to start up the software:
Goto the hyperlink and then enter your basic information and receive your free key.
Get ready for another tutorial tomorrow.
Sunday, 25 August 2013
Do you want ASP.NET ?
Do you want ASP.NET ?
I have decided to learn ASP.NET, I have got told by some good friends that it would be good for some of you guys to learn also as it is very powerful and it is a server-sided web application framework designed to produce dynamic web pages.
These will be step by step tutorials! All from the beginning to end and Ill help anyone who needs help on the way. I am a quick learner so I will be producing a tutorial every day with high quality pictures so you can see exactly what I am doing.
If you would like to see me do this then comment below or comment on where you found my link.
Thanks a lot!
Saturday, 24 August 2013
Hello People.
Today I have code the sample of the first part of the bootstrap tutorial series.
I have used and read over the bootstrap documentation and looked at some of its example templates.
It seems very easy and I have just made a menu and some simple pre-formated text.
This is design for beginners and If you want to learn more keep in touch!
Okay so lets get right into this simple tutorial.
1. BootStrap works upon divs. and uses its set containers in its source files.
2. We need to link to our source files. using this simple template. you might have to change your paths a bit.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3. Now we can add the navbar container.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap Tutorial</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#Hello">Hello</a></li>
<li><a href="#Nye">Nye</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
As you can see above it is all pretty easy. its based upon an easy to use table like structure on what you want.
Okay lets move onto the text. #SoSimple!
<div class="starter-template">
<br></br>
<h1>BootStrap Tutorial</h1>
<p class="lead">BootStrap TutorialBootStrap TutorialBootStrap TutorialBootStrap TutorialBootStrap Tutorial</p>
</div>
</div><!-- container -->
easy stuff really. I do not think I will make anymore bootstrap tutorials as I think it is to easy and no need for it as there is plenty already out their.
So thank you and Next we shall cover more HTML and making money.
http://pastebin.com/BhmWPxxq
Today I have code the sample of the first part of the bootstrap tutorial series.
I have used and read over the bootstrap documentation and looked at some of its example templates.
It seems very easy and I have just made a menu and some simple pre-formated text.
This is design for beginners and If you want to learn more keep in touch!
Okay so lets get right into this simple tutorial.
1. BootStrap works upon divs. and uses its set containers in its source files.
2. We need to link to our source files. using this simple template. you might have to change your paths a bit.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3. Now we can add the navbar container.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap Tutorial</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#Hello">Hello</a></li>
<li><a href="#Nye">Nye</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
As you can see above it is all pretty easy. its based upon an easy to use table like structure on what you want.
Okay lets move onto the text. #SoSimple!
<div class="starter-template">
<br></br>
<h1>BootStrap Tutorial</h1>
<p class="lead">BootStrap TutorialBootStrap TutorialBootStrap TutorialBootStrap TutorialBootStrap Tutorial</p>
</div>
</div><!-- container -->
easy stuff really. I do not think I will make anymore bootstrap tutorials as I think it is to easy and no need for it as there is plenty already out their.
So thank you and Next we shall cover more HTML and making money.
http://pastebin.com/BhmWPxxq
Friday, 23 August 2013
BootStrap Tutorial Part 1 { Introduction }
BootStrap Tutorial Part 1 { Introduction }
A quick overview and insight at the Css Framework called BootStrap.
Bootstrap is a Css framework design for ease of use and powerful mobile first front-end framewor.To get started:
http://getbootstrap.com/getting-started/
Look over their documentation as it has some easy to learn templates and such for beginners to practice upon.
Good Websites for templates:
https://wrapbootstrap.com/
http://bootswatch.com/
http://inspiretrends.com/twitter-bootstrap-templates/
In The up and coming tutorials I will be showing you this powerful framework at its best. Stay Tuned!
Thanks again ashley
Thursday, 22 August 2013
Short Update: BootStrap
Now that I have completed my 2nd out of 3 beginner tutorial of Layout of a website. I will now be looking over bootstrap which is a css framework. You can check that out HERE.
Now I plan to finish the layout tutorial and then move onto this. But I need new suggestions on what you guys needs help or want me to explain or teach.
Thanks a lot as always!
Now I plan to finish the layout tutorial and then move onto this. But I need new suggestions on what you guys needs help or want me to explain or teach.
Thanks a lot as always!
Website Layout Part 2 Tutorial { Body }
Website Layout Part 2 Tutorial { Body }
Okay this is part 2 of our 5 part tutorial. What I will be going over this lesson is:
<DIV ID="PageWrapper">
<DIV ID="Header">
<DIV ID ="BODY">
</div> <!--End of Page BODY-->
</div> <!--End of Header-->
</div> <!--End of Page Wrapper-->
So as you can see above we structure the Css as we go. But we must work on our website from top to bottom. That makes it easier for coding and if you have a problem note it and go back later.
Now that we have our body div to work inside we can start designing. First I am going to contain a left and right container and then add a center container.
<DIV ID ="BODY">
<div id="Hello">
<div id="Center">
</div> <!--END OF Center-->
</div> <!--end of Hello-->
</div> <!--End of Page BODY-->
Now you see we have a set of divs now we want to either put an Iframe or Information inside them, so to add text simply use the <P id="Test"> Tag. We use the id function so we can edit it using Css at a later stage.
Now if you want to add a YouTube video. use this code and change the link:
<iframe src="http://www.youtube.com/embed/JyAoQnyUUIQ" width="490" height="300" style="float:top" marginwidth="0" marginheight="0" frameborder="no" style="border-width:2px; border-color:black; border-style:solid;"></iframe>
Of course you can adjust the border and such. Now we want to go to the final part THE CSS:
#Hello{
width: 245px;
height: 2961px;
border: 5px solid black;
position: fixed;
top: 245px;
left: 178px;
}
#Center{
position: fixed;
left: 433px;
top: 250px;
}
Now this should position it all center and left. Ill let you complete the right side all by yourself.
This has been the tutorial. Thanks for reading hope you enjoyed and if you have problems post below.
Okay this is part 2 of our 5 part tutorial. What I will be going over this lesson is:
- Inbedding Text into div containers
- Embedding Youtube Videos or other Websites using Iframes
- Organizing for ease of coding
<DIV ID="PageWrapper">
<DIV ID="Header">
<DIV ID ="BODY">
</div> <!--End of Page BODY-->
</div> <!--End of Header-->
</div> <!--End of Page Wrapper-->
So as you can see above we structure the Css as we go. But we must work on our website from top to bottom. That makes it easier for coding and if you have a problem note it and go back later.
Now that we have our body div to work inside we can start designing. First I am going to contain a left and right container and then add a center container.
<DIV ID ="BODY">
<div id="Hello">
<div id="Center">
</div> <!--END OF Center-->
</div> <!--end of Hello-->
</div> <!--End of Page BODY-->
Now you see we have a set of divs now we want to either put an Iframe or Information inside them, so to add text simply use the <P id="Test"> Tag. We use the id function so we can edit it using Css at a later stage.
Now if you want to add a YouTube video. use this code and change the link:
<iframe src="http://www.youtube.com/embed/JyAoQnyUUIQ" width="490" height="300" style="float:top" marginwidth="0" marginheight="0" frameborder="no" style="border-width:2px; border-color:black; border-style:solid;"></iframe>
Of course you can adjust the border and such. Now we want to go to the final part THE CSS:
#Hello{
width: 245px;
height: 2961px;
border: 5px solid black;
position: fixed;
top: 245px;
left: 178px;
}
#Center{
position: fixed;
left: 433px;
top: 250px;
}
Now this should position it all center and left. Ill let you complete the right side all by yourself.
This has been the tutorial. Thanks for reading hope you enjoyed and if you have problems post below.
Wednesday, 21 August 2013
Make Easy Money Quickly! PayPal or Amazon Gift Card
Make Easy Money Quickly!
Another Making Money technique. So this one is quite easy but requires two things:
Go to MyLikes and then sign up as an advertiser.
Now you want to click on the sidebar on the left and click an ad that you want to start earning with.
Goto twitter and post the but.ly link it gave you. Then right click on that link and click copy location.
From their give that twitter link to your traffic source and you will recieve money for each click.
They payout to PayPal every Friday. But if you do not want to get paid via PayPal you can leave your payout email blank and they will generate you a amazon gift card instead.
Another Making Money technique. So this one is quite easy but requires two things:
- Ability to attract traffic to a link
- Social Media Accounts
Go to MyLikes and then sign up as an advertiser.
Now you want to click on the sidebar on the left and click an ad that you want to start earning with.
Goto twitter and post the but.ly link it gave you. Then right click on that link and click copy location.
From their give that twitter link to your traffic source and you will recieve money for each click.
They payout to PayPal every Friday. But if you do not want to get paid via PayPal you can leave your payout email blank and they will generate you a amazon gift card instead.
Subscribe to:
Posts (Atom)