Mnml Tumblr Theme

How to install this theme

to automatically the code below
<!DOCTYPE html>
<!--   
    
    Another beautiful Tumblr Theme by ThemesLtd.
    
    Get this theme and others at www.themesltd.com
    
    ThemesLtd. Customize everything.  

-->
<html lang="en">    
<head> 
    <meta charset="utf-8">
        
    <title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
        
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    <meta name="description" content="{MetaDescription}">

    
    <meta name="color:Blog Background" content="#ffffff"/>
    <meta name="color:Theme Highlight Color" content="#1add92"/>
    <meta name="color:Title Text Color" content="#444444"/>
    <meta name="color:Menu Icon Color" content="#cccccc"/>
    <meta name="color:Menu Background" content="#ffffff"/>
    <meta name="color:Description Text Color" content="#444444"/>
    <meta name="color:Menu Links" content="#444444"/>
    <meta name="color:Post Background" content="#ffffff"/>
    <meta name="color:Text" content="#444444"/>
    <meta name="color:Social Icons Color" content="#cccccc"/>
    <meta name="color:Social Icons Color Hover" content="#444444"/>
    <meta name="color:Links" content="#444444"/>
    <meta name="color:Links Hover" content="#cccccc"/>
    <meta name="color:Links Underline" content="#cccccc"/>    
    <meta name="color:Border Color" content="#ebebeb"/>
    <meta name="color:Header Background Color" content="#ebebeb"/>
    
    <meta name="select:Font" content="open sans" title="Open Sans">
    <meta name="select:Font" content="helvetica neue" title="Helvetica Neue">
    <meta name="select:Font" content="source sans" title="Source Sans">
        
    <meta name="select:Font Title" content="montserrat" title="Montserrat">
    <meta name="select:Font Title" content="open sans" title="Open Sans">
    <meta name="select:Font Title" content="source sans" title="Source Sans">
    <meta name="select:Font Title" content="neuton" title="Neuton">    
     
    
    <meta name="select:Font Description" content="neuton" title="Neuton">    
    <meta name="select:Font Description" content="helvetica neue" title="Helvetica Neue">
    <meta name="select:Font Description" content="open sans" title="Open Sans">
    <meta name="select:Font Description" content="source sans" title="Source Sans">
    
    <meta name="text:Font Size" content="12">
    <meta name="text:Font Size Title" content="40">
    <meta name="text:Font Size Description" content="18">
    <meta name="text:Font Size Menu" content="13">    
    
    <meta name="image:Background" content="">

    <meta name="if:Infinite Scroll" content="1" />
    <meta name="if:Show Portrait" content="1" />
    <meta name="if:Show Header" content="1" />
    <meta name="if:Show Description" content="1" />
    <meta name="if:Show Theme Credit" content="1" />
    <meta name="if:Show Archive Link" content="0" /> 
    <meta name="if:Show Random Link" content="0" />
    <meta name="if:Show Search Bar" content="0" />
    <meta name="if:Show RSS Link" content="0" />
    <meta name="if:Show Search" content="0" />
    <meta name="if:Show Captions" content="0" />
    <meta name="if:Show Tags" content="0" />
    
    <meta name="image:Background" content="">
    
    <meta name="text:Instagram ID" content="">
    
    <meta name="text:Instagram Url" content="" />
    <meta name="text:Facebook Url" content="" />
    <meta name="text:Flickr Url" content="" />
    <meta name="text:Pinterest Url" content="" />
    <meta name="text:Spotify Url" content="" />
    <meta name="text:Soundcloud Url" content="" />
    <meta name="text:Twitter Url" content="" />
    <meta name="text:Vk Url" content="" />
    <meta name="text:Youtube Url" content="" />
    
    <meta name="text:Link 1 Url" content="" />
    <meta name="text:Link 1 Text" content="" />
    <meta name="text:Link 2 Url" content="" />
    <meta name="text:Link 2 Text" content="" />
    <meta name="text:Link 3 Url" content="" />
    <meta name="text:Link 3 Text" content="" />
    <meta name="text:Link 4 Url" content="" />
    <meta name="text:Link 4 Text" content="" />
    <meta name="text:Link 5 Url" content="" /> 
    <meta name="text:Link 5 Text" content="" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<style>

