Blogger için Twitter Kutusu Sağdan Açılan Pencere Şeklinde

Blogger için ekliyeceğiniz twitter kutusu sayesinde blogunuza gelen ziyaretçiler, blogunuz üzerinden twitterde sizi takip etme imkanını bulacak.Bu eklenti sayesinde takipçi sayınızda ki artışı zamanla fark edeceksiniz.Doğal olarak attığınız twittlerin okunma oranında da bir artış göeceksiniz.Daha önce buna benzer bir şekilde sağdan açılan pencere şeklinde facebook eklentisini de sizlerin kullanımına sunmuştuk, hem facebook hemde twitter kutularının ve yanında google + penceresi bulunan bir başka eklentinin kurulumu için  de başka bir anlatım yapmıştık.Şimdi ise sadece sağdan açılan pencere şeklindeki twitter kutusunu blogunuza nasıl ekliyebileceğinizi anlatacağız.

1.Adım:Blogumuza twitter takipçi kutusu ekliyoruz.

Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip,aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıyoruz.

<script type="text/javascript" src="http://makingdifferent.googlecode.com/files/fanbox_init.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init
("TWİTTER ADRESİNİZ");</script>

Kod içerisinde; kırmızı renkle yazdığımız TWİTTER ADRESİNİZ (Örnek:blogokulu) yazan yere kendi twitter adresinizi yazıp gadgeti kaydediyoruz.
2.Adım: Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.Kodlar içerisinde Ctrl+F yardımı ile </ head> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz </ head> kodundan önceki kısma yapıştırıyoruz.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Şablonumuzu kaydedip çıkıyoruz.
3.Adım: Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip,aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıyoruz.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".mdslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">.mdslikebox{background: url("http://3.bp.blogspot.com/-erfRWcXzmgU/TwFo5Voq2oI/AAAAAAAACLA/9sdI9M7iwhg/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 275px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}.mdslikebox div{border:none;position:relative;display:block;}.mdslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdslikebox span a{color: #808080;text-decoration:none;}.mdslikebox span a:hover{text-decoration:underline;}</style>
<div class="mdslikebox" style=""><div>
<div id="twitterfanbox"><script type="text/javascript"
>fanbox_init
("TWİTTER ADRESİNİZ");</script>
</div id="twitterfanbox"><span>By <a href="http://www.blogokulu.org">Blog Okulu</a> / <a href="http://blogokulu.blogspot.com/2012/04/blogger-icin-twitter-kutusu-sagdan.html">+Sitene Ekle!</a></span></div></div>

Kod içerisinde; kırmızı renkle yazdığımız TWİTTER ADRESİNİZ (Örnek:blogokulu) yazan yere kendi twitter adresinizi yazıp gadgeti kaydedip çıkıyorsunuz.JQuery ile sağdan açılan pencere şeklinde twitter kutusu kullanıma hazır.
Blogger için Twitter Kutusu Soldan Açılan Pencere Şeklinde:
Pencerenin soldan açılmasını istiyorsanız 3.Adımda verdiğimiz kodun yerine aşşağıdaki kodu kullanın.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".mdslikebox").hover(function() {$(this).stop().animate({left: "-47px"}, "medium");}, function() {$(this).stop().animate({left: "-346"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">.mdslikebox{background: url("http://img823.imageshack.us/img823/4932/twitterdym.png") no-repeat scroll right center transparent !important;display: block;float: left;height: 275px;padding:0px 4px 0 46px;width: 333px;z-index: 99999;position:fixed;left:-346px;top:25%;}.mdslikebox div{border:none;position:relative;display:block;}.mdslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;left: 6px;text-align: left;z-index: 99999;}.mdslikebox span a{color: #808080;text-decoration:none;}.mdslikebox span a:hover{text-decoration:underline;}</style>
<div class="mdslikebox" style=""><div>
<div id="twitterfanbox"><script type="text/javascript"
>fanbox_init
("TWİTTER ADRESİNİZ");</script>
</div id="twitterfanbox"><span>By <a href="http://www.blogokulu.blogspot.com/">Blog Okulu</a> / <a href="http://blogokulu.blogspot.com/2012/04/blogger-icin-twitter-kutusu-sagdan.html">+Sitene Ekle!</a></span></div></div>