Bloguna Metro Stili CSS3 Sosyal Ağ Widgeti Ekle

Sosyal medya gadgetimiz
Blogger Bloguna Metro Stili CSS3 Sosyal Ağ Widgeti Ekle
CSS3 Metro stili sosyal ağ widgeti. Farenizi yakınlaştırdığınızda hareketlenen iconlar görseli sergilemekte.Blogger da bu iconları nasıl ekleyeceksiniz.
Blogger Kontrol paneli ⇒ Şablon ⇒ HTML Düzenle
Aşağıdaki kodu bulun :

]]></b:skin>
Şablon yedeğinizi almayı unutmayın.
Bu kodun hemen üstüne aşağıdaki kodu yapıştırın. Ve şablonu kaydedin.
Blogger blog yedekleme ile bilgi edinin.

 /*  CSS3 Metro Style Social networking  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 40px; /* width of each image.*/
height: 40px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
Şimdi diğer kodumuzuda ;
Yerleşim ⇒ Gadget ekle ⇒ HTML Javascript açın ve içine aşağıdaki kodu yapıştırın.

<ul class="bubblewrap">
<li><a href="https://plus.google.com/114021536527450214647"><img src="http://3.bp.blogspot.com/-pj46wmN9qm4/UHGQUrDKr1I/AAAAAAAAEu4/mXG5mBAQkj8/s1600/bloggertrix.com-google-icon.png" title="Google pus" /></a></li>
<li><a href="https://www.facebook.com/pages/Guney59Paylas%C4%B1m/294588730555275"><img src="http://2.bp.blogspot.com/-j1msMCHmqJM/UHGQThgVrgI/AAAAAAAAEuw/0pEsjP-yDbQ/s1600/bloggertrix.com-facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com/guney59"><img src="http://3.bp.blogspot.com/--JW_Wbuvo7Y/UHGQSkQGcYI/AAAAAAAAEuo/i9pzZ1eBjAY/s1600/bloggertrix.com-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="https://twitter.com/guney59"><img src="http://1.bp.blogspot.com/-TlXkHJ6yld8/UHGQXBeZFNI/AAAAAAAAEvI/1gSpmNN_th8/s1600/bloggertrix.com-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/guney59"><img src="http://4.bp.blogspot.com/-1L3Qs_v6Ipw/UHGQWF5ddHI/AAAAAAAAEvA/2Fi_HyP7g9Q/s1600/bloggertrix.com-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>
Yukarıda mavi içine aldığım benim sosyal medya ile ilgili bağlantılarımdır.Siz kendi bağlantılarınızı aynı şekilde yapıştırın.Kırmızı ile ilgi olan kısımlar resimlerin linkleridir.Bunları kopyalayıp tarayıcıda açarak resim URL lerini farklı kaydettikten sonra picasa'ya kaydedip URL lerini picasadan alarak kod içirisine yapıştırabilirsiniz.
Resimlerin URL' sini nasıl alacaksınız aşağıda resimlediğim şekli inceleyiniz.
Resim 1. : Tarayıcıya URL'i yapıştırdım.
Tarayıcıdaki Url miz
Resim 2. : Tarayıcıda görülen resmi farklı kaydediyorum.
Resmi farklı kaydet
Resim 3. : Picasaya kaydedin ve resmin URL'sini alarak kod kısmına yapıştırın.
Resmi kopyaladığım URL :
Resmin URL'sini kopyala
Bu kopyaladığınız URL'yi kod içindeki ilgili alana yapıştırın. Resimler farklı alanlarda barındırıldıklarından yarın birgün barındırıcı hatasından dolayı iconlarınız çalışmayabilir.
Bu tür işlemleri blogger yazı editörünü kullanarak yaparken zorlanırsınız. Ben Google Drive Dökümanları kullanıyorum.Google Drive Dökümanları hakkında bilgi edinebilirsiniz.

Kategoriler ➤

Daha fazla göster

Bu blogdaki popüler yayınlar

Paint Net ile Resim arka plan Görüntüyü Şeffaf Yapma

Windows 10 Denetim Masası Komutlarına Kısa Yoldan Ulaşma

Windows İşletim Sistemi 32 Bit ve 64 Bit Arasındaki Fark

Blogger Açılır Menü Oluşturma

Facebook Candy Crush Saga Oyunu Çalışmıyor Çözüm

Paint ile Resim Boyutlandırma Seo

Windows 10 ve 8.1’de Oturum Parolasını Kaldırma

Aynur Nur - Acı Kaybımız

Windows Update 80240016 Hatasını Düzeltme

D-Smart Web İnternet Bağlantı Sorun ve Çözüm Ayarları