Sayfa ile hareket eden Facebook beğen (like box) eklentisi |
Blogger bloglarınız için kullanmak isteyeceğiniz bir eklentiyi sizlerle paylaştım bu yazımda. Bu eklenti, blog sayfalarınızın sağ ya da sol alt köşelerinde görünen ve sayfa ile birlikte hareket eden Facebook like box yani Facebook beğen kutusu eklentisi. Bu özel olarak tasarlanmış eklenti sayesinde blogunuzu ziyaret edenlerin, Facebook sayfanızı beğenmeye teşvik edebilirsiniz. Bu sayede beğeni sayınızı da arttırabilirsiniz. Ayrıca bu eklentinin mobil uyumlu olduğunu da belirtmeliyim. (Bu arada sevgili dostlar bu eklenti eski sürüm Blogger temelarında düzgün çalışmayabilir, haberiniz olsun)
Şimdi Facebook beğen (like box) eklentisini Blogger'a ekleyelim:
1. Öncelikle Blogger kullanıcı panelinde, sol tarafta yer alan "Şablon" ardından açılan sayfada "HTML Düzenle" sekmelerine tıklayarak kodların olduğu kısma ulaşın.
2. Kodların arasından Ctrl F yardımıyla aşağıdaki kodu bulun
</style>3. Bulduğunuz bu kodun hemen üstüne aşağıdaki kodları ekleyin.
#open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;}4. Daha sonra yine Ctrl F yardımıyla aşağıdaki kodu bulun.
.close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
</body>5. Bulduğunuz bu kodun hemen üstüne ise aşağıdaki kodu ekleyin.
<div class='slideUp' id='open-fb'>6. Son olarak kırmızı renkle yazılmış olan "blogtecrubem" yerine kendi Facebook sayfanızın kullanıcı adını yani url sini yazın. Ardından şablonu kaydedin ve blogunuzu kontrol edin. Tüm yapmanız gerekenler bunlardı. Bu arada 3. aşamda mavi renkle belirttiğim right kelimesinin yerine left yazarsanız eklentinin sol alt köşede görünmesini sağlarsınız.
<a class='close-fb' href='#close-fb-like-box' onclick='hide('open-fb')' title='Close'><i class='fa fa-times'/></a>
<div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/blogtecrubem' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogtecrubem&width=187&height=62&show_faces=false&colorscheme=light&stream=false&border_color&header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div></div>
<script type='text/javascript'>
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
</script>
Önemli bir bilgilerden :)) Sağ olasın...
YanıtlaSilRica ederim, evet güzel bir eklenti...
SilEğer facebook sayfam kilitlenmemiş olsaydı çok işime yarardı kesin :(
YanıtlaSilHocam Twitter İçin de Olanı Varsa İyi Olur... Ben Sadece Twitter Kullanıyorum da. Yine de Teşekkürler...
YanıtlaSil