Blogger İçin 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  :

PHtmlDrive - 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ı 

<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/AVvXsEhRwvObWMlwhUQmIQ3V6f1mU2mim4R8GZjz7hd2yt0W0dECxGAq0vvP6gGL5fTWMZDsTifK4DBHyonH5bPKONBMNQXbjFDl3WzhZvBFOs9FGcA6paYp7ZqHHVMbHZp1gZ8qwHbYDOyWF9OL/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Rss Icon-->
</center>

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/AVvXsEhRwvObWMlwhUQmIQ3V6f1mU2mim4R8GZjz7hd2yt0W0dECxGAq0vvP6gGL5fTWMZDsTifK4DBHyonH5bPKONBMNQXbjFDl3WzhZvBFOs9FGcA6paYp7ZqHHVMbHZp1gZ8qwHbYDOyWF9OL/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/AVvXsEgnsK8PuN0ea0O0WtBoOfIaKqK1rrNa379CsHfElbZFbRqprWmmT-TdMDcMN9ckLgbZsey6Zw-TbUhO0opjMZs7IVwCM0fZQrRtT-cfJ-YAglSngOYe2SsaxzyFHHDGurXtGPgBQxSNg8VY/s320/google-orumcekleri.jpg

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

<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/AVvXsEgnsK8PuN0ea0O0WtBoOfIaKqK1rrNa379CsHfElbZFbRqprWmmT-TdMDcMN9ckLgbZsey6Zw-TbUhO0opjMZs7IVwCM0fZQrRtT-cfJ-YAglSngOYe2SsaxzyFHHDGurXtGPgBQxSNg8VY/s320/google-orumcekleri.jpg" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Rss Icon-->
</center>

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

PHtmlDrive - Blogger 3D Buton Yapımı 

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ı  >Z