8 Ocak 2015 Perşembe

Blogger Animasyonlu Sosyal Widget Eklentisi


   Blogger Olan Blogger Animasyonlu Sosyal Widget Eklentisi tasarlanmış tıklayın CSS kodları Ile oluşturulmuş OLUP ziyaretinde kullanmış Olduğunuz temaya Göre renk değiştirebilme Özelliği Sayesinde kişileştirebilirsiniz.

   Blogger sitenizde bu eklentiyi kullanmak En En En En tıklayın;
Kumanda paneli & Co. Co Co gt; Konut amp Ettik; gt; Alet ekle & Co. Co Co gt; HTML / Javascript Yolunu izleyerek Açılan sayfada ki kutu içerisine aşağıda ki kodları ekleyin.
& Lt; style = "text / css" & gt tipi;
div.cap.left {position: absolute; alt: 0px; Sol: 0px; }
div.cap.right {background-position: sağ alt; position: absolute; Üst: 0px; Sağ: 0px; } Ul.osx-dok li {display: block; position: relative; şamandıra: Sol; genişliği: 50px; Yükseklik: 50px; margin: 60px 0 0 4px; -webkit-geçiş: 0.15s doğrusal; -webkit-geçiş özelliği: marjı -webkit-dönüşümü; text-align: center; } Ul.osx-dok li bir {display: block; Yükseklik: 50px; padding: 0 1px; -webkit-geçiş: 0.15s doğrusal; -webkit-geçiş özelliği: marjı -webkit-dönüşümü; margin: 0; -webkit-box-yansıtmaktadır: 2px -webkit-degrade altında (RGBA (255, 255, 255 (için) (şeffaf, renk durağı (0.45 doğrusal, sol üst, sol alt, şeffaf), 0.25))) ; } Ul.osx-dok li bir img {width: 48px; } Ul.osx-dok li: hover {margin-left: 9px; margin-right: 9px; z-index: 200; } Ul.osx-dok li: Bir {-webkit-dönüşümü-kökeni hover: merkezi alt; -webkit-dönüşümü: ölçek (1.5); } Ul.osx-dok li.nearby {margin-left: 6px; margin-right: 6px; z-index: 100; Bir {-webkit-dönüşümü-kökenli li.nearby} ul.osx-dok: merkezi alt; -webkit-dönüşümü: ölçek (1.25); } Ul.osx-dok li yayılma {background: RGBA (0,0,0,1); position: absolute; alt: 80px; margin: 0 auto; display: none; genişliği: auto; font-size: 11px; font-weight: bold; padding: 7PX 6px; -webkit-border-radius: 6px; Renk: #fff; } Ul.osx-dok li: hover {açıklık display: block; }
div # dockContainer {alt: 12px; Yükseklik: 150px; padding: 0px 0 0; text-align: center; -webkit-border-radius: 6px; moz-border-radius: 6px; en: 100%; line-height: 1; z-index: 100; }
div # dockWrapper {width: auto; display: inline-block; position: relative; border-bottom: 2px katı RGBA (255.255.255, .35); line-height: 0; } & Lt; / stil & gt;

& Lt; div id = "dockContainer" & gt; & Lt; div id = "dockWrapper" & gt; & Lt; div class = "kap sol" & gt; & lt; / div & gt; & Lt; ul class = "osx-dok" & gt; & Lt; li class = "aktif" & gt; & Lt; span & gt; & Facebook lt; / span & gt; & Lt; a href = "http://www.facebook.com/BilgiCafem" title = "Facebook'taki" target = "_ blank" & gt; & lt; img / & Gt; & lt; / a & gt; & Lt; / li & gt; & Lt; li & gt; & Lt; span & gt; & Twitter'da lt; / span & gt; & Lt; a href = "http://www.twitter.com/BilgiCafem" title = "Twitter" target = "_ blank" & gt; & lt; img / & Gt; & lt; / a & gt; & Lt; / li & gt; & Lt; li & gt; & Lt; span & gt; Google + & lt; / span & gt; & Lt; a href = "http://www.plus.google.com/+BilgiCafem" title = "Google+" target = "_ blank" & gt; & lt; img / & Gt; & lt; / a & gt; & Lt; / li & gt; & Lt; li & gt; & Lt; span & gt; & RSS lt; / span & gt; & Lt; a href = "http://feeds.feedburner.com/BilgiCafem" title = "RSS" target = "_ blank" & gt; & lt; img / & Gt; & lt; / a & gt; & Lt; / li & gt; & Lt; li & gt; & Lt; span & gt; & Youtube lt; / span & gt; & Lt; a href = "http://www.youtube.com/TheAlper61" title = "Youtube" target = "_ blank" & gt; & lt; img / & Gt; & lt; / a & gt; & Lt; / li & gt; & Lt; / ul & gt; & Lt; / div & gt; & Lt; / div & gt; & lt; merkezi & gt; & lt; br / & gt; & lt; a href = "http://etralibela-61.blogspot.com/" style = "font-size: 7PX; text-decoration: none; color : # ffffff; "& gt; Bilgi Cafem & lt; / a & gt; & lt; / center & gt;


Yukarıda ki kod bazen bozuk oluyor Bu Yüzden altta ki alternatif kodu kullanabilirsiniz.


NOT: Kod İçerisinde ki kırmızı Ile belirttiğim kısımlara Kendi Kullanıcı adınızı ekleyin.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Hiç yorum yok:

Yorum Gönder