Kumpulan Trik Posting Gambar Dan Photo Di Blog

Trik Cara Membuat Gambar-Image Berderet Horizontal

          
   
     Trisatya Blog.Menata gambar dalam sebuah posting memang merupakan kebutuhan vital yang harus tertangani dengan baik oleh blogger yang dengan sungguh-sungguh ingin memberikan sajian terbaik sebuah posting. Sebuah tampilan yang rapi pasti akan memberikan kepuasan batin tidak hanya bagi pemilik blog, namun juga memberikan kenyamanan tersendiri bagi pembaca blog untuk menikmati semua posting yang telah dibuat dengan kerja keras yang tidak hanya melelahkan secara fisik, namun sekaligus membuat pikiran terkadang terasa lunglai bagai tak bertulang! (He ... he ... memang ada otak bertulang?! Otak DinoPatiSaurus kali, ya?!). Ha ... ha ... rajin pangkal pandai, hemat pangkal kaya, rapi dan teliti bukan saja milik anak TK, namun juga menjadi milik ABRI (Asyiknya Blog Rajin dan Indah).


Menata beberapa gambar dalam sebuah posting memang berbeda dengan apabila kita hanya menampilkan sebuah gambar/image. Untuk satu gambar kita cukup letakkan saja dipojok kiri (float: left;) atau di pojok kanan (float:right;), maka semua selesai sudah dan posting mengalir bagai kali ciliwung. Deras dan suka menghanyutkan orang sekaligus bikin banjir! Iya, nggak?! He ... he ...! Ada cara yang cukup sederhana untuk membuat penataan gambar berderet/berjajar dalam arah horizontal dengan tampilan yang rapi. Satu yang perlu dipahami adalah dengan mengetahui kegunaan margin serta fungsi float. Secara sederhana margin merupakan jarak antara satu bidang dengan bidang yang lain dalam sebuah web/ blog, sedang float berfungsi untuk mengatur posisi gambar atau tag (DIV, p dll) supaya berada pada posisi kanan, kiri, tak dikanan dan/atau kiri dan sekaligus float mampu membuat sebuah tag secara otomatis mempunyai luas sebesar isi yang terkandung di dalamnya. Sifat yang seperti ini amat dibutuhkan untuk membuat materi (gambar atau tag lain) dapat tersusun secara berderet horizontal secara otomatis. Penggunaan float menguntungkan karena membuat width atau height terkadang tidak dibutuhkan untuk ditambahkan.

Untuk membangun sebuah desain yang bernilai lebih tentunya tidak hanya margin dan float yang harus dipahami fungsi dan kegunaanya. Kode CSS yang lain seperti border, padding, background serta beberapa yang lain akan banyak memberikan support hingga dihasilkan sebuah tampilan yang lebih cvcantik dan menarik. Hal yang sebenarnya tidak terlalu sulit untuk dilakukan, namun demikian satu hal yang utama adalah ketelatenan dan semangat serta kemauan yang keras untuk mencoba memahami satu demi satu setiap fungsi dan kegunaan kode HTML. Satu fasilitas (software) yang paling diperlukan untuk mempermudah pemahaman tentang kode HTML adalah dengan cara menggunakan software Dreamweaver atau yang kini lebih dikenal dengan Adobe Dreamweaver CS5. Cobalah untuk mencari software ini supaya lebih mudah dan cepat mempelajari kode CSS, xHTML, javascript ataupun PHP.

Sebagai langkah awal untuk memahami penataan gambar dalam posting, ada baiknya sampeyan juga membuka satu posting di blog ini yang mengupas tentang penggunaan margin untuk menata sebuah gambar yang terdapat dalam:

Bedah Posting gambar dan photo ; fungsi margin

Kode utama untuk membuat sebuah gambar dalam bentuk deret horizontal :
- penggunaan margin
- float-left
- padding (untuk membentuk penataan ruang yang rapi)
- width dan height
- sebaiknya setiap gambar mempunyai tinggi yang sama, dimana ketinggian gambar bisa langsung diatur melalui kode CSS sekalipun gambar sebenarnya mempunyai tinggi yang tidak sama.
sebagai contoh: jika gambar asli tinggi= 200px, maka gambar bisa dibuat menjadi hanya bertinggi 100px atau misalnya 55px hanya dengan membuat kode CSS --> height: 100px; atau height: 55px;
- untuk border, background, border-radius, box-shadow atau yang lain akan dengan mudah dipelajari setelah pemahaman tentang kode-kode di atas sudah terpelajari dengan baik.




Setelah sampeyan membuka link posting berikut DEMO di atas, silahkan sampeyan coba pelajari kode pembentuk gambar berderet di bawah ini, yang dibuat dengan menggunakan 2 cara:
1. Mengatur gambar secara langsung dengan menyertakan setiap kode CSS yang berupa margin, width, height dan float, padding, border, border-radius dan background dalam tag img.
2. Membuat kode CSS terpisah dengan tag img.

Dengan Cara Pertama


Dengan cara pertama ini seluruh kode disertakan langsung saat posting dilakukan tanpa menambah kode lain di template blog.
- DIV berfungsi untuk membentuk boks image gallery.
- Kode CSS dalam tag img untuk mengatur posisi, jarak dan kerapian gambar.
- Margin berfungsi untuk mengatur jarak setiap gambar supaya sama.
- float-left pada tag img untuk membentuk deret gambar ke arah horizontal (ke kiri).
- Height: 100px; mengatur keseragaman tinggi gambar/image.
- width auto membuat gambar dalam skala sesuai aslinya (perbandingan height dan width-nya).
- width: ...px; Pemberian width dengan ukuran ditentukan (dalam px) dilakukan supaya box membentuk tatanan yang rapi dengan sisa margin atas, kanan, bawah dan kiri berukuran sama (pada boks). Perubahan ukuran width pada beberapa gambar ini bisa dalam bentuk pengurangan atau penambahan dengan tujuan sekedar supaya image gallery menjadi rapi. Tentu saja ada sedikit perubahan pada skala gambar jika dibandingkan dengan ukuran dan skala aslinya sehingga diharapkan perubahan tidak terlalu mencolok. Perubahan pada width ini juga dimaksudkan untuk lebih mempermudah penataan daripada harus dilakukan dengan cara memotong gambar menggunakan software seperti Adobe Photoshop.

