Showing posts with label gambar. Show all posts
Showing posts with label gambar. Show all posts
Thursday, March 23, 2017
MELETAKKAN GAMBAR DI SEBELAH KANAN ATAU KIRI ARTIKEL
MELETAKKAN GAMBAR DI SEBELAH KANAN ATAU KIRI ARTIKEL
Meletakkan gambar atau image memang bisa memperindah tampilan suatu blog,tapi jika kita menaruhnya kurang serasi bisa saja merusak pandangan bahkan membuat jenuh bagi pengunjung. Apalagi jika gambar tersebut berada di antara artikel yang kita buat. Sebenarnya di sini yang ingin saya katakan adalah ketika kita meletakkan gambar apa adanya pada artikel yang akan terlihat menjorok ke atas.
Untuk mengatasi hal ini sobat bisa menyisipkan kode css dengan menambahkan ukuran dan letak gambar. Selanjutnya bisa meletakkan gambar tersebut di sebelah kanan maupun pada sebelah kiri dari artikel kita.
Gambar di samping akan terlihat mengambang di sebelah kiri setelah kita menambahkan kode css nya. Misalkan disini saya punya alamat gambar <img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png"> Kita tinggal menambahkan letak dan ukurannya yang akan menjadi seperti ini <img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png" align="left" width="100" height="100">
Gambar di samping akan terlihat mengambang di sebelah kanan dengan mengganti posisi left menjadi right. Sobat juga bisa menyesuaikan juga lebar dan tingginya.
Gambar di samping akan terlihat menjorok ke atas ketika kita letakkan apa adanya tanpa menambah ukuran dan letak gambar.
Untuk mengatasi hal ini sobat bisa menyisipkan kode css dengan menambahkan ukuran dan letak gambar. Selanjutnya bisa meletakkan gambar tersebut di sebelah kanan maupun pada sebelah kiri dari artikel kita.
Gambar di samping akan terlihat mengambang di sebelah kiri setelah kita menambahkan kode css nya. Misalkan disini saya punya alamat gambar <img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png"> Kita tinggal menambahkan letak dan ukurannya yang akan menjadi seperti ini <img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png" align="left" width="100" height="100"> Gambar di samping akan terlihat mengambang di sebelah kanan dengan mengganti posisi left menjadi right. Sobat juga bisa menyesuaikan juga lebar dan tingginya.Gambar di samping akan terlihat menjorok ke atas ketika kita letakkan apa adanya tanpa menambah ukuran dan letak gambar. Semoga bermanfaat !
Available link for download
Saturday, February 25, 2017
MEMBUAT GAMBAR FOTO ANIMASI
MEMBUAT GAMBAR FOTO ANIMASI
Mungkin ada beberapa sobat yang ingin menambah gambar atau foto animasi ke blog mereka. Sebenarnya untuk menambahkan gambar atau foto bergerak ke blog tidak begitu sulit. Karena ada beberapa layanan yang menyediakan jasa seperti ini, misalnya :www.slide.com
www.flickr.com
www.picasion.com
Disini saya akan mencoba menggunakan layanan www.picasion.com. Dimana pada layanan online ini sobat tidak perlu login. Tinggal memasukan beberapa gambar atau foto sobat yang nantinya akan bergerak sesuai urutan yang sobat inginkan.
Mari langsung saja kita mulai:- Masukkan alamat www.picasion.com ke browser sobat.
Masukkan gambar atau foto sobatdari mulai urutan 1(pertama).
- Kemudian sobat bisa menentukan ukuran juga kecepatannya (tenggang).
- Setelah itu klik create animation,gambar atau foto sobat sudah langsung terupload.
- Kemudian copy paste alamat url dan code html nya ke notepad.
- Setelah itu save this animation.
Sekarang sobat tinggal upload gambar tersebut ke blog sobat:
- Masuk ke blog sobat dan pilih layout(tata letak).
- Klik tambah gadget.
- Kemudian pilih gambar yang bertuliskan HTML/Java Script.
- Masukkan code HTML saja yang telah sobat copy paste tadi ke halaman conten.
- Sebelumnya sobat bisa merubah ukuran juga title nya.
- Jika sudah tinggal save.
- Letakkan gambar tersebut ke tempat yang sobat suka .
- Kemudian save.
- Lihat blog sobat.
Available link for download
Monday, February 6, 2017
MEMBUAT GAMBAR MELAYANG DIPOJOK
MEMBUAT GAMBAR MELAYANG DIPOJOK
M
ungkin para sobat pernah atau bahkan sering melihat gambar dipojok halaman blog yang terlihat seperti melayang meskipun scroll bar diarahkan kemanapun. Gambar ini akan tetap diposisi dimana tempatnya berada. Gambar yang sobat lihat tersebut biasa disebut dengan gambar melayang atau float image.Jika blog sobat ingin dihiasi gambar seperti tersebut dan belum tahu caranya bisa ikuti langkah-langkah dibawah ini:
1. Login ke blog sobat
2. Pilih tata letak
3. Klik edit HTML
4. Cari kode ]]></b:skin>
5. Letakkan kode di bawah ini diatasnya,hingga posisinya sebagai berikut:
#gambar {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression (document.documentElement.scrollLeft+ document.documentElement.clientWidth -
offsetWidth);
}
]]></b:skin>
Perhatikan gambar yang dicetak tebal: bottom bisa sobat ganti dengan top sedang left bisa sobat ganti dengan right.
bottom= bawah
top = atas
left = kiri
right = kanan
6.Kemudian cari kode </body>
7. Letakkan kode dibawah ini diatasnya:
<div id="gambar">
<a href="http://activekita.blogspot.com">
<img border="0" src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png"/></a>
</div>
Tulisan warna merah ganti dengan alamat blog sobat. Warna biru ganti dengan alamat gambar sobat,bisa berupa gambar apa saja. Untuk mencoba sobat boleh memakai alamat gambar diatas.
8. klik simpan
9. Lihat hasilnya
10. selesai
Available link for download
Sunday, February 5, 2017
MENAMBAH GAMBAR KE DALAM JUDUL POSTING
MENAMBAH GAMBAR KE DALAM JUDUL POSTING
Pada salah satu kolom komentar ada seorang sobat blogger yang bertanya tentang bagaimana memasukkan gambar pada judul template. Dan saya menangkap dari pertanyaan ini mungkin yang di maksud adalah memasukkan gambar pada judul postingan.
Jika yang di maksud demikian seperti contoh gambar pada judul di atas, maka saya akan berusaha menjawabnya semampu yang telah saya bisa.
Pertama yang harus sobat lakukan adalah mengupload dulu gambar di tempat yang biasa sobat lakukan,bisa di photobucket atau di mana saja yang rasanya tidak terlalu sulit untuk mencarinya di internet. Agar lebih memudahkan sebelum upload gambar tentukan dulu ukuran gambarnya. Setelah gambar terupload ambil alamat yang ada.
Misalnya saya mendapatkan kode alamat seperti ini:Jika yang di maksud demikian seperti contoh gambar pada judul di atas, maka saya akan berusaha menjawabnya semampu yang telah saya bisa.
Pertama yang harus sobat lakukan adalah mengupload dulu gambar di tempat yang biasa sobat lakukan,bisa di photobucket atau di mana saja yang rasanya tidak terlalu sulit untuk mencarinya di internet. Agar lebih memudahkan sebelum upload gambar tentukan dulu ukuran gambarnya. Setelah gambar terupload ambil alamat yang ada.
- http://i761.photobucket.com/albums/xx252/darma_bucket/Menambah-gambar-ke- dalam-judul-post.gif
- <img align=left height=50 width=50 src="http://i761.photobucket.com/albums/xx252/darma_bucket/Menambah-gambar -ke-dalam-judul-post.gif" ></img><br/>
- Masuk ke blog sobat.
- Klik tata letak.
- Pilih edit HTML.
- Beri tanda pada Expand Template Widget
- Cari Kode seperti di bawah ini.
<b:includable id=post var=post>
<div class=post hentry uncustomized-post-template>
<a expr_name=data:post.id/>
<b:if cond=data:post.title>
<h3 class=post-title entry-title>
<img align=left height=50 width=50 src="http://i761.photobucket.com/albums/xx252/darma_bucket/Menambah-gambar -ke-dalam-judul-post.gif" ></img><br/>
<b:if cond=data:post.link>
<a expr_href=data:post.link><data:post.title/></a>
<b:else/>
- Sisipkan alamat gambar milik sobat di antara kode di atas posisinya seperti yang terlihat.
Perhatikan juga spasinya , karena ini sangat berpengaruh. - Klik prajinjau.
- Setelah di rasa aman baru di SAVE.
- Lihat hasilnya.
Available link for download
Subscribe to:
Posts (Atom)