Baca Juga

Blog Oon - Cara Buat Gambar Berputar Pada Blog Keren !!! - selamat malam sahabat blog oon semuanya .. pada kesempatan malam ini akan sedikit berbagi cara buat efek gambar berputar pada blog secara otomatis maupun manual .. efek ini saya buat beberapa menit yang lalu :D .. berawal dari rasa jenuh dan membosankan tiap kali buka blog gk di sini gk di sana .. sama saja sepi .. cuma bikin bete dan gk mood .. gk tau kenapa kok semuanya sepi hahaha .. dalam sehari cuma dapat mengahsilkan 900 Visitor Unik .. di bilang rame nya cuma 1k visitor .. itupun jarang jarang .. sungguh payah .. hampir putus asa dan sempat mau meraibkan semua blog blog ku ini .. tapi di pikir sayang juga .. udah banyak waktu yang terbuang .. lagi pula dari sebuah blog besar kecilnaya saya jadi nambah ilmu dan wawasan .. jadi rasa nya sayang banget klo di hapus ..

mudah mudahan aja perlahan tapi pasti .. suatu saat nanti dari blog blog ku ini .. bisa menghasilkan recehan .. hahahaha berharap peruntungan dan keberuntungan :D .. buat postingan aja gk bermutu .. terlalu mementingkan kuantitas di banding kualitas .. jadi gimna bisa berkembang .. apa lag ngarep bisa dapetin dolar .. #Mimpi ..

tapi ya sudahlah lupakan saja .. biarkan waktu yang akan menjawabnya :v .. next .. setelah seblum nya saya buat postingan tentang CARA BUAT POP UP RANDOM POST KEREN DI BLOGGER UPDATE 6 JANUARI 2017 dari situ males bikin postingan lagi :v .. dan setelah 2 jam lebih baca baca postingan sendiri .. antara hangusin aja blog nya atau jangan .. malahan terpikir untuk buat gambar berputar .. Sesuai dengan pikiran kali ya .. lagi gk menentu berputar gk karuan makanya jadi malah inget kesana hmmzz ..

baiklah kita langsung saja .. caranya sangat simple dan mudah banget bahkan css nya pun cuma dikit .. jika ingin otomatis cukup tambahkan pada element css yang ada di dalam tempate nya .. terserah mau di tempatkan untuk related post atau untuk .post thumbnail dan sebaginya .. tapi kalau ingin manual .. setiap kali buat postingan harus memasukan css nya kedalam bahan postingan .. dan cukup tambahkan tag Class="ocha23" atau bisa dengan menggunian Div Class .. gimana sangat mudah bukan ?? .. untuk contoh yang manual .. seperti di bawah ini .. berputar bukan .. gambar nya ?? :D

Baca Juga : 46 Kata Kata Cinta Tulus dari Dalam Hati Terbaru Terupdate 14 Januari 2017

seperti itulah sobat hasilnya .. cara ini saya menggunkan seperti CARA MEMBUAT CSS LOADER .. silahkan sobat lihat postingan saya yang itu .. dan untuk melihat hasil nya dengan cara otomatis .. lihat blog saya yang ini >> DP BBM 23

Baca Juga : CARA MEMBUAT CSS LOADER


Cara Manual

    <style>
    .ocha23 {
    width:60px;
    height:60px;
    border:2px solid #fafafa;
    border-radius:40px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    }

    @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform:
    rotate(360deg); }
    }

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
    </style>


Keterangan
  • 60 : Ukuran Lebar Gambar .. silahakan ganti sesuai selera .. mau lebih besar apa lebih kecil lagi ukuran gambar nya ..
  • 40 : Ukuran Bulatan Gambar .. jika gambarnya ingin persegi 4 .. hapus saja dari mulai border-radius:40px;
  • 1s : Kecepatan perputaran gambar .. jika ingin lebih slow rubah jadi 2s, 3s, 4s, dan seterusnya .. 1s ( 1 detik ) ..
  • Dan untuk cara memasangnya :
    1. <div class="ocha23">Isi Kode Gambar disini</div> ..
    2. Atau bisa dengan cara <div style="ocha23">Isi Kode Gambar disini</div>
    3. Atau langsung seperti ini <img class="ocha23" src="url-gambar-thumbnail.jpg"/>


Cara Otomatis

  • Buka Blogger.com >> Template >> Edit >> Masukan CSS nya
  • Masukan CSS nya Terserah Mau dibagian mana yang sekiranya ingin dibuatkan berputar ..
  • buang tanda <style> .... </style> terlebih dulu ..
  • owh iya .. jika misal ingin mengganti bagian .post-body { ..... } .. ganti tag ocha23 nya dengan .post-body { ..... }


ok next saya rasa cukup sampe disini dulu perjumpaan kita di malam hari ini .. kurang lebihnya mohon d maklum saja .. dan terimakasih sudah membaca Cara Buat Gambar Berputar Pada Blog Keren !!! dari awal sampe akhir .. semoga bermanfaat .. dan sampai ketemu lagi dilain waktu dan lain kesempatan .. akhir kata saya ucapkan Wassalamu'Alaikum WR.WB

Tag : #Cara Buat, #Cara Membuat, #Cara, #Cara Bikin, #Cara Ngebikin, #Blog, #Blogging, #Blogger, #Tips, #Tips dan Trik, #Tutor, #Tutorial Blog, #Tutorial Cara Buat Gambar Berputar Pada Blog Keren !!!

 
Top
Loading...