<div style="width: 440px;float: left;margin: 10px;padding: 10px 0px 0px 10px;border: 2px solid #000;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;background: #996600;background: -moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));">
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYTvkSmS8I/AAAAAAAAAoU/zWFh8hb2jSc/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw-AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYULupTjpI/AAAAAAAAAo0/aWeSUN-9atM/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTwmapIqI/AAAAAAAAAok/7IbqpBp5Kw4/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTwHFWOlI/AAAAAAAAAoc/mCFSJ2iO9a4/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYUM3o_0MI/AAAAAAAAApE/kTJ6o6TYdfs/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYV8bG09dI/AAAAAAAAApU/_TxLTyu-tAI/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTUghFzSI/AAAAAAAAAoE/bPhfIRgdY64/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYUMVuEvAI/AAAAAAAAAo8/x9-6Q3npJQ4/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYUmK50DfI/AAAAAAAAApM/Exm6RGzhT0o/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYTvOwhFJI/AAAAAAAAAoM/G4nsncp6c0w/s320/gbr2.jpg" />
</div>


Seperti biasanya, supaya tidak terjadi perubahan pada desain atau rancangan image gallery, saat posting dilakukan seluruh kode harus dibuat dalam bentuk rapat sehingga kode di atas dirubah seperti di bawah ini.


&lt;div style=&quot;width: 440px;float: left;margin: 10px auto;padding: 10px 0px 0px 10px;border: 2px solid #000;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;background: #996600;background: -moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));&quot;&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;&quot; src=&quot;http://1.bp.blogspot.com/_550XeJhg_o8/TJYTvkSmS8I/AAAAAAAAAoU/zWFh8hb2jSc/s320/gbr1.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;&quot; src=&quot;http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw-AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;&quot; src=&quot;http://2.bp.blogspot.com/_550XeJhg_o8/TJYULupTjpI/AAAAAAAAAo0/aWeSUN-9atM/s320/gbr13.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;&quot; src=&quot;http://4.bp.blogspot.com/_550XeJhg_o8/TJYTwmapIqI/AAAAAAAAAok/7IbqpBp5Kw4/s320/gbr6.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;&quot; src=&quot;http://3.bp.blogspot.com/_550XeJhg_o8/TJYTwHFWOlI/AAAAAAAAAoc/mCFSJ2iO9a4/s320/gbr3.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;&quot; src=&quot;http://3.bp.blogspot.com/_550XeJhg_o8/TJYUM3o_0MI/AAAAAAAAApE/kTJ6o6TYdfs/s320/gbr11.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;&quot; src=&quot;http://2.bp.blogspot.com/_550XeJhg_o8/TJYV8bG09dI/AAAAAAAAApU/_TxLTyu-tAI/s320/gbr10.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;&quot; src=&quot;http://4.bp.blogspot.com/_550XeJhg_o8/TJYTUghFzSI/AAAAAAAAAoE/bPhfIRgdY64/s320/gbr114.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;&quot; src=&quot;http://2.bp.blogspot.com/_550XeJhg_o8/TJYUMVuEvAI/AAAAAAAAAo8/x9-6Q3npJQ4/s320/gbr7.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;&quot; src=&quot;http://1.bp.blogspot.com/_550XeJhg_o8/TJYUmK50DfI/AAAAAAAAApM/Exm6RGzhT0o/s320/gbr4.jpg&quot; /&gt;&lt;img style=&quot;float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;&quot; src=&quot;http://2.bp.blogspot.com/_550XeJhg_o8/TJYTvOwhFJI/AAAAAAAAAoM/G4nsncp6c0w/s320/gbr2.jpg&quot; /&gt;&lt;/div&gt;

Dengan Cara Kedua


Untuk menggunakan cara ke-2, silahkan simpan kode CSS dalam template setelah login dilakukan. Kode CSS diletakkan dan disimpan di atas kode ]]>
, dimana DIV dibentuk sebagai sebuah class (div class="bokskongbolang") dan berfungsi sebagai pembentuk boks Image Gallery. Hampir seluruh kode pengaturan gambar dilakukan di sini (kode CSS). Penambahan width: ..px; juga dilakukan pada beberapa gambar dengan tujuan seperti halnya di atas.
Kode CSS

.bokskongkubolang {
 width: 440px;
 float: left;
 margin: 10px;
 padding: 10px 0px 0px 10px;
 border: 2px solid #000;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 background: #996600;background:
 -moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));
 }
.bokskongkubolang img {
 height: 100px;
 width: auto;
 margin: 0px 10px 10px 0px;
 float: left;
 }
xHTML
Gunakan xHTML di ruang posting. Dengan cara ke-2 ini maka kode HTML yang digunakan di halaman posting menjadi lebih irit. Sampeyan dapat memanfaatkan kode-kode ini setiap kali memerlukan bentuk tampilan yang sama dengan gambar berbeda tanpa perlu lagi membuat kode-kode HTML yang baru.

<div class="bokskongkubolang">
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYTvkSmS8I/AAAAAAAAAoU/zWFh8hb2jSc/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw-AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYULupTjpI/AAAAAAAAAo0/aWeSUN-9atM/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTwmapIqI/AAAAAAAAAok/7IbqpBp5Kw4/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTwHFWOlI/AAAAAAAAAoc/mCFSJ2iO9a4/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYUM3o_0MI/AAAAAAAAApE/kTJ6o6TYdfs/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYV8bG09dI/AAAAAAAAApU/_TxLTyu-tAI/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTUghFzSI/AAAAAAAAAoE/bPhfIRgdY64/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYUMVuEvAI/AAAAAAAAAo8/x9-6Q3npJQ4/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYUmK50DfI/AAAAAAAAApM/Exm6RGzhT0o/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYTvOwhFJI/AAAAAAAAAoM/G4nsncp6c0w/s320/gbr2.jpg" />
</div>




Posting gambar dan fungsi margin

