提 示 :
1. 本功能效果樣式 :
1.1 請參考
1.2 示意圖 : (手機樣式，電腦樣式)
A. 建立本功能的方法 :
Step 1. 登入您的 Blogger Blog;
Step 2. 在 Blogger Blog 後控制台，點選「版面配置 > +新增小工具 > 點選(新增)「聯絡我們」(小工具)，並將此「聯絡我們」的標題格內給于輸入「.」或「.」符號 > 再將小工具儲存。
如果您先前已經增設了此「聯絡我們」(小工具)，請將其標題文字修改為「.」或「.」符號即可;
Step 3. 在 Blogger Blog 後控制台，點選「網頁」項目 > 新增網頁，將網頁文章編輯區設置於HTML模式，再將如下的程式碼貼入文章編輯區內;
<style> .contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-subject, .contact-form-country { max-width: 300px; width: 100%; font-weight:bold; } .contact-form-name { display: inline-block; background: #FFF; background-color: #FFF; color: #A1A1A1; font-family: Arial,sans-serif; font-size: 13px; font-weight:bold; height: 30px; margin: 0; margin-top: 10px; margin-left: 10px; padding: 15px 15px 15px 5px; vertical-align: top; border: 1px solid #ff00ff; box-sizing: border-box; } .contact-form-email { display: inline-block; background: #FFF; background-color: #FFF; color: #A1A1A1; font-family: Arial,sans-serif; font-size: 13px; font-weight:bold; height: 30px; margin: 0; margin-top: 20px; margin-left: 10px; padding: 15px 15px 15px 5px; vertical-align: top; border: 1px solid #ff00ff; box-sizing: border-box; } .contact-form-subject { display: inline-block; background: #FFF; background-color: #FFF; color: #A1A1A1; font-family: Arial,sans-serif; font-size: 13px; font-weight:bold; height: 30px; margin: 0; margin-top: 20px; margin-left: 10px; padding: 15px 15px 15px 5px; vertical-align: top; border: 1px solid #FF00FF; box-sizing: border-box; } .contact-form-country { display: inline-block; background: #FFF; background-color: #FFF; color: #A1A1A1; font-family: Arial,sans-serif; font-size: 13px; font-weight:bold; height: 30px; margin: 0; margin-top: 20px; margin-left: 10px; padding: 15px 15px 15px 5px; vertical-align: top; border: 1px solid #ff00ff; box-sizing: border-box; } .contact-form-email:hover, .contact-form-name:hover{ border: 1px solid #FF00FF; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 15px 15px 15px 5px; } .contact-form-email-message:hover { border: 1px solid #FF00FF; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 10px; } .contact-form-email-message { background: #FFF; background-color: #FFF; border: 1px solid #FF00FF; box-sizing: border-box; color: #A1A1A1; display: inline-block; font-family: arial; font-size: 12px; margin: 0; margin-top: 20px; margin-left: 10px; margin-bottom: 10px; padding: 10px; vertical-align: top; max-width: 500px!important; height: 120px; border-radius:4px; } .contact-form-button { cursor:pointer; height: 30px; line-height: 30px; font-weight:bold; border:none; } .contact-form-button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 10px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(1,1,1,.3); -webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; -webkit-box-shadow: 0 1px 2px rgba(1,1,1,.3); -moz-box-shadow: 0 1px 2px rgba(1,1,1,.3); box-shadow: 0 1px 2px rgba(1,1,1,.3); } .contact-form-button:hover { text-decoration: none!important; border: none!important; } .contact-form-button:active { position: relative; top: 1px; } </style> <br />
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == "") {this.value = "姓名";}" onfocus="if (this.value == "姓名") {this.value = "";}" size="30" type="text" value="姓名" /><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == "") {this.value = "Email 帳號";}" onfocus="if (this.value == "Email 帳號") {this.value = "";}" size="30" type="text" value="Email 帳號" /> <br />
<input class="contact-form-subject" id="ContactForm1_contact-form-email" name="subject" onblur="if (this.value == "") {this.value = "主題";}" onfocus="if (this.value == "主題") {this.value = "";}" size="30" type="text" value="主題" /> <br />
<input class="contact-form-country" id="ContactForm1_contact-form-email" name="Country" onblur="if (this.value == "") {this.value = "國家/地區";}" onfocus="if (this.value == "國家/地區") {this.value = "";}" size="30" type="text" value="國家/地區" /> <br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "請輸入聯絡內容...";}" onfocus="if (this.value == "請輸入聯絡內容...") {this.value = "";}" value="請輸入聯絡內容..."></textarea> <br />
<input class="contact-form-button contact-form-button-submit" type="reset" value="重置" />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="傳送" /> <br />
<div style="max-width: 500px; 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>
</div>
Step 4. 自訂應用 :
1. 修改程式碼中，將紅色中文字內容修改為您意向的文字樣 ;
2. 程式碼 max-width: 300px : 這是定義本聯絡表單中「姓名」､「Email 帳號」及「主題」表格寬度的代碼。改變數字 300數值大/小，可以改變表格寬度的寬/窄度 ;
3. 程式碼 max-width: 500px : 這是定義本聯絡表單中「Email 內文」表格寬度的代碼。改變數字 500 數值大/小，可以改變表格寬度的寬/窄度 ;
4. 在此表單的上方位及下方位，你可以再增加你意向的內容 > 並在此新網頁的標題框內輸入你意向的文字，例如:「聯絡我們」或「Contact Us」等等 ;
Step 5. 新網頁內容編製完成後，點選編輯版面右側邊欄位的「頁面設定」之下的「選項」項目 > 並將「不允許，隱藏現有連結」點選 > 再按 " 完成 " 文字按鈕(加以儲存) ;
Step 6. 以上步驟內容完成後，點選編輯版面右側邊欄位上的發佈文字按鈕 ;
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 上建立連結此新增加的「聯絡我們」網頁。
1. 本功能效果樣式 :
1.1 請參考
1.2 示意圖 : (手機樣式，電腦樣式)
Step 1. 登入您的 Blogger Blog;
Step 2. 在 Blogger Blog 後控制台，點選「版面配置 > +新增小工具 > 點選(新增)「聯絡我們」(小工具)，並將此「聯絡我們」的標題格內給于輸入「.」或「.」符號 > 再將小工具儲存。
如果您先前已經增設了此「聯絡我們」(小工具)，請將其標題文字修改為「.」或「.」符號即可;
Step 3. 在 Blogger Blog 後控制台，點選「網頁」項目 > 新增網頁，將網頁文章編輯區設置於HTML模式，再將如下的程式碼貼入文章編輯區內;
<style> .contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-subject, .contact-form-country { max-width: 300px; width: 100%; font-weight:bold; } .contact-form-name { display: inline-block; background: #FFF; background-color: #FFF; color: #A1A1A1; font-family: Arial,sans-serif; font-size: 13px; font-weight:bold; height: 30px; margin: 0; margin-top: 10px; margin-left: 10px; padding: 15px 15px 15px 5px; vertical-align: top; border: 1px solid #ff00ff; box-sizing: border-box; } .contact-form-email { display: inline-block; background: #FFF; background-color: #FFF; color: #A1A1A1; font-family: Arial,sans-serif; font-size: 13px; font-weight:bold; height: 30px; margin: 0; margin-top: 20px; margin-left: 10px; padding: 15px 15px 15px 5px; vertical-align: top; border: 1px solid #ff00ff; box-sizing: border-box; } .contact-form-subject { display: inline-block; background: #FFF; background-color: #FFF; color: #A1A1A1; font-family: Arial,sans-serif; font-size: 13px; font-weight:bold; height: 30px; margin: 0; margin-top: 20px; margin-left: 10px; padding: 15px 15px 15px 5px; vertical-align: top; border: 1px solid #FF00FF; box-sizing: border-box; } .contact-form-country { display: inline-block; background: #FFF; background-color: #FFF; color: #A1A1A1; font-family: Arial,sans-serif; font-size: 13px; font-weight:bold; height: 30px; margin: 0; margin-top: 20px; margin-left: 10px; padding: 15px 15px 15px 5px; vertical-align: top; border: 1px solid #ff00ff; box-sizing: border-box; } .contact-form-email:hover, .contact-form-name:hover{ border: 1px solid #FF00FF; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 15px 15px 15px 5px; } .contact-form-email-message:hover { border: 1px solid #FF00FF; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 10px; } .contact-form-email-message { background: #FFF; background-color: #FFF; border: 1px solid #FF00FF; box-sizing: border-box; color: #A1A1A1; display: inline-block; font-family: arial; font-size: 12px; margin: 0; margin-top: 20px; margin-left: 10px; margin-bottom: 10px; padding: 10px; vertical-align: top; max-width: 500px!important; height: 120px; border-radius:4px; } .contact-form-button { cursor:pointer; height: 30px; line-height: 30px; font-weight:bold; border:none; } .contact-form-button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 10px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(1,1,1,.3); -webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; -webkit-box-shadow: 0 1px 2px rgba(1,1,1,.3); -moz-box-shadow: 0 1px 2px rgba(1,1,1,.3); box-shadow: 0 1px 2px rgba(1,1,1,.3); } .contact-form-button:hover { text-decoration: none!important; border: none!important; } .contact-form-button:active { position: relative; top: 1px; } </style> <br />
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == "") {this.value = "姓名";}" onfocus="if (this.value == "姓名") {this.value = "";}" size="30" type="text" value="姓名" /><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == "") {this.value = "Email 帳號";}" onfocus="if (this.value == "Email 帳號") {this.value = "";}" size="30" type="text" value="Email 帳號" /> <br />
<input class="contact-form-subject" id="ContactForm1_contact-form-email" name="subject" onblur="if (this.value == "") {this.value = "主題";}" onfocus="if (this.value == "主題") {this.value = "";}" size="30" type="text" value="主題" /> <br />
<input class="contact-form-country" id="ContactForm1_contact-form-email" name="Country" onblur="if (this.value == "") {this.value = "國家/地區";}" onfocus="if (this.value == "國家/地區") {this.value = "";}" size="30" type="text" value="國家/地區" /> <br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "請輸入聯絡內容...";}" onfocus="if (this.value == "請輸入聯絡內容...") {this.value = "";}" value="請輸入聯絡內容..."></textarea> <br />
<input class="contact-form-button contact-form-button-submit" type="reset" value="重置" />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="傳送" /> <br />
<div style="max-width: 500px; 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>
</div>
Step 4. 自訂應用 :
1. 修改程式碼中，將紅色中文字內容修改為您意向的文字樣 ;
2. 程式碼 max-width: 300px : 這是定義本聯絡表單中「姓名」､「Email 帳號」及「主題」表格寬度的代碼。改變數字 300數值大/小，可以改變表格寬度的寬/窄度 ;
3. 程式碼 max-width: 500px : 這是定義本聯絡表單中「Email 內文」表格寬度的代碼。改變數字 500 數值大/小，可以改變表格寬度的寬/窄度 ;
4. 在此表單的上方位及下方位，你可以再增加你意向的內容 > 並在此新網頁的標題框內輸入你意向的文字，例如:「聯絡我們」或「Contact Us」等等 ;
Step 5. 新網頁內容編製完成後，點選編輯版面右側邊欄位的「頁面設定」之下的「選項」項目 > 並將「不允許，隱藏現有連結」點選 > 再按 " 完成 " 文字按鈕(加以儲存) ;
Step 6. 以上步驟內容完成後，點選編輯版面右側邊欄位上的發佈文字按鈕 ;
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 上建立連結此新增加的「聯絡我們」網頁。
p.s.本小工具 Source : Blog Fowl
0 意見:
張貼留言