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  :


Icon
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="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/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="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/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 : http://2.bp.blogspot.com/-2WGigzWjOsw/T-L4mwJHUJI/AAAAAAAAEoo/SUcnpQIztMo/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="http://2.bp.blogspot.com/-2WGigzWjOsw/T-L4mwJHUJI/AAAAAAAAEoo/SUcnpQIztMo/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 :

Blogger Dersleri -
Blogger Dersleri - 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ı  >>



Makaleyi Paylaş :
 

Yorum Gönder

 
Hakkında : kredi kartı borcu taksitlendirme
Copyright © 2012 - 2013. Blogger Dersleri - All Rights Reserved | Proudly powered by Blogger