Obrazac za kontakt na posebnoj stranici
U ovom tutorijalu ću vam pokazati kako možete da dodate zaista sjajnu sa cool izgledom kontakt formu na vašoj stranici. Ovaj kontakt formular izgleda zaista elegantno i veoma dopadljivo.
Dodavanje CSS koda:
- Ulogujte se na Blogger Account > Kontrolna tabla vaseg bloga
- Sada je potrebno da kliknete na opciju Šablon > Izmeni HTML i da pronađete ]]></b:skin> tag i odmah iznad njega da nalepite sledeći css kod
#ContactForm1{ display:none; } #contact_wrap { margin: auto; width: 321px; height: 380px; padding: 25px; border-radius: 1em; border-top:1px solid #dbdbdb; border-right:1px solid #b2b2b2; border-left:1px solid #dbdbdb; border-bottom:1px solid #9d9d9d; background-color:#cccccc; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc'); background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); box-shadow: 1px 1px 5px #ccc; } #contact_wrap h3{ color: #e8f3f9; font-family:Georgia; font-size: 20px; font-style:italic; font-weight:bold; margin: 0 -36px 20px -36px; padding: 12px; text-align: center; text-shadow: 2px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; position: relative; } #contact_wrap h3:before { content: ' '; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #333 transparent transparent transparent; } #contact_wrap h3:after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #333; } #ContactForm1_contact-form-name{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPHJEexX7d4-2hvZBPxi4eUxQjmX_C4TgDF7AizX3gajPdSe3vogYxl99PCPopLmGcVwb4NORrOofy-FtioWNH0waDnKwdQxt7-Eptsrpa60Vx0Hz_pF5qufsa00jeEEuCwHa6rzpQkc/s1600/user.png)no-repeat 10px center; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-email{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_EVGhVNsOZImhsyhS1VKumfcCrPeHn2QYb02P0RoEL6GepKFkeCFIAcyzQpzsIwTBlEUj_3ifyYQ6NTSVoyrFdBzi6zWcttA_0PqhtNN7HEH5He0bdTjeaz9blxhS2C_MWEjHbUTBFk/s1600/pen.png)no-repeat 10px center; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-email-message{ width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; font-family:Arial, sans-serif; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5Ldje9aFedPZ0GU6mUj9OjSGliy-Qsom-POS6f2HKdY7Y0KGtWMqZuoGkyzdUeSz2Iwr6PCQnnJrh_7iHNB1X26XDJnOJfHdfwGqKkXvYfEb9pDXNrtE0_1_kCi-H80bC3muJ3DrJAk/s1600/msg2.png)no-repeat 10px 10px; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #FFF; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#005a8a; border-radius:4px; text-shadow: 1px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; border:1px solid #194f6d; } #ContactForm1_contact-form-submit:hover { background:#4c9bc9; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 320px; margin-top:35px; }
- Kada ste ga dodali sačuvajte i vratite se na kontrolnu tablu.
Dodavanje HTML na stranici
- Prvo moramo da kreiramu novu stranicu na blogu, a to ćete uraditi na sledeći način: Kliknite na opciju Stranice > Nova stranica > Stranicu ostavite praznom. Kada se stranica otvori kliknite na opciju HTML i nalepite sledeći kod:
<div id="contact_wrap"> <h3>Contact Us</h3> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> <style type="text/css"> #comments, #blog-pager, .breadcrumbs, .post-footer{display:none} </style>
- Posle dodavanja koda iznad, objavite stranicu.
To je to! Sada vi i vaši posetioci možete da vidite ovaj elegantan kontakt obrazac na vašem blogu.
