Hanya backup template tumblr berpola timeline yang saya pake untuk tumblog saya dan pasangan. Hehehe.
<!doctype html>
<html lang="en-US">
<head>
<!-- TUMBLR APPEARANCE OPTIONS -->
<!-- General -->
<meta name="text:Google Analytics UA Code" content="" />
<meta name="image:Background" content="" />
<meta name="text:Application Stylesheet URL" content="" />
<meta name="if:Show Description On Index" content="1" />
<meta name="if:Use Responsive Styles" content="1" />
<!-- Sharing Buttons -->
<meta name="if:Show Tweet Button" content="1"/>
<meta name="text:Tweet Via Account" content=""/>
<meta name="text:Tweet Follow Account" content=""/>
<meta name="if:Show Like Button" content="1"/>
<!-- Accompanying App? -->
<meta name="if:Link Logo To Application" content="0" />
<meta name="text:Application URL" content="" />
<!-- Comments -->
<meta name="text:Disqus Shortname" content=""/>
<!-- END TUMBLR APPEARANCE OPTIONS -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="{MetaDescription}" />
<link href="{Favicon}" rel="shortcut icon" />
<link rel="apple-touch-icon" href="{PortraitURL-128}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}{block:Pagination} - {lang:Page CurrentPage of TotalPages}{/block:Pagination}</title>
<meta name="author" content="vachzar indra"/>
<!-- ======== STYLES ======== -->
{block:IfUseResponsiveStyles}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
{/block:IfUseResponsiveStyles}
{block:IfNotUseResponsiveStyles}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
{/block:IfNotUseResponsiveStyles}
<!-- Font Awesome - http://fortawesome.github.com/Font-Awesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
body { background: #333; }
img { border: 0; max-width: 100%; }
.page-header h1 {
font-size: 3.26em;
text-align: center;
color: #efefef;
text-shadow: 1px 1px 0 #000;
}
/** timeline box structure **/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eee;
left: 50%;
margin-left: -1.5px;
}
.tldate {
display: block;
width: 200px;
background: #414141;
border: 3px solid #212121;
color: #ededed;
margin: 0 auto;
padding: 3px 0;
font-weight: bold;
text-align: center;
-webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35);
}
.timeline li {
margin-bottom: 25px;
position: relative;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
.timeline li:after {
clear: both;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
/** timeline panels **/
.timeline li .timeline-panel {
width: 46%;
float: left;
background: #fff;
border: 1px solid #d4d4d4;
padding: 20px;
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}
/** panel arrows **/
.timeline li .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline li .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
top:0;
right:0;
display: none;
border: 0;
}
.timeline li.timeline-inverted .timeline-panel {
float: right;
}
.timeline li.timeline-inverted .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline li.timeline-inverted .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
/** timeline circle icons **/
.timeline li .tl-circ {
position: absolute;
top: 13px;
left: 50%;
text-align: center;
background: #6a8db3;
color: #fff;
width: 64px;
height: 64px;
line-height: 35px;
margin-left: -36px;
border: 3px solid #90acc7;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
z-index: 99999;
}
/** timeline content **/
.tl-heading h4 {
margin: 0;
color: #c25b4e;
}
.tl-body p, .tl-body ul {
margin-bottom: 0;
}
.tl-body > p + p {
margin-top: 5px;
}
/** media queries **/
@media (max-width: 991px) {
.timeline li .timeline-panel {
width: 44%;
}
}
@media (max-width: 700px) {
.page-header h1 { font-size: 1.8em; }
ul.timeline:before {
left: 40px;
}
.tldate { width: 140px; }
ul.timeline li .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline li .tl-circ {
top: 22px;
left: 22px;
margin-left: 0;
}
ul.timeline > li > .tldate {
margin: 0;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
</style>
{block:IfApplicationStylesheetURL}
<!-- Import application styling -->
<link href="{text:Application Stylesheet URL}" rel="stylesheet">
{/block:IfApplicationStylesheetURL}
<style type="text/css">
<!--
{CustomCSS}
-->
</style>
</head>
<body>
{block:IfShowLikeButton}
<div id="fb-root"></div>
<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=325405900855984";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{/block:IfShowLikeButton}
<div class="container">
<header class="page-header">
<h1><a href="/">{Title}</a><p class="lead">{Description}</p></h1>
</header>
<ul class="timeline">
{block:Posts}
<li>
<div class="tldate">{PostAuthorName}
</div>
</li>
<li class="{block:Even}timeline-inverted{/block:Even}">
<div class="tl-circ"><a href="{PostAuthorURL}">
<img src="{PostAuthorPortraitURL-64}" class="img-circle">
</a></div>
<div class="timeline-panel">
<div class="tl-heading">{block:Title}
<h4><a href="{Permalink}">{Title}
</a></h4>
{/block:Title}
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> {block:Date}
{block:NotReblog}
<a href="{Permalink}">{lang:Posted TimeAgo}</a>
{/block:NotReblog}
{block:Reblog}
{lang:PostTypeNoun reblogged from ReblogParentTitle 2}
{/block:Reblog}
{/block:Date}</small></p>
</div>
<div class="tl-body">
<div class="QUOTEINFO">
<div class="QUOTEMARK"></div>
<div class="TEXT">
{Question}
</div>
</div>
<p>{lang:Asked by Asker}</p>
<div class="BREAK"></div>
<div class="RESPONSE">
{Answer}
</div>
{/block:Answer}
<!-- /ANSWER -->
<!-- TEXT -->
{block:Text}
{Body}
{/block:Text}
<!-- /TEXT -->
<!-- VIDEO -->
{block:Video}
{Video-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
<!-- /VIDEO -->
<!-- PHOTO -->
{block:Photo}
<div class="CENTER">
{LinkOpenTag}<img alt="{PhotoAlt}" src="{PhotoURL-500}" />{LinkCloseTag}
</div>
{block:Caption}
<div class="CAPTION">
{Caption}
</div>
{/block:Caption}
{/block:Photo}
<!-- /PHOTO -->
<!-- QUOTE -->
{block:Quote}
<div class="QUOTEINFO">
<div class="QUOTEMARK"></div>
<div class="TEXT">
{Quote}
</div>
</div>
<div class="BREAK"></div>
{block:Source}
<div class="BY">
{Source}
</div>
{/block:Source}
{/block:Quote}
<!-- /QUOTE -->
<!-- LINK -->
{block:Link}
<div class="THE-LINK">
<a href="{URL}" target="{Target}">{Name}</a>
</div>
<div class="INFO">
<a href="{URL}" target="{Target}">
{URL}
</a>
</div>
{block:Description}
<div class="MARGIN">{Description}</div>
{/block:Description}
{/block:Link}
<!-- /LINK -->
<!-- CHAT -->
{block:Chat}
<ul class="CHAT">
{block:Lines}
<li class="{Alt} {UserNumber}">{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>
{/block:Lines}
</ul>
{/block:Chat}
<!-- /CHAT -->
<!-- AUDIO -->
{block:Audio}
<div class="PLAYER">
<div class="ALBUMART">
{block:AlbumArt}<img alt="" src="{AlbumArtURL}" />{/block:AlbumArt}
</div>
<div class="OVERLAY">
<div class="OBJ">
{AudioPlayerGrey}
</div>
<div class="COUNT">
This track has had {PlayCountWithLabel}
</div>
<div class="TRACK">
{block:TrackName}
<strong>{TrackName}</strong>
{/block:TrackName}
{block:TrackName}
{block:Artist}
by
{/block:Artist}
{/block:TrackName}
{block:Artist}
<a href="http://last.fm/{Artist}">{Artist}</a>
{/block:Artist}
</div>
</div>
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Audio}
<!-- /AUDIO -->
</div>
</div>
</li>
{/block:Posts}
</ul>
{block:Pagination}
<ul class="pager">
{block:PreviousPage}
<li><a href="{PreviousPage}">{lang:Previous page}</a></li>
{/block:PreviousPage}
{block:NextPage}
<li><a href="{NextPage}">{lang:Next page}</a></li>
{/block:NextPage}
</ul>
{/block:Pagination}
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>made with love by <a href="http://vachzar.com">vachzar</a>.</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
{block:IfShowTweetButton}
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
{/block:IfShowTweetButton}
{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</body>
</html>