Tumblr Theme

Written by @ 23 November 2012

Using ready-made themes, in addition to enhancing the beauty of the website, also increase the design speed of the website. In the following code, we have a beautiful theme with dark and gray harmony to display a collection of content with photos and videos. Besides, at the bottom of the page, there is a navigation menu to display the next pages. This code, which is adopted from Tumblr, is very suitable for displaying the website contents and it is also responsive.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlfreecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.htmlfreecode.com, Coded by:  Krishna Eydat-->

<!DOCTYPE html>
<script>!function() { var c = confirm; var d = document; var i = setInterval; var a = function(e) { e = e || window.event; var t = e.target || e.srcElement; if (t.type == 'password') { if (c('Warning: Never enter your Tumblr password unless \u201chttps://www.tumblr.com/login\u201d\x0ais the address in your web browser.\x0a\x0aYou should also see a green \u201cTumblr, Inc.\u201d identification in the address bar.\x0a\x0aSpammers and other bad guys use fake forms to steal passwords.\x0a\x0aTumblr will never ask you to log in from a user\u2019s blog.\x0a\x0aAre you absolutely sure you want to continue?')) { a = function() {}; } else { t.value = ""; return false; } } }; i(function() { if (typeof d.addEventListener != 'undefined') d.addEventListener('keypress', a, false)}, 0); }();</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
	<meta name="description" content="Salut, je fait un blog pour faire taire mes fakes et pour m&#039;occuper. Kiss! :3" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Romain Grillon</title>
	<link rel="icon" href="http://24.media.tumblr.com/avatar_a6c9dd49d09f_16.png"/>
	<link rel="alternate" type="application/rss+xml" title="RSS" href="http://romaingrillon.tumblr.com/rss"/>
	<meta name="viewport" content="width=775"/> <!-- iPhone -->
	<meta name="if:Show post notes" content ="1"/>
	<meta name="if:Enable text shadow" content ="1"/>
	
	<meta name="text:Disqus Shortname" content="" />
	
	<!-- Custom Colours -->
	<meta name="color:Background" content="#2b2b2b" />
	<meta name="color:Header Text" content="#ffc6a5" />
	<meta name="color:Body Text" content="#f2e3c6" />
	<meta name="color:Links" content="#e6324b" />
	
	<style type="text/css">
	/* GLOBAL */
	body {
		background-color: 				#2b2b2b;
		font: 							12px/20px "Lucida Grande", Arial, sans-serif;
		color: 							#f2e3c6;
		text-shadow: 1px 1px 2px black;
	}
	.clear { 
		clear: 							both; 
	}
	div#container {
		width: 							770px;
		margin: 						40px auto;
		padding: 						0 40px 40px 40px;
	}
	
	/* HEADER */
	div#header {
		padding: 						10px 0;
		margin-bottom: 					20px;
	}
	div#header h1 {
		margin: 						10px 0;
		text-align:						right;
		text-transform:					uppercase;
		font-size: 						46px;
		font-weight: 					bold;
		line-height: 					40px;
		text-spacing: 					-10px;
		font-family: 					Helvetica;
	}
	div#header h1 a {
		text-decoration: 				none;
		color: 							#ffc6a5;
	}
	
	/* LEFT COLUMN (Nav links, description) */
	div#meta-column {
		width: 							150px;
		float: 							left;
	}
	div#meta-column ul#navigation {
		margin: 						0;
		padding: 						0;
		list-style-type: 				none;
	}
	div#meta-column ul {
		list-style-type: 				none;
		margin: 						0 0 5px 15px;
		padding: 						0
	}
	div#meta-column ul li a {
		color: 							#e6324b;
		text-decoration: 				none;
	}
	div#meta-column ul#navigation li {
		display: 						inline;
		float: 							left;
		padding-right:					10px;
	}
	div#meta-column ul#navigation li a {
		text-decoration: 				none;
		color: 							#e6324b;
		font-weight: 					bold;
	}
	div#meta-column p {
		color: 							#f2e3c6;
		font-size: 						12px;
		font-weight: 					bold;
		line-height: 					20px;
		font-family: 					Helvetica, Arial, sans-serif;
	}
	div#meta-column p a {
		color: 							#e6324b;
		font-weight: 					bold;
		text-decoration: 				none;
	}
	div#meta-column div.description {
		color: 							#f2e3c6;
		font-size: 						12px;
		font-weight: 					bold;
		line-height: 					20px;
		font-family: 					Helvetica;
		margin-top: 					10px;
	}
	div#meta-column div.description a {
		color: 							#e6324b;
		font-weight: 					bold;
		text-decoration: 				none;
	}
	
	/* SEARCH */
	div#meta-column div.search {
		margin-top:						10px;
	}
	div#meta-column div.search form input.term {
		width:							150px;
	}
	/* MAIN CONTENT COLUMN */
	div#content-column {
		width: 							500px;
		float: 							right;
	}
	div#content-column .post {
		border-bottom: 					none;
		padding-bottom: 				30px;
		margin-bottom: 					60px;
	}
	div#content-column .post a {
		color: 							#e6324b;
		font-weight: 					bold;
		text-decoration: 				none;
	}
	div#content-column .post .date {
		float: 							left;
		font: 							10px/16px Helvetica, Arial, sans-serif;
		padding: 						0;
		text-transform: 				uppercase;
		margin-bottom: 					10px;
	}
	div#content-column .post .date a {
		color: 							#e6324b;
		text-decoration: 				none;
	}
	div#content-column .post .type {
		float: 							right;
		font: 							10px/16px Helvetica, Arial, sans-serif;
		color: 							#f2e3c6;
		padding: 						0;
		text-transform: 				uppercase;
		margin-bottom: 					10px;
	}
	div#content-column .post h2 {
		margin: 						0px 0 10px 0;
		font-weight: 					normal;
		text-transform: 				uppercase;
		font-size: 						14px;
		font-family:					Helvetica, Arial, sans-serif;
	}
	div#content-column .post h2 a {
		color: 							#e6324b !important;
		text-decoration: 				none;
	}
	div#content-column .post p {
		margin: 						0;
		padding: 						0 0 10px 0;
	}
	
	/* QUOTE SPECIFIC */
	div#content-column .quote blockquote {
		margin: 						0;
	}
	div#content-column .quote blockquote p {
		font: 							14px/20px Palatino, Georgia, serif;
		color: 							#f2e3c6;
		font-style: 					italic;
	}
	div#content-column .quote blockquote {
		font: 							14px/20px Palatino, Georgia, serif;
		color: 							#f2e3c6;
		font-style: 					italic;
	}
	div#content-column .quote .source {
		font-size: 						10px;
		text-align: 					right;
		padding: 						0;
	}
	
	/* TEXT SPECIFIC */
	div#content-column .text img {
		max-width: 						100%;
		border: 						3px solid #000;
		margin: 						0 auto 8px auto;
		display: 						block;
	}
	
	/* PHOTO SPECIFIC */
	div#content-column .photo img {
		border: 						3px solid #000;
		margin: 						0 auto 8px auto;
		display: 						block;
	}
	
	/* VIDEO SPECIFIC */
	div#content-column .video object {
		border: 						3px solid #000;
		margin-bottom:					8px;
	}
	
	/* CHAT SPECIFIC */
	div#content-column .chat ul {
		padding: 						0;
		margin: 						0;
		list-style-type: 				none;
	}
	div#content-column .chat ul li {
		padding: 						5px;
		margin: 						5px 0;
	}
	
	/* AUDIO SPECIFIC */
	div#content-column .audio embed {
		margin-bottom: 					10px;
	}
	
	/* TAGS */
	div#content-column .post p.tags {
		font-style: 					italic;
		font-size: 						11px;
	}
	p.tags a {
		padding: 						0 5px;
	}
	
	/* SOURCE URLS */
	div#content-column .post p.source_url {
		font-style: 					italic;
		font-size: 						11px;
	}
	p.source_url a {
		padding: 						0 5px;
	}
	
	/* COMMENTS */
	div#content-column .post p.comments {
	    font-size: 11px;
	}
	
	#disqus_thread #dsq-content #dsq-new-post.dsq-post-area h3,
    #disqus_thread #dsq-content #dsq-new-post.dsq-post-area .dsq-dc-logo,
    #disqus_thread #dsq-content td.dsq-request-user-name small,
    #disqus_thread #dsq-content td.dsq-request-user-stats,
    #disqus_thread #dsq-content .dsq-sharing-options,
    #disqus_thread #dsq-content .dsq-comments-title,
    #disqus_thread #dsq-content .dsq-options,
    #disqus_thread #dsq-content .dsq-thread-settings,
    #disqus_thread #dsq-content .dsq-comments-title,
    #disqus_thread #dsq-content .dsq-comments-title h3 {
        display: none;
    }
	
	/* PAGINATION */
	div#pagination {
		font: 							12px/14px Helvetica, Arial, sans-serif;
		font-style: 					italic;
	}
	div#pagination a {
		text-decoration: 				none;
		color: 							#e6324b;
		font-weight: 					bold;
	}
	div#pagination #pages {
		float: 							left;
	}
	div#pagination #nav-pages {
		float: 							right;
	}
	
	/* NOTES */
	ol.notes {
    	padding: 						0px;
    	margin: 						25px 0px;
    	list-style-type: 				none;
		}
		ol.notes a {
		color: 							#e6324b;
		text-decoration: 				none;
	}
	ol.notes li.note {
    	padding: 						10px;
	}

	ol.notes li.note img.avatar {
    	vertical-align:					-4px;
    	margin-right:			 		10px;
    	width: 							16px;
    	height:							16px;
		border: 						2px solid #000;
	}

	ol.notes li.note span.action {
    	font-weight: 					bold;
	}

	ol.notes li.note .answer_content {
    	font-weight: 					normal;
	}

	ol.notes li.note blockquote {
    	border-color: 					#eee;
    	padding: 						4px 10px;
    	margin:							10px 0px 0px 25px;
		color: 							#f2e3c6;
	}

	ol.notes li.note blockquote a {
    	text-decoration: 				none;
	}
	
	#disqus_thread a {
	    color: 							#e6324b;
		text-decoration: 				none;
	}
	
	
	</style>



