Blank Blogger template
Use this empty template to make client-side structures with blogger
I've added one simple b object (<b>) to make it work. You can let it empty.
*Remember, blogger use XHTML elements
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:js='false' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.3' dir='ltr' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' lang='pt-BR' 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>
<title><data:view.title.escaped/></title>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='text/html; charset=windows-1252' http-equiv='content-type'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<b:include data='blog' name='all-head-content'/>
<b:skin version='1.0.0'><![CDATA[
.hover-card {
background-color: #f1f1f1;
width: 200px;
height: 200px;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s, box-shadow 0.3s;
text-align: center;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.hover-card:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
]]></b:skin>
<script><![CDATA[ ]]></script>
</head>
<body style='margin: 0px'>
<div class="hover-card">Hover Over Me!</div>
<!-- blogger requires you to have at least 1 b object.
you can use it or just ignore it. -->
<b:with value='data:messages.labels' var='defaultTitle'>
<header class='centered-top-container' role='banner' style='display:none'>
<b:section class='HTML ou JS' id='HTML ou JS' showaddelement='false'/>
</header>
</b:with>
</body>
</html>
Download file template
