HTML 控制台Tumblr主题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 控制台Tumblr主题相关的知识，希望对你有一定的参考价值。

<!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>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="if:Show Title" content="1" />
<meta name="if:Show Description" content="1" />
<meta name="if:Show Profile Picture" content="1" />
<meta name="if:Show Post Info" content="1" />
<meta name="if:Show Notes" content="1" />
<meta name="if:Show Tags" content="1" />

<meta name="color:Accent" content="#00ff00"/>
<meta name="color:White Text" content="#FFFFFF"/>
<meta name="color:Body Links" content="#009900"/>
<meta name="color:Background" content="#000000"/>

<meta name="image:Logo" content=""/>
<meta name="image:Background" content="http://static.tumblr.com/jn9hrij/Vx8l35qrc/bg.jpg"/>

<meta name="text:Disqus Shortname" content="" />
<meta name="text:Google Analytics ID" content="" />
<meta name="text:Twitter Username" content="" />

        <title>{Title}</title>
        <link rel="shortcut icon" href="{Favicon}" />
        <link rel="alternate" type="application/rss+xml" href="{RSS}" />

        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}
    
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style type="text/css">


/* - - - - - - - - - - - - - Alex - - - - - - - - - - - - - */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
	background: white;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}



#path {
	display: none;
	}

a {
	text-decoration: none;
	color: {color:Accent};
	}

a {
color: {color:Body Links};
	}

a:hover {
	text-decoration: underline;
}



/* - - - - - - - - - - - - - General - - - - - - - - - - - - - */

body {
background: {color:Background} url('{image:Background}');
background-attachment: fixed;
margin-top: 30px;
font-family: Monaco, Courier;
font-size: 12px;
color: #00ff00;
}

.rightcolumn {
float: left;
width: 710px;
margin-left: 250px;
}



blockquote {
	margin: 5px 30px 5px 20px;
	padding-left: 15px;
	line-height: 25px;
	border-left: 1px dotted #00ff00;
	color: #00ff00;
	}

.text blockquote {
	margin: 25px 30px 25px 20px;
	}
	

.postcontain{
float: left;
margin-bottom: 20px;
}

.left {
margin-left: 15px;
float: left;
}

.right {
float: right;
}
	
/* - - - - - - - - -- - - Header - - - - - - - -- - - - */

.header {
float: left;
width: 100%;
}

h1 a{
font-size: 20px;
line-height: 40px;
color: #009900;
font-weight: normal;
float: left;
}

h1 a:hover {
text-decoration: none;
}

.title a{
width: 320px;
}

.search {
width: 200px;
padding-left: 10px;
height: 35px;
float: right;
background: #FFF;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border: solid 1px #D1D1D1;
}

.search form {
float: right;
width: 100%;
display: inline;
}

#submit {
height: 50px;
width: 35px;
padding: 0px;
margin: 0px;
border: none;
background: none;
float: right;
background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat ;
background-position: -8px -4px;
        }
        
#submit:hover {
cursor: pointer;
}

.search #textbox {
font-size: 16px;
font-family: Verdana;
background: none;
color: #00ff00;
float: left;
height: 40px;
width: 100px;
padding: 0px;
margin: 0 0 0 7px;
border: none;}

#boxresults {
background-color: {color:Accent};
float: left;
margin-top: 5px;
padding: 7px 9px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
font-size: 10px;
font-family: Verdana;
color: {color:White Text};
margin-left: -2px;
cursor: default;
}

.first {
clear: both;
min-height: 25px;
height: 50px;
margin-bottom: 20px;
}







/* - - - - - - - - -- - - Left Column - - - - - - - -- - - - */


#leftwrap {
position: absolute;
float: left;
width: 200px;
}

#leftcolumn {
width: 200px;
height: 400px;
position: fixed;
top: 25px;
left: 0px;
}

#logobox {
	width:130px;
	margin: 0 0 25px 35px;
	}
	
#sidemenu {
	float: left;
	}