*{ box-sizing: border-box;}.rounded_2{ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px;}.clear{ clear: both;}.no__select { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}body{ font-family: "{select:Font}","Helvetica Neue",Arial,sans-serif; height: 100%; margin: 0; font-size: {text:Font Size}px; color: {color:Text}; background-color: {color:Blog Background}; background-image: url({image:Background});}/* header */header{ width: 100%; height: 200px; text-align: center;}header a { position: relative; font-family: "{select: Font Title}","Helvetica Neue",Arial,sans-serif; font-size: {text:Font Size Title}px; font-weight: 700; line-height: 200px; letter-spacing: 10px; text-transform: uppercase; text-decoration: none; color: {color:Title Text Color}; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: {color:Title Text Color};}.header__strike { position:absolute; width: calc(100% + 11px); height: 7px; bottom: -10px; left: -10px; margin: 3px 0 0 0; background-color:{color:Theme Highlight Color}; display:block;}/* menu */.menu__container{ position: fixed; top: 35px; left: 35px; display: block; width: 30px; height: 30px; z-index:3; cursor: pointer;}.menu__container p{ display: block; width: 30px; height: 5px; margin: 0 0 7px 0; background-color: {color:Menu Icon Color};}/* main */main{ display: block; overflow: hidden; {block:IndexPage} width: 1120px; {/block:IndexPage} {block:PermalinkPage} width: 500px; {/block:PermalinkPage} height: 100%; margin: 4px auto 0 auto; padding: 0 40px 0 0;}.container{ {block:IndexPage} width: 1160px; {/block:IndexPage} {block:PermalinkPage} width: 500px; {/block:PermalinkPage} margin: 0; position:relative;}/* thumbnail */article{ position: relative; background-color:{color:Post Background}; display: block; {block:IndexPage} float: left; margin: 0 0 20px 0; {/block:IndexPage} overflow: hidden; {block:IndexPage} width: 250px; {/block:IndexPage} {block:PermalinkPage} width: 500px; margin:0 auto; {/block:PermalinkPage} color: {color:Text};}article img{ display: block; padding: 0; margin: 0; width: 100%;}article section{ width: 100%; height: 35px; padding: 10px 10px 0 10px; transition: .3s ease; {block:IndexPage} opacity: 0; {/block:IndexPage}}article:hover section{ opacity: 1;}.title,.title:visited{ {block:IndexPage} font-size: 16px; {/block:IndexPage} {block:PermalinkPage} font-size: 20px; {/block:PermalinkPage} display: block; text-align: center; text-decoration: none; color: {color:Text};}.title:hover{ color: {color:Links Hover};}.photoset { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; display:block;}.body--text{ {block:IndexPage} font-size: {text:Font Size}px; line-height: 19px; {/block:IndexPage} {block:PermalinkPage} font-size: 16px; line-height: 26px; {/block:PermalinkPage} display: block; text-align: justify; word-break: normal; hyphens: auto;}.body--text a{ text-decoration: none; color: {color:Text}; border-width: 0 0 1px 0; border-style: solid; border-color: {color:Links Underline};}.body--text a:hover{ color: {color:Links Hover};}.body--text img{ display: block; width: 100%; height: auto; margin: 0; padding: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px;}article blockquote { text-indent:0; margin:0; padding: 0;}.body--tags { display:block;}.body--tags a { {block:IndexPage} font-size: 9px; line-height: 10px; padding: 4px; {/block:IndexPage} {block:PermalinkPage} font-size: 14px; line-height: 16px; padding: 8px; {/block:PermalinkPage} background-color: {color:Theme Highlight Color}; display: inline-block; text-decoration: none; color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; margin:0;} .quote--container { display:block; } .quote--text { font-size: 30px; font-family: {select: Font Title}; float:left; border-color:{color:Theme Highlight Color}; border-width: 0 0 5px 0; border-style: solid; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; padding: 0 8px; line-height: 45px; font-weight: 700; } .quote--container .source { font-size: 13px; color: #ccc; line-height: 30px; display: block; text-align: center; font-style: italic; } article .link a { font-size: {text:Font Size}px; line-height:20px; color:{color:Links}; text-decoration: none; border-width: 0 0 2px 0; border-style: solid; border-color: {color:Links Underline}; border-spacing: 3px; } article .video, .youtube_iframe { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; display:block; } article .audio { display: block; } article:hover section{ opacity: 1;}article .date{ font-size: 12px; font-weight: 700; font-family: 'Neuton'; display: block; float: left; text-decoration: none; color: #ccc;}article section .like{ position: absolute; bottom: 8px; right: 10px;}article section .reblog{ position: absolute; bottom: 10px; right: 33px;}article section .source{ position:absolute; bottom: 11px; right: 57px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwdJREFUeNrEmF2IDWEYx+fMjlaSXMiuEGqxPuLihAss5cLFYtdXRLlQcqPds1vChVCuRA5rL5Y7caHItim0tR+40hwlF9psidwoUsou7XL8n3qmpmme92NmdvapX53mnXnnd9553/d5Zgq+7zvTGcVi0alUKivx8w7YDD6Dszj+oDDdcojVYBDMDx37BzZ5Gd9oK9gJaCRmgW/gDXjMIxInNhARo3DBwazk6HF0g/UxbcfANXAfdILvfHwVi9UJff5xMxA7DoYFsSBqWLICVrDYoEJsDNxNO3InQA8oGJ6/BAzx+ZLYOGjFghj1chQLYoGijcRaINYfTLw8xRxTsaRyOrF3YAuP0Ema2EnEKLyMxd6CHaEVeZvv0a3ptxQVsx05WzGKRnDeoO9LyBINSeWSiC3n7aLeoH86pw+CM23lkohRdBmKOaFNuWQjl1SMYoNi8v8W2k5h9AomcmnEKD5Iq5I2WTAZ074QrNXJpRWjOM0yQfwCewCtyueca+OiUbWVtGYgRvESrAH7QRU8BJ9C7V+E62olublc9KUVC+IjuCoI7BOu+So9VtrR52Uk5ihG5hGvzmj8Bb4kdyAnsWah/RkyxY84OVeoySbArhzEqDS/KOXW2WBGzEUjkcm7CLSBxeAFz9HJlGIUFzBqviQ3zvbRR70UzAE/eZmHU9JhrkCOphQrQ+yyKrdO8ChFg0b0Hlgn5MojoCGlWEdcQ3SU+oQOdvNblJQr67IWi5O7pch7NcLx4PXPVuwG6FBN1KgcTfxzlqX1oUiaMhUr6TqPy61lLnd0McZbzMBUiKkSf49B7U/L/pWl2E1TMSnxB58IajXXNnGFUeZc3Mlv/iqxdptd2zP4qKITbDI4z1os+lhtxUyjK4lYWE4nRquxN6FYW9J/5XI+faIRa+H667pF31fSiAVyG8EyjVg/V7M06feCUUWfI5xRzqSdD55iywiLhaOX0xx9KNzGhUGVS/AhLs+rWUxWj7+ZveYR1ImFa69hZsrC5X/ZzHXZe/AUbFeI5Rb/BRgAjrDWjDbfmekAAAAASUVORK5CYII='); width: 12px; height: 11px; display:block; background-size: 100%; } article .chat .title { padding: 10px; } article .chat a { text-decoration:none; font-size:14px; color:{color:Links}; text-align:center; } article .chat p:nth-child(even) { width:calc(100% - 10px); display:block; background-color:#e5e5ea; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; padding:10px; margin: 0 0 10px 0; } article .chat p:nth-child(odd) { background-color:#259afc; width:calc(100% - 10px); display:block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; padding:10px; text-align:right; color:#fff; margin: 0 0 10px 10px; } article .chat .label { font-weight: 700; font-size:9px; display:block; } article .question { width:100%; display:block; } article .asker-avatar { float:left; width:30px; height: 30px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; margin:0; padding:0; } article a.asker { float:left; line-height: 30px; display:block; width: calc(100% - 40px); margin: 0 0 0 10px; text-decoration: none; color:{color:Links}; } article .asker-arrow { margin:7px 0 0 9px; width: 0; height: 0; border-style: solid; border-width: 0 5px 8.7px 5px; border-color: transparent transparent #f3f3f3 transparent; -webkit-transform:rotate(360deg) } article .asker-question { width:100%; display:block; background-color:#f3f3f3; padding: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; font-size:12px; color:#444; } article .answerer-avatar { float:left; width:30px; height: 30px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; margin:0; padding:0; } article a.answerer { float:left; line-height: 30px; display:block; width: calc(100% - 40px); margin: 0 0 0 10px; text-decoration: none; color:{color:Links}; } article .answerer-answer { width:100%; display:block; margin: 10px 0; color:{color:Text}; padding: 0 10px; } ol.notes { padding: 0px; margin: 25px 0px; list-style-type: none; border-bottom: solid 0px #ccc; } ol.notes li.note { border-top: solid 0px #ccc; padding: 10px; line-height:20px; font-size:12px; } ol.notes li.note img.avatar { float:left; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; display:block; } ol.notes li.note span.action { font-weight: 700; line-height:20px; font-size:12px; text-decoration: none; display:none; } ol.notes li.note .answer_content { font-weight: normal; line-height:20px; font-size:12px; display:none; } ol.notes li.note blockquote { border-color: #eee; padding: 4px 10px; margin: 10px 0px 0px 25px; display:none; } ol.notes li.note blockquote a { text-decoration: none; display:none; } .note {float: left; } ol.notes li.note img.avatar { width: 16px; height: 16px; padding:0px; margin: -10px; } .more_notes_link_container{ clear:both; display:block; width:100%; text-align:center;} .more_notes_link { color:{color:Links}; text-decoration: none; }.menu { float: left; height: 100vh; width:300px; z-index:2; position:fixed; top:0; left:-300px; background:{color:Menu Background} ; border-width: 0 1px 0 0; border-style:solid; border-color:{color:Border Color};}.menu--header{ width:100%; height:15%; position:absolute; top:0; left:0; background-color:{color:Header Background Color}; z-index:1; display: block; background-image: url({HeaderImage}); background-size: cover; background-position:center;}.menu--top{ position:absolute; width: 300px; height: 80px; top:calc(15% - 40px); z-index:2;}.menu--portrait { margin: 0 auto; width: 80px; height:80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -khtml-border-radius: 50%; display: block;}.menu--search{ position:absolute; bottom:70px; left:20px; width: calc(100% - 40px); height:40px; border-color:{color:Border Color}; border-width: 1px 0 0 0; border-style: solid; text-align: center; padding:17px 0;}.menu--search .input{ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; border-style:solid; border-color:{color:Border Color}; border-width:1px; line-height:20px; outline: none; font-size: {text:Font Size}px; font-family: "{select:Font}","Helvetica Neue",Arial,sans-serif; padding:0 5px; width:200px;}.menu--search .submit{ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; border:none; line-height:20px; font-size: 10px; font-family: "{select:Font}","Helvetica Neue",Arial,sans-serif; background-color:{color:Border Color}; }.menu--social{ position:absolute; bottom:0; left:20px; width: calc(100% - 40px); height:50px; border-color:{color:Border Color}; border-width: 1px 0 0 0; border-style: solid; text-align: center;} .menu--social i { color:{color:Social Icons Color}; transition: 0.3s ease; margin: 9px 9px 0 0; text-align:center; } .menu--social i:last-of-type { margin: 10px 0 0 0; } .menu--social i:hover { color:{color:Social Icons Color Hover}; } .menu--social a{ display:inline-block;}.menu--description{ margin:0 0 0 20px; padding: 20px; width: calc(100% - 40px); font-size: {text:Font Size Description}px; color: {color:Description Text Color}; font-family: "{select:Font Description}","Helvetica Neue",Arial,sans-serif; text-align: center;}.menu--description a{ color: {color:Menu Links}; text-decoration: none; border-width: 0 0 1px 0; border-style: solid; border-color: {color:Description Text Color};}.menu--link { transition: 0.3s ease; width: calc(100% - 40px); border-color:{color:Border Color}; border-width: 1px 0 0 0; border-style: solid; font-size: {text:Font Size Menu}px; color: {color:Menu Links}; line-height:40px; text-align: center; display: block; margin: 0 0 0 20px; text-decoration: none;}.menu--link:hover { font-weight:bold;} .pagination { margin: 20px auto; text-align: center; {block:ifInfiniteScroll} display:none; {/block:ifInfiniteScroll} } .pagination a { background-color:{color:Post Background}; padding: 10px; text-decoration: none; color:{color:Links}; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; } .instagram__feed { position:absolute; top:0; left:0; width: 250px; height:430px; margin: 0 0 50px 0; display:block; background-color:{color:Post Background}; } .instagram__feed .header { background-color:#3f729b; margin: 0 0 10px 0; width:100%; height:40px; display:block; -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; -khtml-border-radius: 2px 2px 0 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAWCAMAAACynuG2AAAAolBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ELnaCAAAANXRSTlMADvvs6AVCFPfz1qvZ0sOypp80GN26k0ghHxsH8OPGvnMtA7WahX9cOiYLkG5kPlR4T0vMi/YeGxMAAAJRSURBVDjLrZKJbuJAEESLsfF9Y5vDGLzmClcISer/f227teyZlRIknsSIHnWXq0sD4JBYYYN/ObSLCe5nMLfI6cdr0sH9RAbz/6jNyBHu5ioWPno7UrCiNxf3ERAg/4po5OK0iskoSIaYDX7e/rDqOL/rj9DSiA4IaiAtTwB2nicKUxLCmnxPOwBbcp0dUZAY7W91eOyxXgyfgg5FXA9+qfWg0UnuNTC/AZ5oDkBHK6e0YEzmPokLSUNHa20fImGxIpGRF01IttRbpiOeKn7DniwAPKtmYzgRxQUQ84xCZb1gY/iMiK9wtF5xY/uta3tyIWRdL2o987CFrQEuWPfqzRrKUQLfRM2VFtnBx1Dce0RDA6nnqua9r/1tnN8eVDOVTYcspSRnKMqawUy82T12DFUtEdlIpz0cjdSx2IxuaqnMbIy9PYlhRQOXb9LWY4D5Bhux9K62zszV5RJjUZREA3CHK0OpZXtXRhByLv2cdH+qHcha9xE7AAKeAlraGqpkJX4ijXJVRRClVOoSYrAFEvnOCyk/B+ebmrjmqx4XM34CllLZxEQNo2Ugg9SIfI7Uoq2duqTmKNoX+bPjBRaECY16cwGbPI9oiViHnK3nhMyqZch6tWCSRS3HECrWWcxFFh9ZpxTnA9/SEJMK0JiXYieGLBVvMZN3tbxKxql3gptqYJXZIfeysT2H0oTmRerIRW66a7AF3L0EYFsuhFpe2RfYG9pDfMrLDl/A4WbJAx7DnhlK9ngMrQFo4TG43KIRe4+h4du04gQPoniLSwef8B3K/VJzL6lbhgAAAABJRU5ErkJggg=='); background-position: center 11px; background-repeat:no-repeat; } .instagram__feed li:nth-child(odd) { float:left; display:block; margin: 0 10px 0 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; } .instagram__feed li:nth-child(even) { float:left; display:block; margin: 0 0 0 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -khtml-border-radius: 2px; } .instagram__feed .feed { width: 250px; display:block; } footer{ position:relative; width:100%; text-align:center;}footer a{ font-size:8px; text-decoration:none; color:#fff; opacity:0.1;}     

{CustomCSS}

</style>

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Neuton:400italic|Open+Sans:400,400italic' rel='stylesheet' type='text/css'>  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1419534-14']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>