Margin berpengaruh besar dan mempunyai peran vital untuk menciptakan keseimbangan posting, terlebih pada posting yang melibatkan teks dan beberapa gambar. Pengaturan margin akan membuat kita mampu untuk menata mau di bentuk seperti apakah ruangan posting kita. Margin berfungsi untuk menjadi penentu jarak satu bidang dengan bidang yang lain. Misalnya antara teks dengan gambar, gambar dengan gambar yang lain, atau teks dengan tepi ruang posting. Fungsi margin yang lebih luas dalam sebuah blog adalah menjadi penentu jarak setiap ruang blog. (Sepuramu , Dul, aku selalu menggunakan bahasa-bahasa yang gampang dimengerti semua orang karena aku sendiri pusing untuk memahami bahasa dan istilah resmi yang umum digunakan mereka yang cerdas dan mempunyai daya ingat brillian sehingga apaun istilah yang ada di blog, template, internet, dst..dst..,
Margin umumnya dituliskan dalam nilai pixel atau px (atau biasa juga pakai em --> 1em berkisar 18px) dengan nilai dari minus (-) , 0(nol) dan +(plus). Tanda yang disertakan hanya ketika kita menggunakan nilai minus (-). Besarannya terserah kita mau pakai berapa. Untuk pemakain nilai nol (0) , kadang-kadang nilai pixelnya juga tidak disertakan, sehingga ditulis nol (0) begitu saja.

Margin di gunakan di semua sisi ruang (ada 4 sisi). Dalam penerapannya bisa digunakan secara bersama-sama ataupun terpisah.

- Contoh :

1. Apabila di gunakan secara bersamaan (terpadu) :
Contoh: margin : 4px 6px -3px 12px; ---> urutannya: top, right, bottom, left

2. Margin atas=bawah (margin-top=margin-bottom), margin-left=margin-right dan mempunyai fungsi membuat DIV berada ditengah-tengah.

Contoh-1: margin : 0px auto; ---> top: 0px; bottom: 0px; kanan dan kiri (left and right) akan sama jaraknya (margin auto berfungsi untuk membuat sebuah DIV berada di posisi tengah antara batas sisi kanan dan kiri --> center).

Contoh-2: margin : 20px auto; --> margin-top: 20px; margin-bottom: 20px; margin-kanan dan margin-kiri (margin-left and margin-right) sama dan membuat DIV berposisi ditengah-tengah (atau lebih dikenal dengan posisi center).

3. Margin atas-bawah (top-bottom) dan kanan-kiri (left-right) sama besarnya:
Contoh: margin: 15px 55px;
- margin-top: 15px; margin-bottom: 15px; margin-left: 55px; dan margin-right: 55px;

4. Margin Kanan-Kiri sama sedang atas bawah berbeda :

Contoh: margin: 22px 9px 41px;
- margin-top: 22px; margin-left: 9px; margin-right: 9px; dan margin-bottom: 41px;

5. Margin top, right, bottom dan left berbeda :

Contoh: margin: 7px 6px 16px 40px;
- margin-top: 7px;
- margin-right: 6px;
- margin-bottom: 16px;
- margin-left: 40px;

6. Contoh hasil penempatan gambarnya :


atur posisi penempatan gambar sesuka haticara mengatur posisi penempatan gambar

Kode yang digunakan untuk bagan/fungsi penataan gambar di atas adalah :

<div style="border: 3px solid #009999; background: #aaa; width: 440px; height: 365px; border-radius: 12px; margin: 20px auto;">
<img style="border: 2px solid #eee; margin: 10px 10px;border-radius:6px;box-shadow:0 0 8px #000; float: left; width:180px; height: 140px; display: block;" src="http://4.bp.blogspot.com/-EFfy3tUKGA0/Tw6cfs8Fj6I/AAAAAAAABKA/krStf5X4HFI/s200/th_gubhugreyot-pamelaanderson.jpg" />
<img style="border: 2px solid #eee; margin: 50px 10px;border-radius:6px;box-shadow:0 0 8px #000; width: 180px; height: 140px;" src="http://3.bp.blogspot.com/-MxxNkSBjg9k/Tw6ebLb6IWI/AAAAAAAABKM/GbntBhdE0as/s200/th_gubhugreyot-pamelaanderson2.jpg" />
<img style="border: 2px solid #eee;border-radius:6px;box-shadow:0 0 8px #000; margin: -40px 10px 15px 130px; width: 180px; height: 140px;" src="http://4.bp.blogspot.com/-hcyZ6v5eREY/Tw6gNyqcU1I/AAAAAAAABKY/7XKxtWYjM1o/s200/th_gubhugreyot-pamelaanderson3.jpg" />
</div>


Apabila akan dicoba diruang posting blogspot sampeyan harus merapatkan kode html tersebut (kode html dibuat saling menyambung/tidak terputus) hingga bentuknya menjadi seperti di bawah ini:

<div style="border: 3px solid #009999; background: #aaa; width: 440px; height: 365px; border-radius: 12px; margin: 20px auto;"><img style="border: 2px solid #eee; margin: 10px 10px;border-radius:6px;box-shadow:0 0 8px #000; float: left; width:180px; height: 140px; display: block;" src="http://4.bp.blogspot.com/-EFfy3tUKGA0/Tw6cfs8Fj6I/AAAAAAAABKA/krStf5X4HFI/s200/th_gubhugreyot-pamelaanderson.jpg" /><img style="border: 2px solid #eee; margin: 50px 10px;border-radius:6px;box-shadow:0 0 8px #000; width: 180px; height: 140px;" src="http://3.bp.blogspot.com/-MxxNkSBjg9k/Tw6ebLb6IWI/AAAAAAAABKM/GbntBhdE0as/s200/th_gubhugreyot-pamelaanderson2.jpg" /><img style="border: 2px solid #eee;border-radius:6px;box-shadow:0 0 8px #000; margin: -40px 10px 15px 130px; width: 180px; height: 140px;" src="http://4.bp.blogspot.com/-hcyZ6v5eREY/Tw6gNyqcU1I/AAAAAAAABKY/7XKxtWYjM1o/s200/th_gubhugreyot-pamelaanderson3.jpg" /></div>


Tentu saja untuk penataan ini masih harus dipadukan dengan KODE yang lain, misalnya float: left, float:right, align:center border untuk menghias gambar dan juga besaran gambar serta beberapa yang lain. Setidaknya mengetahui sedikit tentang margin ini, akan membuat kita mempunyai semangat untuk mecoba menguak rahasia penggunaan margin disaat-saat ada waktu senggang.


Hover Tab Image Gallery

               Meskipun hanya menggunakan KODE CSS, Hover Tab Image mempunyai tampilan yang sangat menarik. Nilai lebih yang dimiliki tab ini adalah sedikitnya KODE yang digunakan sehingga sangat mempengaruhi kecepatan loadingnya. Untuk menampilkan image/gambar kamu juga tidak perlu susah-susah untuk merubah ukuran gambar karena image akan secara otomatis ditampilkan sesuai ukuran tab. Yang penting bahwa image yang akan ditampilkan harus mempunyai perbandingan ukuran gambar 400 x 230 (lebar:tinggi » pixel). Sangat praktis dan tentu saja mudah untuk membuatnya. O..., ya...Hover Tab Image ini di desain untuk menampilkan 5 buah image. Sangat tepat sekali karena tidak terlalu banyak untuk setiap kali posting. Penasaran untuk melihat seperti apa penampilan Hover Tab Image ? Silahkan lihat melalui DEMO yang sudah tersedia!

CSS3 Image Gallery

pasang gallery photo di blog dengan kode css
Ajaib Image Gallery adalah sebuah gallery yang dibuat hanya menggunakan kode css. Ada 2 versi dari Ajaib Image Gallery:
  1. Hanya menggunakan kode CSS.
  2. Menggunakan kode css dan kode css3.

YANG PERTAMA Image Gallery hanya dengan Kode CSS :Langkah untuk membuat Hover Tab Image :

  1. Login ke Blogger.
  2. Setelah halaman Dasbor (Dasboard) terbuka, klik "Design (Rancangan)".
  3. Lanjutkan dengan klik "Edit HTML".
  4. Amankan Template (Backup Template) terlebih dahulu!
  5. Tetap di Edit HTML kemudian cari KODE ]]></b:skin>

    Copy paste KODE CSS di bawah ini dan letakkan persis di atasnya.
