ibrahimfirat.net | KişiseL Görüş Evrensel Bilgi: blogger eklentileri

blogger eklentileri

Oy Verme Eklentisi ( Blogger )

By: İbrahim Fırat on Salı, Ocak 07, 2014 / yorum : 1 blogger, blogger eklentileri, iF

Bir süredir blogger eklenti paylaşımımız olmuyordu. Bugün en çok aranan eklentilerden biri olan blogspot yıldızlı oy verme eklentisinin kurulumunu anlatacağız.

Bir çok sitede denk gelmişsinizdir yıldız oy vermeyi konuların hemen altında bulunan okuyucular tarafından oylanma sistemini. şimdi kurulumuna geçelim.

1. Aşama: bu siteye giriş yapın. Eklentiyi kullanmanız için üyelik işlemlerini tamamlayınız. sonrasında ilgili linke giderek Create account butonuna tıklayın.

2. Aşama: Stil seçme ve ayarlar bölümü burada Yıldızlı veya +/- oy verme gibi stilleri seçmeniz gerekmektedir.

3. Aşama: Blogger kumanda paneli kısmına girin sonra Şablon > HTML’yi düzenle bölümünü izleleyerek Ctrl + F tuşlarını kullanarak şu kodu </body> bulun. ilgili siteden aldığınız oy verme kodlarını bulduğunuz kodun üstüne ekleyin..

Hemen sonrasında <div class='post-footer'> kodunu aratarak bulun. Bu kod temanıza göre bir kaçtane olabilir hepsinde deneyin. Aşağıdaki kodu bulunan kodun üstüne ekleyin.

<div class="rw-ui-container"></div>

3 Adet Blogger Slider ( Slayt ) Kodları

By: İbrahim Fırat on Cuma, Kasım 29, 2013 / yorum : 0 blogger, blogger eklentileri, iF

1. Slayt: Oldukça sade bir manset alanı sitenize görsel anlamda iyi bir görünüm verecektir. Eklemesi gayet basit HTML JavaScript Gadget ekle bölümünden aşağıdaki kodu ekleyin..

</style>

<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item" id="nav-fragment-1"><a href="#fragment-1"><img alt="featured 1" src="http://1.bp.blogspot.com/-L6oFRxAjx4w/UaTsGvOIoLI/AAAAAAAAA7g/Xn1Ztn3NEP4/s1600/Change+Mouse+Cursor+Generator.png"/><span>TITLE 1</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img alt="featured 2" src="http://3.bp.blogspot.com/-HhFix8dwK6c/UaTsHHRJijI/AAAAAAAAA7w/XKC6LzXVsJU/s1600/Numbered+Page+Navigation.png"/><span>TITLE 2</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img alt="featured 3" src="http://2.bp.blogspot.com/-hAL3CbG_qeU/UaTsHXHNM4I/AAAAAAAAA70/5q-cuqeUlww/s1600/Snow+Cursor+Code+Generatort.png"/><span>TITLE 3</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img alt="featured 4" src="http://3.bp.blogspot.com/--vess4cuOAQ/UaTsGpHEUvI/AAAAAAAAA7k/scQVLvuorZc/s1600/Blogger+Falling+Object+Generator.gif"/><span>TITLE 4</span></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel" style="">
<img alt="" src="http://2.bp.blogspot.com/-K_2wwgsZkWw/Uhnj7LRRGGI/AAAAAAAABIM/c-I2AEoZZnk/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png"/> 
<div class="info">
<h2>
<a href="#" target="_blank">TITLE-OF-THE-SLIDE 1</a></h2>
<p>
TEXT-OF-THE-SLIDE 1</p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="http://2.bp.blogspot.com/-PlV205zDJXI/Uhnm1ZN1W2I/AAAAAAAABIg/nw5gu9LTvIA/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png"/>
<div class="info">
<h2>
<a href="#" target="_blank">TITLE-OF-THE-SLIDE 2</a></h2>
<p>
TEXT-OF-THE-SLIDE 2</p>
</div>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="http://1.bp.blogspot.com/-M0EQDInUmnA/UhnoxhiOzPI/AAAAAAAABIs/BP1BBPF9NdE/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png"/>
<div class="info">
<h2>
<a href="#" target="_blank">TITLE-OF-THE-SLIDE 3</a></h2>
<p>
TEXT-OF-THE-SLIDE 3</p>
</div>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="http://1.bp.blogspot.com/-RkVjrr2ep3Q/UhnqZIfLhII/AAAAAAAABI4/5dxe7L1Hgfw/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png"/>
<div class="info">
<h2>
<a href="#" target="_blank">TITLE-OF-THE-SLIDE 4</a></h2>
<p>
TEXT-OF-THE-SLIDE 4</p>
</div>
</div>
</div>
<div style="clear:both;">
</div>
<br/>
<div>
</div>