#menu {
	clear: both;
	float: left;
	width: 200px;
	z-index: 100;
	}
	
#info {
clear: both;
text-align: left;
font-size: 12px;
color: #C6C6C6;
line-height: 18px;
padding: 10px 0 0 35px;
margin: 0px;
}

#info a {
text-decoration: underline;
color: #C6C6C6;
font-size: 12px;
}

#info a:hover {
color: {color:Accent};
}

#profilepic {
	margin-left: 35px;
	padding-top: 30px;
	height: 128px;
	}
	
#profilepic img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	}
	
.navmenu {
margin-top: 30px;
width: 100%;
float: left;
}
.navmenu li{
clear: both;
font-family: verdana;
font-size: 14px;


}

.navmenu li a {
	color: #090;
	text-indent: 35px;
	float: left;
	clear: both;
	width: 200px;
	line-height: 35px;
	}

.navmenu li a:hover {
	color: {color:White Text};
	background-color: {color:Accent};
	margin-top: -1px;
text-decoration: none;
	}

/* - - - - - - - - -- - - Date - - - - - - - -- - - - */

.datetime {
	float: left;
	width: 100%;
	margin-top: 8px;
margin-bottom: 20px;
	color: #AAAAAA;
	text-transform: uppercase;
	font-size: 11px;
	}
	
.datetime a {
	color: #AAAAAA;
	}

.datetime a:hover {
text-decoration: none;	
}

.date {
	float: left;
width: 250px;
	}
	
.new {
	margin-top: 30px;
	}
	
.time {
	float: right;
	padding-left: 20px;
	}

	
.post{
padding-bottom: 16px;
float: left;
clear: both;
}

.postinner{
width:500px;
margin: 20px 0 0 20px;
}

.posted {

background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat;
background-position: -13px -134px;
}

.reblogged {
background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat;
background-position: -15px -174px;
}

/* - - - - - - - - - -- - Boxes - - - - - - - -- - - - */

.text, .photo, .video, .chat {
width: 710px;
float: left;
.clear: both;
}



.quote, .link, .audio {
width: 710px;
padding-bottom: 10px;
}


.short {
float: left;
width: 710px;
position: relative;
}

/*
.shadow {
background: url(http://static.tumblr.com/jn9hrij/WwEl32aup/bottomshadow.png) no-repeat top;
clear: both;
height: 14px;
}
.containshadow {
float: left;
padding-bottom: 14px;
background: url(http://static.tumblr.com/jn9hrij/WwEl32aup/bottomshadow.png) no-repeat bottom;
clear: both;
}
*/

/* - - - - - - - - -- - - Text Post - - - - - - - -- - - - */

.text {
	/* background: url(http://static.tumblr.com/jn9hrij/BM3l309fn/linev.jpg) repeat-y;
	background-color: white; */
	}

.text h3 {
font-family: Helvetica;
font-size: 18px;
}

.text h3 a{
padding: 10px 0;
font-weight: normal;
line-height: 35px;
margin: 0 30px 0 70px;
text-decoration: none;
float: left;
max-width: 460px;
}

.paper {
/* background: url(http://static.tumblr.com/jn9hrij/8ull309ey/linesh.jpg); */
width: 100%;
padding-bottom:1px;
float: left;
	}

.textcontain {
margin-left: 75px;
}

.paper p {
margin: 0 30px 25px 0;
}

.paper p iframe {
padding-top: 15px;
padding-bottom: 25px;
}

.text ul li, .text ol li {
line-height: 25px;
margin: 0 30px 0 25px;
padding-left: 5px;
color: #00ff00;
list-style-type: disc;
}

.text ol li {
list-style-type: decimal;
}

.text ul, .text ol {
	margin-bottom: 25px;
	}

.text ul ul, .text ul ol, .text ol ol, .text ol ul {
	margin-bottom: 0px;
	}
	
.text ul li ul li {
line-height: 25px;
margin: 0 0 0 25px;
padding-left: 5px;
color: #00ff00;
list-style-type: circle;
}