</head>
<body>

<header class="no__select">
    {block:ifShowTitle}
    <a href="/">
        {title}
        <div class="header__strike rounded_2"></div>
    </a>
    {/block:ifShowTitle}
    <div class="menu__container" id="slide">
        <p class="rounded_2"></p>
        <p class="rounded_2"></p>
        <p class="rounded_2"></p>
    </div>
</header>

<nav class="menu">
    {block:ifShowHeader}
    <section class="menu--header"></section>
    {/block:ifShowHeader}
    <section class="menu--top">
        {block:ifShowPortrait}
        <img src="{PortraitURL-128}" class="menu--portrait">
        {/block:ifShowPortrait}
        {block:ifNotShowPortrait}
        <div class="menu--portrait"></div>
        {/block:ifNotShowPortrait}
        {block:ifShowDescription}
        <section class="menu--description">
            {Description}
        </section>
        {/block:ifShowDescription}
        <a href="/" class="menu--link">Home</a>
        {block:ifShowThemeCredit}
        <a href="http://www.themesltd.com/tumblr/tumblr-themes" title="Tumblr Themes" class="menu--link" target="_blank">Theme</a>
        {/block:ifShowThemeCredit}
        
        {block:ifLink1Url}
        <a href="{text:Link 1 Url}" class="menu--link">{text:Link 1 text}</a>
        {/block:ifLink1Url}
        {block:ifLink2Url}
        <a href="{text:Link 2 Url}" class="menu--link">{text:Link 2 text}</a>
        {/block:ifLink2Url}
        {block:ifLink3Url}
        <a href="{text:Link 3 Url}" class="menu--link">{text:Link 3 text}</a>
        {/block:ifLink3Url}
        {block:ifLink4Url}
        <a href="{text:Link 4 Url}" class="menu--link">{text:Link 4 text}</a>
        {/block:ifLink4Url}
        {block:ifLink5Url}
        <a href="{text:Link 5 Url}" class="menu--link">{text:Link 5 text}</a>
        {/block:ifLink5Url}        
        
        
        {block:ifShowArchiveLink}
        <a href="/archive" class="menu--link">Archive</a>
        {/block:ifShowArchiveLink}
        {block:AskEnabled}
        <a href="/ask" class="menu--link">{AskLabel}</a>
        {/block:AskEnabled}
        {block:SubmissionsEnabled}
        <a href="/submit" class="menu--link">Submit</a>
        {/block:SubmissionsEnabled}
        {block:ifShowRandomlink}
        <a href="/random" class="menu--link">Random</a>
        {/block:ifShowRandomlink}
        {block:ifShowRSSLink}
        <a href="/rss" class="menu--link">RSS</a>
        {/block:ifShowRSSLink}
    </section>
    
    {block:ifShowSearch}
    <section class="menu--search">
        <form action="/search" method="get">
        <input class="input" type="text" name="q" value="{SearchQuery}"/>
        <input class="submit" type="submit" value="Search"/>
        </form>
    </section>
    {/block:ifShowSearch}
    
    <section class="menu--social">
        {block:ifInstagramUrl}
        <a href="{text:Instagram Url}" target="_blank"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a>
        {/block:ifInstagramUrl}
        
        {block:ifFacebookUrl}
        <a href="{text:Facebook Url}" target="_blank"><i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i></a>
        {/block:ifFacebookUrl}
        
        {block:ifTwitterUrl}
        <a href="{text:Twitter Url}" target="_blank"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
        {/block:ifTwitterUrl}
        
        {block:ifPinterestUrl}
        <a href="{text:Pinterest Url}" target="_blank"><i class="fa fa-pinterest-square fa-2x" aria-hidden="true"></i></a>
        {/block:ifPinterestUrl}

        {block:ifYouTubeUrl}
        <a href="{text:YouTube Url}" target="_blank"><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i></a>
        {/block:ifYouTubeUrl}
        
        {block:ifFlickrUrl}
        <a href="{text:Flickr Url}" target="_blank"><i class="fa fa-flickr fa-2x" aria-hidden="true"></i></a>
        {/block:ifFlickrUrl}
        
        {block:ifVkUrl}
        <a href="{text:VK Url}" target="_blank"><i class="fa fa-vk fa-2x" aria-hidden="true"></i></a>
        {/block:ifVkUrl}
        
        {block:ifSpotifyUrl}
        <a href="{text:Spotify Url}" target="_blank"><i class="fa fa-spotify fa-2x" aria-hidden="true"></i></a>
        {/block:ifSpotifyUrl}
        
        {block:ifSoundcloudUrl}
        <a href="{text:Soundcloud Url}" target="_blank"><i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i></a>
        {/block:ifSoundcloudUrl}
    </section>