2. Slayt: Harika bir yatay manset eklentisi blogger sitenizde rahatlıkla kullanabilirsiniz. Gene aynı şekilde aşağıdaki kodu ekleyebilirsiniz.

jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

3. Slayt: Siyah arka plan yatay açıklamalı manşet alanı aynı şekilde gadget ekle kısmından aşağıdaki kodu ekleyiniz.

jQuery(document).ready(function() {
Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });

});

//]]>
</script>
<script src="http://dl.dropboxusercontent.com/s/hzvrb89dqcv4tnd/n17-content-slider-08.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/is3b1bz385zi88h/n17-content-slider-09.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/ac9jbr5hwssjnqh/n17-content-slider-010.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#slidearea{
height: 230px;
overflow: hidden;
position: relative;
width:680px;
background:#242424;
}
#gallerycover{
overflow: hidden;
margin:0px 0px;
}

.mygallery{
overflow: hidden;
position:relative;
}

.mytext img{
position:absolute;
left:10px;
top:10px;
padding:5px;
background:#515252;
border:1px solid #5e5e5e;
}

.mytext{
position:relative;
margin:0px 0px;
height:200px;
width:680px;
float:left;
display:inline;
line-height:20px;
color:#c4c4c4;
font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
}

.mytext ul li{
height:200px;

}

.mytext a:link, .mytext a:visited {
color:#fff;
}

.mytext h2 {
font: 18px Georgia,century gothic,Verdana, sans-serif;
margin:15px 0px 5px 310px;
font-weight:normal;
width:350px;
height:24px;
overflow:hidden;
}

.mytext p {
width:350px;
margin:0px 0px 5px 310px;
color:#6f6f6f;
}

.mytext h2 a:link, .mytext h2 a:visited {
color:#fff;
}
.slnav{
padding:3px 0px;
background:#000;

}
.prev{
float:left;
width:24px;
height:24px;
z-index:200;
margin-left:5px;
background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);
}

.next{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);
display:block;
}

</style>

});
</script>

<div id="gallerycover">
<div class="mygallery">
<ul>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-1</a></h2>
<p>
Slide 1 Description [...]</p>
<img alt="" width="270" src="http://2.bp.blogspot.com/-K_2wwgsZkWw/Uhnj7LRRGGI/AAAAAAAABIM/c-I2AEoZZnk/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="170"/>
</div>
</li>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-2</a></h2>
<p>
Slide 2 Description [...]</p>
<img alt="" width="270" src="http://2.bp.blogspot.com/-PlV205zDJXI/Uhnm1ZN1W2I/AAAAAAAABIg/nw5gu9LTvIA/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="170"/>
</div>
</li>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-3</a></h2>
<p>
Slide 3 Description [...]</p>
<img alt="" width="270" src="http://1.bp.blogspot.com/-M0EQDInUmnA/UhnoxhiOzPI/AAAAAAAABIs/BP1BBPF9NdE/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="170"/>
</div>
</li>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-4</a></h2>
<p>
Slide 4 Description [...]</p>
<img alt="" width="270" src="http://1.bp.blogspot.com/-RkVjrr2ep3Q/UhnqZIfLhII/AAAAAAAABI4/5dxe7L1Hgfw/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="170"/>
</div>
</li>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-5</a></h2>
<p>
Slide 5 Description [...]</p>
<img alt="" width="270" src="http://4.bp.blogspot.com/-XMxYEw2NibM/UhozkOB-YXI/AAAAAAAABJI/N6uGRQTwrXQ/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="170"/>
</div>
</li>
</ul>
<div class="clear">
</div>
</div>
</div>
<div class="slnav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="clear">
</div>
</div>
</div>
<div class="clear">
</div>