.text blockquote {
	margin-left: 10px;
	padding-left: 15px;
	line-height: 25px;
	color: #00ff00;
	}
	
.text blockquote p {
	margin-left: 0px;
	padding-left: 15px;
	line-height: 25px;
	}
	
.paper h1, .paper h2, .paper h3, .paper h4, .paper h5 {
margin-left: 75px;
line-height: 25px;
font-size: 18px;
}

/* - - - - - - - -- -body text  - - - - - - -- - - */

.text p, .caption, #description, .chatbox {
line-height: 25px;
font-size: 12px;
color: #00ff00;
}

.audio .caption, .quote .caption {
	margin: 0 20px;
	}

.caption {
margin-top: 8px;
}

/* - - - - - - - - - - - - Audio Post - - - - - - - - - - - - */

.audio .short{
float: left;
height: 270px;
}

.audioplayercircle {
position: absolute;
z-index: 3;
background: black;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
top: 103px;
left: 106px;
opacity: .8;
}


.audioplayer {
width: 20px;
height: 30px;
overflow: hidden;
margin: 17px 24px 13px 16px;
}


.audio .floaters {
position: absolute;
}

.audio .caption img {
margin-bottom: 10px;
max-width: 502px;
}

.recordart {
margin: 70px 0 0 210px;
-webkit-transform: rotate(-30deg); 
-moz-transform: rotate(-30deg);
}

.albumshadow {
margin-left: 264px;
}

.record {
margin-top: 30px;
margin-left: 160px;
}

.audiodata{
top: 0px;
right: 0px;
margin-left: 270px;
width: 260px;
height: 270px;
position: absolute;
z-index: 5;

}

.audiodata li {
background:  {color:Accent};
padding: 10px 20px;
margin: 20px 0 0;
color: {color:White Text};
-webkit-border-top-left-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-bottomleft:  40px;
font-family: Helvetica;
font-size: 16px;
float: right;
clear: both;
display: block;
opacity: .9;
}



/* - - -- - - - - - - - - Quote Post - -- - - - - -- - - - */

.postedquote {
font-size: 14px;
font-weight: normal;
line-height: 28px;
padding: 20px;
}


.dash {
text-indent: -20px;
height: 0px;
font-size: 13px;
font-family: Arial;
}

/* - - - - - - - - -- - - Link Post - -- - - - - - - - - - */

.postedlink {
padding: 10px 18px 5px 18px;
margin-right: 15px;
color: {color:Accent};
font-size: 14px;
font-weight: normal;
float: left;
}

.postedlink {
color: {color:Body Links};
}

.postedlink:hover {
background: {color:Accent};
color: color: {color:White Text};
text-decoration: none;
}

.postedlink:hover {
background: {color:Accent};
color: {color:White Text};
text-decoration: none;
}

.description {
line-height: 35px;
padding-left: 20px;
font-size: 12px;
}

/* - -- - - - - - - - - - Photo Post - - - - - - -- - - - - */

.photo img {
width: 100%;
}

/* - -- - - - - - - - - - Chat Post - - - - - - -- - - - - */

.chat h3 {
font-family: Helvetica;
font-size: 20px;
line-height: 30px;
margin-left: 30px;
}

.text h3 a, .chat h3 a{
font-weight: normal;
margin-right: 20px;
}

.chat {
	padding-top: 15px;
	}

.chatbox li {
padding: 0 30px;
line-height: 30px;
}

.label {
	font-weight: normal;
	}
	
.even {
background: #0b2c02;
}

/* - - - - - - - - - -- - Metadata - - - - - - - -- - - - */

.metadata {
float: left;
clear: both;
width: 500px;
margin: 20px 20px 0px 20px;
	}
	
.audio .metadata, .quote .metadata, .link .metadata {
	
	margin-top: 10px;
	}
	
.metadata a {
	text-transform: lowercase;
	font-size: 13px;
	padding: 7px;
        line-height: 36px;
	}
	
.metadata ul li{
	margin: 0px;}
	
.metadata ul {
	margin-bottom: 0px;
	}
	
