Blogger Metro Tarzı Sosyal Ağ Eklentisi

blogger metro sosyal ağ eklentisi
Windows'un bu tasarımı herkesin çok hoşuna gitmişti benimde dahil. Benim gibi bu tarz şeyleri beğenen kişiler için süper bir sosyal ağ eklentisidir. Genel olarak mavi renk olmasına rahmen fare ile üstüne geldiğinizde o sosyal ağ platformunun kendi rengine dönecektir. Metro tarzı sosyal ağ eklentisini kurmak çok kolaydır, alttaki adımları izlemeniz yeterlidir.

Şablon > HTML'i düzenle diyerek aşağıdaki kodu buluyoruz ;
</b:skin>

Bulduğumuz kodun hemen üstüne alttaki kodları ekliyoruz ;
#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;}

Daha sonra Yerleşim > Gadget Ekle > Html/JavaScript ekle bölümünden alttaki kodu ekliyoruz ;
<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>

Eklediğiniz gadgetteki linkleri kendinize göre düzenleyerek yani kendi linkleriniz ekleyerek kullanmaya başlıyoruz.
Blogger Destek, Blogger Eklentileri, Blogger Sosyal Ağ Butonları, Windows Sosyal Ağ Eklentisi

© 2014 Berk Altunkılıç - ALL RIGHTS RESERVED