Windows 8 Tarzı Sosyal Paylaşım Blogger Eklentisi

2 dakika


63
11 Paylaşım, 63 Beğeni

Evet arkadaşlar hızımızı azaltmadan yeni konumuzla devam ediyoruz. Blogunuzda windows8 tarzı bir sosyal paylaşım barı kutusu eklemek istiyorsanız doğru yerdesiniz

ilk olarak aşağıdaki kodu buluyoruz
</b:skin>

kodu bulduktan sonra aşağıdaki kodu hemen üst kısmına yapıştırıyoruz.

#jocial{width: 305px;
float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url(“http://1.bp.blogspot.com/-UKryCh_9ofg/UTZhTsKo1JI/AAAAAAAABB8/nZELvc-I_mU/s000/facebook.png”) no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url(“http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png”) no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url(“http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png”) no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url(“http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png”) no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url(“http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png”) no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url(“http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png”) no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url(“http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png”) no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}

Şimdi yapmanız gereken tek şey Yerleşim > Gadget ekle > Html/javascript ekle tıklayıp aşağıdaki kodu çıkan html kutusuna yapıştırmak.

<ul id=’jocial’> <li><a class=’icon facebook’ href=’http://www.facebook.com/YOUR_USERNAME/’></a></li> <li><a class=’icon twitter’ href=’http://twitter.com/username/’></a></li> <li><a class=’icon googleplus’ href=’https://plus.google.com/u/0/alamat profil google+/’></a></li> <li><a class=’icon rss’ href=’http://feeds.feedburner.com/YOUR_USERNAME’></a></li> </ul>


Beğendiniz mi? Arkadaşlarınızla Paylaşın!

63
11 Paylaşım, 63 Beğeni

Sizin Tepkiniz Nedir?

Beğendim Beğendim
0
Beğendim
Beğenmedim Beğenmedim
0
Beğenmedim
Şaşırdım Şaşırdım
0
Şaşırdım
Güldüm Güldüm
0
Güldüm
İnanılmaz İnanılmaz
0
İnanılmaz
Kızdım Kızdım
0
Kızdım
Oha Oha
0
Oha

0 Yorum

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir format seç
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın