CSS ile Sosyal medya butonu yapalım mı ?

Merhaba arkadaşlar bugün sizlere Css ile Sosyal Medya Butonu yapmayı veya oluşturmayı göstericem ve öğretmeye çalışıcam (beceremem diye düşünüyorum), neyse devam edelim ilk önce resimimizi görelim;

Şimdi ise şablonumuzda bulucağımız koda geçelim;

]]>< /b:skin>

Bulduktan sonra tam üstüne gelicek şekilde aşşağıdaki kodu yazın (tabi kopyala-yapıştır daha hızlı sonuç alırsınız);

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400, 300); #sosyal-medya { font-family:'Roboto Condensed', sans-serif; } #sosyal-medya ul { margin-left: -40px; } #sosyal-medya ul a { color: #fff; text-decoration: none; } #sosyal-medya ul a li { float: left; list-style: none; height: 58px; width: 68px; margin: 3px 3px 0 0; text-align: center; font-size: 12px; background: #2c2c2c; display: block; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; padding: 9px 0 0 0; } #sosyal-medya ul a li div { background-image: url(http://bsahin.net/wp-content/uploads/2013/02/sprite-sosyal1.png); margin:5px 0 0 26px; height: 15px; width: 15px; } li#fb:hover { background: #38589f } li#tw:hover { background: #44b0e3 } li#pin:hover { background: #cb2229 } li#gplus:hover { background: #cd4132 } li#ins:hover { background: #d2c3ac } li#flickr:hover { background: #ff0085 } li#in:hover { background: #64b7d2 } li#rss:hover { background: #f8bc2d } li#fb div { background-position: 0 0; } li#tw div { background-position: 0 -16px; } li#pin div { background-position: 0 -117px; } li#gplus div { background-position: 0 -99px; } li#ins div { background-position: 0 -64px; } li#flickr div { background-position: 0 -84px; } li#in div { background-position: 0 -49px; } li#rss div { background-position: 0 -32px; }

Bunu yaptıktan sonra kaydet butonuna tıklıyalım ve Blogger şablonundan "Yerleşim" 'e tıklıyalım ve "Gadget ekle" dedikten sonra HTML/JavaScript 'in yanında "+" butonu var tıklıyalım ve İsterseniz Başlık yazın isterseniz yazmayın hani küçük alan varya oraya işte neyse devam edelim büyük alan'a aşşagıdaki kodları yapıştırın;

    

        
FACEBOOK

        
TWITTER

        
PINTEREST

        
GOOGLE+

        
INSTAGRAM

        
FLICKR

        
LINKEDIN

        
RSS

    

Tabi "#" kısımları kendinizce düzenleyin, umarım işinize yaramıştır tabi bu 2 boyutlu olanı 3 boyutluyu da paylaşıcağım  merak etmeyin.İyi günler