Blogger Düzenle İkonu Nasıl Kaldırılır?

By: İbrahim Fırat on Perşembe, Kasım 28, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Blogger Widget Düzenleme ikonu kaldırmak

Bu konumuz seo açısından önemlidir. Genel olarak faydalı olan sadece site sahibine gözüken widget düzenle ikonu aynı zamanda seo sorgularında link çıkışı olarak gözükmektedir. Link çıkışı olarak gözükmesinin yanı sıra dofollow olarak çıkış vermektedir. iki yöntemle bu sıkıntıyı hemen gidereceğiz.

Bu yöntemi http://www.ilkay.co/ arkadaşımız kendi blogunda anlatmış. Bizde oradan yararlanarak sizlere sunacağız.

1. Yöntem:

Her widgetin kodları arasında şu kod bulunmaktadır. <b:include name='quickedit'/> Blogger + Şablon >> HTML'yi düzenle bölümünden yukarıdaki kodu bulun ve silin. Bu şekilde widget ikonları pasif hale gelecek site sahibine gözüken ikon artık size de gözükmeyecektir.

Yukarıdaki yöntem ile ne kadar widget çıkışınız varsa o kadar yukarıdaki koddan silin.

2. Yöntem:

Bu yöntemimiz oldıukça basit aşağıdaki kodu css kodlarınızın arasına yerleştirmeniz yeterli olacaktır. Tüm ikonları etkisiz hale getirecek ve gözükmeyecektir.

.quickedit{display:none;}

Blogger Renkli Widget Yapmak

By: İbrahim Fırat on Çarşamba, Kasım 27, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Temalarda her zaman bir eksiklik olabiliyor. Tam olarak kendi zevkimize göre tasarımlı tema bulmak oldukça zor. Bu yüzden temaları editleme işleride kullanıcıya düşüyor. Bu konumuzda blogger temalardaki widget arka plan rengini ayarlamayı öğreneceğiz.

Wİdget arka plan ayarlama

Kumanda Paneli + Şablon >> HTML'yi Düzenle Bölümünden aşağıdaki kodu bulun.

]]></b:skin>

Bulduğunuz kodun üstüne gelecek biçimde aşağıdaki kodda değişikler yaparak ekleyiniz. Değişiklik yapacağınız bölümler aşağıda anlatılmıştır.

#HTML2 h2
{
color:#000000; border-bottom:0px solid #22FF00; background: #ffffff;
}

Hangi widgetin arka plan rengini değiştirmek istiyorsanız widgetin kaçıncı olduğunu bularak HTML2 yazan bölüme widgetinizin ID'sinin sonundaki numarasını yazın örnek: HTML1, blog1, HTML2, HTML3, HTML5 gibi numaralandırmalar göreceksiniz.

Renklendirme için background: #ffffff; olan kısım widgetinizin ana rengi ben beyaz olarak ayarladım siz zevkinize göre herhangi bir renk kodunu ayarlayabilirsiniz.

color:#000000 ise widgetinizde görünen başlığın rengidir.

Sosyal Ağlarda Paylaşmadan ( Blogger )

By: İbrahim Fırat on Pazartesi, Kasım 25, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Blogger Sosyal Ağlarda Paylaşmadan Kilitle Eklentisi

Bu eklentinin amacı siteye giriş yapıldığında konuyu sosyal ağlarda paylaşmadan hiç bir aktivitede bulunamıyorsun. Ziyaretçiyi rahatsız eder mi etmez mi? bu konu tartışılır. Ancak kulllanmak isteyenler olacaktır.