</nav>

<main>

    <section class="container" id="content">
    
    {block:SearchPage}<div id="post-info"><h3>Search results for “{SearchQuery}”</h3>{block:NoSearchResults}<p>Nothing here...</p>{/block:NoSearchResults}</div>{/block:SearchPage}{block:TagPage}<div id="post-info"><h3>Posts tagged with “{Tag}”</h3></div>{/block:TagPage}
    
    {block:IndexPage}
    {block:ifInstagramID}
    <div class="instagram__feed">
        <div class="header"></div>
        <div class="feed" id="instagram__feed"></div>
    </div>
    {/block:ifInstagramID}
    {/block:IndexPage}

    
    {block:Posts}

        <article id="post">
        
            {block:Text}
                {block:Title}
                <a href="{Permalink}" class="title">
                {Title}
                </a>
                {/block:Title}
                <span class="body--text">
                {Body}
                </span>
            {/block:Text}
            
            
            {block:Photo}
            
            {block:IndexPage}
            <a href="{Permalink}">
            <img src="{PhotoURL-250}" alt="{PhotoAlt}" class="rounded_2">
            </a>
            {/block:IndexPage}
           
            {block:PermalinkPage}
            <img src="{PhotoURL-500}" alt="{PhotoAlt}" class="rounded_2">
            {/block:PermalinkPage}
    
            {/block:Photo}
            
                
            {block:Panorama}
                    <li class="post panorama">
                        {LinkOpenTag}
                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                        {LinkCloseTag}
                    </li>
            {/block:Panorama}
            
            
            {block:Photoset}
                <span class="photoset--holder">
                {block:IndexPage}
                {Photoset-250}
                {/block:IndexPage}
               
                {block:PermalinkPage}
                {Photoset}
                {/block:PermalinkPage}
                
                </span>
            {/block:Photoset}
            
            
            {block:Quote}
                <div class="quote--container">
                    <div class="quote--text">
                        {Quote}
                    </div>
                {block:Source}
                    <div class="source">{Source}</div>
                {/block:Source}                    
                </div>
            {/block:Quote}
            

            {block:Link}
                <div class="link">
                    <a href="{URL}" class="link" {Target}>{Name}</a>

                    {block:Description}
                        <div class="description">{Description}</div>
                    {/block:Description}
                </div>
            {/block:Link}
            
    
            {block:Answer}
                <div class="question">
                    <img class="asker-avatar" src="{AskerPortraitURL-30}" alt="">
                    <div class="asker">{Asker}</div>
                    <div class="clear"></div>
                    <div class="asker-arrow"></div>
                    <div class="asker-question">{Question}</div>
                    
                    </div>

            {block:Answerer}
                    <div class="answer">
                        <img class="answerer-avatar" src="{AnswererPortraitURL-30}" alt="">
                        <div class="answerer">{Answerer}</div>
                        <div class="clear"></div>
                        <div class="answerer-answer">{Answer}</div>
                            
                        </div>
            {/block:Answerer}
            
                <div class="replies">
                    {Replies}
                </div>
            {/block:Answer}            
            

            {block:Chat}
            <div class="chat">
                    {block:Title}
                        <span class="title"><a href="{Permalink}">{Title}</a></span>
                    {/block:Title}
                    
                    {block:Lines}
                        <p class="bold user_{UserNumber}">
                            {block:Label}
                                    <span class="label">{Label}</span>
                            {/block:Label}{Line}
                        </p>
                    {/block:Lines}
            </div>
            {/block:Chat}
                
                
            {block:Video}
            <div class="video">
                {block:IndexPage}
                {Video-250}
                {/block:IndexPage}
               
                {block:PermalinkPage}
                {Video-500}
                {/block:PermalinkPage}
            </div>
            {/block:Video}
  
            
            {block:Audio}
            <div class="audio">
                {block:IndexPage}
                {AudioEmbed-250}
                {/block:IndexPage}
               
                {block:PermalinkPage}
                {AudioEmbed-500}
                {/block:PermalinkPage}            
            </div>
            {/block:Audio}
            
            
            {block:ifShowCaptions}
            {block:Caption}
            <span class="body--text">
            {Caption}
            </span>
            {/block:Caption} 
            {/block:ifShowCaptions}
                
            {block:ifShowTags}
            {block:HasTags}
                <span class="body--tags">
                    {block:Tags}
                    <a href="/tagged/{URLSafeTag}">{Tag}</a>
                    {/block:Tags} 
                </span>
            {/block:hasTags}
            {/block:ifShowTags}
            
            {block:IndexPage}
            <section>
                <a href="{Permalink}" class="date">
                {NoteCountWithLabel}
                </a>
                <div class="like">{LikeButton size="13"}</div>
                <div class="reblog">{ReblogButton size="14"}</div>
                {block:ContentSource}
                    <a href="{SourceURL}" class="source" target="_blank"></a>
                {/block:ContentSource}
            </section>
            {/block:IndexPage}

            {block:PermalinkPage}
            <section>
                <a href="{Permalink}" class="date">
                {NoteCountWithLabel}
                </a>
                <div class="like">{LikeButton size="13"}</div>
                <div class="reblog">{ReblogButton size="14"}</div>
                {block:ContentSource}
                    <a href="{SourceURL}" class="source" target="_blank"></a>
                {/block:ContentSource}
            </section>
            {/block:PermalinkPage}            
            
        </article>

                {block:PermalinkPage}        
                {PostNotes}
                {/block:PermalinkPage}                
 
    {/block:Posts}

    </section>
    
    <div class="clear"></div>
    
    {block:IndexPage}    
    <section class="pagination" id="pagination">
        {block:PreviousPage}
        <a href="{PreviousPage}">Previous</a>
        {/block:PreviousPage}

        {block:NextPage}
        <a href="{NextPage}">Next</a>
        {/block:NextPage}
    </section>
    {/block:IndexPage}
    
