Sitenin Alt Kısmına Ac-Kapat Iletisim Sekmesi Ekle - SADECE BIZDE

Görüntüleme

Merhaba arkadaşlar bugün sizleri her zamanki gibi muhteşem bir eklenti ile tanıştıracağım.
Eklentiyi aslında sadece kendi siteme ekleyecektim fakat, kodlarda bir temassızlık oldu sanırım.Kodu ekledim siteme fakat iletişim formunu vermedi.
Herneyse işte,
Bende sizler ile kodları paylaşayım dedim siz kendi sitenizde kullanın hiç değilse (:
Sanırım eklentinin kurulumunun anlatımı uzun olacak fakat eklentiyi kurmak aslında 1DK'nızı alacaktır.
Buna eminim.
İlk olarak anlatıma geçmeden önce eklentinin önizlemesini sizlere şu adresten göstereyim.Eklentiyi beğenirsiniz umarım.

İlk Olarak ;
Aşağıdaki kodları temanızın css kısmına yani Şablon > Html'yi Düzenle > Ctrl+f'ye tıklayın ardından aşağıdaki kodu aratın.

]]></b:skin>

Ve bulduğunuz kodun hemen üst satırına aşağıdaki css kodları ekleyin.

/* Footer
----------------------------------------------- */
#kredit{padding:5px;background-color:#333;color:white;overflow:hidden}
.botleft{float:left}
.botright{float:right}
img{max-width:100%;height:auto;width:auto\9}
/* high resolution laptops and desktops */;
}

#feet { padding:20px 0px 30px 25px;}
#leadent {background: #fff; border-top: 3px solid #3b7fff; width: 100%;}
.feet-area {float: left; padding-right:25px}
.bordom .widget{padding:0 0 20px;}
#feet .feet-area {color: #3D5054;}
#feet h2 {border-bottom: 1px solid #DDDDDD; color: #3D5054; font-family: 'Arvo'; font-size: 17px; font-weight: 600; letter-spacing: 0.50px; line-height: 25px; margin: 0 0 15px; padding-bottom: 10px;}
#feet .widget ul {list-style-type: none; list-style: none; margin: 0px;  padding: 0px;}
#feet .widget ul li {padding: 0 0 9px 0; margin: 0 0 8px 0;}

.ContactForm, .ContactForm .title {
 display: none;
}

.contact-form-button-submit{
background-color:#6087cc;background-image: -moz-linear-gradient(top,#6087cc 0,#3F1B3D 100%); background-image: -ms-linear-gradient(top,#6087cc 0,#3F1B3D 100%); background-image: -o-linear-gradient(top,#6087cc 0,#3F1B3D 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#6087cc),color-stop(100%,#3F1B3D)); background-image: -webkit-linear-gradient(top,#6087cc 0,#3F1B3D 100%); background-image: linear-gradient(to bottom,#e54009 0,#3F1B3D 100%);
border-radius: 8px;
border: 0px solid #DDDDDD;
height: 25px;
margin: -20px 80px 0;
width: 70px;
}

.contact-form-button-submit:hover{background:#6087cc;
padding:0;border: 0px solid #e54009;

}
.tibber {
 position: fixed;
 width: 250px;
 right: 27px;
 bottom: 0;
 z-index: 999;
}
.Rask-ic a {
background-color:#cccccc;background: 
url(http://p1309.hizliresim.com/1f/f/sp6m7.png);
padding: 8px 22px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-left: 2px solid #cccccc;
border-right: 2px solid #cccccc;
border-top: 2px solid #cccccc;
color: white;
display: inline-block;
font-size: 18px;
letter-spacing: 1px;
}

.Rask-ic a:hover{text-decoration:none}

.Rask {
 height: 280px;
 background: white;
box-shadow:rgba(0, 0, 0, 0.8) 4px -4px 6px -4px;
 border: 2px solid #cccccc ;background: 
url(http://p1309.hizliresim.com/1f/f/sp6m7.png);
 padding: 10px;
 display: none;
}
.Rask-ic {
 text-align: right;
}
.Rask .ContactForm {
 margin: -15px 0px 0;
 display: block!important;
}
#regret{ color:#000; padding:5px 0 0 7px; font-weight:bold;}

İkinci ;
Tekrar aynı işlem ile, yani Şablon > Html'yi Düzenle > Ctrl+f'ye tıklayın ardından aşağıdaki kodu aratın.

</body>

Bulduğunuz kodun hemen üst satırına aşağıdaki kodları ekleyin.

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by www.zamaneblog.org*/
$('body').append('<div class="tibber"><div class="Rask-ic"><a href="#no-move">Iletisim</a></div><div class="Rask"></div></div>');
$('.ContactForm').appendTo('.Rask');
var slide_up_ct = false;
$('.Rask-ic a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.Rask').slideDown();
 } else {
 slide_up_ct = false;
 $('.Rask').slideUp();
 }
});
//]]>
</script>

Son Olarak;
Kaydet butonuna tıklayın ve sol menülerden 'Yerleşim' yazan butona tıklayın.
'Gadget ekle' ekleme alanına gelin ve açılan sayfadan 'Diğer gadget'lar' butonuna tıklayın.
Ardından 'iletişim formu' gadgetini ekleyin (gadgete istediğiniz başlığı verebilirsiniz).

Evet arkadaşlar bu kadar eklentinin kurulumu.
Bana katlanıp ayrıca zamanınızı ayırdığınız için teşekkür ederim.
Sağlıcakla kalın.
Saygılar...

Herhangi bir soru veya önerilerinizi bize yorum ve/veya sidebardaki iletişim formu kısmından bildirebilirsiniz.