Kategoriler: BloggerSiteniz İçin

Kayan Google +1, Facebook ve Twitter butonu

Bu yazımda blogunuza solda kayan Google +1, Facebook ve Twitter butonu ekleyeceksiniz. Sadece 3 buton var sanmayın height değerlerini değiştirip araya başka butonlarda koymanız mümkün.Bu hayal gücünüze kalmış bir şey 🙂 Şimdi kodlara geçelim öncelikle aşağıdaki kodu buluyoruz.

</head>

Kodu bulduktan sonra öncesine aşağıdaki kodu ekliyoruz.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Şimdi gelelim işin önemli kısmına aşağıda 2 türlü kod var. Direkt olarak kullanabileceğiniz ya da css olarak ayrılmış kodlar var. 1. kodu direkt olarak bir html kutusunun içine atın, ayrı eten açmanıza gerek yok var olan bir html kutusunun içinde kodların altına ekleyin fazlalık yapmasın. Zaten butonlar solda çıkacak.

1.kod:

<style>
/*-------furkanozden.blogspot.com kayan butonlar------------*/
#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:0;
z-index:100
}

#floatsidebar {
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:220px;
width:55px;
margin:0 0 0 5px;
}
</style>


<div id="floatdiv">
<div id="floatsidebar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
</td>
</tr>
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url"/>
</g:plusone></td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="frknzdn">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.furkanozden.blogspot.com/" target="_blank">Widgets</a></p>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

<!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 0,
targetY: 300,
hasInner: typeof(window.innerWidth) == 'number',
hasElement: typeof(document.documentElement) == 'object'
&& typeof(document.documentElement.clientWidth) == 'number',
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
floatingMenu.computeShifts = function ()
{
var de = document.documentElement;
floatingMenu.shiftX =
floatingMenu.hasInner
? pageXOffset
: floatingMenu.hasElement
? de.scrollLeft
: document.body.scrollLeft;
if (floatingMenu.targetX < 0)
{
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: document.body.clientWidth;
}
floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0)
{
if (floatingMenu.hasElement && floatingMenu.hasInner)
{
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else
{
floatingMenu.shiftY +=
floatingMenu.hasElement
? de.clientHeight
: document.body.clientHeight;
}
}
}
floatingMenu.calculateCornerX = function()
{
if (floatingMenu.targetX != 'center')
return floatingMenu.shiftX + floatingMenu.targetX;
var width = parseInt(floatingMenu.menu.offsetWidth);
var cornerX =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageXOffset
: document.documentElement.scrollLeft) +
(document.documentElement.clientWidth - width)/2
: document.body.scrollLeft +
(document.body.clientWidth - width)/2;
return cornerX;
};
floatingMenu.calculateCornerY = function()
{
if (floatingMenu.targetY != 'center')
return floatingMenu.shiftY + floatingMenu.targetY;
var height = parseInt(floatingMenu.menu.offsetHeight);
// Handle Opera 8 problems
var clientHeight =
floatingMenu.hasElement && floatingMenu.hasInner
&& document.documentElement.clientHeight
> window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight
var cornerY =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageYOffset
: document.documentElement.scrollTop) +
(clientHeight - height)/2
: document.body.scrollTop +
(document.body.clientHeight - height)/2;
return cornerY;
};
floatingMenu.doFloat = function()
{
// Check if reference to menu was lost due
// to ajax manipuations
if (!floatingMenu.menu)
{
menu = document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId];
initSecondary();
}
var stepX, stepY;
floatingMenu.computeShifts();
var cornerX = floatingMenu.calculateCornerX();
var stepX = (cornerX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5)
{
stepX = cornerX - floatingMenu.nextX;
}
var cornerY = floatingMenu.calculateCornerY();
var stepY = (cornerY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5)
{
stepY = cornerY - floatingMenu.nextY;
}
if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0)
{
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = element[listener + '_num'] -1; i >= 0; i--)
{
if(element[listener + i](e) == false)
r = false;
}
return r;
}
}
//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
floatingMenu.init = function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.calculateCornerX();
floatingMenu.nextY = floatingMenu.calculateCornerY();
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window, 'onload',
floatingMenu.initSecondary);
}
//-->
</script>

2.kod:

Burada ilk önce şu kodu buluyoruz.

]]></b:skin>

Bulduğumuz koduna öncesine şu kodları ekliyoruz.

/*-------furkanozden.blogspot.com-sol-kayan-buton-kodu------------*/
#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:0;
z-index:100
}

#floatsidebar {
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:220px;
width:55px;
margin:0 0 0 5px;
}

bu kısım css koduydu. Şimdi Sayfa Öğeleri kısmına gelip aşağıdaki kodu herhangi bir html kutusunun içine ekleyebiliriz.

