Sponasor Reklam

Son Dakika Haberleri

Home / Blogger / Blogger İletişim Sayfası Oluşturma Sayfalara İletişim Formu Nasıl Eklenir?

Blogger İletişim Sayfası Oluşturma Sayfalara İletişim Formu Nasıl Eklenir?

Mart 22, 2020
Blogger İletişim Sayfası Oluşturma Sayfalara İletişim Formu Ekleme

Blogger İletişim Sayfası Nasıl Oluşturulur? Sayfalara İletişim Formu nasıl eklenir? Sayfalara İletişim Formu Nasıl Eklenir? Blogger İletişim Sayfası Oluşturma hakkında detaylı bilgi bulacaksınız.

İletişim Formu Ziyaretçilerin sizinle iletişim kurmaları için oldukta önemli ve şık görünüme sahip iletişim sayfası oldukça önemlidir. Blogger iletişim sayfası oluşturma ve sayfalara iletişim formu nasıl eklenir adım adım anlattık.

Adsense başvurularında hakkımızda sayfası, iletişim sayfası ve gizlilik politikası sayfası önem arz eden sayfalardır. Adsense onay almak için çalışan site sahipleri, sitelerine iletişim sayfası eklemesi gerektiği biliniyor. Blogger tabanlı siteler için blogger teması yükledikten sonra varsayılan olarak iletişim sayfası oluşturulmuyor kendimiz oluşturmalısınız.

Blogger iletişim sayfası oluşturmak basit blogger kullanımından anlamanız gereklidir. Statik sayfalara iletişim formu nasıl eklenir detaylı bir şekilde anlatmaya çalıştık. Blogger için iletişim sayfası oluşturabileceğiniz veya ekleyebileceğiniz yöntemlerden istediğinizi kullanabilirsiniz

Blogger iletişim sayfası oluşturmak veya sayfalara iletişim formu eklemek isteyenler için blogger yapısını kullanan siteler için 3 farklı iletişim sayfası oluşturma yöntemi ile sitenize uygun formu ekleyebilirsiniz.

İletişim sayfası oluşturmanız için herhangi bir kod veya yazılım dili bilmenize gerek yoktur Sadece biraz html yapısı ne olduğu veya kodları nereye ekleyebileceğinizi bilmeniz yeterlidir. Sayfalara ekleyeceğiniz kodlar blogger gadget aracılığıyla iletişim formu gadgetini sayfalara eklenenize yarar. 

Üç farklı tasarıma sahip formlar iki kod yapısından oluşuyor birinci kod iletişim gadgetini ana sayfada gizlemenize ikinci kod bloğu ise sabit sayfalara iletişim formunu eklemenize yarıyor.

1- Blogger Sabit Sayfalara Gadget Ekleyerek İletişim Sayfası Oluşturma 

Sabit sayfada iletişim formu eklemek istediğiniz blogger hesabınıza giriş yapın düzen (Yerleşim) bölümünde Gadget ekleye basıp iletişim formu gadgeti eklenmesi lazım.Daha sonra Tema >> HTML'yi düzenlemeyi açmak bu kodu bulmanız lazım ]]></b:skin> CTRL+F Yaparak Kolayca bulabilirsiniz kodun hemen üstüne aşağıdaki kodu yapıştırın.Aşa kod İletişim Gadgetini ana sayfa da gizlemeye yarıyor.

.sidebar .widget.ContactForm {
    display: none!important;
}

Daha sonra aşağıdaki kodu Eklemek istediğiniz iletişim sayfasına Html Olarak Eklenmesi lazım. Oluşturduğunuz iletişim sayfasında html bölünüme tıklatın ve kodu ekleyin.

<style>
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}
</style>
<div class="contact-form">

<div class="contact section" id="contact" style="display: block;">

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="İsim" size="30" type="text" value="" />

                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesaj" rows="5"></textarea>

                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                <br />

<div style="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>

</div>

</div>

</div>

</div>

2- Statik Sayfalarda İletişim Formu Gösterme 

Blogger Statik sayfalarda iletişim formu gösterebilmek için İletişim formu gadgeti eklemeniz lazım daha sonra aşağıdaki yazi tipi temanıza eklemeniz lazım. Temanızda bu yazı tipi kullanılıyorsa eklemenize gerek yok çoğu blogspot temalrla bulunana yazi tipidir. Tema düzenleme bölümünde </head> bölümünün hemen üstüne Aşağıdaki kodu ekleyin.

 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Daha sonra </style> veya ]]></b:skin> kodunu bulun kodların hemen üstüne aşağıdaki kodu yapıştırın ve temayı kaydedin.

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

Daha sonra iletişim formunu eklemek istediğiniz sayfaya aşağıdaki kodu html olarak eklemeniz lazım.Kodun Düzgün çalışması için seçenekler bölümünde satır sonu enter olarak ayarlayın.


Aşağıdaki kodu html olarak Sayfaya ekleyin.

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> İsim</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Mesaj <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<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>

3- Bloglara İletişim Sayfasına Form Oluşturmanın Son Yolu

Blogunuza iletişim formu ekleyin.Temalar bölümünde html düzenle ve </head> Kodunu bulunAşğıdaki kodu </head> kodunun hemen üstüne ekleyin ve temayı kaydedin.

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

İletişim Formu eklemek istediğiniz sayfaya html olarak ve satır sonu enter olarak ayarlanması lazım daha sonra aşağıdaki kodları sayfaya eklemelisiniz.

<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Ad' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Mesaj' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXhZ-D-x9TL905g57BKz2GqoAvp7PGPfkwIhjUarlrbtvb-VaaRuJ9a57fN47a5BFEgfiztiQ0bsQdkJGU4rOXb2_PE8LcXOZCBxWac6-m7xFEnY91XcPIHYKMOlSw-krmOwqQz52fjWb/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>


Son olarak aşağıdaki kodu bir önceki kodtan hemen sonra sayfaya eklemeniz ve 7342017194742683056 bulup kendi blogger numaranızla depiştirmelisiniz.


<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>





Hiç yorum yok

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )