Blogger 360 Derece Dönen Resim Eklentisi

Blogger 360 Derece Dönen Resim Eklentisi

Fare ile üstüne geline 360 derece dönen resim eklentisi blog  üyelerinizi şasırtacak derece bir eklentidir.

Blogger 360 Derece Dönen Resim Eklentisi Nasıl Eklenir ?

• Blogger kumanda paneline geliyoruz.
• Hemen sol taraftan Şablon>HTML'yi Düzenle yerine tıklıyoruz.Açılan sayfada Ctrl + f yardımıyla </style> kodunu aratıyoruz.Aratıktan sonra kodumuzu </style> kodunun hemen üstüne  ekliyoruz.
• Widget olarak eklemek içinse Blogger>Yerleşim>Gadget ekle>HTML/JavaScript alana kodumuzu yapıştırıyoruz.
• Sayfa içinde eklemek içinse Oluştur'un yanındaki HTML kısmına yapıştırıyoruz.

Kod:

<style type="text/css">
  p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */-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;}p#socialicons img:hover{-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}p#socialicons2 img:hover{-moz-transform: rotate(70deg);-webkit-transform: rotate(70deg);-o-transform: rotate(70deg);-ms-transform: rotate(70deg);transform: rotate(70deg);}p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */}p#socialicons3 img:hover{-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;-moz-transform: rotate(-360deg);-webkit-transform: rotate(-360deg);-o-transform: rotate(-360deg);-ms-transform: rotate(-360deg);transform: rotate(-360deg);}
</style>
<center>
<p id="socialicons" style="text-align: left; ">
  <a href="Yönlendirilecek URL">
<img border="0" src="Resim URL" width="Genişlik değeri girin" height="Yükseklik değeri girin" alt="" /></a> </p>
</center>

• Kırmızı renkli alana yönlendirilecek url'yi yapıştırıyoruz. 
• Yeşil renkli alana ise resim url'mizi yapıstırıyoruz.
• Mavi renkli alanlarada resmimizin genişlik ve yükseklik değerlerini yazıyoruz