Wolkanca aslında gayet güzel anlatmış. Ben yinede buradan okumak isteyenler için yineliyorum. Bu işlemi uygulayınca blogunuzun sağ tarafında resimde görüldüğü gibi bir buton çıkıyor. Tıklanıldığı zaman ziyaretçi sayfanızdan ayrılmıyor ve yorum formunuz ekranın üstünde beliriyor. Fazla uzatmadan kuruluma geçiyorum.
Yerleşim > sayfa ögeleri > gadget ekle > html / javascript ekle bölümünden
<script type="text/javascript">
// feedback - image dosyalarini kendi sitenizde barindirabilirseniz daha iyi olur.
GSFN = {
feedback: function(url, tab_options) {
this.feedback_url = url;
this.tab_options = tab_options ? tab_options : {};
this.tab_options.placement = this.tab_options.placement ? this.tab_options.placement : 'right';
this.tab_options.color = this.tab_options.color ? this.tab_options.color : '#21236a';
this.tab_html = '<a href="#" id="fdbk_tab" class="fdbk_tab_'+this.tab_options.placement+'" style="background-color:'+this.tab_options.color+'">FEEDBACK</a>';
this.overlay_html = '<div id="fdbk_overlay" style="display:none">' +
'<div id="fdbk_container">' +
'<a href="#" onclick="GSFN.hide();return false" id="fdbk_close"></a>' +
'<iframe src="" id="fdbk_iframe" allowTransparency="true" scrolling="no" frameborder="0"></iframe>' +
'</div>' +
'<div id="fdbk_screen"></div>' +
'</div>';
if(this.tab_options.container) {
var container_el = this.gId(this.tab_options.container);
container_el.innerHTML = this.tab_html + this.overlay_html;
} else {
document.write(this.tab_html);
document.write(this.overlay_html);
}
this.gId('fdbk_tab').onclick = function() { GSFN.show(); return false; }
this.gId('fdbk_iframe').setAttribute("src", "");
},
set_position: function() {
this.scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
this.scroll_height = document.documentElement.scrollHeight;
this.client_height = window.innerHeight || document.documentElement.clientHeight;
this.gId('fdbk_screen').style.height = this.scroll_height+"px";
this.gId('fdbk_container').style.top = this.scroll_top+(this.client_height*0.1)+"px";
},
show: function() {
if(this.gId('fdbk_iframe').getAttribute("src") == "") {
this.gId('fdbk_iframe').setAttribute("src", this.feedback_url);
if (this.gId('fdbk_iframe').addEventListener) {
this.gId('fdbk_iframe').addEventListener("load", GSFN.loaded, false);
} else if (this.gId('fdbk_iframe').attachEvent) {
this.gId('fdbk_iframe').detachEvent("onload", GSFN.loaded);
this.gId('fdbk_iframe').attachEvent("onload", GSFN.loaded);
}
}
this.set_position();
this.gId('fdbk_overlay').style.display = "block";
},
hide: function() {
this.gId('fdbk_overlay').style.display = "none";
},
loaded: function() {
GSFN.gId('fdbk_iframe').className = "loaded";
},
gId: function(id) {
return document.getElementById(id);
}
}
</script>
<style>
/* feedback */
#fdbk_overlay {width: 100%;height:100%;top:0;left:0;z-index: 1000000;position: absolute;} #fdbk_screen {top:0;left:0;z-index:1;width:100%;position: absolute;background-color: #000;opacity: 0.45; -moz-opacity: 0.45;filter:alpha(opacity=45);} #fdbk_container {width:465px;height:450px;margin: 0 auto;z-index:2;position:relative;} #fdbk_container iframe {width:465px;height:100%;margin: 20px;
background: transparent url('http://blog.wolkanca.com/b/i/fb_loading.png') no-repeat;} #fdbk_container iframe.loaded {background: transparent;} a#fdbk_tab {top: 25%;right:0;width: 42px;height:102px;color: #FFF;cursor:pointer;text-indent:-100000px;overflow:hidden; position: fixed; z-index: 100000; margin-right: -7px;
background-image: url(http://blog.wolkanca.com/b/i/feedback_trans_tab.png);_position: absolute;
_background-image: url('http://blog.wolkanca.com/b/i/feedback_tab_ie6.png');} a#fdbk_tab:hover {margin-right: -4px;} a.fdbk_tab_right {right: 0 !important;left: auto !important;margin-right: -7px !important;margin-left: auto !important;} a.fdbk_tab_right:hover {margin-right: -4px !important;margin-left: auto !important;} a.fdbk_tab_bottom {top: auto!important;bottom: 0 !important;left: 20% !important;height: 38px !important;width: 102px !important;background-position: 0 -102px !important;margin-bottom: -7px !important;margin-left: auto !important;} a.fdbk_tab_bottom:hover {margin-bottom: -4px !important;margin-right: auto !important;} a.fdbk_tab_hidden {display:none !important;} a#fdbk_close {position: absolute;cursor:pointer;outline:none;top: 0;left: 0;z-index: 4;width:42px;height:42px;overflow:hidden;
background-image: url(http://blog.wolkanca.com/b/i/feedback-close.png);_background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://blog.wolkanca.com/b/i/feedback-close.png, sizingMethod='crop');}
#fdbk_close:hover {background-position: -42px 0;} #fc-friendbar-outer {position:fixed;top:0px;left:0px;}
</style>
<script type="text/javascript">
// feedback ayar
var tab_options = {}
tab_options.placement = "left"; //left veya right - sag veya sol.
tab_options.color = "#21236a"; //rengi belirleyin.
GSFN.feedback('http://memursite.com/iletisim-formu.php', tab_options); //kendi iletisim formu adresinizle degistirin.
</script>
kodlarını ekliyoruz ve işlem tamamdır.
Bu arada koyu renkle belirlediğim yeri kendi iletişim formunuzun linki ile değiştirmeyi unutmayın. Herhangi bir sorunda lütfen yorum bölümünü kullanınız.
0 yorum:
Yorum Gönder