Blogger İçin 3D Buton Yapımı

Blogger Dersleri - Blogger İçin 360 Derece Dönen Butonlar

Blogger Dersleri - Blogger 3D Buton Yapımı

Blogger Dersleri kategorisinde istediğiniz resmi kullanarak 3D hareket eden link içerikli buton yapımını inceleyeceğiz. Butonun mouse ile üzerine geldiğinde butonunuz hareketlenecektir.

Blogger Dersleri - Blogger 3D Buton Yapımı Demo :

Blogger Dersleri - Blogger 3D Buton Yapımı Demo

Blogger Dersleri - Blogger 3D Buton Kullanımı

Blogger buton kodunu isterseniz her sayfanızda kullanabilirsiniz. Bunun için yapmanız gereken Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak Blogger Eklenti kodlarını eklmelisiniz .

Belirli sayfalarda kullanmak istiyorsanız ise yayın girerken HTML bölümüne Blogger buton kodlarını yapıştırmalısınız.

Blogger Dersleri - Blogger 3D Buton Yapımı Kodları

!-- 3D Blogger Butonyapimi blogger-hakkinda.blogspot.com Kodu Baslat --><style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Baslangic Rss Icon--> <a title="Metin Açıklaması" href="Link Adresi " target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7YpluX2maazfxGnMKE_y3XtyJXjT1dgtPtsiJZBfczp-oYrG3b7srY3EYCGE-XLPgqrsZNKl47pbfTcY92edCk2TLrCQUp67PVEUoTzBWG26QT2c3IuBob0gkEh5rmfWjZqHfx4IGE5T/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Rss Icon-->
</center><!--3D Blogger Butonyapimi blogger-hakkinda.blogspot.com/ Kodu Bitir -->

Blogger Dersleri - Blogger 3D Buton Yapımı İçin Değiştirmesi Gerekenler

Baslangic Rss Icon : Bu bölüm Kullanacağınız iconu tanımlamanız için size ayrılmış bir alandır. Değiştirmeseniz de buton çalışır fakat değiştirmeniz ve butonunuz neyle ilgiliyse o konu hakkında bir açıklama yapmanız tavsiye edilir.

<a title="Metin Açıklaması" Bölümü : Bu kod içerisinde metin açıklaması olarak ayarlanmış yere Butonunuz üzerine geldiği zaman çıkan kısa açıklamayı yazmanız gerekiyor. Kodlar söz konusu olduğunda title ismi ile anılır.

href="Link Adresi Bölümü : Bu kod dizini ise http://... uzantılı olarak ekleme yapmanız gereken alan. Bu kod içine ekleyeceğiniz link butonunuza tıklandığında gidilecek sayfanın linki olmalı.

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7YpluX2maazfxGnMKE_y3XtyJXjT1dgtPtsiJZBfczp-oYrG3b7srY3EYCGE-XLPgqrsZNKl47pbfTcY92edCk2TLrCQUp67PVEUoTzBWG26QT2c3IuBob0gkEh5rmfWjZqHfx4IGE5T/s1600/RSS-48x48.png Bölümü : Bu alan ise butonunuz görselini belirleyen alan . Buton için kullanmak istediğiniz resmi herhangi bir resim paylaşım sitesine yükleyip png tarzı formatta yerine eklemelisiniz.

Blogger Dersleri - Blogger İçin 3D Buton Yapımı Örnek Çalışma

Hemen sizin için bir örnek yapalım : Butonumuzu yönlendirmek için kullanacağımız link Google olsun. Bu sebeple link kısmına http://www.google.com.tr/ adresini ekliyorum. Butonumuz üzerine gelince çıkmasını istediğimiz yazı : Google Amca .

Son olarak butonumuzun görselini ekleyelim . Ben sitemde yüklü olan google örümceği konusundaki resmi tercih ediyorum .

İşte linki : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2sFPCXG6BwEi40ldoRCuMz1Mena7NALA0ph7_Hg-fSJ34JcLF2zjz_LjOIBpHjYtuu-VL5vvbMFkpJcmv2punQcWlWSqqbfhw7GOVeqvchf_FhEfndUTgsInQ2z53hNLovsDui86JxCAw/s320/google-orumcekleri.jpg .

Bu parçayı da kodumuz içersine yerleştirmemiz ardından kodumuzun aldığı görünüm :

<!-- 3D Blogger Butonyapimi blogger-hakkinda.blogspot.com Kodu Baslat --><style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Baslangic Rss Icon--> <a title=" Google Amca  " href="http://www.google.com.tr/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2sFPCXG6BwEi40ldoRCuMz1Mena7NALA0ph7_Hg-fSJ34JcLF2zjz_LjOIBpHjYtuu-VL5vvbMFkpJcmv2punQcWlWSqqbfhw7GOVeqvchf_FhEfndUTgsInQ2z53hNLovsDui86JxCAw/s320/google-orumcekleri.jpg" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Rss Icon-->
</center><!--3D Blogger Butonyapimi blogger-hakkinda.blogspot.com/ Kodu Bitir -->

Blogger Dersleri - 360 derece dönerli tıklanınca Google a yönlenen hali :

Siz tabi ki daha küçük boyutlarda resimler tercih edip butonlar oluşturacaksınız. İsteyen bu hali ile interaktif bir blog yazarı görüntüsü de çizebilir.

Bu kodlar kullanılarak oluşturulmuş : Blogger 3D Buton İle Yapılmış Sosyal Paylaşım Site Butonları >>