Hi guys,
           For the past few days, I was busy working on a Template for website. Actually it does not need even few days to build it, It is that simple. I'm posting some screenshots of it below. If anyone would like to buy it, Contact me on jovelonline@gmail.com or comment below. I created this website as an experiment. I'm planning to start a website to sell such Templates. So, if anyone buys this Template, then I can conclude that this is the right time to start my Venture. And also, Please suggest a good name for my Venture. There's no much programing in it. I take only the designing side. You can manually add the content into this.(I can help with adding logo)

This is made with Adobe Muse. It uses HTML, CSS and Javascript. Its Responsive, it got Dynamic Page resizing, a Better Sitemap and rest, see for yourself.

Lazy load function is used to increase the speed of your website by preventing images from loading that are out of the main view. Increasing your speed will in turn increase your audience. try it. it works. 

"Go Back" function using Javascript. In this post, you'll see how to add a "Go Back" button to a webpage.














The code for the button:

<input type="button" value="Go Back one page" onclick="history.back(-1)" />

enjoy.

Seeing your old scroll bar bores you ? No More Boring... here's a good looking scroll bar for websites and Blogs, Created with CSS.















Here's the CSS code.


for Blogger users,
Select your blog and go to Template -> Customize., Click the Advanced tab and select Add CSS then paste this code.

For Websites,
Paste this code before </style> Tag.

Enjoy your new look of Scroll bar.

<style>
.joediv #main {
width: 100%;
text-align: center;
margin: 3em 0 10em 0;
color: #999;
}
</style>
<div class="joediv">
    <style>
@import url(http://fonts.googleapis.com/css?family=Frijole);
      h1 {
        font-family: 'Frijole', cursive;
        font-size: 25px;
      }
    </style>
<h1>Its 404.., Go Back, There's nothing here.... :'( visit our<a href="http://joe-amis.blogspot.com">Homepage</a></h1></div>

Step 4:Replace the Orange colored text with your homepage. Click Save Changes.

Enjoy your new 404.

How to Add it to your Website.

Step 1: Go to blogger->YOUR BLOG->Layout-> Add a Gadget->HTML/Javascript.

Step 2: Place this Code in it. (My Own Code)

<style>
#joelblogsharer{
position:fixed;
left:40px;
top:15%;
background-color:#999999;
border:groove;
opacity:0.5;
border-spacing:inherit;
border-width:medium;
font-family: 'Open Sans', sans-serif;
width:auto;
height:auto;
border-radius:10px;
padding:5px 10px;
}
#joelblogsharer:hover{
opacity:1;
}
</style>

<div align="center" id="joelblogsharer" title="Like and Share this to your friends">
<!-- LinkedIN -->
<script src="//platform.linkedin.com/in.js" type="text/javascript">
 lang: en_US
</script>
<script type="IN/Share" data-counter="top"></script><br />
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><br />
<!-- Facebook -->
<div align="center" id="fb-root">
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=139408079570627";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div align="center" class="fb-like" data-width="450" data-layout="box_count" data-show-faces="true" data-send="false"></div><br />
<!-- Google+ -->
<div align="center" class="g-plusone" data-size="tall"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script><br />
<img align="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWgvbcdCCvk2ixC7WL_SDmT90Qcv-aGazppQNCc1WsCt1gZ583adR7SzDWrnDY6JehyphenhyphensfWKD_L9bcNtPD7VVFTOT0DwmI0H-NMkwh65a-MX70x6YKpGHUpnn_uFg7mL8blVBpNi7DBTZb/s1600/logo+copy.png" Title="SharerChoices" width="70" height="30" />

</div></div>

Never change anything in this code., it may cause errors.

Enjoy.

Blogger introduced a contact form for blog. This can be added as a widget. In this tutorial i'm gonna show how to add this as a Page of blog.














Step 1 : Go to blogger and select the the blog you want to add the contact form, From the left tabs select pages tab and select blank page from new page.

Step 2 : Click the 'Edit HTML' Tab.

Step 3 : Add this code in it .

<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Email
<span style="font-weight: bolder;">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message
<span style="font-weight: bolder;">*</span>
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><p style="display: inline-block;">Powered By<a href="http://joe-amis.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWgvbcdCCvk2ixC7WL_SDmT90Qcv-aGazppQNCc1WsCt1gZ583adR7SzDWrnDY6JehyphenhyphensfWKD_L9bcNtPD7VVFTOT0DwmI0H-NMkwh65a-MX70x6YKpGHUpnn_uFg7mL8blVBpNi7DBTZb/s1600/logo+copy.png" width="59" height="29" /></a></p>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Next step is to register this.
 For that Go to Blogger->Template->Edit HTML
Paste this code before </html> Tag.

<script>
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'lowerbar2', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'YOUR BLOG ID', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'http://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>

Replace your blog id With the Black Coloured Text.
I'll be creating a new post on checking your blog id.
And Enjoy.

My name is Jovel Sam. I'm a 7th standard student of Bethany St.John's E.H.S.S, I'm a programmer, But really not an expert. I know some programming languages, from that I made a social site(still its in my PC). I'm gonna publish it in this month or late. I can answer almost all problems related to Android, Windows, HTML, PHP problems or FAQs. Visit my Blog for becoming a Junior programmer.