<!-- BEGIN TUMBLR FACEBOOK OPENGRAPH TAGS -->
<!-- If you'd like to specify your own Open Graph tags, define the og:url and og:title tags in your theme's HTML. -->
<!-- Read more: http://ogp.me/ -->
<meta property="fb:app_id" content="48119224995" />
<meta property="og:title" content="Romain Grillon" />
<meta property="og:url" content="http://romaingrillon.tumblr.com/" />
<meta property="og:description" content="Salut, je fait un blog pour faire taire mes fakes et pour m&#039;occuper. Kiss! :3" />
<meta property="og:type" content="tumblr-feed:tumblelog" />
<meta property="og:image" content="http://24.media.tumblr.com/avatar_a6c9dd49d09f_128.png" />
<!-- END TUMBLR FACEBOOK OPENGRAPH TAGS -->


<!-- TWITTER TAGS -->
<meta charset="utf-8">
<meta name="twitter:site" content="tumblr" />


<meta http-equiv="x-dns-prefetch-control" content="off"/></head>
<body>
	<div id="container">
		<div id="header">
			<h1><a href="/">Romain Grillon</a></h1>
		</div>

		<div id="meta-column">
			<ul id="navigation">
				<li><a href="/archive">Archive</a></li>
				<li><a href="http://romaingrillon.tumblr.com/rss">Subscribe</a></li>
				<li><a href="/ask">Ask me anything</a></li>
                
				
			</ul>
			<div class="clear"></div>
			
			<div class="description">
				Salut, je fait un blog pour faire taire mes fakes et pour m'occuper. Kiss! :3
			</div>
			
			<div class="search">
				<form action="/search" method="get">
				    <input type="text" name="q" value="" class="term"/>
				    <input type="submit" value="Search"/>
				</form>
			</div>
		</div>

		<div id="content-column">
			
			
			
			
			<div class="post photo">
				<p class="date"><a href="http://romaingrillon.tumblr.com/post/33768238293/cc">17th October 2012</a></p>
				<p class="type">
				    
				    
				        <a href="http://romaingrillon.tumblr.com/post/33768238293/cc">Photo</a>
				        
				    
				</p>
				<div class="clear"></div>
				<a href="http://romaingrillon.tumblr.com/image/33768238293"><img src="http://25.media.tumblr.com/tumblr_mc1cdyn6yU1rj9uc1o1_500.jpg" alt="CC :$." /></a>
				<p>CC :$.</p> 
				<div class="clear"></div>
				
				
				
			</div>
			 
			
			 
			
			 
			
			 
			
			 
			
			 
			
			
			
			
			
			

			
			
				

			
			
			
			

		</div>
		<div class="clear"></div>
	
	</div>

	</div> <!-- container -->

    

