Blogger İletişim Formu Sağ Alt Köşeye Ekleme

Görüntüleme

( Kelime)

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.

1. Adı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 kontrol panelinden Tema > HTML'yi Düzenle butonuna tıklıyoruz. Açılan Kod Editöründe 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

CSS.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 JavaScript kodunu eklememiz için yine aynı şekilde Tema > HTML'yi Düzenle bölümünden Kod Editörünü açarak CTRL + F tuş kombinasyonlarını kullanarak </body> kodunu arattırıyoruz. </body> kodunu bulduktan sonra kodun bir satır üzerine aşağıda yazan JavaScript Kodunu ekliyoruz.

Java Script Kodu

JS<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.