Sağdan Açılar "Facebook Beğen".Twitter Takip et" Kutusu

   Web sitenize sağda sabit, imleç ile açılan Facebook beğen ve Twitter takip et kutusu eklemek istermisiniz? Cevabınız evet ise nasıl yapılacağını birazdan öğreneceksiniz.Fakat baştan şunu söyleyeyim,vereceğim kodları kullandığınız sisteme uyarlamanız gerekebilir.Örneğin MyBB forum kullanıcılarının kodları headerinclude şablonuna, header şablonuna ve global.css'ye, WordPress blog kullanıcılarının ise header.php'ye ve style.css dosyasına ekleme yapması gerekir.

1. Adım:
Her iki grafiği bilgisayarınıza indirip ftp alanınıza gönderin.

   

2. Adım:

Sistemin Js kodlarını (isterseniz kendinize göre düzenleyerek) MyBB forum temanızın headerinclude şablonunda istediğiniz bir yere ekleyin.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><br /> <script type="text/javascript"> jQuery.noConflict(); jQuery(function (){ jQuery(".s_likebox").hover(function(){ jQuery(".s_likebox").stop(true, false).animate({right:"0"},"medium"); },function(){ jQuery(".s_likebox").stop(true, false).animate({right:"-250"},"medium"); },500); return false; }); </script> <br /> <script type="text/javascript"> jQuery.noConflict(); jQuery(function (){ jQuery(".s_likebox2").hover(function(){ jQuery(".s_likebox2").stop(true, false).animate({right:"0"},"medium"); },function(){ jQuery(".s_likebox2").stop(true, false).animate({right:"-250"},"medium"); },500); return false; }); </script>

3. Adım:

Sistemin Css kodlarını (isterseniz kendinize göre düzenleyerek) MyBB forum temanızın Global.css dosyasında en alta ekleyin.

.s_likebox2 {<br /> float:right;<br /> width:288px;<br /> height:345px;<br /> background: url(images/t_bg.png) no-repeat !important;<br /> display:block;<br /> right:-250px;<br /> padding:0;<br /> position:fixed;<br /> top: 190px;<br /> z-index:1002;<br /> border-radius:10px;<br /> -moz-border-radius:10px;<br /> -webkit-border-radius:10px;<br /> }<br /> div.likeboxwrap2 {<br /> margin-top:2px;<br /> margin-left:-5px;<br /> background: #fff;<br /> width:238px;<br /> height:325px;<br /> overflow:hidden;<br /> border-radius:10px;<br /> -moz-border-radius:10px;<br /> -webkit-border-radius:10px;<br /> }<br /> div.likeboxwrap iframe2 {margin:-1px} <br /> <br /> .s_likebox {<br /> float:right;<br /> width:288px;<br /> height:345px;<br /> background: url(images/fb_bg.png) no-repeat !important;<br /> display:block;<br /> right:-250px;<br /> padding:0;<br /> position:fixed;<br /> top: 50px;<br /> z-index:1002;<br /> border-radius:10px;<br /> -moz-border-radius:10px;<br /> -webkit-border-radius:10px;<br /> }<br /> <br /> div.likeboxwrap {<br /> margin-top:2px;<br /> margin-left:-5px;<br /> background: #fff;<br /> width:238px;<br /> height:325px;<br /> overflow:hidden;<br /> border-radius:10px;<br /> -moz-border-radius:10px;<br /> -webkit-border-radius:10px;<br /> }<br /> div.likeboxwrap iframe {margin:-1px}

4. Adım:

Sistemi çağıracak div kodunu ve içeriğini kendinize göre düzenledikten sonra forum temanızın header şablonunda en alta ekleyin.

<div class="s_likebox2"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"> <span><div class='likeboxwrap2'> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script><br /> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 30000, width: 240, height: 340, theme: { shell: { background: '#3294d6', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#000000', links: '#ff007b' } }, features: { scrollbar: true, loop: false, live: false, behavior: 'all' } }).render().setUser('Twitter Takip Et Kullanıcı Adı Buraya').start(); </script><br /> </div> </span></div> </div> <div class="s_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"> <span><div class='likeboxwrap'> Facebook Beğen Kutusu İframe Kodu Buraya<br /> </div> </span></div> </div>

NOT:

Facebook için sayfanızın beğen kutusunu bu bağlantıdan oluşturabilirsiniz. Sorunsuz çalışması için iframe kodunu tavsiye ederim, show stream'i kapatın ve boyut olarak width:240px; height:350px; seçin.

Twitter için İşlem 4'de verdiğim kodu kullanırsanız kutu içerisinde son tweetler görünür ve kullanıcı başlığına tıklayınca Twitter bilgi sayfası açılır böylece kullanıcılar Twitter hesabını takibe alabilirler.

Kutuların yerlerini beğenmezseniz top: 190px; ve top: 50px; değerleri ile oynayabilirsiniz. Sayılar ufaldıkça kutular sağda yukarıya doğru çıkarlar.

WordPress için;

İşlem 2, İşlem 4 kodlarını temanızın header.php dosyasında
etiketinin öncesine ekleyin. Style kodlarını da temanızın style.css dosyasının en sonuna ekleyin.


Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...