Blogger.com > Şablon > HTML'yi düzenle Kısmından devam ederek >> aşağıdaki kodu bulun.

</head>

Yukarıdaki kodun üstüne gelecek şekilde aşağıdaki kodu ekleyin.

Kaydedin ve şablon bölümünden çıkarak. Yeni konu aç kısmından HTML kısmına gelerek aşağıdaki kodu yapıştırın. Gerekli düzenlemeleri kendi sosyal ağ adreslerinize göre yaparak hangi konunuzun içine yerleştirirseniz kodu o konu sosyal ağlarda paylaşılmadan ziyaretçiye görünmeyecek.

<div style="text-align: center; margin-bottom: 20px;">
<img src="GİZLENECEK RESİM" alt="" style="margin: auto;" />
</div>
<div style="text-align: justify">
GİZLENECEK METİN
</div>

</article> 
</div>
<div id="mblunlocker">
 </div>
<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUUR4dVRTUkdSVTA"></script>
  
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({

text: {
header: "İçeriği görmek için paylaş",
message: "Düğmelerden birine tıklayın ve içeriğe ulaşın.."
},

style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},

// twitter options
twitter: {
url: "http://www.twitter.com/sayfa",
text: "Upgrade your social buttons to get more social traffic!"
},

// facebook options
facebook: {
url: "http://www.facebook.com/sayfa",
appId: "418044881593120"
},

google: {
url: "http://plus.google.com"
}
});
});;;;
        
</script>

Widget Arka Plan Ekleme ( Blogger )

By: İbrahim Fırat on Pazar, Kasım 17, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Blogger Widget arka plan ekleme

Blogger temalarımız bazen her yönüyle istediğimiz seviyede tasarıma sahip olamıyor. Bunun için gerekli düzenlemeleri kod bilgisi olması dahilinde temamız da değişiklikler yapmamız gerekiyor.

Bugün gerekli olan ayarlardan bir tanesi bir çok temada widget eklerken sadece görünüm olabiliyor biz bu sadece görünümlü widgetlere arka plan resmi veya rengi eklemeyi öğreneceğiz.

Sidebar,header ve footerde ki bütün gadgetlerinizi birbirinden farklı olarak stillendirebilirsiniz.Bu sayede eklentilerinizi görsel ve uyanıklık dişi hale getirebilirsiniz.

İlk evvela bir gadget oluşturun.Blogger-Tasarım-Sayfa Öğelerinden yeni bir gadget ekleyebilirsiniz.Eklediğiniz gadgete ister kapüşon girin isterseniz abes bırakın sizin zevkinize kalık amma bap yazarsanız idleri bulmanızı kolaylaştıracaktır.

1. Yöntem::

Gadgetimizi düzenle butonuna basalım.Gelen pencerede ki linki bir hamiş defterine yapıştıralım.Örneğin benim ki ;
http://blogger.com/rearrange?blogID=.......null&widgetId=HTML17

Maviyle işaretlediğim hedef numara bizim üzerinde çalışabileceğim dershane için kolaylık sağlayacaktır.
Bu şekilde ayarları yapmanız sizlere uygun değilse ikinci yöntem ile devam ediyoruz.

2. Yöntem:

Gadgetinize bir başlık girerek ayarlarımızı daha kolay olarak yapabileceğinizi biliyorsunuz..HTML DÜZENLE kısmıne gelerek ,gadget'e verdiğiniz adı temanızın kodlarında Ctrl + f tuşlarının yardımı ile aratın.

Sidebar-Wrapper sekmesinin altında çıkacaktır.Gördüğünüz kadar widgetid lerinin karşısında sınıflar yazıyor.Bu şekilde idlerimizi bulduktan sonra organizasyon kısmına geçelim.
Temanızda aşağıdaki kodu bulun ;

]]></b:skin>

Yukarıdaki kodu bulduktan sonra aşağıdaki örnek gösterilerek yazılmış kodu bir satır üstüne ekleyiniz.

