<p>On your site or blog in no time. As easy as 1-2-3 (<ahref="http://www.youtube.com/watch?v=vAWbm4gF9lU">video tutorial</a>)</p>
</div>
</div>
<!-- Step 1 -->
<divclass="step row">
<h2class="span1">1</h2>
<divclass="span11">
<h4>Create a new Spreadsheet</h4>
<p>Create a new Google Spreadsheet using our <ahref="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public"target="_blank">template</a>. It’s as simple as dropping a date, text, and links into the appropriate columns.</p>
<p><imgclass="img-rounded img-polaroid"src="{{ static_url }}/img/make/publish_to_web_small.png"alt="Publish to Web"></p>
</div>
<divclass="span6">
<p><imgclass="img-rounded img-polaroid"src="{{ static_url }}/img/make/publish_to_web_url_small.png"alt="Publish to Web"></p>
<p>Under the File menu, select <em>“Publish to the Web.”</em></p>
<p>In the next window, check the box next to <em>“Automatically republish when changes are made.”</em> Uncheck all other boxes. Click <em>“start publishing.”</em> This will give you the URL to embed in your HTML file.</p>
</div>
</div>
</div>
</div>
<!-- Step 3 -->
<formclass="step row form form-horizontal">
<h2class="span1">3</h2>
<divclass="span11">
<h4>Copy/paste URL into the generator</h4>
<divclass="control-group">
<labelclass="control-label"> Google Spreadsheet or other <ahref="#fileformat"data-scroll="true">data source URL</a></label>
<inputtype="text"placeholder="Google Maps API Key"id="embed-googlemapkey">
<pclass="help-block">Due to recent changes to the Google Maps API, you need a <ahref="https://developers.google.com/places/documentation/#Authentication"target="_blank">API Key</a> in order to use custom map types.</p>
<optionvalue="PT">PT Sans & PT Narrow & PT Serif</option>
</select>
</div>
</div>
<!-- Wordpress Plugin-->
<divclass="control-group">
<labelclass="control-label">Misc</label>
<divclass="controls">
<labelclass="checkbox">
<inputid="embed-wordpressplugin"type="checkbox"value="option1">Wordpress Plugin<spanclass="help-inline">Is the embed for the <ahref="https://github.com/VeriteCo/TimelineJS-Wordpress-Plugin"target="_blank">Wordpress Plugin</a>?</span>
</label>
<!-- Start at End?-->
<labelclass="checkbox">
<inputid="embed-startatend"type="checkbox"value="option1">Start at the End?<spanclass="help-inline">The most recent event will be shown first.</span>
</label>
<!-- Hash Bookmarks-->
<labelclass="checkbox">
<inputid="embed-hashbookmark"type="checkbox"value="option1">Hash Bookmarks<spanclass="help-inline">On each slide change, a # will be added to the end of the url in the url bar. These urls are bookmarkable so you can share or return to the same place in the timeline</span>
</label>
<!-- Debug-->
<labelclass="checkbox">
<inputid="embed-debug"type="checkbox"value="option1">Debug<spanclass="help-inline">In debug mode, you will see console logs.</span>
</label>
</div>
</div>
<!-- Start Zoom Adjust-->
<divclass="control-group">
<labelclass="control-label">Adjust the default calculated zoom level</label>
<pclass="help-block">This will tweak the default zoom level. Equivilent to pressing the zoom in or zoom out button the specified number of times. Negative numbers zoom out.</p>
</div>
</div>
<!-- Start at Slide-->
<divclass="control-group">
<labelclass="control-label">Start at specific slide number?</label>
