つい数時間前、
→諦めた!! IEでBlinkerが表示されなくなる&zenbak表示も…。(webkitだと大丈夫なのに)
と記載したが、
やっとできた!!!
(..)(^^)(^。^)(*^o^)(^O^)ウレシーーー!!
以前の関連記事表示方法を
→関連記事を表示させる方法(Linkwithnなど使わずに)
なんとか絶対に生かしIEでも正常表示されるようにと
必死こいて頑張った甲斐あった!!
「Smarter Related Posts Widget for Google Blogger - v2.0」 &「Linkwithn」
を共に、
このテンプレートにおいて、(間違いなく他のテンプレートでもOK)
記事直下にブラウザによる異表示なしに表示させることに成功!!
忘れないうちに
備忘録!!
<b:include data='posts' name='related-posts'/>
の直下に以下コードを挿入
<!-- 関連記事 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<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'>
<!-- {
blog_url:'http://(Blogger名).blogspot.com/'
,tags:[]
,related_title:'関連記事'
,recent_title:'最近の記事'
,thumbs:0
,post_page_only:1
} -->
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 == "item"'>
<div style='clear: both; float: right; margin-right: 10px;'>
<script>linkwithin_text='こちらの記事も読まれています:'</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 == "item"'>
<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'>
<!-- {
blog_url:'http://(Blogger名).blogspot.com/'
,tags:[]
,related_title:'関連記事'
,recent_title:'最近の記事'
,thumbs:0
,post_page_only:1
} -->
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 == "item"'>
<div style='clear: both; float: right; margin-right: 10px;'>
<script>linkwithin_text='こちらの記事も読まれています:'</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追加します。
参考までに!