Notification texts go here Contact Us Buy Now!

Blogger İletişim Formu Eklentisi

Blogger İletişim Formu Eklentisi
Blog Yazarı
Bugün sizlere Blogger sitenize İletişim Formu nasıl ekleyebilirsiniz onu anlatmaya çalışacağım.

Öncelikle Blogger HTML kod editör sayfamızı açıyoruz ve Ctrl+F yardımıyla ]]></b:skin> kodunu buluyoruz. Daha sonra bulduğum kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekliyoruz.


 @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'nunito',sans-serif;
}
body{
    background-color: #e8eaf6;
}
.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 15px 20px;
    background-color: #fafafa;
    box-shadow: 0 6px 8px rgba(0,0,0,.1);
    border-radius: 8px;
    width: 300px;
}
.container h1{
    margin-bottom: 11px;
    color: #1e88e5;
    text-transform: uppercase;
}
.container label{
    color: #1e88e5;
}
.container input,textarea{
    padding: 8px 10px;
    width: calc(100% - 20px);
    font-size: 16px;
    margin: 12px 0;
    resize: none;

}
.container button{
    width: 100%;
    padding: 10px 0;
    background-color: #1e88e5;
    border: none;
    border-radius: 30px;
    text-transform: uppercase;
    color: #fafafa;
    font-weight: bold;
    transition: .4s;
}
button:hover{
    background-color: #0d47a1;
}

Şimdi yine kod editör sayfamızda Ctrl+F yardımıyla </body> kodunu buluyoruz. Daha sonra bulduğumuz kodun üzerine gelecek şekilde aşağıda ki HTML kodlarını ekliyoruz.


<div class="container">
<form>
<h1>İletişim</h1>
<label>Ad soyadı: </label><br>
<input type="text"><br>
<label>E-mail Adresiniz: </label><br>
<input type="email"><br>
<label>Mesajınız: </label><br>
<textarea rows="8"></textarea><br>
<button>Gönder</button>
</form>
</div>

CSS kodların da herhangi bir sıkıntı yaşarsınız kod editör sayfamızda </head> kodunu bulalım ve aşağıda ki CSS kodlarını bulduğumuz kodun üzerine gelecek şekilde ekleyelim.


<link rel="stylesheet" href="main.css">

Bütün işlemler bu kadar aşağıda ki önizleme butonundan da eklentiyi görebilirsiniz.


إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.