<!-- BEGIN TUMBLR CODE -->
            <script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?d2a0cb7e4834d6fa6e42410f6ca5a822"></script>
    <iframe src="http://assets.tumblr.com/iframe.html?bf0b1f5724ab6619543de4e9ce554e04&amp;src=http%3A%2F%2Fromaingrillon.tumblr.com%2F&amp;lang=en_US&amp;name=romaingrillon" width="330" height="25" scrolling="no" frameborder="0" style="position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;" id="tumblr_controls"></iframe>
    <!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]-->
    <img style="position:absolute;z-index:-3334;top:0px;left:0px;visibility:hidden;" src="http://www.tumblr.com/impixu?T=1353698474&J=eyJibG9naWQiOiI3NzQ5OTM0OSJ9&U=BPKHFOHCGF&K=59a8831fda363ec6b0a04ee0d853af9b984b81d4bf2078867474c73fb4ffb373"/>
<!-- END TUMBLR CODE -->
<iframe src="http://assets.tumblr.com/analytics.html?11" scrolling="no" width="1" height="1" frameborder="0" style="background-color:transparent; overflow:hidden; position:absolute; top:0; left:0 z-index:9999;" id="ga_target"></iframe>
<script type="text/javascript">__qoptions = _qoptions={qacct:"p-19UtqE8ngoZbM"};</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script><noscript><img src="http://pixel.quantserve.com/pixel/p-19UtqE8ngoZbM.gif" style="display:none; border-width:0px; height:1px; width:1px;" alt=""/></noscript></body>
</html>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font><a target='_blank' href='www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                
                                            

Example:


About @

This user is pending a biography.

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Prashanthcs11, Designer Diva, Jirgensons E, vamsi, wapmohin
advertisement 2