CORETAN ALDIVA: Template Blooger

Tampilkan postingan dengan label Template Blooger. Tampilkan semua postingan

Membuat Efek Zoom Berputar Pada Gambar di Blog

Efek Zoom Berputar Pada Gambar. Berikut ini seocips akan membagikan tutorial seputar Blog yaitu tentang Cara membuat efek zoom berputar pada gambar di postingan blog Blogger. Tentunya seperti yang telah saya jelaskan di beberapa postingan terdahulu bahwa untuk membuat blog kita kelihatan lebih menarik maka kita dapat menambahkan efek pada gambar blog.

Keuntungan menggunakan efek seperti ini seperti yang sudah saya katakan diatas adalah untuk membuat tampilan blog kita menjadi kelihatan lebih menarik, efek ini akan terlihat ketika kursor mouse diarahkan pada gambar di postingan blog kita.

Seperti di artikel pada sebelumnya dimana saya telah membagikan tentang cara membuat efek rotasi pada gambar dengan CSS tanpa Jquery. Efek berikut ini juga sobat tidak perlu menggunakan jquery. Jika sobat tertarik dengan efek blog maka sobat dapat melihat artikel seperti wow slider with thumbnails atau juga image slider versi 6 dan animasi gelembung di blog. Untuk Live demo Efek Zoom Berputar adalah seperti pada gambar dibawah ini.

LIVE DEMO:

Untuk membuatnya berikut ini adalah Cara Membuat Efek Zoom Berputar Pada Gambar di Blog:

1) Masuk ke dashboard blogger lalu klik Template
2) Cari tag penutup ]]></b:skin> atau </style> ( kalau kode </style> ada lebih dari 1 silahkan coba dimana yang cocok). saran saya diatas kode ]]></b:skin>.
3) Pastekan CSS di bawah ini tepat di atas tag penutup ]]></b:skin> atau </style>

#seocips img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#seocips img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}

4) Untuk menerapkannya pada postingan blog contohnya adala kode di bawah ini, dalam mode HTML postingan.

<div id="seocips">
<div style="text-align: center;">
<a href="http://www.seocips.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9XJYDpjbR9tr60jdXzwO8K7WUSr8Vdf5ioJpirZhTbMWhzjztfgCeYBt8BRDy5HqI0RUn3bf-9zVFLYdBPkFvwbGrtPZCXkIvrzpVzkRrUvlAXyVbrxYPVJVWZ9a5KVt709BuQhCybwk/s1600/Seocips-efect-blog.jpg" height="200" width="200" /></a></div>

Untuk kode berwarna merah diatas adalah url gambar, slihakan ganti dengan gambar yang sobat inginkan. sekarang tinggal sobat publikasikan artikel sobat dan lihat hasilnya pada gambar sobat. Nah sekian artikel untuk saat ini dan jangan lupa lihat artikel terbaru seocips yang lainnya atau follow blog ini untuk memudahkan sobat mendapatkan artikel terbaru dari www.seocips.com.

Sumber

Baca Selengkapnya »

Template Toko online

Template toko online memang memiliki beragam bentuk dan desain, namun agar Anda tidak bingung dalam memilihnya, sedikit saya kasih saran yaitu pilihlah template toko online yang kesesuainnya sama dengan produk yang Anda jual, artinya jika Anda menjual produk berupa elektronik seperti handphone maka carilah template blogger yang karakteristiknya atau tampilannya yang mendukung dengan produk yang Anda jual. Hal ini merupakan sesuatu yang perlu Anda lakukan agar produk yang Anda jual mach dengan template yang Anda pakai sehingga kelihatan profesional.
Berikut akan saya bagikan template toko online blogger dari designer web lokal yang terkenal dan sangat ahli.

1.Jhony Sipp deh