#HTML17 h2{ background:#5585456; margin:10px 0 10px 1; padding:8px 0 8px 12px; font-size:11px; font-family: Sans-serif, Arial, Helvetica; font-weight:bold; text-transform:uppercase; color:#000; text-shadow:0 1px 0 #00000; }

Yukarıdaki koddda renk düzenlemeleri yazı stili boyut vs bunları kendi temanıza uygun şekilde yapınız.

Blogger Yukarı Çık Eklentisi

By: İbrahim Fırat on Salı, Ekim 22, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Blogger Yukarı Çık butonu

Günümüzün en popüler eklentilerinden olan yukarı çık butonu sonsuz kaydırma eklentisi kullanan bloglar ve buna benzer temalarda gerekli eklentiler arasındadır.

Eklentimizin kurulumu için.

Blogger admin paneli > şablon + HTML'yi düzenle kısmından aşağıdaki kodu bulun..

</body>

yukarıdaki kodun bir satır üstüne aşağıdaki kodumuzu ekleyin.

Sola Sabit Sosyal Menü Eklentisi

By: İbrahim Fırat on Salı, Ekim 22, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Blogger'ların popüler eklentilerinden biri sosyal menü eklentileridir. Önceki konularımızda klasik sosyal medya menülerini paylaşmıştık.

Yukarıda gördüğünüz eklentimiz oldukça hoş ve göze hitap ediyor. Sosyal medyada takipçi kazanmanıza öncülük edecektir.

<style type="text/css"> 
ul#sosyal { 
    position: fixed; 
    margin: 0px; 
    padding: 0px; 
    top: 20%; 
    left: 0px; 
    list-style: none; 
    z-index:9999; 
} 
ul#sosyal li { 
    width: 100px; 
} 
ul#sosyal li a { 
    display: block; 
    margin-left: -2px; 
    width: 100px; 
    height: 70px;    
    background-color:#fff; 
    background-repeat:no-repeat; 
    background-position:center center; 
    border:1px solid #AFAFAF; 
    -moz-border-radius:0px 10px 10px 0px; 
    -webkit-border-bottom-right-radius: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -khtml-border-bottom-right-radius: 10px; 
    -khtml-border-top-right-radius: 10px; 
    -moz-box-shadow: 0px 4px 3px #000; 
    -webkit-box-shadow: 0px 4px 3px #000; 
} 
ul#sosyal .twitter a{ 
     background:#0F96C6 url(http://3.bp.blogspot.com/-1wb-O4GG6DQ/UPFOe03M-lI/AAAAAAAAA4g/1015-y7FaYU/s1600/Twitter.png)no-repeat; 
background-position:center center; 
} 
ul#sosyal .googleplus a      { 
    background:#D73D27 url(http://3.bp.blogspot.com/-1mYMKQENXdI/UPFOeK31VzI/AAAAAAAAA4k/w2Qk48tpleQ/s1600/GOOGLE+PLus.png)no-repeat; 
background-position:center center; 
} 
ul#sosyal .facebook a      { 
    background:#1A4B97 url(http://1.bp.blogspot.com/-3M1F3Y29Yoc/UPFOeAAUFvI/AAAAAAAAA4c/ALvfOPDwJ-g/s1600/Facebook.png)no-repeat; 
background-position:center center; 
} 
ul#sosyal .rss a      { 
    background:#FAAE17 url(http://4.bp.blogspot.com/-twR0g7wotpE/UPFOfFtFOuI/AAAAAAAAA4o/uJMUf9hjRco/s1600/rss.png)no-repeat; 
background-position:center center; 
} 
  
ul#sosyal .pinterest a   { 
    background:#963336 url(http://2.bp.blogspot.com/-xgOrG4ysqyM/UPFOeKFKMtI/AAAAAAAAA4Y/i_jnKpHsK24/s1600/Pinterest.png)no-repeat; 
