Protonica Tv Dan Computer: CARA MEMBUAT TAMPILAN GALLERY dengan FRAME

r050

Pada dasarnya, Membuat tampilan Galleri dapat dilakukan hanya dengan mengatur Posisi gambar pada tampilan posting seperti biasanya, yaitu hanya dengan merubah ukuran agar memiliki kesamaan, sehingga susunan Gambar dapat tampil berderet dan teratur, kemudian jika diberi tag dengan teks dibawahnya, hanya bisa diatur dengan center posisi.
Nah Untuk dapat tampil dengan gaya Bingkai dan Background warna menurut kemauan kita, kemudian Ukuran gambar menjadi sebuah tumbnail dan memiliki teks dibawahnya yang dapat disertai link, silahkan Simak saja cara berikut ini :

Buatlah Kode Htmlnya: Klik Read more aja deh...>

Keterangan:
Buatlah script tersebut dari kode pembuka frame dan penutup frame yaitu :
<div class="thumbnail_frame"> hingga kode > download</span></a></div>untuk beberapa gambar lagi.
Contoh diatas adalah untuk susunan 3 buah gambar, jadi..jika ingin membuat beberapa susunan gambar.
tinggal Anda Copi Kembali Script tersebut,
Yang perlu diperhatikan adalah Copyan yang Anda Buat tetap Berada di antara pembuka Gallery dan Penutup Gallery. Lihat Kode Pembuka Gallery dan Penutup dengan warna Magenta tersebut diatas:
<div class="inner_gallery" style="clear: both; margin-bottom: 10px; margin-left: 72px;">=Kode div Pembuka

<div class="templatemo_clear"></div>=Kode Gallery Penutup
Artinya Kode Yang Anda Copy Berada Sebelum Kode Gallery Penutup

Yang Perlu diganti adalah pada teks yang berwarna Biru dan Merah dan Magenta
@--Link Url untuk klik gambar : Silahkan isi tag ini dengan Alamat/Url yang dituju ketika gambar diklik
@--Url Gambar : Silahkan Isi Dengan Alamat Gambar/url gambar yang Anda Upload (unggah).
@--JUDUL : judul Gambar / nama file.
@--Link untuk klik text 1 : isi dengan link (url) tujuan ketika teks JUDUL diklik.
@--Link untuk klik download : alamat file yang akan didownload ( biasanya Gambar disimpan di Hosting).

Anda juga dapat mengatur lebar tampilan gambar/ garis tepi pada gambar/ dan tebal garis tepi frame, serta warna latar frame:

width: 150px; Panjang Frame
background: #C07E1B; Warna tepi Frame.
border: 2px solid #109FF9; Tebal garis tepi frame

.thumbnail {
  border: 1px #CCC solid; tebal garis tepi tampilan gambar.
Untuk cara Keduanya Adalah Menyertakan Langsung Kode Css/Html Bersamaan dengan Kode Sript yang ditulis pada kotak Entry, Jangan Lupa..Mode Edit pada Edit Html ( disebelah Menu Compose )
Cara Penulisannya adalah dengan Menyertakan juga Style Text nya, Sehingga Menjadi Seperti Berikut:

<style type="text/css">
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
.inner_gallery {
margin: 5px;
}
.title {
margin-top: 10px;
margin-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #009900;
}

.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #CC0066;
}

.thumbnail {
  border: 1px #CCC solid;
}

.top_links {
margin: 0px 0px 20px 0px;
padding: 2px 0px 5px 30px;
background: #045C97;
font-size: 11px;
}

.top_links a:link, .top_links a:visited {
color: #FFFFFF;
}

.top_links a:active, .top_links a:hover {
color: #CCFF00;
}

.thumbnail_frame {
float: left;
margin: 0px 4px 4px 0px;
padding: 4px;
  width: 150px;
  background: #C07E1B;
  border: 2px solid #109FF9;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
.thumbnail_title {
font-weight: bold;
}

.blog_post a:link, .blog_post a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
line-height: 1.7em;
}
.templatemo_clear { clear: both; width: 100%; height: 0px; font-size: 0px; }
</style>
<div class="inner_gallery" style="clear: both; margin-bottom: 10px; margin-left: 72px;">
<div class="thumbnail_frame">
<a href="Link Url untuk klik gambar"><img alt="251 clean blog" border="0" class="thumbnail" height="140" src="Url Gambar" title="" width="140" /></a>

<a class="thumbnail_title" href="Link Url untuk klik text 1">JUDUL</a>
<a class="thumbnail_title" href="Link Url untuk klik download"><span class="Apple-style-span" style="color: lime;"> download</span></a> </div>
<div class="thumbnail_frame">
<a href="Link Url untuk klik gambar"><img alt="250 chess" border="0" class="thumbnail" height="140" src="Url Gambar" title="" width="140" /></a>

<a class="thumbnail_title" href="Link Url untuk klik text 1">JUDUL</a>
<a class="thumbnail_title" href="Link Url untuk klik download"><span class="Apple-style-span" style="color: lime;"> download</span></a></div>
<div class="thumbnail_frame">
<a href="Link Url untuk klik gambar"><img alt="249 ancient" border="0" class="thumbnail" height="140" src="Url Gambar" title="" width="140" /></a>

<a class="thumbnail_title" href="Link untuk klik text 1">JUDUL</a>
<a class="thumbnail_title" href="Link untuk klik download"><span class="Apple-style-span" style="color: lime;"> download</span></a></div>

<div class="templatemo_clear"></div>

Dan Bentuk Aslinya Dapat Anda Lihat Seperti Contoh Disini, Klik aja!!!!
Selamat Mencoba, Semoga dengan Uraian Ini Mudah Dimengerti..
Untuk Mengetahui Kode Hex Warna Html, Silahkan Lihat disini

Protonica Tv Dan Computer

CARA MEMBUAT TAMPILAN GALLERY dengan FRAME

r050

No comments:

Post a Comment

Masjid Jannatul Firdaus

Followers

Labels