<div id="floatdiv">
<div id="floatsidebar">
<table cellpadding="1px" cellspacing="0"><tbody>
<tr> <td style="border-bottom: 1px solid #E8E8E8; padding: 5px 0 2px 0;">
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script><fb:like font="" href="" layout="box_count" send="false" show_faces="false"></fb:like> </td> </tr>
<tr> <td style="border-bottom: 1px solid #E8E8E8; padding: 5px 0px;">
<g:plusone expr:href="data:post.url" size="Tall"> </g:plusone></td> </tr>
<tr> <td style="border-bottom: 0px solid #E8E8E8; padding: 5px 0 0px 0;">
<a class="twitter-share-button" data-count="vertical" data-via="wptoblogger" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script> </td> </tr>
<tr> <td style="border-bottom: 0px solid #E8E8E8; padding: 0px 0 0px 0;">
<div style="color: #dddddd; font-size: 10px; text-align: center;">
<a href="http://www.furkanozden.blogspot.com/" style="color: #dddddd;" target="_blank">Widgets</a></div>
</td> </tr>
</tbody></table>
</div>
</div>
<script type="text/javascript">

// JavaScript Document

<!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 0,
targetY: 300,
hasInner: typeof(window.innerWidth) == 'number',
hasElement: typeof(document.documentElement) == 'object'
&& typeof(document.documentElement.clientWidth) == 'number',
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
floatingMenu.computeShifts = function ()
{
var de = document.documentElement;
floatingMenu.shiftX =
floatingMenu.hasInner
? pageXOffset
: floatingMenu.hasElement
? de.scrollLeft
: document.body.scrollLeft;
if (floatingMenu.targetX < 0)
{
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: document.body.clientWidth;
}
floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0)
{
if (floatingMenu.hasElement && floatingMenu.hasInner)
{
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else
{
floatingMenu.shiftY +=
floatingMenu.hasElement
? de.clientHeight
: document.body.clientHeight;
}
}
}
floatingMenu.calculateCornerX = function()
{
if (floatingMenu.targetX != 'center')
return floatingMenu.shiftX + floatingMenu.targetX;
var width = parseInt(floatingMenu.menu.offsetWidth);
var cornerX =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageXOffset
: document.documentElement.scrollLeft) +
(document.documentElement.clientWidth - width)/2
: document.body.scrollLeft +
(document.body.clientWidth - width)/2;
return cornerX;
};
floatingMenu.calculateCornerY = function()
{
if (floatingMenu.targetY != 'center')
return floatingMenu.shiftY + floatingMenu.targetY;
var height = parseInt(floatingMenu.menu.offsetHeight);
// Handle Opera 8 problems
var clientHeight =
floatingMenu.hasElement && floatingMenu.hasInner
&& document.documentElement.clientHeight
> window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight
var cornerY =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageYOffset
: document.documentElement.scrollTop) +
(clientHeight - height)/2
: document.body.scrollTop +
(document.body.clientHeight - height)/2;
return cornerY;
};
floatingMenu.doFloat = function()
{
// Check if reference to menu was lost due
// to ajax manipuations
if (!floatingMenu.menu)
{
menu = document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId];
initSecondary();
}
var stepX, stepY;
floatingMenu.computeShifts();
var cornerX = floatingMenu.calculateCornerX();
var stepX = (cornerX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5)
{
stepX = cornerX - floatingMenu.nextX;
}
var cornerY = floatingMenu.calculateCornerY();
var stepY = (cornerY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5)
{
stepY = cornerY - floatingMenu.nextY;
}
if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0)
{
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = element[listener + '_num'] -1; i >= 0; i--)
{
if(element[listener + i](e) == false)
r = false;
}
return r;
}
}
//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
floatingMenu.init = function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.calculateCornerX();
floatingMenu.nextY = floatingMenu.calculateCornerY();
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window, 'onload',
floatingMenu.initSecondary);
}
//-->
</script>

Son bir şey daha Sayfa Öğeleri kısmına eklediğiniz koddaki frknzdn kısmını kendi twitter kullanıcı adınıza göre düzenlemeyi unutmayınız.

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

Paylaş
Yazar
Furkan Özden

Son Gönderiler

Into the Night (2020) Dizi İncelemesi

Netflix Belçika yapımı olan Into the Night dizisi 1 mayıs tarihinde yayınlandı. Jacek Dukaj’ın yazdığı…

3 hafta önce

Call of Duty: Warzone (2020) Oyun incelemesi

Call of Duty: Warzone, Activision’un Call of Duty oyunlarından en iyi ve en başarılı olan…

1 ay önce

Ses İzolasyonu Süngerleri

Akustik ve ses kesici yalıtım süngerleri olarak 2 farklı amaçta kullanılmaktadır. Akustik ses yalıtım süngeri…

2 ay önce

The Last Kingdom (2015) Dizi İncelemesi

Son günlerde oldukça popüler bir platform olan Netflix’te en son 4. sezonu ile yayına giren…

2 ay önce

Aradığınız Alan Adı Kime Ait?

Hayalinizdeki web sitesini oluşturmak için izlemeniz gereken ilk adım bir alan adı seçmek ve daha…

3 ay önce

Bad Boys: Her Zaman Çılgın (2020) Film İncelemesi

Uyuşturucu kartelinin başında bulunan Armando Armas'ın yakalanması gerekmektedir. Ancak Armando soğukkanlı ve ünlü bir katildir.…

3 ay önce