Book review blogspot template · XML
<?xml version="1.0" encoding="UTF-8" ?>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<link href='https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Space+Mono:wght@400;700&display=swap' rel='stylesheet'/>
<b:skin><![CDATA[
/* =============================================
THE READING ROOM — Book Review Blog Template
Aesthetic: Editorial / Literary Magazine
============================================= */
:root {
--cream: #F5F0E8;
--ink: #1A1209;
--mahogany: #6B2D2D;
--gold: #C9933A;
--sage: #5A6B4E;
--warm-gray: #8C8070;
--light-line: #DDD5C4;
--paper: #FAF7F2;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--cream);
color: var(--ink);
font-family: 'Crimson Pro', Georgia, serif;
font-size: 19px;
line-height: 1.75;
}
/* ---- HEADER ---- */
.header-wrapper {
background: var(--ink);
border-bottom: 4px solid var(--gold);
}
.header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 48px 32px 36px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.header-inner::before {
content: '❧';
display: block;
color: var(--gold);
font-size: 22px;
margin-bottom: 14px;
opacity: 0.75;
}
.header-inner h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(40px, 6vw, 72px);
font-weight: 700;
color: var(--cream);
letter-spacing: 0.03em;
line-height: 1.1;
}
.header-description {
font-family: 'Crimson Pro', serif;
font-size: 15px;
font-style: italic;
color: var(--warm-gray);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 10px;
}
/* ---- NAVIGATION ---- */
.nav-wrapper {
background: var(--paper);
border-bottom: 1px solid var(--light-line);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 12px rgba(26,18,9,0.07);
}
.nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
}
.nav-inner ul {
list-style: none;
display: flex;
gap: 6px;
}
.nav-inner ul li a {
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink);
text-decoration: none;
padding: 6px 14px;
border-radius: 2px;
transition: all 0.2s ease;
}
.nav-inner ul li a:hover {
background: var(--ink);
color: var(--cream);
}
#searchform input {
font-family: 'Crimson Pro', serif;
font-size: 14px;
padding: 6px 14px;
border: 1px solid var(--light-line);
border-radius: 20px;
background: var(--cream);
color: var(--ink);
outline: none;
width: 180px;
}
#searchform input:focus {
border-color: var(--gold);
}
/* ---- LAYOUT ---- */
.outer-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 52px 32px;
display: grid;
grid-template-columns: 1fr 320px;
gap: 64px;
align-items: start;
}
/* ---- POSTS ---- */
.post {
margin-bottom: 72px;
padding-bottom: 72px;
border-bottom: 1px solid var(--light-line);
}
.post:last-child {
border-bottom: none;
margin-bottom: 0;
}
.post-label a {
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mahogany);
text-decoration: none;
display: inline-block;
margin-bottom: 14px;
}
.post h3.post-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(26px, 3.5vw, 38px);
font-weight: 700;
line-height: 1.18;
margin-bottom: 8px;
}
.post h3.post-title a {
color: var(--ink);
text-decoration: none;
}
.post h3.post-title a:hover {
color: var(--mahogany);
}
.book-meta {
font-family: 'Crimson Pro', serif;
font-size: 15px;
font-style: italic;
color: var(--warm-gray);
margin-bottom: 18px;
}
.star-rating {
display: inline-flex;
gap: 2px;
margin-bottom: 20px;
font-size: 18px;
color: var(--gold);
}
.post-thumbnail {
float: right;
margin: 0 0 20px 32px;
width: 140px;
border-radius: 3px;
box-shadow: 4px 6px 24px rgba(26,18,9,0.18);
}
.post-thumbnail img {
width: 100%;
display: block;
border-radius: 3px;
}
.post-body {
font-size: 18px;
line-height: 1.8;
color: #2E2318;
}
.post-body p { margin-bottom: 16px; }
.post-body blockquote {
border-left: 3px solid var(--gold);
margin: 24px 0;
padding: 8px 0 8px 24px;
font-style: italic;
color: var(--mahogany);
font-size: 20px;
}
.read-more-link {
display: inline-block;
margin-top: 20px;
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mahogany);
text-decoration: none;
border-bottom: 2px solid var(--mahogany);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.read-more-link:hover {
color: var(--gold);
border-color: var(--gold);
}
.post-footer {
margin-top: 24px;
display: flex;
align-items: center;
gap: 20px;
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--warm-gray);
letter-spacing: 0.08em;
clear: both;
}
.post-footer a {
color: var(--warm-gray);
text-decoration: none;
}
.post-footer a:hover { color: var(--ink); }
/* ---- PAGINATION ---- */
.blog-pager {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32px 0 0;
border-top: 1px solid var(--light-line);
margin-top: 32px;
}
.blog-pager a {
font-family: 'Space Mono', monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--mahogany);
text-decoration: none;
border-bottom: 1px solid var(--mahogany);
padding-bottom: 2px;
transition: all 0.2s;
}
.blog-pager a:hover { color: var(--gold); border-color: var(--gold); }
/* ---- SIDEBAR ---- */
.sidebar-widget {
margin-bottom: 44px;
}
.sidebar-widget h2.title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px;
font-weight: 600;
color: var(--ink);
padding-bottom: 10px;
border-bottom: 2px solid var(--ink);
margin-bottom: 20px;
}
.about-widget {
background: var(--ink);
color: var(--cream);
padding: 28px;
border-radius: 2px;
text-align: center;
border-top: 4px solid var(--gold);
margin-bottom: 44px;
}
.about-widget .avatar {
width: 72px;
height: 72px;
border-radius: 50%;
border: 3px solid var(--gold);
margin: 0 auto 14px;
overflow: hidden;
background: var(--warm-gray);
}
.about-widget .avatar img { width: 100%; display: block; }
.about-widget h3 {
font-family: 'Playfair Display', serif;
font-size: 20px;
font-style: italic;
color: var(--cream);
margin-bottom: 8px;
}
.about-widget p {
font-size: 14px;
color: var(--warm-gray);
line-height: 1.65;
}
.currently-reading-card {
background: var(--paper);
border: 1px solid var(--light-line);
border-radius: 2px;
padding: 16px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.currently-reading-card .mini-cover {
width: 56px;
flex-shrink: 0;
border-radius: 2px;
box-shadow: 2px 3px 12px rgba(26,18,9,0.2);
}
.currently-reading-card .mini-cover img { width: 100%; display: block; }
.currently-reading-card .cr-info h4 {
font-family: 'Playfair Display', serif;
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
}
.currently-reading-card .cr-info p {
font-size: 13px;
color: var(--warm-gray);
font-style: italic;
}
.progress-bar-wrap {
margin-top: 10px;
background: var(--light-line);
border-radius: 4px;
height: 5px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--mahogany), var(--gold));
border-radius: 4px;
width: 62%;
}
.genre-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.genre-list li a {
font-family: 'Space Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink);
text-decoration: none;
border: 1px solid var(--light-line);
padding: 5px 12px;
border-radius: 20px;
transition: all 0.2s;
display: inline-block;
}
.genre-list li a:hover {
background: var(--mahogany);
border-color: var(--mahogany);
color: var(--cream);
}
.sidebar-post-item {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--light-line);
align-items: flex-start;
}
.sidebar-post-item:last-child { border-bottom: none; }
.sidebar-post-item .sp-text h4 {
font-family: 'Playfair Display', serif;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 4px;
}
.sidebar-post-item .sp-text h4 a {
color: var(--ink);
text-decoration: none;
}
.sidebar-post-item .sp-text h4 a:hover { color: var(--mahogany); }
.sidebar-post-item .sp-text span {
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--warm-gray);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ---- FOOTER ---- */
.footer-wrapper {
background: var(--ink);
border-top: 4px solid var(--gold);
padding: 48px 32px 28px;
color: var(--warm-gray);
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 36px;
}
.footer-col h3 {
font-family: 'Playfair Display', serif;
font-size: 16px;
color: var(--cream);
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid #3A3020;
}
.footer-col p,
.footer-col ul { font-size: 14px; line-height: 1.8; }
.footer-col ul { list-style: none; }
.footer-col ul li a {
color: var(--warm-gray);
text-decoration: none;
transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--gold); }
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
border-top: 1px solid #3A3020;
padding-top: 20px;
display: flex;
justify-content: space-between;
font-family: 'Space Mono', monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer-bottom a { color: var(--gold); text-decoration: none; }
/* ---- SCROLL TOP ---- */
.scroll-top-btn {
position: fixed;
bottom: 28px;
right: 28px;
width: 42px;
height: 42px;
background: var(--mahogany);
color: var(--cream);
border: none;
border-radius: 2px;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(107,45,45,0.4);
transition: background 0.2s;
z-index: 200;
text-decoration: none;
line-height: 1;
}
.scroll-top-btn:hover { background: var(--gold); }
/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
.outer-wrapper { grid-template-columns: 1fr; gap: 48px; }
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.outer-wrapper { padding: 32px 18px; }
.post-thumbnail { float: none; width: 100%; margin: 0 0 20px 0; }
.footer-inner { grid-template-columns: 1fr; }
.header-inner { padding: 32px 20px 24px; }
}
]]></b:skin>
</head>
<body>
<!-- ====== HEADER ====== -->
<div class='header-wrapper'>
<div class='header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='The Reading Room' type='Header' version='2'>
<b:widget-settings>
<b:widget-setting name='useImage'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<h1><data:title/></h1>
<b:if cond='data:description != ""'>
<p class='header-description'><data:description/></p>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<!-- ====== NAVIGATION ====== -->
<div class='nav-wrapper'>
<div class='nav-inner'>
<b:section class='navbar' id='navbar' maxwidgets='2'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList' version='2'>
<b:includable id='main'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
<b:widget id='HTML5' locked='false' title='Search' type='HTML' version='2'>
<b:widget-settings>
<b:widget-setting name='content'><form action="/search" method="get" id="searchform"><input name="q" type="text" placeholder="Search reviews..." /></form></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<data:content/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<!-- ====== MAIN LAYOUT ====== -->
<div class='outer-wrapper'>
<!-- POSTS COLUMN -->
<div id='main-col'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2'>
<b:includable id='main' var='top'>
<b:loop values='data:posts' var='post'>
<article class='post' expr:id='data:post.id'>
<b:if cond='data:post.labels'>
<div class='post-label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url'><data:label.name/></a>
</b:loop>
</div>
</b:if>
<h3 class='post-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h3>
<p class='book-meta'>A review worth reading</p>
<div class='star-rating'>★★★★★</div>
<b:if cond='data:post.featuredImage'>
<div class='post-thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.featuredImage'/>
</div>
</b:if>
<div class='post-body'>
<b:if cond='data:blog.pageType == "index"'>
<data:post.snippet/>
<br/>
<a class='read-more-link' expr:href='data:post.url'>Continue Reading →</a>
<b:else/>
<data:post.body/>
</b:if>
</div>
<div class='post-footer'>
<span><data:post.dateHeader/></span>
<b:if cond='data:post.allowComments'>
<span>
<a expr:href='data:post.url + "#comments"'>
<data:post.numComments/> Comments
</a>
</span>
</b:if>
</div>
</article>
</b:loop>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>← Newer Posts</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'>Older Posts →</a>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!-- SIDEBAR COLUMN -->
<aside class='sidebar' id='sidebar'>
<b:section class='sidebar' id='sidebar-widgets' preferred='yes'>
<!-- About Widget -->
<b:widget id='HTML1' locked='false' title='About' type='HTML' version='2'>
<b:widget-settings>
<b:widget-setting name='content'><div class="about-widget"><div class="avatar"><img src="https://www.gravatar.com/avatar/?d=mp" alt="Reviewer"/></div><h3>Your Name</h3><p>A lifelong reader, occasional coffee-drinker, and obsessive note-taker in book margins. Reviewing everything from literary fiction to fantasy since 2018.</p></div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<data:content/>
</b:includable>
</b:widget>
<!-- Currently Reading -->
<b:widget id='HTML2' locked='false' title='Currently Reading' type='HTML' version='2'>
<b:widget-settings>
<b:widget-setting name='content'><div class="sidebar-widget"><h2 class="title">Currently Reading</h2><div class="currently-reading-card"><div class="mini-cover"><img src="https://via.placeholder.com/56x80/6B2D2D/F5F0E8?text=Book" alt="Book cover"/></div><div class="cr-info"><h4>Book Title Here</h4><p>Author Name</p><div class="progress-bar-wrap"><div class="progress-bar-fill"></div></div><p style="font-size:11px;margin-top:6px;color:#8C8070;">62% complete</p></div></div></div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<data:content/>
</b:includable>
</b:widget>
<!-- Labels / Genres -->
<b:widget id='Label1' locked='false' title='Genres' type='Label' version='2'>
<b:includable id='main'>
<div class='sidebar-widget'>
<h2 class='title'>Genres</h2>
<ul class='genre-list'>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:label.url'><data:label.name/></a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
<!-- Recent Posts via JSON feed -->
<b:widget id='HTML4' locked='false' title='Recent Reviews' type='HTML' version='2'>
<b:widget-settings>
<b:widget-setting name='content'><div class="sidebar-widget"><h2 class="title">Recent Reviews</h2><div id="recent-posts-list"></div></div><script>fetch("/feeds/posts/default?alt=json&max-results=5").then(r=>r.json()).then(d=>{var e=d.feed.entry||[];var h="";e.forEach(function(p){var t=p.title.$t;var l=p.link.find(function(x){return x.rel==="alternate";}).href;var dt=new Date(p.published.$t).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"});h+="<div class='sidebar-post-item'><div class='sp-text'><h4><a href='"+l+"'>"+t+"</a></h4><span>"+dt+"</span></div></div>";});document.getElementById("recent-posts-list").innerHTML=h;}).catch(function(){});</script></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<data:content/>
</b:includable>
</b:widget>
<!-- Blog Archive -->
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive' version='2'>
<b:includable id='main'>
<div class='sidebar-widget'>
<h2 class='title'>Archive</h2>
<b:include name='interval'/>
</div>
</b:includable>
<b:includable id='interval'>
<b:loop values='data:intervalData' var='i'>
<div style='margin-bottom:6px;font-size:14px;'>
<a expr:href='data:i.url' style='color:var(--ink);text-decoration:none;'>
<data:i.name/> (<data:i.post.count/>)
</a>
</div>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</aside>
</div>
<!-- ====== FOOTER ====== -->
<div class='footer-wrapper'>
<div class='footer-inner'>
<div class='footer-col'>
<h3><data:blog.title/></h3>
<p>Thoughtful reviews of literary fiction, fantasy, non-fiction, and everything in between. Books are the quietest and most constant of friends.</p>
</div>
<div class='footer-col'>
<h3>Quick Links</h3>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='/search/label/5-Stars'>5-Star Picks</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
</ul>
</div>
<div class='footer-col'>
<h3>Follow Along</h3>
<b:section class='footer-follow' id='footer-follow' maxwidgets='1'>
<b:widget id='HTML3' locked='false' title='Social Links' type='HTML' version='2'>
<b:widget-settings>
<b:widget-setting name='content'><ul><li><a href="#">Goodreads</a></li><li><a href="#">Instagram</a></li><li><a href="#">BookTok</a></li><li><a href="#">Newsletter</a></li></ul></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<data:content/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div class='footer-bottom'>
<span>© <data:blog.title/> · Powered by Blogger</span>
<span>Designed with ♡ for readers</span>
</div>
</div>
<!-- Scroll to Top -->
<a class='scroll-top-btn' href='#' title='Back to top'>↑</a>
<script>
//<![CDATA[
document.querySelector('.scroll-top-btn').addEventListener('click', function(e){
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
//]]>
</script>
</body>
</html>