Qaybtii 5/5: Sidee loogu daraa Contact Us menu (ama Nala Soo xiriir) blogaaga

Assalamo alaykom WK

Waxaan inoo socday casharo ku saabsan "How design blog?", maanta waxaaynu bilaabaynaa cashirkii ugu danbeeyay, kaasoo ku saabsan Sida loogu daro Contact Us menu webpage kaaga ama blogaaga.


Hadii aad rabo inaay vitors-ka web kaaga inaay kuala soo xiriiraan maanta waxaaynu kuu haysaa sida ugu fudud oo aad ku la soo xiriiri karaa. Fadlan raab raac talaabooyinka hoose ku xusan si aad webpage kaaga ugu darto Contact Us menu (Nala Soo Xiriir).



Sidee loogu daraa Contact Us:

1. Waxaad aad bloga ka gal www.blogger.com
2. Dooro webpage aad rabto inaad ku darto Contact Us menu.

3. Waxaad dorataa Layout dhinaca Bidixda ah:

5. Waxaad ku dartaa Gadget cusub (Add a Gadget) kadib dooro More Gadget > ka sii dooro Contact form kadib save dheh

6. Waxaad tagtaa Template-ka, waxaad doorataa Edint HTML > waxaad tagtaa Jump To Wedget >  dooro CantactForm1. waxaad laba mar click ku sii saa dhibacda yadh ee dhinaca midig

Kadib waxaad arkaysaa code-kaan hoose ku qoran, Delete dheh dhamaan code-ka Kolorka gaduudka ama casaanka ah

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>  
   <b:includable id='main'>  
  <b:if cond='data:title != &quot;&quot;'>  
   <h2 class='title'><data:title/></h2>  
  </b:if>  
  <div class='contact-form-widget'>  
   <div class='form'>  
    <form name='contact-form'>  
     <p/>  
     <data:contactFormNameMsg/>  
     <br/>  
     <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>  
     <p/>  
     <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>  
     <br/>  
     <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>  
     <p/>  
     <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>  
     <br/>  
     <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>  
     <p/>  
     <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>  
     <p/>  
     <div style='text-align: center; max-width: 222px; width: 100%'>  
      <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>  
      <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>  
     </div>  
    </form>  
   </div>  
  </div>  
  <b:include name='quickedit'/>  
 </b:includable>  
  </b:widget>  

7. Waxaa meesha ku soo harayo oo kaliya intaan hoose ku qoran:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>  
   <b:includable id='main'>  
 </b:includable>  
  </b:widget> 

8. Dhinaca midigta ah waxaad tagtaa Pages, ku dar page cusub (New Page). Dhinaca midigta waxaad click ku siisaa HTML, code-kaan hoose ku qoran Past ku deh, kadib Save dheh:

<b>Si aad nala soo xidhiidhto fadalan buuxi form-ka hoose</b>  
 <br />  
 <div class="widget ContactForm" id="ContactForm1">  
 <div class="contact-form-widget">  
 <div class="form">  
 <form name="contact-form">  
 <b>Magaca</b>: <span id="required">*</span> <br />  
 <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  
     <br />  
 <b>E-mail kaaga</b>: <span id="required">*</span><br />  
 <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  
     <br />  
 <b>Fariinta</b>: <span id="required">*</span><br />  
 <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>  
     <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Halkaan ka Dir" />  
     <br />  
 <br />  
 <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>  
 </form>  
 </div>  
 </div>  
 </div>  
 <b>waxaan is ku dayaynaa inaan kuula soo xirirno sida Uqu dhaqsiyada badan Insha Allah</b><b style="text-align: center;">Waad &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;waad Mahadsantahay</b>

9. Waxaad ku noqotaa Temlate, dooro Edit HTML, Raadi ]]></b:skin> Si aad u raadiso waxaa isla qabataa Ctrl + F. Markaad hesho, meesha ka sarayso waxaad ku dartaa code-ka hoos ku qoran: 



 /* CUSTOM CONTACT FORM BY XOMISSE */  
 .contact-form-widget {  
 width: 500px; /* CHANGE WIDTH OF CONTAINER */  
 max-width: 100%;  
 padding: 10px;  
 background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */  
 color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */  
 border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */  
 margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */  
 }  
 .contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }  
 .contact-form-button-submit {  
 border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */  
 background: #EEEEEE; /* CHANGE BACKGROUND COLOR OF SEND BUTTON */  
 color: #333333; /* CHANGE TEXT COLOR OF SEND BUTTON */  
 width: 30%; /* CHANGE WIDTH OF SEND BUTTON */  
 margin: 10px 0px;  
 }  
 .contact-form-button-submit:hover{  
 border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */  
 background: #666666; /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */  
 color: #FFFFFF; /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */  
 }  
 .contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}  
 .contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}  
 .contact-form-cross {margin-left: 5px !important;}  
 .contact-form-error-message-with-border {  
 background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */  
 border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */  
 bottom: 0;  
 box-shadow: none;  
 color: #666; /* CHANGE TEXT COLOR OF ERROR MSG */  
 font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */  
 padding: 5px;   
 font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */  
 text-align: center;   
 }  
 /* END CUSTOM CONTACT FORM BY XOMISSE */  



9. Save dheh, kadib check-garay in contact us uu shaqynayo. Email ka waxa uu u dhacayaa Gmail-ka lagu sameeyay blogaaga.