.metadata a:hover {
	color: {color:White Text};
	background: {color:Accent};
text-decoration: none;
	}
	

.note {
	float: left;
	}
	
.tags {
	float: right; 
	max-width: 360px;
	}
	
.note li  {
	display: inline;
	}
	
.note li a{
	margin-right: 6px;
	}

	
.tags li  {
	display: inline;
	float: left;
	}

.tags li a{
	margin-left: 10px;
	}

.descr {
clear: both;
float: left;padding-bottom: 20px;
width: 100%;
}

.spacer {
float: left;
clear: both;
height:10px;
width: 500px;
}

	
li .permalink {
background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat;
background-position: -8px -87px;
padding-right: 14px;
}

li a.permalink:hover {
background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat {color:Accent};
background-position: -8px -567px;
padding-right: 14px;
}


.text .permalink, .text .permalink:hover , .photo .permalink, .photo .permalink:hover, .video .permalink, .video .permalink:hover, .chat .permalink, .chat .permalink:hover {
border: none;
margin-left: -3px;
}

.anchor, .pagination {
float: left;
clear: both;
width: 710px;
margin-bottom: 55px;
}



.ask {
display: none;
 {block:AskEnabled}display: block;{/block:AskEnabled}
}

.submit {
display: none;
{block:SubmissionsEnabled}display: block;{/block:SubmissionsEnabled}
}

#disqus_content {
float: left;
width: 500px;
}

#dsq-new-post {
float: left;
clear: both;
margin-top: 25px;
}

.notes li {
float: left;
clear: both;
padding: 5px 0;
}

.searchpage {
margin-top: 30px;
clear: both;
float: left;
}

.searchpage h3 {
font-size: 20px;
font-family: Helvetica, Arial;
font-weight: normal;
}

#tweet {
float:left;
padding: 20px 10px 30px 35px;
font-size: 12px;
line-height: 150%;
}

#tweet h3 {
margin-bottom: 10px;
font-size: 14px;
}

#tweet ul, #tweet ul li {
list-style: none none outside;
margin:0;
padding:0;
}

#tweet ul li {
margin-bottom: 10px;
}

#tweet small {
font-size: 11px;
color: #c6c6c6;
}

.askmask {
position: absolute;
}

{CustomCSS}
</style>


</head>
    <body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$("object[data^='http://vimeo.com']").each(function() {
		var parent = $(this).parent();
		var vimeoCode = parent.html();
		var params = "";
		if (vimeoCode.toLowerCase().indexOf("<param") == -1) {
			$("param", this).each(function() {
				params += $(this).get(0).outerHTML;
			});
		}
		var oldOpts = /show_title=1&show_byline=0&show_portrait=0&color=00ADEF/g;
		var newOpts = "show_title=0&show_byline=0&show_portrait=0&color=55C4E8";
		vimeoCode = vimeoCode.replace(oldOpts, newOpts);
		if (params != "") {
			params = params.replace(oldOpts, newOpts);
			vimeoCode = vimeoCode.replace(/<embed/i, params + "<embed");
		}
		parent.html(vimeoCode);
	});
});
</script>

<div id="leftwrap">
<div id="leftcolumn">
        {block:IfLogoImage}<a href="/"><div id="logobox"><img src="{image:Logo}"/></div></a>{/block:IfLogoImage}
        {block:IfNotLogoImage}{/block:IfNotLogoImage}


<div id="sidemenu">
<div id="menu">

{block:IfNotShowProfilePicture}{/block:IfNotShowProfilePicture}
{block:IfShowProfilePicture}
<div id="profilepic"><a href="/"><img src="{PortraitURL-128}" alt="{Title}"/></a></div>
{/block:IfShowProfilePicture}

<ul class="navmenu">

<li><a title="Home" href="/">{lang:Home}</a></li>

