[Blogger]MBT Modに入口(エントランスのページ)を作ってみる

めんどくさいけど試してみたい人は

追加CSS

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}

.container a {
  color: white;
}

/* Centered text */
.centered {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Bottom text */
.text-block {
  background-color: red;
  padding-left: 20px;
  padding-right: 20px;
}

関連:

• BloggerでCSSを追加する方法

head内追加

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.header,
.tabs,
.main,
.status-msg-wrap,
.home-link,
.sidebar,
.footer {
  display: none;
}
</style>
</b:if>

関連:

• Bloggerのブログのホーム(ページ)で投稿を非表示にするトリック
• [Blogger]投稿がありません。を非表示にする

bodyタグのすぐ下に追加

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='container'>
<img src='https://blogger.googleusercontent.com/img/a/AVvXsEhXrXngvYpfycBJHfocz-A1UdKy1SlTZrp2nOdSMdPEapWj_7Uq99YPAF_rWNOj_r-cr5rf5LZ1CIgnbqNvBl-dJtej4eQTHpoaopWmJiKW0KqhT9tlIB_nvyTmGMcHjoTdSvrsKRZHouuZhH7CjNtppy54Gofpaj5_yBNx9dr5YQS1fzflvI49cdBf_w=s2048'/>
  <div class='centered text-block'><a href='https://blogname.blogspot.com/search/label/'>Enter</a></div>
</div>
</b:if>

blogname は自分のブログURLに書き換える

関連:

• [Blogger]ブログTOPのURL

footerにクラスを追加

<footer class='footer'>

Bloggerの設定 > メインページに掲載する投稿数の上限 > 0

これで終わりかな

サンプル

https://mod-template-minimal.blogspot.com/