Menu

Blogger Metero Sitili Social Buttonlar Widget

Blogunuza metro tarzı sosyal buton oluşturmak isterseniz bu eklenti tam işinize yaryacaktır.Bu simgeleri blog sidebarında kullanabilirsiniz veya CSS3 animasyon efektleri eklentiyi sayfa içinde de kullanabilirsiniz.

Blogger Metero Sitili Social Buttonlar üzerlerine gelince değişik sitillerde hareket edecek şekilde dizayn edilmişlerdir.

Blogger Metero Sitili Social Buttonlar Widget


Blogger için CSS3 kodları ile oluşturulmuş bu Blogger Metero Sitili Social Buttonlar Widget Kodlarının nasıl göründüğünü ve kodların çalışıp çalışmadığını test etmek için kod deneme penceresini kullanabilirsiniz.Kod Deneme Penceresi

Css kodları ile oynayarak site tasarımınıza uygun şekli ve renklerini de kendinize göre,zevkinize göre ayarlamak da mümkündür.

Ayrıca daha önce yayınladığımız aşağıdaki eklentilerde işinize yarayabilir,deneyebilirsiniz.

---6 Adet İnternetten Para Kazandırma Kitapları

---2014 Kaliteli Blogger Tema 12 Adet

---Blogger Yazılarına Bağlantı Linki Ekleme

---Facebooktan Para Kazanma Yöntemleri


Blogger Metero Sitili Social Buttonlar Widget



Blogger Metero Sitili Social Buttonlar Widget Kodları sitenize yüklemek için,ilk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.


Blogger Metero Sitili Social Buttonlar Widget

HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız,Blogger Metero Sitili Social Buttonlar Widget Eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.

<style>
.blogirefun {
margin: .4em;padding: 1em;cursor: pointer;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.blogireatb {margin: .4m;padding: 1em;}/* Grow */.grow {display: inline-block;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);}.grow:hover, .grow:focus, .grow:active {-webkit-transform: scale(1.1);transform: scale(1.1);}/* Shrink */.shrink {display: inline-block;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);}.shrink:hover, .shrink:focus, .shrink:active {-webkit-transform: scale(0.9);transform: scale(0.9);}/* Pulse */@-webkit-keyframes pulse {25% {-webkit-transform: scale(1.1);transform: scale(1.1);}75% {-webkit-transform: scale(0.9);transform: scale(0.9);}}@keyframes pulse {25% {-webkit-transform: scale(1.1);transform: scale(1.1);}75% {-webkit-transform: scale(0.9);transform: scale(0.9);}}.pulse {display: inline-block;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);}.pulse:hover, .pulse:focus, .pulse:active {-webkit-animation-name: pulse;animation-name: pulse;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}/* Push */@-webkit-keyframes push {50% {-webkit-transform: scale(0.8);transform: scale(0.8);}100% {-webkit-transform: scale(1);transform: scale(1);}}@keyframes push {50% {-webkit-transform: scale(0.8);transform: scale(0.8);}100% {-webkit-transform: scale(1);transform: scale(1);}}.push {display: inline-block;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);}.push:hover, .push:focus, .push:active {-webkit-animation-name: push;animation-name: push;-webkit-animation-duration: 0.3s;animation-duration: 0.3s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;}/* Pop */@-webkit-keyframes pop {50% {-webkit-transform: scale(1.2);transform: scale(1.2);}100% {-webkit-transform: scale(1);transform: scale(1);}}@keyframes pop {50% {-webkit-transform: scale(1.2);transform: scale(1.2);}100% {-webkit-transform: scale(1);transform: scale(1);}}.pop {display: inline-block;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);}.pop:hover, .pop:focus, .pop:active {-webkit-animation-name: pop;animation-name: pop;-webkit-animation-duration: 0.3s;animation-duration: 0.3s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;}/* Rotate */.rotate {display: inline-block;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);}.rotate:hover, .rotate:focus, .rotate:active {-webkit-transform: rotate(4deg);transform: rotate(4deg);}</style><center> <!–facebook–><a href="Facebook sayfanızın url adresi" class="button rotate" title="Facebook"><img src="https://lh5.googleusercontent.com/-geKlkp3M0CA/UZYQjroYrKI/AAAAAAAAFjg/LKUQBirpRco/s57-no/Facebook%2Balt%2B1.png" height="50px" width="50px" /></a> <!–twitter–><a href="Twitter sayfanızın url adresi" class="button grow" title="Twitter"><img src="https://lh3.googleusercontent.com/-aMOigty0zNo/Uii2tpfvjnI/AAAAAAAAHuM/fwbaMaT0c_s/s32-no/twitter.png" height="50px" width="50px" /></a> <!–google plus–><a href="Google Plus sayfanızın url adresi" class="button shrink" title="Google Plus"><img src="https://lh6.googleusercontent.com/-jEe32AH6Y5E/Upe5QVLNkUI/AAAAAAAAIXo/m3fxneCtld0/s64-no/google-plus_64.png" height="50px" width="50px" /></a> <!–rss feed–><a href="RSS Feed url adresi" class="button pulse" title="RSS Feed"><img src="https://lh4.googleusercontent.com/-DHrpjRwyJ44/Uii2tAxglhI/AAAAAAAAHuA/JQjVajKnrBE/s32-no/rss.png" height="50px" width="50px" /></a> <!–digg–><a href="Digg sayfanızın url adresi" class="button pop" title="Digg"><img src="http://blogire.com/fundata/Social%20Icons%202/images/digg.png" height="50px" width="50px" /></a> <!–linked in–><a href="Linked sayfanızın url adresi" class="button rotate" title="Linked In"><img src="https://lh5.googleusercontent.com/-Mxo7cjQ0zD4/Uii2sd5SznI/AAAAAAAAHt8/43lx-BnTbKc/s32-no/linkedin.png" height="50px" width="50px" /></a> <!–flickr–><a href="Flickr sayfanızın url adresi" class="button pop" title="Flickr"><img src="http://blogire.com/fundata/Social%20Icons%202/images/flickr.png" height="50px" width="50px" /></a> <!pinterest–><a href="Pinterest sayfanızın url adresi" class="button rotate" title="Pinterest"><img src="https://lh3.googleusercontent.com/-DGjQH1ej-wY/Upe5RaRONyI/AAAAAAAAIYA/EAJO6b1DUk4/s64-no/pinterest_64.png" height="50px" width="50px" /></a> <!tumbir–><a href="Tumbir sayfanızın url adresi" class="button pulse" title="Tumbir"><img src="https://lh6.googleusercontent.com/-RINXaXGm38c/Uii2tI3Mp1I/AAAAAAAAHuQ/oire_6ENJfI/s32-no/tumblr.png" height="50px" width="50px" /></a> </nav><br/><a href="http://www.seomektebi.com/" style="font-size: 3px; text-decoration:none; color: #ffffff;">seo mektebi</a> </!tumbir–></!pinterest–></!–flickr–></!–linked></!–digg–></!–rss></!–google></!–twitter–></!–facebook–></center>


Blogger Metero Sitili Social Buttonlar Widget Düzenleme:

Sarı olarak belirttiğim yerlere kendi sosyal medya eklentilerinizi eklemeniz yeterlidir.

Ayrıca eklentiler içindeki sayısal değerlerle oynayarak site tasarımına uygun olan ölçüleri sağlayabilirsiniz.


Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger Metero Sitili Social Buttonlar Widget "

Önerilen Yazı
×