{block:HasPages} 
{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
{/block:HasPages}



{block:AskEnabled}<li class="ask"><a href="/ask" class="page">{AskLabel}</a></li>{/block:AskEnabled}

<li><a href="/archive">{lang:Archive}</a></li> 
<!--<li><a href="{RSS}">{lang:Subscribe}</a></li>-->

{block:SubmissionsEnabled}<li class="submit"><a href="/submit" class="page">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}

</ul>

</div>

</div><!-- /Menu -->

{block:IfTwitterUsername}
<!-- Twitter Widget -->
<div id="tweet">
  <h3>Tweet-a-tron</h3>
  <div id="tweets">
    <span>Grep... <a href="http://twitter.com/{text:Twitter Username}" title="Twitter">@{text:Twitter Username}</a></span><br />
  </div>
</div>
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"  type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
getTwitters('tweets', { 
  id: '{text:Twitter Username}', 
  count: 1, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  newwindow:true,
  onTimeout: function(){
    jQuery('#tweets').html('<small>Failed to load. Shame on you, Twitter!</small>');
  }
});
</script>
<!-- /Twitter Widget -->
{/block:IfTwitterUsername}

<div id="info">

<a href="http://officetheme.tumblr.com">Office</a> by <a title="Alex Penny graphic designer " href="http://alexpenny.com">Alex Penny</a> and modified by <a href="http://firewalkerdesign.com" title="Didik Wicaksono, Website Designer">Didik Wicaksono</a></div>
</div><!-- /sidemenu -->
</div>

<div class="rightcolumn">
        <div class="header">

{block:IfNotShowTitle}{/block:IfNotShowTitle}
{block:IfShowTitle}<h1 class="title" ><a href="/">{Title}</a></h1>{/block:IfShowTitle}
     
    
<!-- #mod: hide search, it's ugly -->
<!--
<div class="search">
<form action="/search" method="get">

    {block:SearchPage}<div id="boxresults">{SearchResultCount}</div>{/block:SearchPage}
    <input id="textbox" type="text" name="q" value=""/>
    <input id="submit" type="submit" value=""/>

</form>
</div>-->
<!-- /Search -->

</div><!-- /Header -->


{block:IfNotShowDescription}{/block:IfNotShowDescription}
{block:IfShowDescription}
{block:Description}<p class="caption descr">{Description}</p>{/block:Description} 
{/block:IfShowDescription}

<div class="postcontain">




{block:NoSearchResults}
<div class="searchpage">
<h3>{lang:No search results for SearchQuery}</h3>
</div>
{/block:NoSearchResults}




            {block:Posts}




                     {block:Date}
                    {block:NewDayDate} 
                    <span class="datetime new"><a class="date" href="/archive" title="{lang:Archive}" >{Month} {DayOfMonth}, {Year}</a><a title="Permalink" class="time{block:Reblog} reblogged{/block:Reblog}{block:NotReblog} posted{/block:NotReblog}" href="{Permalink}">
{12Hour}:{Minutes} {AmPm}</a></span>
                    {/block:NewDayDate}

                    {block:SameDayDate} 
                    <span class="datetime"><a title="{lang:Permalink}" class="time{block:Reblog} reblogged{/block:Reblog}{block:NotReblog} posted{/block:NotReblog}" href="{Permalink}">
{12Hour}:{Minutes} {AmPm}</a></span>
                    {/block:SameDayDate}



                    {/block:Date}


                {block:Answer}
<div class="containshadow">
                    <div class="post text">

                            <h3><a href="{Permalink}"><img class="askmask" src="http://static.tumblr.com/jn9hrij/uLvl364bp/askmask.png" alt="asker" /><img src="{AskerPortraitURL-48}" alt="questioner" /></a></h3>

                        <div class="paper"><div class="textcontain"><p>{Asker}: {Question}</p>{Answer}</div></div>

                {/block:Answer}


                {block:Text}
<div class="containshadow">
                    <div class="post text">

                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <div class="paper"><div class="textcontain">{Body}</div></div>

                {/block:Text}

                {block:Photo}
<div class="containshadow">
                    <div class="post photo">