</main>

<footer>
	<a href="http://www.themesltd.com/tumblr/tumblr-themes" title="Tumblr Themes">Tumblr Themes</a>
	<a href="http://www.themesltd.com/google-chrome-themes/chrome-themes" title="Chrome Themes">Chrome Themes</a>
	<a href="http://www.themesltd.com/mobile-wallpapers/mobile-wallpapers" title="Mobile Wallpapers">Mobile Wallpapers</a>
</footer>


<!-- Important Theme Assets -->
<script src="http://www.themesltd.com/assets/js/theme-assets.js"></script>

{block:IndexPage}
    <script>
      $('#content').masonry({
      itemSelector: '#post',          
      stamp: '.instagram__feed',
      columnWidth: 250,
      gutter: 40,
    });
    
    </script>   
<script>
(function() {
    var $tumblelog = $('#content');
    var loadingimg = "http://www.themesltd.com/assets/img/1x1.png"
    $tumblelog.infinitescroll({
        {block:ifInfiniteScroll}
        navSelector  : "#pagination",            
        nextSelector : "#pagination a:first",
        {/block:ifInfiniteScroll}
        itemSelector : "#post",
        bufferPx     : 40,
        animate      : false,
        done : "",
        loading: {
            finishedMsg: "",
            img: loadingimg,
            msg: "",
            msgText: ""        
            
        }, 
    },
      function( newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1 });
                $tumblelog.masonry( 'appended', $newElems);
            });
          }
    );


})();
</script>

    {block:ifInstagramID}
    <script type="text/javascript">
        $(document).ready(function() {
            $('#instagram__feed').embedagram({
                instagram_id: {text:Instagram ID},
                thumb_width: 120,
                limit: 6,
            });
        });
    </script>
    {/block:ifInstagramID}
        
