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>


Paylaşın:

Lütfen Yorum Yapınız:

0 yorum var. Sizde Yorumunuzu Ekleyin

Türkçe dil kurallarına lütfen dikkat edelim.
Yorumunuz en kısa sürede yayınlanacaktır..
Yorumlarınız bizim için değerlidir.