在 Blogger Blog 上建立會旋轉傾斜的文章標籤樣 (Tags)

---

提示 :
1. 本功能效果樣式 : (應用者可以自設定此文章標籤的外觀樣)

1.1 請參考本 D01小站 及 一元數位雜記 的文章標籤內容(效果)，並將標籤內容使用電腦滑鼠(或在手機上使用手指)點按，看看其變化情況。(※ 點選任一文章標籤的時候，該文章標籤會旋轉傾斜，且外觀顏色也會有三重漸層變化。)

1.2 示意圖

2. 進行安裝此小工具之前請您先將你的 Blogger Blog 主題作備份。(備份的方法)

A. 建立本功能的方法 :

Step 1. 登入您的 Blogger Blog；

Step 2. 在 Blogger Blog 後控制台，點選「主題」項目 > 再點選主題的 " 編輯 HTML "；

Step 3. 將電腦滑鼠點擊所開啟的 HTML 頁面內(任何位置皆可)；

Step 4. 按壓電腦鍵盤上的 CTL+ F 兩按鍵，此時 HTML 版面區域內的右上角將出現一個搜尋欄框；

Step 5. 使用電腦鍵盤在此搜尋欄框內輸入 ]]></b:skin>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 ]]></b:skin> 內容段；

Step 6. 將如下的程式碼拷貝張貼到 ]]></b:skin> 的上方

/*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/

.label-size{      
margin:0 2px 6px 0;       
padding: 3px;       
text-transform: uppercase;       
border: solid 1px #ff00ff;       
border-radius: 3px;       
float:left;       
text-decoration:none;       
font-size:14px;       
color:#222;       
}

.label-size:hover {       
border:1px solid #73d216;       
text-decoration: none;

-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;       
-moz-transform: rotate(11deg);  
-o-transform: rotate(11deg);  
-webkit-transform: rotate(11deg);  
-ms-transform: rotate(11deg);  
transform: rotate(11deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(       
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');       
zoom: 1;  
}

.label-size a  {       
text-transform: uppercase;       
float:left;       
text-decoration: none;       
}

.label-size a:hover  {      
text-decoration: none;       
}

Step 7. 以上動作確認無誤後，點擊 HTML 版面區域左上方位的儲存主題 ;

Step 8. 在 Blogger Blog 後控制台，點選｢版面配置｣ > 並找到你的 Blog 內的｢文章標籤｣(Tags)小工具 > 打開此小工具 > 並將其內容的多媒體 項目設定在｢標籤雲｣ > 再加以設定儲存。(請參考 : 示意圖)

Step 9. 完成。

B. 自設定應用內容 :
您可以自行對此應用內容，將其設定為自己意向的內容。

改變程式碼內容 : 

1. 程式碼 : border: solid 1px #ff00ff;
此為定義文章標籤的初始邊框線顏色，ff00ff 為紫色系，你可以將此顏色(代碼)更改為你意向的顏色(代碼)。

2. 程式碼 : font-size:14px;
此為定義文章標籤文字體的大小，你可以將此 14 數字變更大小，即可改變文章標籤文字體的大小。

3. 程式碼 : border:1px solid #73d216;
此為定義文章標籤動作後的邊框線顏色，73d216 為綠色系，你可以將此顏色(代碼)更改為你意向的顏色(代碼)。

4. 程式碼 : rotate(11deg);
此為定義文章標籤動作旋轉傾斜的角度，11deg 表示文章標籤動作旋轉傾斜的角度為 11 度。你可以更改此 11 數字為你意向的角度數字。

5. 當然還可以變更程式碼的更多內容，以獲得更多的其他變化效果，待您來體驗。


以上

---