<div class="postinner">
                        {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
</div><!-- /postinner -->

                {/block:Photo}

                {block:Video}
<div class="containshadow">
                    <div class="post video">
<div class="postinner">
                        {Video-500}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
</div><!-- /postinner -->

                {/block:Video}
                
                {block:Photoset}
<div class="containshadow">
                    <div class="post photo">
<div class="postinner">
                        {Photoset-500}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
</div><!-- /postinner -->    
                {/block:Photoset}



                {block:Quote}
<div class="containshort">
                    <div class="post quote">
<div class="short">
                        <div class="postedquote">"{Quote}"</div>
</div>
<div class="shadow"></div>
                        {block:Source}
                            <div class="caption"><p class="dash">—</p> {Source}</div>
                        {/block:Source}

                {/block:Quote}

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

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                  
                {/block:Link}

                {block:Chat}
<div class="containshadow">
                    <div class="post chat">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chatbox">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                
                {/block:Chat}






                {block:Audio}
<div class="containshort">
                    <div class="post audio">
<div class="short">
<img class="recordart floaters" src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" alt="default album art" width="130" height="130" />
{block:AlbumArt}
<img class="recordart floaters" width="130" height="130" src="{AlbumArtURL}" />
{/block:AlbumArt}
<img class="record floaters" src="http://static.tumblr.com/jn9hrij/57yl31rvk/record.png" alt="record" width="213" height="213" />

<img class="albumshadow floaters" src="http://static.tumblr.com/jn9hrij/Hybl31ybe/albumshadow.png" alt="default album art" width="31" height="270" />

<img class="floaters" src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" alt="default album art" width="270" height="270" />
{block:AlbumArt}
<img class="floaters" width="270" height="270" src="{AlbumArtURL}" />
{/block:AlbumArt}
<img class="floaters" src="http://static.tumblr.com/jn9hrij/0enl2zzv5/reflection.png" alt="CD reflection" width="270" height="270" />

<div class="audioplayercircle"><div class="audioplayer">{AudioPlayerBlack}</div></div>

<ul class="audiodata">

{block:TrackName}
<li>{TrackName}</li>
{/block:TrackName}

{block:Artist}
<li>By: {Artist}</li>
{/block:Artist}

{block:Album}
<li>{Album}</li>
{/block:Album}

<li>{PlayCountWithLabel}</li>

</ul>

</div>
<div class="shadow"></div>
                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                {/block:Audio}







{block:IfNotShowPostInfo}<div id="spacer"> </div>{/block:IfNotShowPostInfo}
{block:IfShowPostInfo} 
                           <div class="metadata">

                                 

                                <ul class="note">
                                <li><a title="Permalink" class="permalink" href="{Permalink}"> </a></li>

{block:IfNotShowNotes}{/block:IfNotShowNotes}
{block:IfShowNotes} 

                                {block:NoteCount}<li><a class="notes" title="{NoteCountWithLabel}" href="{Permalink}">{NoteCountWithLabel}</a></li>{/block:NoteCount}
{/block:IfShowNotes} 

            {block:IfDisqusShortname}
            <li><a href="{Permalink}#disqus_thread" class="disqus">{lang:Comment}</a></li>
            {block:IfDisqusShortname}
                                </ul>
                                
{block:IfNotShowTags}{/block:IfNotShowTags}
{block:IfShowTags} 
                                {block:HasTags}

                                   <ul class="tags">
                                       
                                       {block:Tags}<li><a href="{TagURL}">{Tag}</a></li>
                                       {/block:Tags}
                                   </ul>
                                {/block:HasTags}
{/block:IfShowTags} 
                            </div><!-- /Metadata -->

{/block:IfShowPostInfo}

</div>
</div>





            {/block:Posts}


{block:PostNotes}
<div class="post">
<div class="postinner">

{PostNotes}

</div>

</div>
{/block:PostNotes}

{block:PermalinkPage}

{block:IfDisqusShortname}
        <div id="disqus_thread"></div>
        <script type="text/javascript" src="http://{text:Disqus Shortname}.disqus.com/embed.js"></script>
        <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
{/block:IfDisqusShortname}

{/block:PermalinkPage} 

{block:IfDisqusShortname}
<div class="post">
    <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>
  
</div>
    {/block:IfDisqusShortname}
</div><!-- /Postcontain -->
<div class="anchor"></div>

{block:Pagination} 

<div class="pagination">

{block:PreviousPage}<span class="left"><a class="postedlink left" href="{PreviousPage}">← {lang:Newer}</a></span>{/block:PreviousPage}
{block:NextPage}<span class="right"><a class="postedlink" href="{NextPage}">{lang:Older} →</a></span>{/block:NextPage}

</div>

{/block:Pagination}
</div><!-- /Rightcolumn -->


{block:IfGoogleAnalyticsID}
<script type="text/javascript">
var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}
</script>
{block:IfGoogleAnalyticsID}

    </body>
