Surya Bina Mitra: Cara Posting Gambar atau Foto dan Mengetahui fungsi Margin

Senin, 28 Januari 2013

Cara Posting Gambar atau Foto dan Mengetahui fungsi Margin

Tehnik Pasang Gambar dan Fungsi MARGIN
Ada beberapa tehnik untuk memasukan gambar atau image pada sebuah postingan artikel.
Seperti, CARA MEMBUAT DAN MEMASANG GAMBAR ATAU PHOTO YANG BENAR DI BLOG
Dan tentunya itu memerlukan tehnik tersendiri dalam mengedit sebuah atau beberapa gambar untuk kelihatan menjadi menarik.
Disini blog suryabinamitra bukannya ahli dalam tehnik cara mengedit image atau gambar, hanya share saja artikel yang saya dapat dari blog yang pernah mempostingnya. Karena sebelumnya saya juga pernah mengalami kesulitan untuk menampilkan sebuah foto atau gambar agar tampil lebih menarik ketika ada yang membacanya, contohnya pada artikel saya pada halaman lain yang berjudul Cara Mempelajari Macam Macam ilmu Kesaktian
(Cobalah sorot pada gambarnya!! Anda akan melihat perbedaan tampilannya!!)

Dan pada kali ini saya akan menshare tentang salah satu Cara Posting gambar dan sekaligus Mengetahui fungsi daripada margin;

Perhatikan gambar dibawah ini;

- Margin-top: 22px; margin-left: 9px; margin-right: 9px; dan margin-bottom: 41px;
- 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;

Contoh hasil penempatan gambarnya : ( lihat gambar No.3. terlalu keluar dari garis )

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

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

Maka hasil gambarnya akan seperti terilhat dibawah ini ( lihat Gambar No.3 jadi Rapi )

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
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

Ajaib Image Gallery adalah sebuah gallery yang dibuat hanya menggunakan kode css. Ada 2 versi dari Ajaib Image Gallery:
Hanya menggunakan kode CSS.
Menggunakan kode css dan kode css3.

YANG PERTAMA
Image Gallery hanya dengan Kode CSS :

Langkah untuk membuat Hover Tab Image :

- Login ke Blogger.
- Setelah halaman Dasbor (Dasboard) terbuka, klik "Design (Rancangan)".
- Lanjutkan dengan klik "Edit HTML".
- Amankan Template (Backup Template) terlebih dahulu!
- 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);
}

- KLIK Simpan Template
- 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 :
1.Anda bisa mengganti tiap2 URL dengan alamat blog/web, alamat posting, alamat label atau alamat image.
2.image1.jpg s/d image5.jpg merupakan URL gambar/image 1 s/d gambar 5.
3.Sebaiknya gunakan image dengan ukuran 400 x 230 (pixel).
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpS-ck2EF-7-Fel_NuKwVis3oPu0-7Uw2zqbCv9nsCQ3YrhUJ4kREWoDyKAXemLpR28cqexwSk8cmJJLKbbG8c1SSx2RbTmKuw8iIyBG4NDzpcWBcRZMND8JbUwn274R1Q5KDOR_TWTI/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>

- Login ke Blogger.
- Setelah halaman "Dasbor (Dasboard)" terbuka, cari dan klik "Rancangan (Design)".
- Lanjutkan klik "Edit HTML".
Anda akan melihat sebuah box edit template yang penuh dengan kode html.
- Lakukan "Backup Template" sebelum memulai penyimpanan kode CSS.
- Cari kode ]]></b:skin> dan letakkan kode CSS tepat di atasnya.
- Klik "Simpan Template (Save Template)".
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.

Sampai disini postingan Cara Posting gambar dan Mengetahui fungsi margin sebagai salah satu kunci kesuksesan blog yang bisa anda terapkan khususnya yang baru terjun di dunia blogger pemula seperti saya.

Dan setelah anda mengetahui Cara memposting gambar dan Mengetahui fungsi margin, mungkin anda tertarik untuk belajar cara Melipat Gambar pada blog anda, silahkan anda baca pada artikel CARA MELIPAT GAMBAR DENGAN MENGGABUNGKAN CSS3 DAN JQUERY

Semoga postingan Cara Posting gambar dan Mengetahui fungsi margin diatas dapat bermanfaat untuk anda, salam sukses selalu ...

Edit; wawansurya
Sumber ;
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com

merchant