#GRtab_gallery{
        border:3px solid #333;
        position:relative;
        padding:0;
        margin:20px auto;
        width:412px;
        height:285px;
        background:#ccc url(https://lh5.googleusercontent.com/-w6VZu6vjq5U/T2Lpa_yjbAI/AAAAAAAAAZ8/ZPN32269OdU/h120/gubhugreyot-wanita-misterius.jpg) 6px 83% no-repeat;
        background-size:400px 230px;
        border-radius:3px;
        border-bottom-left-radius:9px;
        border-bottom-right-radius:9px;
        box-shadow:0 0 6px #000;
}
#GRtab_gallery li{
        margin:0;
        float:left;
        margin-left:1px;
        text-align:center;
        list-style:none;
        padding:0;
}
#GRtab_gallery li a{
        display:inline-block;
        padding:9px 0;
        width:78px;
        background:url(https://lh6.googleusercontent.com/-7an5ttHiUhw/T2Im9yow2PI/AAAAAAAAAX8/yvK75bKIKkQ/s128/GR_red-black-grad-8x41.gif) center left repeat-x;
        border:1px solid #666;
        color: #33CCFF;
        margin:2px 0 2px 1px;
        font-size:11px;
        font-family:Arial;
        font-weight:700;
        text-align:center;
        text-decoration:none;
}
#GRtab_gallery li a:hover{
        background:red  url(https://lh5.googleusercontent.com/-0qkGnFmOfKk/T2IorNwGvsI/AAAAAAAAAYI/odVOS7-OdC4/s128/GR-black-grad-5x31.gif) 0 5px   repeat-x;
        color:#FF9900;
}
li#GRtab_image a, li#GRtab_image a:hover{
        background:#aaa;
        color:#FF9900;
}
#GRtab_gallery li a img{
        position:absolute;
        left:3px;
        top:38px;
        width:400px;
        height:230px;
        clear:left;
        display:none;
        padding:2px;
        border:1px solid #444;
        border-bottom:5px solid #444;
        border-top:5px solid #222;
        border-bottom-left-radius:8px;
        border-bottom-right-radius:8px;
}
li#GRtab_image1 a img, #GRtap_gallery li a:hover img{
        display:block;
        opacity:0.35;
        filter:alpha(opacity=35);
}
li#GRtab_image1 a:hover img, li#GRtab_image2 a:hover img, li#GRtab_image3 a:hover img, li#GRtab_image4 a:hover img, liGRtab_image5 a:hover img{
        border-color:#888;
        opacity:1.0;
        filter:alpha(opacity=100); 
}
  1. 6.KLIK Simpan Template
  2. 7.Gunakan KODE HTML berikut di bagian body atau saat posting.

    <ul id="#GRtab_gallery">
         <li id="GRtab_image1"><a href="URL-1">Img-1<img src="image1.jpg" /></a></li>
         <li id="GRtab_image2"><a href="URL-2">Img-2<img src="image2.jpg"/></a></li>
         <li id="GRtab_image3"><a href="URL-3">Img-3<img src="image3.jpg"/></a></li>
         <li id="GRtab_image4"><a href="URL-4">Img-4<img src="image4.jpg"/></a></li>
         <li id="GRtab_image5"><a href="URL-5">Img-5<img src="image5.jpg"/></a></li>
    </ul>
    Keterangan/Catatan :
  3. 1.Anda bisa mengganti tiap2 URL dengan alamat blog/web, alamat posting, alamat label atau alamat image.
  4. 2.image1.jpg s/d image5.jpg merupakan URL gambar/image 1 s/d gambar 5.
  5. 3.Sebaiknya gunakan image dengan ukuran 400 x 230 (pixel).
  6. 4.Image gallery ini bisa digabungkan dengan fungsi lightbox.

    YANG KEDUA  dengan kode css3 anda bisa copy kode cssnya di bawah ini.


    #GRajaib_gallery { 
            border:3px solid #333;
            position:relative;
            padding:0;
            margin:20px auto;
            width:412px;
            height:285px;
            background:#ccc url(https://lh5.googleusercontent.com/-w6VZu6vjq5U/T2Lpa_yjbAI/AAAAAAAAAZ8/ZPN32269OdU/h400/gubhugreyot-wanita-misterius.jpg) 6px 83% no-repeat;
            background-size:400px 230px;
            border-radius:3px;
            border-bottom-left-radius:9px;
            border-bottom-right-radius:9px;
            box-shadow:0 0 6px #000;
    }
    #GRajaib_gallery li{
            margin:0; /* original code by : gubhugreyot */
            float:left;
            margin-left:1px;
            text-align:center;
            list-style: none; 
            padding:0;
    }
    #GRajaib_gallery li a{
            display:inline-block;
            padding:9px 0;
            width:78px; /* original code by : http://gubhugreyot.blogspot.com  */
            background:#666 url(https://lh6.googleusercontent.com/-7an5ttHiUhw/T2Im9yow2PI/AAAAAAAAAX8/yvK75bKIKkQ/s128/GR_red-black-grad-8x41.gif) 0 100%  repeat-x;
            border:1px solid #666;
            color: #33CCFF;
            margin:2px 0 2px 1px;
            font-size:11px;
            font-family:Arial;
            font-weight:700;
            text-decoration:none;
    }
    #GRajaib_gallery li a,#GRajaib_gallery li a img{
            transition:1.8s ease;
            -o-transition:1.8s ease;
            -moz-transition:1.8s ease;
            -webkit-transition:1.8s ease;
            -ms-transition:1.8s ease;
    }
    #GRajaib_gallery li a:hover {
            background:#fff  url(https://lh6.googleusercontent.com/-7an5ttHiUhw/T2Im9yow2PI/AAAAAAAAAX8/yvK75bKIKkQ/s128/GR_red-black-grad-8x41.gif) 0 -35px  repeat-x;text-shadow:2px 2px 2px #888;
            color:red;  /* original code by : http://gubhugreyot.blogdetik.com  */
            border-bottom:5px solid red;
            opacity:1.0;
            filter:alpha(opacity=100);
            padding:9px 0 4px;
    }
    li#GRajaib_img a, li#GRajaib_img a:hover {
            background:#aaa;
            color: #FF9900; 
    }
    #GRajaib_gallery li a img{
            position:absolute;
            left:3px;
            top:38px;
            width:400px;
            height:230px;
            clear:left;
            padding:2px;
            border:1px solid #444; 
            border-bottom:5px solid #444;
            border-top:5px solid #222;
            border-bottom-left-radius:8px;
            border-bottom-right-radius:8px;
            opacity:0.0;
    }
    li#GRajaib_img1 a img, #GRajaib_gallery li a:hover img {
            display:block; 
            opacity:0.35;
            filter:alpha(opacity=35);
    }
    li#GRajaib_img1 a:hover img, li#GRajaib_img2 a:hover img, li#GRajaib_img3 a:hover img, li#GRajaib_img4 a:hover img, li#GRajaib_img5 a:hover img {
            border-color:#888; 
            opacity:1.0;
            filter:alpha(opacity=100);
    }