background-position:center center; 
} 
</style>     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>     <script type="text/javascript"> 
$(function () { 
    $('#sosyal a').stop().animate({ 
        'marginLeft': '-85px' 
    }, 1000); 
  
    $('#sosyal > li').hover( 
        function () { 
            $('a', $(this)).stop().animate({ 
                'marginLeft': '-2px' 
            }, 200); 
        }, 
        function () { 
            $('a', $(this)).stop().animate({ 
                'marginLeft': '-85px' 
            }, 200); 
        } 
    ); 
}); 
</script>  <br />
<ul id="sosyal">
<li class="twitter"><a href="http://twitter.com/iF" title="Twitter"></a></li>
<li class="googleplus"><a href="http://gplus.to/iF" title="Google Plus"></a></li>
<li class="facebook"><a href="http://facebook.com/iF" title="Facebook"></a></li>
<li class="rss"><a href="http://feeds.feedburner.com/iF" title="Rss"></a></li>
<li class="pinterest"><a href="http://pinterest.com/iF" title="Pinterest"></a></li>
</ul>

Sitemizin kategorilerinde bulunan toplam yazı, bu yazılara yazılmış yorum bulunmaktadır!

Popüler
Yasal Uyarı
Yorumlar
Kategori

Tüm Hakları Saklıdır - !BR@H!M F!R@T - Skype: live:iletisim_1269 - Tema Düzenleme | Set by NarKo | Sitemiz, hukuka, yasalara, telif haklarına ve kişilik haklarına saygılı olmayı amaç edinmiştir. Sitemiz, 5651 sayılı yasada tanımlanan yer sağlayıcı olarak hizmet vermektedir. İlgili yasaya göre, site yönetiminin hukuka aykırı içerikleri kontrol etme yükümlülüğü yoktur. Bu sebeple, sitemiz uyar ve kaldır prensibini benimsemiştir. Telif hakkına konu olan eserlerin yasal olmayan bir biçimde paylaşıldığını ve yasal haklarının çiğnendiğini düşünen hak sahipleri veya meslek birlikleri, ibo.firat@gmail.com mail adresinden bize ulaşabilirler. Buraya ulaşan talep ve şikayetler Hukuk Müşavirimiz tarafından incelenecek, şikayet yerinde görüldüğü takdirde ihlal olduğu düşünülen içerikler sitemizden kaldırılacaktır. Sitede yayınlanan köşe yazılarından yazarları sorumludur. Site yönetimine ulaşmadan yapılan hukuki işlemlerden site yönetimi hiçbir şekilde sorumlu tutulamaz. Bu siteye giren her kullanıcı bu duyurudan haberdar olmuş sayılır. Sitedeki tüm harici linkler ayrı bir sayfada açılır. Sitemiz harici linklerin sorumluluğunu almaz.

Sponsor Alanı

Slider

İlgi Çeken Videolar

Sağlık

Teknoloji

Sinema

Televizyon

Ne Nedir?

En5 Konular

Oy Verme Eklentisi ( Blogger )

3 Adet Blogger Slider ( Slayt ) Kodları

Blogger Düzenle İkonu Nasıl Kaldırılır?

Blogger Widget Düzenleme ikonu kaldırmak

Blogger Renkli Widget Yapmak

Wİdget arka plan ayarlama

Sosyal Ağlarda Paylaşmadan ( Blogger )

Blogger Sosyal Ağlarda Paylaşmadan Kilitle Eklentisi

Widget Arka Plan Ekleme ( Blogger )

Blogger Widget arka plan ekleme

Blogger Yukarı Çık Eklentisi

Blogger Yukarı Çık butonu

Sola Sabit Sosyal Menü Eklentisi

Popüler Yayınlar

Comments

Pages

Slider

İlgi Çeken Videolar

Sağlık

Teknoloji

Sinema

Televizyon

Ne Nedir?

En5 Konular

Blogger Widget Düzenleme ikonu kaldırmak

Wİdget arka plan ayarlama

Blogger Sosyal Ağlarda Paylaşmadan Kilitle Eklentisi

Blogger Widget arka plan ekleme

Blogger Yukarı Çık butonu

Popüler Yayınlar

Comments

Labels

Pages