Blogger'ın İletişim Formu nasıl sağ alt köşeye sabit bir şekilde eklenir.
Bugünkü konumda ise sizlere Blogger'ın İletisim Formunu nasıl sabit açılır kapanır bir şekilde bloğun sağ alt köşesine eleyeceğimizi anlatacağım.
Öncelikle yapmamız gereken Blogger'ın resmî İletişim Formunu Bloğumuza eklemektir. Bunu yapmak için "Yerleşim > Gadget Ekle" kısmından İletişim Formunu seçip ekliyoruz.
NOT: Daha önce İletişim Formunu bloğunuza eklediyseniz tekrar eklemenize gerek yok.
2. Adım
Bloğumuzun kumanda panelinden şablon bölümüne geçiyoruz ve HTML'yi Düzenle butonuna tıklıyoruz. Açılan pencerede CTRL + F tuş kombinasyonlarını kullanarak </b:skin> kodunu arattırıyoruz. </b:skin> kodunu bulduktan sonra kodun bir satır üzerine aşağıda yazan Css Kodunu ekliyoruz.
CSS Kodu
.ContactForm, .ContactForm .title {
display:none;
}
.floating-ai {
position:fixed;
width:250px;
right:21px;
bottom:0;
z-index:999;
box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.floating-ai-head p {
padding:10px 10px;
margin:0;
background:#13b1cd;
color:#fff;
font-weight:100;
display:inline-block;
font-family:Oswald,sans-serif;
text-transform:uppercase;
*display:block;
zoom:1;
transition:all 0.3s linear;
cursor: pointer;
width: 100%;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.floating-ai-head p:hover {
background:#108ba0;
color:#fff;
}
.floating-ai-head i {
margin: 0 10px 0 0;
}
.floating-ai-body {
height:285px;
background:#fff;
color:#999;
padding:10px;
display:none;
text-align: center;
line-height: 250px;
}
.floating-ai-head {
text-align:left;
}
.floating-ai-body .ContactForm {
margin:0;
display:block!important;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
background:#eee;
margin-bottom:10px;
border:none;
color:#8f8f8f;
padding:2px;
width:75%;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
background:#f5f5f5;
transition:all 0.3s linear;
}
#ContactForm1_contact-form-email-message {
background:#eee;
margin-bottom:10px;
border:none;
color:#8f8f8f;
font-family:Oswald,sans-serif;
padding:5px;
width:95%;
}
#ContactForm1_contact-form-submit {
width:100px;
color:#fff;
font-family:Oswald,sans-serif;
text-transform:uppercase;
font-weight:400;
font-size:14px;
cursor:pointer;
background:#57ad68;
border:none;
float:left;
transition:background 0.3s linear;
}
#ContactForm1_contact-form-submit:hover {
background:#468a53;
}
Yukarıdaki Css Kodunu ekledikten sonra ikinci kodumuz olan <script> kodunu eklememiz için yine aynı şekilde HTML'yi Düzenle bölümünden CTRL + F tuş kombinasyonlarını kullanarak </body> kodunu arattırıyoruz. </body> kodunu bulduktan sonra kodun bir satır üzerine aşağıda yazan Script Kodunu ekliyoruz.
Java Script Kodu
<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Bana Bir Mesaj Gönder</a></div><div class="floating-ai-body"></div></div>');
$('.ContactForm').appendTo('.floating-ai-body');
var slide_up_ai = false;
$('.floating-ai-head a').click(function(){
if (!slide_up_ai) {
slide_up_ai = true;
$('.floating-ai-body').slideDown();
} else {
slide_up_ai = false;
$('.floating-ai-body').slideUp();
}
});
//]]>
</script>Son olarak Temayı Kaydet diyoruz.
Blogger İletişim Formu eklentisi ile ilgili daha fazla bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.
