Bu gece sizlere blogger için windows 8 metro tarzı sosyal ağ abonelik eklentisini anlatacağım. Bütün işlemleri yaptığınız zaman eklenti yukarıdaki gibi gözükecektir. Farklı olarak üzerine gelindiğinde her sosyal ağın orjinal rengi belirecektir.
Kuruluma geçiyorum.
Şablon > Html'yi düzenle bölümünden
</b:skin>
kodunu buluyoruz ve hemen üstüne
#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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYul_8ECLTFVCr7uKiDT5I6kGcER42nrxKuClKLhbvD645hviqKjbm7p4-woXOPJUxi58Xb8rvR_pZVlK3RfnG8SsoSMgrk1QmWy2ZAKwfN0pk-bqWum41U0eQK1Im6lxPMAuVvvRb1Wu/s0/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC19AmjRgUvoq6uTN51sBy4NY6MF0QaXoYvkFBx8oFxH9h93u3f2bHbB7b539hbSSE56yJThuveVG-xdl_JEnDJI5rFshtHaupdi7OFCO5z3d5U2OGrkaSnBQzwbAGPNxAFwxTQ0fvasSr/s0/twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRndfUC-tyrfrO909D4ijmObtnR9w5QW4Jp2bvvqYSWhWEtczs7NFUF3qQJzr2iTymTHxjUF0d-47xaY01pz96qCUSioA-Nh3vqM1JrvQsVD_yJicbhB8Fvs8LgZQD8_IBry8KfpMOlYRk/s0/google%25252Bplus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCvx04crUyhU-D0zg8U0nW4fP5IduY0Bha3nPWFqPKVYFna1yDwiIoWhD7aD1MkRZ0wtXHRnu27mpst9w2IUQ_zIayHcIc-xAaA7iPdWcAqKqFWz9W2F9scqE0t1ofIXnVuH9uCJi2iSRN/s0/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC19AmjRgUvoq6uTN51sBy4NY6MF0QaXoYvkFBx8oFxH9h93u3f2bHbB7b539hbSSE56yJThuveVG-xdl_JEnDJI5rFshtHaupdi7OFCO5z3d5U2OGrkaSnBQzwbAGPNxAFwxTQ0fvasSr/s0/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRndfUC-tyrfrO909D4ijmObtnR9w5QW4Jp2bvvqYSWhWEtczs7NFUF3qQJzr2iTymTHxjUF0d-47xaY01pz96qCUSioA-Nh3vqM1JrvQsVD_yJicbhB8Fvs8LgZQD8_IBry8KfpMOlYRk/s0/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCvx04crUyhU-D0zg8U0nW4fP5IduY0Bha3nPWFqPKVYFna1yDwiIoWhD7aD1MkRZ0wtXHRnu27mpst9w2IUQ_zIayHcIc-xAaA7iPdWcAqKqFWz9W2F9scqE0t1ofIXnVuH9uCJi2iSRN/s0/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
kodunu ekliyoruz. Daha sonra Yerleşim > Gadget ekle > Html/javascript ekle bölümünden
<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>
kodlarını ekliyoruz ve işlem tamamdır. İkinci kod bölümündeki your username bölümlerini kendinize göre değiştirmeyi unutmayınız. Herhangi bir sorunda yorum bölümünü kullanabilirsiniz.
Benzer aramalar: Blogger windows metro tarzı sosyal ağ, blogger sosyal ağ eklentisi, blogger metro tarzı sosyal ağ, blogger kare kutu şeklinde sosyal ağ.
Hiç yorum yok:
Yorum Gönder