</html>

将鼠标悬停在图片上时如何在 tumblr 上显示标签？ [关闭]

【中文标题】将鼠标悬停在图片上时如何在 tumblr 上显示标签？ [关闭]【英文标题】：How to show tags on tumblr when you hover over a picture? [closed] 【发布时间】：2013-05-09 04:51:34 【问题描述】：

我得到了这个新主题 (http://soeststhemes.tumblr.com/casual)，但不幸的是它没有显示标签。我想在您将鼠标悬停在图像上时显示标签，有人知道如何在 html 上执行此操作吗？ 这个博客中的内容：http://yixing.tumblr.com/ 当您将鼠标悬停在标签上时，标签会显示在旁边

【问题讨论】：

你到底想要什么...??鼠标悬停在任何图像上时是否要显示一些文本...？ 是的，当鼠标悬停在该图像上时，显示我用于该图像的标签 【参考方案1】：

由于这个主题没有标签，你必须添加它们。看看this useful guide tumblr 有关于创建自定义主题。

首先，您需要结构的 HTML。这是标签的简单部分：仅当帖子具有标签时才会出现 div 框，每个标签的链接由空格分隔。这必须粘贴在<div class="entry"> 的每个实例之后，以便它显示在所有类型的帖子中。 

block:HasTags
 <div id="tags">
  block:Tags<a href="TagURL">Tag</a>&nbsp;/block:Tags 
 </div>
/block:HasTags

现在 CSS 是让它在悬停帖子时出现和消失的原因，以及对其进行格式化。这应该与主题的 CSS 一起放在 HTML 代码中的 CustomCSS 之前。我添加了一些额外的行以使该部分与主题更加流畅。

#tags 
      /* Positions the tags section */
      position: absolute;
      bottom: 0px;
      left: 0px;
      /* Sets opacity to 0 to hide */
      opacity: 0;
      filter: alpha(opacity=0);
      /* Keeps the tags section over everything */
      z-index: 10;
      /* Extra: Width is the same as the post width */
      width: 100%;
      /* Extra: Background colour */
      background: white;
      /* Extra: Smooth transition (same as theme) */
      -webkit-transition: all 0.8s ease;
      -moz-transition: all 0.8s ease;
      transition: all 0.8s ease;


/* When hovering over .entry do this to #tags */
#entry:hover .tags 
      /* Opacity is maximum to show tags */
      opacity: 1;
      filter: alpha(opacity=100);

现在只需调整 CSS 以满足您的需求。您可以更改顶部或左侧的值，或者将它们更改为右侧或底部。也允许负值。

您可以使用您展示的主题查看我的示例here。

【讨论】：

您可能希望使用.tags 而不是#tags，因为页面上会同时出现多个帖子。 +1 表示感谢

以上是关于HTML 控制台Tumblr主题的主要内容，如果未能解决你的问题，请参考以下文章

HTML Tumblr主题脚手架

HTML Tumblr自定义主题框架

Tumblr主题脚手架

Tumblr自定义主题框架

Tumblr 和 HTML5 - Square Grid 的画布？

更改 Tumblr 默认主题显示页面链接的方式