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追加します。

参考までに!

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.

コメント

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