解決Blogger文章列 縮圖模糊/ 影片超出版面問題

一 文章列 縮圖模糊

1. 修改的方法是先找到以下這段程式，用關鍵字收尋：
bp_thumbnail_resize 或 thumbnail_resize 或 thumbnail

document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&#39;<data:post.title/>&#39;));

2. 可以先使用  <!-- xxxx --> 隱藏上面段落的程式碼。
<!-- 程式碼放面，避免下次忘記在哪裡 --> 
再將以下這段落程式碼，貼在下方：

<b:if cond='data:post.thumbnailUrl'>
<script type='text/javascript'>
    //<![CDATA[
    function bp_thumbnail_resize(image_url, post_title) {
        image_tag = '<img src="' + image_url +
            '" class="postthumb" width="370" height="200" alt="' + post_title + '" title="' + post_title + '"/>';
        if(image_url != "") return image_tag;
        else return "";
    }
    //]]>
</script>

<a expr:href='data:post.url'>
    <script type='text/javascript'>
        document.write(bp_thumbnail_resize(&quot;<b:eval expr='resizeImage(data:post.thumbnailUrl,340,"1:1")'/>&quot;,&quot;<data:post.title/>&quot;));
    </script>
</a>
<b:else/>
<a expr:href='data:post.url'><img class='postthumb' expr:alt='data:post.title' expr:title='data:post.title' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxUS2Cb17UGodAFpxwIMKYJlnubCGhIJFh0qhqzAEz0CddkmyA8X7YJGHdiiJ3oreVXhwTzmhqEZ2FZFrlDdsdDCS5JQBeH5GTkgx_TYczw3qp08zwfQntA9xXkUWvukVwKl_bYmFa1pS/s1600/candid-opinions-logo.png'
        width='150' /></a>
</b:if>          

重新進入Blogger，縮圖都變清晰了。 一直以為是自己網路太爛 XD

二 內文的圖片模糊，使用特大會超出滿面？

1. 在Blogger的管理介面按「主題」，再按「自訂」，然後按「進階」，找到「新增CSS」選項。

在裡面輸入「.post-body img {max-width: 100%;}」記得要儲存。它的意思是圖片超出頁面時會自動縮放圖片為版面大小。

三 影片不符合尺寸，不美觀。

現在是ＲＷＤ設計的趨勢，但Blogger的模組或是FREE的模組，其實很多沒有寫入ＲＷＤ的語法在其中。

這個解決方式主要是採用CSS的 @media 屬性來達成，也幫大家找到了程式碼範例(來源)：請先進入Blogger後台 → 「範本」 → 「編輯HTML」，然後將以下的代碼加到「</style>」或者「]]></b:skin>」之前，這樣就可以了囉！

註：!important的作用為「強制提高優先權」，以下程式碼只是個通用的範例，一般情況下可以解決大部分的尺寸顯示的問題，或者你也可以自行定義「max-width」並修改「max-height」

	/* CSS Only */
	.post-body iframe{width:100%!important;}
	@media screen and (max-width:960px){
	.post-body iframe{max-height:90%}}
	@media screen and (max-width:768px){
	.post-body iframe{max-height:75%}}
	@media screen and (max-width:600px){
	.post-body iframe{max-height:60%}}
	@media screen and (max-width:480px){
	.post-body iframe{height:auto!important;max-height:auto!important}}

view rawrwd.css hosted with  by GitHub

這樣就解決啦！只能說Blogger到目前為止是一個無廣告的部落格，而且乾淨利落，還可以自己上傳免費版型。很佛心來著～