Sıcak sıcak, yeni çıktı !

Yazarlarımız

Windows 8 Tarzı Sosyal Paylaşım Blogger Eklentisi

27 Aralık 2016 Salı
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>


Hiç yorum yok:

Yorum Gönder

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.