Artikel Reviews
Belajar SEO
BelajarBlog - Dasar
BelajarBlog - Hiasan
1. Membuat Daftar Isi Blog Otomatis Sistem Tanggal
2. Membuat Daftar Isi Blog Otomatis sitem Label
3. Cara Mendaftar dan Pasang Histats Counter di Blog
4. Cara Membuat Kotak Script Blog
5. Cara Membuat Galeri Slideshow di Artikel Blog
6. Cara Membuat Foto Galeri Slideshow Ber-Tombol di artikel blog
7. Cara Membuat Galeri Foto Sistem Scroll di Blog
8. Membuat Buku Tamu di Blog Tersembunyi dengan Cbox
9. Cara Membuat Gambar Zoom di Blog
10. Membuat Gambar di Blog Terang Redup Di bawah Mouse
11. Menyembunyikan Gambar di Postingan Seperti di Situs Kaskus
12. Menyembunyikan Tulisan di Artikel Seperti Di Kaskus
13. Cara Membuat Pesan Di Blog yang Berubah-Ubah Tiap Hari
14. Tips Merapikan Widget Membuat Iklan Berjejer Kesamping
15. Cara Membuat Widget Facebook-Twitter Melayang
16. Membuat Efek Daun Berguguran
17. Cara Memasang Musik atau Share Playlist Soundcloud Di Artikel Blog
BelajarBlog - Trik
1. Cara Membuat Artikel Blog Terindeks Google dalam Waktu Hitungan Menit
2. Cara Mengetahui/melihat Seluruh Artikel Blog Orang Lain
3. Cara Mudah Mengetahui Link Yang Rusak Di Blog
4. Cara mudah mengetahui Backlinks ke Blog Milik Kita
5. Cara hapus Artikel dan Foto Blog Agar Tak Terindeks Lagi di Mesin Pencari
6. Cara meningkatkan Pageviews Blog dengan Jingling
7. Cara Nembak Cewek Lewat Blog Interaktif
8. Memperkecil Ukuran Gambar secara Online
BelajarBlog - Bisnis
BelajarBlog - Profesional
HP SmartPhone
1. Mengganti Slide Power point dengan Klik di HP
2. Aplikasi Prey, Anti maling untuk HP, Laptop atau PC
3. Aplikasi Membuka File .PRC
4. Cara Share Internet Modem Ke Wifi Android
5. Cara Kirim File Android dari dan Ke PC Via Wifi
6. Cara Membuka File SWF di Galaxy Pocket
7. Cara Root Samsung Galaxy Pocket
8. Aplikasi Line Messenger Bagi Bagi Pulsa
9. Bukti Aplikasi PopSlide Bagi-Bagi Pulsa Gratis Di Smartphone
10. Bukti Aplikasi ADQuest Bagi-Bagi Pulsa Gratis di Smartphone
11. Aplikasi Alarm Clock Terbaik Untuk Android
12. Kumpulan DP BBM Bergerak
13. Cara nonton video youtube Online Anti Buffering (PC dan Android)
14. Cara menyimpan File .Apk dari aplikasi Terinstal di android
15. Menyembunyikan Foto dan Video Dari Galeri Android
16. Cara memburamkan wajah pada foto lewat Android
17. Membuka dan mengedit file teks (.txt) di Android
18. Membuka dan Membuat File ZIP atau RAR di Android
19. Membuka File Berekstensi exe di PC dan Android
20. Jangan Takut Beli HP Murah, Ikuti Tips Ini
Panduan Web
PC Tutorial
<div class="snap_preview">
<div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left;
width:25%;} .gallery-caption { margin-left: 0; }</style>
<dl class="gallery-item">
</dt>
</dl>
</div>
</div>
Keterangan :
Kalimat Memasang Galeri Image di Postingan silakan dirubah dengan kata-kata
sendiri.
Ganti URL IMAGE dengan URL image hasil upload. Saya menggunakan Picasa web album untuk
mengupload image. Silakan simak cara Upload Gambar Blog Makin Mudah Melalui Picasa Web.
Kemudian untuk mengetahui URL image, silakan klik kanan gambar yang telah diupload, lalu
Copy image address. Atau bisa pula melalui cara Cara Mengetahui dan Membuat URL
Gambar.
Lalu ganti kode 150 untuk ketinggian gambar dan 200 untuk lebar gambar. Sesuaikan dengan
luasan template blog.
Apakah itu hanya digunakan untuk memasang 4 gambar saja? Lalu bagaimana jika ingin
meletakkan gambar lebih dari 4?
<dl class="gallery-item">
</dt>
</dl>
Lakukan sesuai dengan jumlah gambar yang diinginkan. Untuk sampel di atas menggunakan 4
gambar. Sehingga gunakan kode tersebut sebanyak 4 kali.
Demikian tutorial cara memasang galeri foto pada postingan blog. Semoga bermanfaat dan
selamat mencoba. Jika ada kode yang kurang tepat, silakan ikut meralatnya. Trims atas
responnya.
HALAMAN khusus galeri foto, gambar, atau image diperlukan bagi blog toko online untuk menampilkan
koleksi produk atau barang jualan.
Blog pribadi juga bisa membuat halaman statis berisi galeri atau koleksi gambar pilihan. Contoh atau
demonya bisa dilihat di Galeri Template CB.
Cara membuatnya cukup mudah, meski butuh trik khusus. Soalnya, di halaman blogger, jika kita
memasukkan gambar lebih dari satu, maka posisi gambar tidak akan sejajar horizontal, tapi akan
berderet vertikal.
Untuk itu, perlu trik khusus dalam membuat galerti gambar di halaman statis ini. CB dapatkan kode ini di
Blogger Image Gallery Tutorial. Anda juga bisa melihat demo dan kode aslinya di sana.
<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="25%"><a href="Link Gambar" target="_blank">
<img src="URL Gambar di Sini" /><br>Nama Gambar</a></td>
<td align="center" width="25%"><a href="Link Gambar" target="_blank">
<img src="URL Gambar di Sini" /><br>Nama Gambar</a></td>
<td align="center" width="25%"><a href="Link Gambar" target="_blank">
<img src="URL Gambar di Sini" /><br>Nama Gambar</a></td>
</tr>
</table>
Catatatan:
Kode di atas menampilkan tiga gambar sejajar horizontal. Jika akan menampilkan lebih dari 3 gambar,
tinggal ulangi saja copas kode di atas dengan dikasi jarak dengan kode <br/> di bawah kode </table>
5. Hasilnya, setelah URL gambar diisi, akan seperti di ini (di Mode "Compose")
6. Publish!
Kini Galeri Image di halaman statis sudah muncul di blog Anda. Jika kurang mengerti, silakan langsung ke
link sumber yang ada di atas.
POSTING daftar gambar merek Laptop atau Notebook atau komputer portabel Terbaik 2015 ini
untuk contoh cara membuat gambar berdampingan di postingan blog, sejajar gitu.
Kadang saat posting blog kita membutuhkan penampilan gambar atau foto yang berdampingan
sejajar.
Di blogspot harus menggunakan kode terentu. Kalau ingin lebih mudah, edit aja gambarnya di
Corel atau Photoshop, lalu tampilkan berdampingan.
Kalau tidak, harus pake kode sebagaimana diajarkan W3School. Kita juga bisa belajar atau
mengambil kode HTML dan CSS lainnya di sana.
Ini dia Daftar Laptop-Notebook Terbaik (Best Laptop) 2015 versi Laptop Mag.
Berikut ini contoh gambar berdampingan tiga buah. Masih daftar Laptop Terbaik 2015 versi
Laptop Mag.
CARA MEMBUATNYA
<table><tr>
<td>Gambar 1</td>
<td>Gambar 2 </td>
</tr></table>
<table><tr>
<td>Gambar 1</td>
<td>Gambar 2</td>
<td>Gambar 3</td>
</tr></table>
Langkah berikutnya:
Demikian seterusnya, satu per satu. Jika gambarnya beda ukuran, maka atur di Mode HTML.
Ribet ya? Ya lah..... makanya gak usah ada gambar berdampingan di posting blog! Kalau harus
ada, edit dulu aja di Corel atau Photoshop!
1. Pertama Uploadlah terlebih dahulu File Gambar yang ingin anda tampilkan di blog, Upload
ini bisa di Blogger atau image hosting kesayangan anda.
2. Jika sudah terupload gambarnya, sekarang kita memulai membuat sebuah postingan
gambar, Login Ke Blog » Posting » New Post » Kasi Judul Album Sobat, sekarang klik
HTML, Jangan yang Compose pada pilihan Pengeditan Dokument.
3. Copykan Kode Berikut ini :
<div class="snap_preview">
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;}
.gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
</div>
</div>
Ganti tulisan tebal "Url Image anda" dengan Url Gambar yang telah sobat Upload tadi, sebagai
contoh seperti berikut ini :
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://1.bp.blogspot.com/-5RzJ8EkO6f4/T13jBf-
WBBI/AAAAAAAAAc0/mAtexmzFjSU/s1600/1.jpg" target="_blank">
<img border="0" height="150" src="http://4.bp.blogspot.com/-
eyMcBoexOlw/T13jQmqAqxI/AAAAAAAAAdk/CGe-oub3Q1w/s1600/2.jpg" width="200" /></a>
</dt>
</dl>