{/block:IndexPage}

<script>
$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.menu');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-300px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});
</script>

<!-- Install counters, music players etc below this line -->



<!-- Install counters, music players etc above this line -->

</body>
</html>
Go to your Tumblr blog and in the top right corner click
A new page will load, click
in the top left corner of the customize page
On the left you should now see a lot of HTML code. This is where you will put your theme code.
Select all and delete the existing theme code
Type RESET into the empty box
Click
then click
Your old theme is now cleared. Delete the text RESET that you typed
Paste in the code you copied in Step 1
Click
then
again
Some of the theme might be not fully functional in the live preview, but it is successfully installed
Now hit
in the top left corner and finally hit
Your new theme is installed!
Check out the rest of ThemesLtd to install counters, cursors, music players and much more to your blog!
Still need help? Click Here for a video guide on installing themes
How to add Instagram to your theme

Go to embedagram.com and click the red text that says "...let's get started"
A new page will load asking you to allow Embedagram access to your Instagram photos
Click the
button
Another page will load with 3 gray boxes, click the last box called 'the jQuery plugin'
Now on this page find your Instagram ID, select and copy it
Go to your Tumblr blog and in the top right corner click
Scroll down the lsit on the left and find the option 'Instagram ID' and paste your Instagram ID
The feed will not show in your live preview, but it will now be successfully installed
Click
Refresh your blog and your Instagram feed is installed!
Create your own Tumblr Themes! It's so easy and you don't need to know any HTML with our Tumblr Theme Generator. Tumblr HTML Codes Add an ask box, change your follow buttons, customize links and much more. Easy install cut & paste HTML codes for your blog!