[Blog]Disqusを遅延読み込み(Lazy Load)にしました

テンプレートを飛ばす前にやっていたのですが

これまでのDisqus

• BloggerのコメントをDisqusに置き換える
• Blogger標準コメントとDisqusを両立させる

やっぱりちょっと重いイメージがあるので、

How to Lazy Load Disqus Comments on a Blogger Blog
https://www.freshtechtips.com/2018/06/lazy-load-disqus-comments-blogger-blogspot.html

設定は上の通り

CSS:

.disqus-loading { border: 2px solid #8d8888;
text-align: center;
background-color: #e1e1e1;
font-size: 18px;
font-weight: 300;
color: #777;
padding: 12px 0;
}

.disqus-loading.is-hidden {
display: none;

How to Lazy Load Disqus Comments on a Blogger Blog
https://www.freshtechtips.com/2018/06/lazy-load-disqus-comments-blogger-blogspot.html

ですが、border: 1px

表示させたい部分に追加するコード

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='disqus-loading'>Loading comments&amp;hellip;</div>
<div class='disqus'/>
<!-- Paste JavaScript code given below - here! -->
</b:if>

How to Lazy Load Disqus Comments on a Blogger Blog
https://www.freshtechtips.com/2018/06/lazy-load-disqus-comments-blogger-blogspot.html

Loading Disqusに変更
ロード前の見た目はこんな感じ
https://jsfiddle.net/Furiouz/b8gr6qkv/2/

<!-- Paste JavaScript code given below - here! --> の部分に上のサイトで公開されているDisqusのコードを username を自分のユーザーネームに変えて置くだけですね

追記
プレビュー画面のDisqusにコメント出来てしまうのでスクリプト部分を変更しました

• [Blog]Disqusの遅延読み込み(Lazy Load)スクリプトを変更