adsense

HTML教學(17)如何設定圖片的位置

圖片在部落格裡斬了很重要的一環,圖片可以讓你一目了然, 賞心悅目,增加你部落格的可看性。

圖片要如何與文字結合呢?這就關系到位置問題了。

我們可以利用【img】標籤里的【align】來設定圖片的位置在左邊,右邊或中間。

下列為上樹葉圖的程式碼。

<img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwxcN7MIYj0gXbqILb07a2gW6AbOBH6FZrjfU9F13ROMDLe7hynwj5m-yH-BeBBPO8_dIy_DZrhSEJpf1TtowR32MhPBNw2DfUWjnzSw7TdbteLnv-onMSm4pZqDEl4mZY5ZiVrcC83k/" align="left"
height="32" width="32" vspace="20"
hspace="20" />

這里我們要注意的是【align】,"left"=左邊,"right"=右邊,"center"=中間

【vspace="20"】- 在圖片的上下與文字的距離為20

【hspace="20"】- 在圖片的左右與文字的距離為20

【img src】- 圖片的網址

如何在blogger顯示related posts

之前有試過把相關文章顯示在文章底下,可是都不成功。今天看了小雪的留言后,再去google搜尋了一下,終于找到了一個可以成功顯示的方法。

How to Show Related Posts / Articles in Blogspot Blogs - Create Related Posts Plugin / Widget for Blogger 是由Debajyoti Das 參考了 Mohamed Rias 的方法改良而成的。

方法雖然簡單,只有兩個步驟,可是內里的程式碼卻要花很多心思才能完成的,我們應該感謝 Debajyoti Das 及 Mohamed Rias 的貢獻。

步驟1

登錄你的blogger,點按『layout』-》『edit html』-『expand widget templates』。

點按『ctrl+f』,輸入『/head』搜尋下列程式碼。

</head>

把下列程式碼復制到</head>的上一行。

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://technotrixdebajyoti.googlepages.com/RelatedPostsByRealtrix.co.cc.js' type='text/javascript'/>

步驟2

把下列程式碼復制到<p><data:post.body/></p>的下一行

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Windows 的強化器-Shell Enhancer

在windows 裡要移動一個視窗,你必須點按住相關視窗的Title bar,才能移動,如果要縮小放大視窗的話,就必須把滑鼠移到視窗邊沿然后點按住移動,才能把視窗縮小放大。這些動作有時還蠻煩人的。

Shell Enhancer 可以把這些動作都變得容易輕松。

啟動了Shell Enhancer 后,要移動視窗,只要一首按住『alt』,然后用滑鼠點按住視窗的任何范圍移動即可。

若要縮小放大視窗的話,就按住『alt』,然后用滑鼠右鍵點按住視窗移動即可放大或縮小。

Shell Enhancer 還有很多其他的功能,大家去發掘吧。

HTML 教學(16)- 如何制作點小圖看大圖網頁

如果你要在一個網頁顯示多個圖片的話,利用點小圖看大圖的方法會讓你的網頁下載速度加快。

請點按下圖,就會在另一視窗顯示大圖。

penguin-01.jpg

penguin-02.jpg penguin-03.jpg

其實要制作點小圖看大圖的方法并不難。

1. 首先我們利用<img>標籤顯示小圖。

   <body>
   <img src="penguin-01.jpg" width="200" height="200">
   </body>


Scr_ Oct. 28 14.5401.jpg

2. 接下來,在加入<a>標籤。

   <body>
   <a><img src="penguin-01.jpg" width="90"
   height="62"></a>
   </body>
   

然后再放入大圖的網址就完成了。

   <body>
   <a href="penguin-big-01.jpg">
          <img src="penguin-01.jpg" width="200" height="200"></a>
   </body>
   

Scr_ Oct. 28 15.0502.jpg

3. 如果你不喜歡那藍色的框的話,你也可以把它去掉。

   <body>
   <a href="penguin-big-01.jpg">
          <img src="penguin-01.jpg" width="200" height="200" border="0"></a>
   </body>
   

制作小圖的方法可參考:

3款制作 thumbnail 縮備圖的免費工具


HTML 教學(15)- 何時用jpg格式何時用gif格式呢?

在網頁顯示圖片是我們常常要做的,圖片的體積往往影響網頁的下載速度,一個加速網頁下載的方法是利用我們下一課要講的點小圖看大圖的功能。
製作小圖的方法可參考我之前寫的3款製作thumbnail縮備圖的免費工具一文。
我們在網頁上顯示的圖片格式大多數是gif或是jpg。因為這兩個格式的體積比較小,但是何時用gif,何時用jpg格式呢?
如果你的圖片線條及顏色比較簡單的話,選用gif,如果顏色比較複雜的選擇用jpg。