Blogger için 5 Farklı CSS Resim Efekti

Merhaba sevgili bloggerler, bugün sizlerle çok güzel bir blogger eklentisini ele alacağız. Bu eklenti ile resimlerinizi veya site logonuza efekt ekleyebileceksiniz. Mouse imleci resminizin üstüne geldiğinde 5 farklı şekilde efekt gösterecektir.

? Nasıl göründüğüne bakmak için buraya tıklayın. ?

(adsbygoogle = window.adsbygoogle || []).push({});

Peki nasıl yapacağız? Oldukça basit bir yöntemle bu işlemi gerçekleştirebilirsiniz. Önce blogger yönetici paneline giriyoruz. Buradan tema sekmesine tıklayarak html düzenle diyoruz. Açılan panelde aşağıdaki kodu aratıyoruz. Bulmak için ctrl+f arama kutusunu kullanabilirsiniz.

]]>

Bu kodun hemen üzerine aşağıda yer alan istediğiniz bir csss kodunu ekleyeceksiniz. Yukarıda verdiğimiz gif resminde görülen demolardan hangisini istiyorsanız onu ekleyebilirsiniz.

Demo-1 css
.ABT-CSS-Effect1-zoom-in img{-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s; -o-transition-duration: 0.8s;transition-duration:0.8s;
}

.ABT-CSS-Effect1-zoom-in img:hover{-webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2);transform:scale(1.2);opacity: 0.8;box-shadow: 10px 10px 5px grey;border-radius: 2px;margin: 0px 0px 0px 10px;}

Demo-2 css
.ABT-CSS-Effect2-3D-Spin-Vertical img{-webkit-transition: transform, 3s;-moz-transition: transform, 3s;-o-transition: transform, 3s;transition: transform, 3s;}

.ABT-CSS-Effect2-3D-Spin-Vertical img:hover{-webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg);transform: rotateY(360deg);opacity: 0.8;}

Demo-3 css

.ABT-CSS-Effect2-3D-Spin-Horizontal img{
-webkit-transition: transform, 2s;-moz-transition: transform, 2s;-o-transition: transform, 2s;-ms-transition: transform, 2s;transition: transform, 2s;}

.ABT-CSS-Effect2-3D-Spin-Horizontal img:hover{
-webkit-transform:rotate3d(20,0,0,-360deg);-moz-transform:rotate3d(20,0,0,-360deg);-o-transform:rotate3d(20,0,0,-360deg);-ms-transform:rotate3d(20,0,0,-360deg);transform:rotate3d(20,0,0,-360deg);opacity: 0.8;}

Demo-4 css
.ABT-CSS-Effect1-zoom-out img{-webkit-transition-duration: 4s; -moz-transition-duration: 4s; -o-transition-duration: 4s;transition-duration: 4s;}

.ABT-CSS-Effect1-zoom-out img:hover{-webkit-transform:scale(0.1); -moz-transform:scale(0.1); -o-transform:scale(0.1);opacity: 0.8;border-radius: 1px;}

Demo-5 css
.ABT-CSS-Effect3-rotation img{
-webkit-transition: transform, 3s; -moz-transition: transform, 3s; -o-transition: transform, 3s;transition: transform, 3s;}

.ABT-CSS-Effect3-rotation img:hover{
-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);opacity: 0.8;}

Seçtiğiniz css’yi gösterdiğimiz yere eklediyseniz sıra diğer işleme geldi. Şimdi aşağıda yer alan kodlardan seçmiş olduğunuz css’ye ait olanı sitenize ekleyeceksiniz. Yerleşim sekmesinden gadget ekle diyerek html ekleme kısmına tıklayacaksınız. Aşağıda yer alan kodu yapıştırdıktan sonra işlem tamamlanmış olacak.

Demo-1 css’sini eklediyseniz demo-1 kodunu ekleyeceksiniz. Lütfen sıralarına dikkat edin.

Demo-1

Demo-2

Demo-3

Demo-4

Demo-5

Son olarak, verdiğimiz kodlarda yer alan Your-Image_URL yazısının geldiği yere kendinize ait bir resim url’si girmelisiniz. En garanti yolu, blogger adresinize resim upload etmek ve onun url’sini alıp bu kısma yapıştırmaktır.

İster logonuza, isterseniz de herhangi bir resminize bu efektleri ekleyebilir, sitenizi geliştirebilirsiniz. Lütfen yorumlarınızı esirgemeyin.

(adsbygoogle = window.adsbygoogle || []).push({});