<ul id="GRajaib_gallery">
<li id="GRajaib_img1"><a href="https://lh3.googleusercontent.com/-UeKVEw2FII4/TxpkR_5d8rI/AAAAAAAAADs/bCDkgWlXTkk/s500/img_gubhugreyot_gadisku-06b.jpg">Image-1<img src="https://lh4.googleusercontent.com/-b2bwA-Uat14/T2JvIF6pCsI/AAAAAAAAAZo/sxXP2xbR81Y/h300/th_gubhugreyot-temple.jpg" /></a></li>
<li id="GRajaib_img2"><a href="http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com">Image-2<img src="https://lh3.googleusercontent.com/-N2Db0y2rN5w/T2JvDLMkzsI/AAAAAAAAAZI/Sv92fEX5Y18/h300/th_gubhugreyot-blue-sky.jpg"/></a></li>
<li id="GRajaib_img3"><a href="https://lh5.googleusercontent.com/-w6VZu6vjq5U/T2Lpa_yjbAI/AAAAAAAAAZ8/ZPN32269OdU/h400/gubhugreyot-wanita-misterius.jpg">Image-3<img src="https://lh4.googleusercontent.com/-FK-_ZytynAI/T2JvFFfV-rI/AAAAAAAAAZU/45J-won1Kg0/h300/th_gubhugreyot-pantai-sore.jpg"/></a></li>
<li id="GRajaib_img4"><a href="URL-4">Image-4<img src="https://lh4.googleusercontent.com/-7Fzb-m8xyvA/T2JvMlvXX7I/AAAAAAAAAZ0/vkGaArh4kME/h300/th_suryokontho.jpg"/></a></li>
<li id="GRajaib_img5"><a href="http://gubhugreyot.blogdetik.com/">Image-5<img src="https://lh6.googleusercontent.com/-47T0FGU5C9E/T2JvF9NQaiI/AAAAAAAAAZY/ngrmrCPD8v8/h300/th_gubhugreyot-storm.jpg"/></a></li>
</ul>

  1. Login ke Blogger.
  2. Setelah halaman "Dasbor (Dasboard)" terbuka, cari dan klik "Rancangan (Design)".
  3. Lanjutkan klik "Edit HTML".
  4. Anda akan melihat sebuah box edit template yang penuh dengan kode html.
    Lakukan "Backup Template" sebelum memulai penyimpanan kode CSS.
  5. Cari kode]]></b:skin> dan letakkan kode CSS tepat di atasnya.
  6. Klik "Simpan Template (Save Template)".
  7. Gunakan xHTML di halaman posting atau pada Add a Gadget.

Catatan/Keterangan :
  • Ukuran yang ditetapkan pada image yang digunakan pada gallery berukuran 400px (width) dan 230px (height), namun demikian anda bisa juga menggunakan ukuran berbeda, hanya saja tetap ditampilkan dengan ukuran tersebut di atas.
  • Link pada xHTML (contoh: URL-4) diganti dengan alamat image, alamat blog atau alamat posting.
  • Perubahan ukuran gallery harus disertai dengan beberapa perubahan width, padding, baik pada box, tab controll maupun tab image.
.

Membuat Hover Image with Effect

   CSS hover image dimaksudkan untuk membuat penggunaan image dalam blog bisa lebih diperkecil sehingga penataan posting juga menjadi lebih mudah. Dengan hover image with effect maka image hanya akan ditampilkan dalam bentuk thumbnail dengan tinggi 100px dan lebar secara otomatis menyesuaikan diri sebanding dengan ukuran image sesungguhnya. Image dalam ukuran lebih besar hanya akan ditampilkan ketika cursor diarahkan di atas thumbnail. Dengan memanfaatkan properti css3 transition, penampakan image akan berjalan melalui transisi waktu yang disertai effek opacity. Waktu transisi ini dapat diperbesar atau diperkecil dengan mengatur nilai (value) css3 transition property.

CSS3 hover image dapat diterapkan untuk membentuk sebuah image gallery sekaligus dapat juga digunakan gambar tunggal seperti yang biasa digunakan untuk posting. Untuk membuat fungsi seperti di atas, pengaturan/setting dilakukan melalui penggunaan floating position pada kode css.

Kode CSS :

