Cara menyisipkan gambar berputar dengan background

ikhsanudin on

Thursday, March 14, 2013

Cara menyisipkan gambar berputar dengan background, bagaiaman caranya ya...?
Cara menyisipkan gambar berputar dengan background pada blog sebenarnya sangat mudah. kita hanya cukup menyisipkan beberapa kode, dan diantara beberapa kode tersebut kita tinggal masukkan url gambar dalam kode yang ada.
langsung saya kita coba: Cara menyisipkan gambar berputar dengan background
- Jika gambar akan disisipkan pada widget maka caranya adalah :
1. Login ke blogspot / blogger.com
2. Tata Letak > Tambahkan Gadget > HTML/JavaScript
3. Masukkan kode berikut:

/* ---------------------- nduwur ikhsanudin blog ---------------------- */
<style>
@-webkit-keyframes imgrotazione {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
@-moz-keyframes imgrotazione {
from { -moz-transform: rotateY(0deg); }
to { -moz-transform: rotateY(-360deg); }
}
#imgrotazione {
-webkit-animation-name: imgrotazione;
-moz-animation-name: imgrotazione;
animation-name: imgrotazione;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
animation-duration: 20s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
</style>
<a href="URL_DEL_LINK"/><div style="background:url(https://lh6.googleusercontent.com/-ZSQasjChWg8/UUE9zgrXX7E/AAAAAAAAD4c/5OkPzSdaHCQ/w385-h274-p/SamplePost);width: 100%;border-left:1px solid #000000;border-right:1px solid #000000;">
<hr style="width: 100%; height: 5px; color: #FFC63C; background: #000000;-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);" />
<center><span style="color:#F7F679;font-size:23px;font-family:century gothic;text-shadow: 1px 1px 1px #000, -1px -1px 0px #000;"><b>Awali semua dengan..<br/>Bismillah</b></span>
<br/>
<img id="imgrotazione" style="-moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiZxLwDoJNJ8EtPxmTsdl0XC1mInQQMyN3TBkWXneywfWe31V-OEzqJEYL2_ZodlISXQ6XSLEtx-VVBV0zL6QIqlxKULq6dm7ExcLpZK9Vj_DbhKyxzVfApWMyAWy3TxE25J4cmjZ6w/s912/bismillahirrahmanirrahim.png" height="100" width="250" /></center></div></a>
/* ----------------------Ngisor ikhsanudin blog---------------------- */

(ganti background : https://lh6.googleusercontent.com/-ZSQasjChWg8/UUE9zgrXX7E/AAAAAAAAD4c/5OkPzSdaHCQ/w385-h274-p/SamplePost dengan alamat gambar anda)
(ganti gambar yang berputar : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiZxLwDoJNJ8EtPxmTsdl0XC1mInQQMyN3TBkWXneywfWe31V-OEzqJEYL2_ZodlISXQ6XSLEtx-VVBV0zL6QIqlxKULq6dm7ExcLpZK9Vj_DbhKyxzVfApWMyAWy3TxE25J4cmjZ6w/s912/bismillahirrahmanirrahim.png dengan url gambar anda
ganti teks : Awali semua dengan.. dengan teks yang anda inginkan
ganti : Bismillah dengan teks yang anda inginkan

- Jika inging menyisipkan pada posting, tentunya kode tersebut di copy dan paste dalam posting
dan inilah contohnya :

---

Awali semua dengan..
Bismillah

Labels: Blogger, Tutorial

Thanks for reading Cara menyisipkan gambar berputar dengan background. Please share...!