提 示 :
Step 1. 登入您的 Blogger Blog;
Step 2. 在 Blogger Blog 後控制台，點選「版面配置 > +新增小工具 > 點選(新增)「聯絡我們」(小工具)，並將此「聯絡我們」的標題格內給于輸入「.」或「.」符號 > 再將小工具儲存。
如果您先前已經增設了此「聯絡我們」(小工具)，請將其標題文字修改為「.」或「.」符號即可;
Step 3. 在 Blogger Blog 後控制台，點選「網頁」項目 > 新增網頁，將網頁文章編輯區設置於HTML模式，再將如下的程式碼貼入文章編輯區內;
Step 4. 自訂應用 :
1. 修改程式碼中，將各紫色中文字內容修改為您意向的文字樣 ;
2. 程式碼 f9edbe : 這是定義本聯絡表單主體顏色的色碼代號，你可將此 f9edbe (橙色)代碼更改為你意向的顏色代碼 ;
3. 程式碼 rows="10" : 這是定義本聯絡表單「聯絡內文」框格大小的程式碼。將數字 10 變更為大/小數字，可以改變「聯絡內文」框格大小 ;
Step 5. 新網頁內容編製完成後，點選編輯版面右側邊欄位的「頁面設定」之下的「選項」項目 > 並將「不允許，隱藏現有連結」點選 > 再按 " 完成 " 文字按鈕(加以儲存)。
Step 6. 以上步驟內容完成後，點選編輯版面右側邊欄位上的發佈文字按鈕。
Step 8. 將電腦滑鼠點擊所開啟的 HTML 頁面內(任何位置皆可)；
Step 9. 按壓電腦鍵盤上的 CTL+ F 兩按鍵，此時 HTML 版面區域內的右上角將出現一個搜尋欄框；
Step 10. 使用電腦鍵盤在此搜尋欄框內輸入 ]]></b:skin>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 ]]></b:skin> 內容段；
Step 11. 將如下的程式碼拷貝張貼到 ]]></b:skin> 的上方
#ContactForm1
Step 12. 以上動作確認無誤後，點擊 HTML 版面區域左上方位的儲存主題;
Step 13. 完成。
延伸閱讀 :
1. 本功能效果樣式 :
1.1 請參考
1.2 示意圖 :
A. 建立本功能的方法 :
Step 1. 登入您的 Blogger Blog;
Step 2. 在 Blogger Blog 後控制台，點選「版面配置 > +新增小工具 > 點選(新增)「聯絡我們」(小工具)，並將此「聯絡我們」的標題格內給于輸入「.」或「.」符號 > 再將小工具儲存。
如果您先前已經增設了此「聯絡我們」(小工具)，請將其標題文字修改為「.」或「.」符號即可;
Step 3. 在 Blogger Blog 後控制台，點選「網頁」項目 > 新增網頁，將網頁文章編輯區設置於HTML模式，再將如下的程式碼貼入文章編輯區內;
<div dir="ltr" style="text-align: left;" trbidi="on">
請您填寫此電子郵件 (Email) 表單與我們聯絡 !
<style>
.twist_blogger_cntct_form_wrap {
margin: 0 auto;
max-width: 840px;
padding: 0 10px;
position: relative;
background-color: #FDFDFD;
}
.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {
content: '';
display: table;
clear: both;
}
/*----Change Contact Form Background Color Here----*/
div#twist_blogger_cntct_form {
padding: 20px 20px 10px 20px;
background: #FA540B;
border-radius: 2px;
margin: 20px auto 20px;
color: #FFF;
font-size: 16px;
max-width: 260px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
padding: 5px;
box-shadow: none!Important;
min-width: 186px;
max-width: 260px;
width: 100%;
border: 0 !important;
line-height: 1em;
min-height: 31px;
background: #FCFCFC;
margin-bottom: 15px;
}
/**** Submit button style ****/
.contact-form-button-submit {
background: #FA540B;
font-size: 20px;
letter-spacing: 2px;
cursor: pointer;
outline: none!important;
color: #FFFFFF;
border: 2px solid rgba(255,255,255,1);
border-radius: 50px;
min-width: 186px;
max-width: 260px;
width: 100%;
text-transform: uppercase;
height: 46px;
margin-top: 10px!important;
transition: all 300ms ease-;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
}
/**** Submit button on mouse hover ****/
.contact-form-button-submit:hover {
border: 2px solid;
color: #FFFFFF;
background: #EF4800 !important;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
border-color: #FFFFFF;
box-shadow: none !important;
}
/**** Error message and Success Message ****/
.contact-form-error-message-with-border .contact-form-success-message {
background: #f9edbe;
border: 1px solid #f0c36d;
bottom: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
color: #666;
font-size: 12px;
font-weight: bold;
padding-bottom: 10px;
line-height: 19px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
}
</style>
<br />
<div class="twist_blogger_cntct_form_wrap">
<div id="twist_blogger_cntct_form">
<form name="contact-form">
姓名:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="請輸入你的姓名..." size="30" type="text" value="" /><br />
<br />
Email 信箱帳號 (必須填寫)<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="請輸入你的 Email 帳號..." size="30" type="text" value="" /><br />
<br />
聯絡內容 (必須填寫)<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="請輸入聯絡內文..." rows="10"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="傳送" /><br />
<div style="max-width: 260px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<br />
</div>
</div>
</div>
Step 4. 自訂應用 :
1. 修改程式碼中，將各紫色中文字內容修改為您意向的文字樣 ;
2. 程式碼 f9edbe : 這是定義本聯絡表單主體顏色的色碼代號，你可將此 f9edbe (橙色)代碼更改為你意向的顏色代碼 ;
3. 程式碼 rows="10" : 這是定義本聯絡表單「聯絡內文」框格大小的程式碼。將數字 10 變更為大/小數字，可以改變「聯絡內文」框格大小 ;
4. 在此表單的上方位及下方位，你可以再增加你意向的內容 > 並在此新網頁的標題框內輸入你意向的文字，例如:「聯絡我們」或「Contact Us」等等。
Step 5. 新網頁內容編製完成後，點選編輯版面右側邊欄位的「頁面設定」之下的「選項」項目 > 並將「不允許，隱藏現有連結」點選 > 再按 " 完成 " 文字按鈕(加以儲存)。
Step 7. 在 Blogger Blog 後控制台，點選「主題」項目 > 再點選主題的 " 編輯 HTML "；
Step 8. 將電腦滑鼠點擊所開啟的 HTML 頁面內(任何位置皆可)；
Step 9. 按壓電腦鍵盤上的 CTL+ F 兩按鍵，此時 HTML 版面區域內的右上角將出現一個搜尋欄框；
Step 10. 使用電腦鍵盤在此搜尋欄框內輸入 ]]></b:skin>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 ]]></b:skin> 內容段；
Step 11. 將如下的程式碼拷貝張貼到 ]]></b:skin> 的上方
#ContactForm1
{
display: none;
}
Step 12. 以上動作確認無誤後，點擊 HTML 版面區域左上方位的儲存主題;
Step 13. 完成。
Step 14. 應用連接(建議) :
在你的Blogger Blog後控制台 > 版面配置 > Pages，建立連結此新增加的「聯絡我們」網頁; 或/及，在你的Blogger Blog的 Menu 上建立連結此新增加的「聯絡我們」網頁。
延伸閱讀 :
0 意見:
張貼留言