.GRflying_gallery{
        margin:20px auto;
        width:98%;
        padding:1%;
        background:#fff;
        text-align:center;
}
a.GRflying,.GRflying_kiri,.GRflying_kanan{
        position:relative;
        cursor:pointer;
}
a.GRflying,a.GRflying span,a.GRflying_kiri,a.GRflying_kiri span,a.GRflying_kanan,a.GRflying_kanan span{
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
a.GRflying img,a.GRflying_kiri img,a.GRflying_kanan img{
        height:100px;
        width:auto;
        margin:2px;
        padding:4px;
        background:#666;
        border:2px solid #eee;
        border-radius:5px;
        box-shadow:0 0 6px #999;
        opacity:0.7;
        filter:alpha(opacity=70);
}
a.GRflying_kiri{margin:5px 12px 5px 0;float:left;}
a.GRflying_kanan{margin:5px 0 5px 12px;float:right;}
a.GRflying:hover img,a.GRflying_kiri:hover img,a.GRflying_kanan:hover img{
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span,a.GRflying_kiri span,a.GRflying_kanan span{
        display:block;
        position:absolute;
        top:-400px;
        z-index:-10;
        opacity:0;
        filter:alpha(opacity=0);
}
a.GRflying_kiri span,a.GRflying_kanan span{top:-300px;}
a.GRflying span{left:-90%;}
a.GRflying_kiri span{left:0;}
a.GRflying_kanan span{right:0;}
a.GRflying:hover span,a.GRflying_kiri:hover span,a.GRflying_kanan:hover span{
        z-index:999;
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span img,a.GRflying_kiri span img,a.GRflying_kanan span img{
        background:rgba(0,0,0,0.4);
}
a.GRflying:hover span img,a.GRflying_kiri:hover span img,a.GRflying_kanan:hover span img{
        width:auto;
        height:300px;
        box-shadow:4px 4px 4px #999;
        border-radius:12px;
}

Kode CSS image sebelah kiri :

<a class="GRflying_kiri" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>
Kode CSS image sebelah kanan :

<a class="GRflying_kanan" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>
Kode CSS image gallery :

<div class="GRflying_gallery">
<a class="GRflying" href="URL-1"><img src="thumb-1.jpg" /><span><img src="image-1.jpg" /></span></a>
<a class="GRflying" href="URL-2"><img src="thumb-2.jpg" /><span><img src="image-2.jpg" /></span></a>
<a class="GRflying" href="URL-3"><img src="thumb-3.jpg" /><span><img src="image-3.jpg" /></span></a>
<a class="GRflying" href="URL-4"><img src="thumb-4.jpg" /><span><img src="image-4.jpg" /></span></a>
</div>

The simplest post code for image preview and tooltip
Tooltip yang mampu menampilkan gambar dengan kode posting paling sederhana ini masih menggunakan jQuery-1.3.2.min.js. Javascript pembentuk tooltip dibangun dengan memanfaatkan fade effect, blink effects, text-shadow serta box shadow. Penggunaan kode yang sederhana diharapkan mampu mengurangi kepadatan kode di ruang posting atau widget. Selain itu kode yang teramat praktis ini membuat semua blogger akan dengan amat mudah menggunakannya.

Untuk membuat tooltip agar mempunyai tampilan menarik dan terlihat atraktif, kita juga memanfaatkan kode css sebagai pembentuk box tooltip. Tooltip didesain mampu menampilkan gambar dalam tiga variasi ukuran. Yang pertama dengan ukuran lebar (width) 200px, yang kedua 400px dan yang terbesar dengan ukuran gambar 600px. Penggunaan ukuran maksimal 270px dilakukan dengan pertimbangan bahwa sebuah gambar dalam tooltip dengan lebar 600px adalah sebuah ukuran yang sudah teramat besar. Karena ketinggian gambar dibuat dalam bentuk otomatis, maka apabila gambar mempunyai perbandingan 2:3 untuk width dan height, maka gambar akan terlihat dalam ukuran 600px x 900px

Anda bisa melihatnya dalam DEMO berikut ini :

Link Dalam Bentuk Teks
Link Dalam Bentuk Teks
Arahkan cursor di atas gambar dan tunggu!


Langkah penggunaan tooltips
  1. Login to BloGGeR : Tuliskan User Name/Nama Pengguna atau Email Address dan lanjutkan dengan menuliskan Password/Kode Rahasia (Sandi). Setelah semua tertulis dengan benar, KLIK Login.
  2. Dasboard/Dasbor : Halaman pertama yang terlihat setelah login adalah Dasboard/Dasbor. Di sini ada beberapa link dengan fungsi yang berbeda. KLIK link Design/Rancangan.
  3. Design/Rancangan: KLIK link Edit HTML
  4. Edit HTML : BackUp Template dengan cara KLIK Download Full Template/Download Template Lengkap, kemudian Save/Simpan file Template di Folder PC.
  5. Find HTML Code : Cari kode .
    Letakkan jquery-1.3.2.min.js dan javascript tooltip dan link kode css tooltip di atasnya. Bentuknya akan seperti ini :

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://image-on-tooltip.googlecode.com/files/jqtt-gubhugreyot.js" type="text/javascript"></script>
    <link href='http://image-on-tooltip.googlecode.com/files/jqtt.css' media='screen' rel='stylesheet' type='text/css'/>
    <head>
  1. Save Template/Simpan Template : KLIK SAVE Template/Simpan Template.
Cara menggunakan kode HTML tooltips untuk posting atau di widget
Gambar dalam tooltip dengan ukuran (width) = 220px
Untuk menggunakan kode pertama ini, sampeyan harus menggunakan gambar minimal berukuran lebar (width) sebesar 200px karena ukuran sebesar ini yang akan di tampilkan di tooltip. Untuk link-nya bisa menggunakan gambar atau teks.

Contoh :

<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt1"><img src="thumnail.jpg" width="100" /></a>

<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt1">Teks Link (misalnya Gambar-1)</a>

Catatan/Keterangan :
  1. 1.image.jpg merupakan gambar yang akan ditampilkan di tooltip. Image ini berukuran besar di atas 300px sesuai kategori tooltip (berdasar class : jqtt1, jqtt2 atau jqtt3.
  2. 2.thumnail.jpg adalah gambar dalam ukuran lebih kecil yang akan ditampilkan di posting atau widget blog. thumbnail.jpg sebaiknya berukuran malsimal 200px (width atau height) karena nantinya gambar/image (image.jpg)besar ditampilkan lewat tooltip.
  3. 3.Link dalam bentuk tertulis dapat juga dipergunakan seperti tertulis di atas (gambar-1 s/d gambar-3).
  4. 4.Width dan style pada kode html bisa dilakukan banyak perubahan tergantung selera pengguna. width dan height sesuai dengan ukuran thumbnail (thumbnail.jpg).
  5. Gambar dalam Tooltip ini tidak akan membebani blog karena setiap gambar di tooltip hanya akan dimunculkan ketika link tersentuh cursor.
  6. Untuk membuat bentuk tooltips yang berbeda silahkan rubah kode css tooltip.
  7. image.jpg harus diganti dengan URL image yang akan ditampilkan di tooltip. Gambar ini berukuran besar (lebih besar dari thumbnail.jpg). Width atau height (tinggi atau lebarnya) sebaiknya lebih dari 300px sehingga fungsi tooltip image ini benar-benar maksimal. Pada intinya penggunaan media viewer seperti tooltip image adalah agar kita dapat menampilkan image dengan ukuran besar akan tetapi loading atau beban blog tetap terjaga (ringan). Mengapa bisa demikian? Yah ... karena image di tooltip kan tidak langsung ikut terloading ketika blog dibuka. Yang ikutan loading si thumbnail.jpg itu saja yang berukuran kecil. Lha karena ukurannya kecil maka jadinya blog juga tetap enteng, gitu, lhoh!!!!
  8. Tuliskan teks yang akan ditampilkan di ... dst silahkan diganti dengan teks yang menerangkan tentang image atau teks lain yang dirasa tepat untuk ditampilkan di tooltip.
  9. thumbnail.jpg berupa image miniatur dari image.jpg. Jadi pada intinya setiap akan memfingsikan image on tooltip harus ada dua buah image. image.jpg yang berukuran besar dan thumbnail.jpg yang berukuran kecil.
  10. width="..." adalah lebar (width) thumbnail.jpg. Rubah nilainya untuk disesuaikan dengan ukuran thumbnail yang anda gunakan.
  11. style="margin:10px 5px;border:4px solid green; ... dst adalah tambahan kode untuk memperindah thumbnail. Silahkan rubah atau tambah dengan kode yang lain untuk membuat thumbnail terlihat lebih menarik.
  12. Teks Link (misalnya Gambar-3) digunakan apabila thumbnail tidak digunakan. Jadi artinya yang terlihat di halaman blog berupa teks. Teks ini ketika dicocor cursor akan memunculkan image tooltip.
  13. Semua yang dibutuhkan sudah sangat lengkap dan tinggal pakai oleh karena itu aku hanya berharap semoga tooltip ini bisa langsung berfungsi dengan sempurna!


Contoh xHTML lengkap Image on Tooltip
Gunakan kode berikut untuk percobaan! xHTML ini sudah lengkap dengan image dan thumbnail serta style untuk mempercantik thumbnail. Dengan kode ini akan menghasilkan seperti tooltip yang di bawahnya!

<a href="http://4.bp.blogspot.com/-Jnc8de83LZ0/TwqlXriZKkI/AAAAAAAAACE/ahdtoV_xrbM/img_gadisku-001-gubhugreyot.jpg" class="jqtt2" target="_blank" title="Gadis bule ini dulu teman main semasa kecil ku. Aku dan dia suka main tanah yang dilobangi trus kita guyur pakai air kencing berdua"><img src="http://1.bp.blogspot.com/-y0SYhfQv4mE/TwqlfLj45FI/AAAAAAAAACQ/06MSscNRTQs/s200/th_gadisku-001-gubhugreyot.jpg" width="150" height="120" style="padding:5px;background:#eee;border:2px solid #555;border-radius:6px;float:left;margin:5px 10px 5px 0;box-shadow:2px 2px 2px #000;" /></a>

Cara Buat Gambar Center (di Tengah)
Membuat gambar pada posisi tengah memang lebih sedikit digunakan blogger dari pada posisi gambar di kiri dan kanan (using float-left, float-right). Sedikit kode yang berbeda diperlukan untuk membuat gambar berposisi seperti itu (tengah). Posisi ini lebih sering dikenal dengan sebutan "center of position". Tidak banyak kode CSS yang kita butuhkan dan kode ini bisa digunakan secara langsung dalam tag img atau dengan menggunakan kode CSS yang kita simpan di template blog. Satu contoh di bawah ini adalah kode html yang berfungsi untuk membuat center gambar dan digunakan secara langsung di tag img:

&lt;img style=&quot;display: block; margin: 0 auto; text-align: center; width: 300px; height: 219px;&quot; src=&quot;http://1.bp.blogspot.com/_550XeJhg_o8/TJ4GCd1zFnI/AAAAAAAAApc/UFMMwG8Q3ok/s320/Pantai-1.jpg&quot; /&gt;

Kode di atas adalah kode html pembuat posisi center dengan bentuk yang paling dasar. Jika sampeyan banya menggunakan posting dalam bentuk gambar akan jauh lebih baik seandainya kode dibuat dalam bentuk kode CSS sehingga bisa dimanfaatkan setiap kali posting. Kode CSS ini disimpan di template blog kemudian beri tanda dalam bentuk "class" seperti misalnya img.imgcenter sehingga ketika gambar diterbitkan maka ditambahkan sebuah "class" dalam "tag img" dan berbentuk seperti berikut : img class="imgcenter". Penggunaan kode CSS juga akan membuat ruang posting menjadi lebih praktis (tidak berjejalan dengan kode html). Sampeyan dapat juga menambahkan beberapa kode CSS yang lain dalam "class tersebut" hingga gambar yang dipostingkan akan tampillebih cantik. Kode baru seperti border, border-radius, drop-shadow (box-shadow), CSS3 transition dan transformation serta hover pasti akan membuat bentuk gambar lebih menarik saat ditonton.


Di bawah ini adalah satu contoh penggunaan kode HTML untuk membuat posisi gambar ditengah (center) yang dilengkapi dengan beberapa kode CSS untuk memperindah tampilan gambar.

Example - Image on Center of Position


membuat tampilan posting yang cantik dengan pengaturan gambar

Beberapa kode CSS untuk membuat gambar "center" dengan berbagai variasi tambahan kode CSS telah aku sediakan berikut demonya. anda bisa melihat dan menggunakan kode-kode tersebut untuk membuat tampilan gambar posting yang cantik
Kode CSS dan xHTML



<style type="text/css">
.imgcenter {
      display: block;
      margin: 0px auto;
      text-align: center;
      width: 400px;
      height: 300px;
}
</style>

<img class="imgcenter" src="http://..../..../images.jpg" />
Fungsi margin pada kode CSS di atas selain untuk membuat "center of position", juga berfungsi untuk mengatur jarak dengan elemen di atas dan bawahnya. Sampeyan bisa mengganti 0 auto dengan yang lain seperti misalnya 10px auto (jarak dengan elemen di atas dan bawahnya 10px) atau bentuk yang lain seperti 2em auto (jarak dengan elemen di atas dan bawahnya 2em --> 1em=18px). Apabila margin-top dan margin-bottom (jarak atas dan bawah) ingin dibuat dalam ukuran berbeda, maka bisa menambahkan kode baru seperti di bawah ini :


<style type="text/css">
.imgcenter {
      display: block;
      margin: 0px auto;
      text-align: center;
      width: 400px;
      height: 300px;
      margin-top: 0;
      margin-bottom: 20px;
}
</style>
Dengan penambahan margin baru seperti di atas, maka jarak dengan element di atasnya sebesar 0px sedang dengan elemen di bawahnya 20px. Satu hal yang amat penting diperhatikan, mungkin pada beberapa kasus dibutuhkan tambahan kode clear: both. Penggunaan kode ini harus kita lakukan saat di atas gambar ada elemen lain yang menggunakan kode float-left atau float-right. Silahkan segera buka DEMO yang telah disertai juga beberapa contoh penggunaan kode CSS pelengkap "fungsi center" berikut penggunaan clear: both;. Simpan kode CSS di template sampeyan (di atas kode ]]></b:skin>). Jangan lupa saat menyimpan kode untuk membuang tag "style" yang berupa<style type="text/css"> dan </style>.
cara membuat gambar membesar tersentuh mouse
Image enlarger yang hanya menggunakan CSS3 ini dikhususkan untuk posting yang melibatkan penggunaan gambar. Gambar hanya akan ditampilkan dalam ukuran kecil (thumbnail) dengan lebar (width) dan tinggi (height) sebesar masing-masing 110px. Dengan menyentuhkan cursor pada thumbnail, maka gambar akan menjadi bertambah besar dengan ukuran lebar (width) sebesar 400px sedang tingginya menyesuaikan dengan gambar yang diposting. Dengan menggunakan metode seperti ini diharapkan halaman posting menjadi lebih rapi dan lebih mampu memuat teks tanpa mengurangi kemampuannya dalam menampilkan gambar berukuran besar.

Untuk meciptakan desain halaman posting yang tetap terjaga, dimana perbesaran gambar tidak mempengaruhi tatanan posting, desain telah disesuaikan dengan menggunakan kode CSS untuk membuat teks atau gambar lain tetap diposisi semula saat cursor menyentuh gambar (thumnail) dan proses perbesaran gambar terjadi. Position absolute dan penambahan DIV dalam bentuk float left membuat semua ini mungkin terjadi.

Untuk meletakkan gambar baru (ke-2, ke-3 dst), cukup batasi dengan menggunakan tag p dalam bentuk :

<p> <div class="leftGRie"></div><img class="GRie" src="Image-2.jpg /> Text here! </p> kemudian untuk gambar lain lakukan hal yang sama.

Supaya lebih jelas apa yang dimaksud di atas, silahkan sampeyan lihat DEMO-nya melalui link di bawah ini.
Kode CSS Image Enlarger for post
img.GRie  {
      position: absolute;
      cursor: pointer;
      display: block;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border: 3px solid #555;
      padding: 4px;
      background: #000;
      margin: 0 10px 5px 0px;
      opacity: 0.6;
      height: 110px;
      width: 110px;
      -o-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s;
      -moz-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s;
      -webkit-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s;
      }
img.GRie:hover {
      -o-transition:  width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s;
      -moz-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s;
      -webkit-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s;
      opacity: 1.0;
      z-index: 9;
      border: 10px solid #fff;
      width: 400px;
      height: auto;
      border-radius: 15px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      background: #aaa;
      box-shadow: 1px 1px 10px #000;
      -moz-box-shadow: 1px 1px 10px #000;
      -webkit-box-shadow: 1px 1px 10px #000;
      }
.leftGRie {
      float:left;
      width: 135px; 
      height: 130px; 
      }




<!--[if IE]>
<style type="text/css">
img.GRie { filter: alpha(opacity=60);}
img.GRie:hover { height: auto; width: 400px; filter: alpha(opacity=100); border: 10px solid #ddd; 
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=10);}
</style>
<![endif]--> 

Kode CSS tersebut silahkan di simpan di template dengan cara

  • Login to Blogger (login ke Blogger).
    • Tulis User Name (Nama Pengguna) atau Email Address.
    • Tuliskan Password (Sandi).
    • KLIK "Login".
  • Dasboard (Dasbor). Halaman dashboard akan dijumpai beberapa saat setelah login di lakukan.
    • Cari link "Design (Rancangan)".
    • KLIK "Design (Rancangan)".
  • Page Elemens (Elemen Laman) : Sesampai di halaman ini KLIK link "Edit HTML".
  • Edit HTML :
    • Cari Kode ]]>





  • Letakkan KODE CSS di atas dan di bawah ]]>


  • seperti yang terlihat di atas.


  • Kode CSS yang di bawah ]]>


  • digunakan supaya desain bisa bekerja di Internet Explorer (IE) mekipun animasi CSS3 tidak dapat bekerja karena IE belum support.


  • KLIK "SAVE Template (Simpan Template)".



  • Cara Mnggunakan Kode HTML untuk Posting">Gunakan kode berikut untuk contoh posting menggunakan fungsi Image Enlarger:
    <div class="leftGRie"></div><img class="GRie" src="http://2.bp.blogspot.com/_550XeJhg_o8/TIbCUMHVW7I/AAAAAAAAAng/oe1J9_szVns/s400/026_aguna.jpg" />September-2010. Sentuhkan cursor pada gambar disamping! Dengan menggunakan posting gambar seperti disamping, maka kita tidak perlu menampilkan gambar dalam ukuran bear yang terlalu banyak menyita halaman posting. Cukup tampilkan dalam bentuk seperti ini, maka gambar bisa dilihat dalam ukuran besar hanya dengan membawa cursor di atas gambar. <p>Menampilkan posting yang disertai gambar dalam bentuk seperti ini tentunya akan membuat blog bertambah menarik. Jangan kuwatir tentang penggunaan kode. menambah fungsi seperti ini sangat mudah karena hanya perlu menggunakan beberapa kode CSS sebagai pembangun fungsi, serta beberapa kode HTML untuk posting. Sangat simple dan mudah dilakukan siapapun, bahkan pemula sekalipun.</p><p><div class="leftGRie"></div><a href="http://img.theomegaproject.org/thumbs/2010/05/176.jpg" target="_blank"><img class="GRie" src="http://img.theomegaproject.org/thumbs/2010/05/176.jpg" /></a>
    Bagaimana tentang ukuran gambar yang digunakan? Hooo .... Ini sangat praktis karena seberapapun besar gambar yang digunakan, maka gambar akan ditampilkan dalam ukuran lebar 400px (width), sedang tinggi (height) akan menyesuaikan dengan gambar (image) aslinya.</p>

    Contoh di atas mempunyai bentuk dasar kode sebagai berikut :
    <div class="leftGRie"></div><img class="GRie" src="image-1.jpg" /> Tuliskan teks di sini! 
    <p><div class="leftGRie"></div><a href="link-image-2"><img class="GRie" src="image-2.jpg" /> </a>Tuliskan teks di sini! </p>
    <p><div class="leftGRie"></div><a href="link-image-3"><img class="GRie" src="image-3.jpg" /> </a>Tuliskan teks di sini! </p>



    Berpenghasilan Dari Sekedar Ngeblog




    DESIGN========================================











































    SECURITY======================================


























    TRIK WINDOWS============================




      



































    INTERNET==================================



      













    Penulis : ADMIN ~ Sebuah blog yang menyediakan berbagai macam informasi

    Artikel Kumpulan Trik Posting Gambar Dan Photo Di Blog ini dipublish oleh ADMIN pada hari Wednesday, August 22, 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 3 komentar: di postingan Kumpulan Trik Posting Gambar Dan Photo Di Blog
     

    3 comments:

    1. Makasih Gan ngilmunya...
      Salam Sukses

      ReplyDelete
    2. sip !!!...trimakasih telah berkunjung.,ini merupakan kumpulan tutorial seputar gambar dan photo yang selalu ane update jika ada yang baru ..,kunjungi juga article tentang : Cara simple buat gambar bisa berputar..
      http://joglio.blogspot.com/2012/11/cara-simple-buat-gambar-bisa-berputar.html#.ULcgCZE_Fkg

      ReplyDelete

    Zona Download Software Gratis
    DESIGN
    SECURITY
    TOOLS WINDOWS
    • CamStudio 8  (Tool untuk merekam layar komputer ke format video)
    INTERNET
    AUDIO/VIDEO
    OTHERS