PR PR

諦めなかった!! IEでもBlinkerとサイドバーzenbackが表示(もちろんwebkitでもOK(^o-))

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2013年4月14日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

つい数時間前、

諦めた!! IEでBlinkerが表示されなくなる&zenbak表示も…。(webkitだと大丈夫なのに)

と記載したが、

やっとできた!!!
(..)(^^)(^。^)(*^o^)(^O^)ウレシーーー!!

以前の関連記事表示方法を
関連記事を表示させる方法(Linkwithnなど使わずに)
なんとか絶対に生かしIEでも正常表示されるようにと
必死こいて頑張った甲斐あった!!

「Smarter Related Posts Widget for Google Blogger - v2.0」 &「Linkwithn」
を共に、
このテンプレートにおいて、(間違いなく他のテンプレートでもOK)
記事直下にブラウザによる異表示なしに表示させることに成功!!

忘れないうちに
備忘録!!

記事直下に関連記事表示とSmart&Linkwithn
コード挿入場所

<b:include data='posts' name='related-posts'/>

の直下に以下コードを挿入

 <!-- 関連記事 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; margin-top: 0px;'>
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js' type='text/javascript'/>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class='related-posts-widget'>
&lt;!-- {
 blog_url:&#39;http://(Blogger名).blogspot.com/&#39;
 ,tags:[]
 ,related_title:&#39;関連記事&#39;
 ,recent_title:&#39;最近の記事&#39;
 ,thumbs:0
 ,post_page_only:1
} --&gt;
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</div>
</b:if>
</b:if>
<!-- 関連記事 終了 -->    
             


<div class='linkwithin_div'/>
               
                <!--  linkwithin code 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; float: right; margin-right: 10px;'>
 <script>linkwithin_text=&#39;こちらの記事も読まれています:&#39;</script>
  <script>
var linkwithin_site_id = *******;
</script>
<script src='http://www.linkwithin.com/widget.js'/>
<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>
</div>
</b:if>
</b:if>
<!--  linkwithin code 終了 -->

以下jqueryは省いても大丈夫です。
(BLinkerにてjquery1.6.1を使用している為。)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

というより、
省かないとwebkitにて、
以前のIE現象が発生してしまう。
ので省く。

省いたコード

<!-- 関連記事 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; margin-top: 0px;'>
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js' type='text/javascript'/>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class='related-posts-widget'>
&lt;!-- {
 blog_url:&#39;http://(Blogger名).blogspot.com/&#39;
 ,tags:[]
 ,related_title:&#39;関連記事&#39;
 ,recent_title:&#39;最近の記事&#39;
 ,thumbs:0
 ,post_page_only:1
} --&gt;
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</div>
</b:if>
</b:if>
<!-- 関連記事 終了 -->    
             


<div class='linkwithin_div'/>
               
                <!--  linkwithin code 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; float: right; margin-right: 10px;'>
 <script>linkwithin_text=&#39;こちらの記事も読まれています:&#39;</script>
  <script>
var linkwithin_site_id = *******;
</script>
<script src='http://www.linkwithin.com/widget.js'/>
<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>
</div>
</b:if>
</b:if>
<!--  linkwithin code 終了 -->

万事OK☆ъ(*゜ー^)> パチンッ♪

あとは、
CSSにて
表示サイズ調整のみ。

.related-posts-widget h2 { margin-bottom: 10px !important; }
.related-posts-widget h2, .linkwithin_text { font-size: 16px !important; font-weight: bold !important; }
ul.rpw, ul.linkwithin_textlist { padding: 0 !important; margin: 0 0 0 15px !important; }
ul.rpw li, ul.linkwithin_textlist li { line-height: 1.2em !important; padding: 0 !important; margin-top: 7px !important; margin-bottom: 0px !important; font-weight: bold !important; }

上記CSSを追加していたが、
現在未適用です。

気が向いたら、
再度編集してCSS追加します。

参考までに!

スポンサーリンク
タイトルとURLをコピーしました