Cara Membuat Image Preview Menggunakan Tombol

Image Preview ini berfungsi untuk melihat gambar dalam ukuran yang lebih bersar , dan cara kerjanya menggunakan tombol perbesar dan tombol normal , yaitu bila di klik tombol perbesar maka gambar menjadi ukuran besar dan di klik tombol normal untuk mengembalikan gambar pada posisi ukuran semula.
Jika di web atau blog anda banyak menampilkan gambar , cara ini dapat jadi alternatif untuk dimanfaatkan agar pengunjung bisa melihat gambar anda secara jelas.

Berikut contoh bentuk Image Preview menggunakan tombol.

 

Widget
















 

Sticky Bar

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode </head>
6. Massukan script dibawah ini tepat diatas kode </head>

<script type='text/javascript'>function gambarbesar1(){document.getElementById(&quot;gambar1&quot;).height=&quot;200&quot;; document.getElementById(&quot;gambar1&quot;).width=&quot;200&quot;;}function gambarnormal1(){document.getElementById(&quot;gambar1&quot;).height=&quot;100&quot;; document.getElementById(&quot;gambar1&quot;).width=&quot;120&quot;;}</script><style type='text/css'>div.galleryagambar{position:relative; margin: 2px; padding:8px; border: 2px solid #ccc; background-color:#E3E3E3; float:left;}div.gallerya{position:relative; margin: 2px; border: 2px solid #D8D8D8; background-color:#ECECEC; float:left; text-align: center;}div.gallerya img{ border: 2px solid #ccc; margin-top: 5px;}div.gallerya a:hover img{ border: 2px solid #000000;/* for IE */ filter:alpha(opacity=40);/* CSS3 standard */ opacity:0.4;}div.labela{ border: 0px solid #D2D2D2; background-color:#ccc; text-align: center; font-weight: bold; height: 12px;width:120px; padding:3px;}</style>

Catatan :
Untuk menambah gambar , anda tinggal menambah kode yang berwarna merah dan simpan dibawah kode yang berwarna merah tersebut tapi ganti nomor yang berwarna biru menjadi nomor 2 dan seterusnya.

7. Klik simpan template

Langkah selanjutnya anda tinggal menambahkan kode HTML pada saat menulis artikel.
Jangan lupa tambahkan kode HTML pada bagian HTML bukan Compose.
Cara ini bila gambar akan ditampilkan pada halaman posting. 

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda , berarti anda tinggal menambah gadget.
Silahkan ikuti langkah berikut ini :


1. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
2. Masukkan script dibawah ini

<div class="galleryagambar">
<div class="gallerya"><table border="0" width=""><tbody><tr><td bgcolor="#ECECEC"><a href="http://AlamatLinkAnda" target="_blank"><img height="100" id="gambar1" src="URL Gambar" width="120" /></a><br /><div align="center"><input onclick="gambarbesar1()" type="button" value="Perbesar" /><input onclick="gambarnormal1()" type="button" value="Normal" /></div></td></tr><tr><td bgcolor="#ccc"><div class="labela">Label Gambar</div></td></tr></tbody></table></div>
</div>

Catatan :
Untuk menambah gambar , anda tinggal menambah kode yang berwarna merah dan simpan dibawah kode yang berwarna merah tersebut tapi ganti nomor yang berwarna biru menjadi nomor 2 dan seterusnya.

3. Klik simpan

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Slide Menu Vertikal

Cara pembuatannya sangat mudah , yaitu menggunakan fitur CSS dan beberapa kode HTML.
Anda tinggal menyisipkan sedikit kode CSS tersebut pada template blog anda , dan sedikit kode HTML pada sidebar blog anda.

Demo

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Widget Template
5. Tekan tombol Ctrl+F
6. Cari kode </head>
7. Masukkan script dibawah ini tepat diatas kode </head>

<style type='text/css'>
/*widget Slide Menu vertikal by noer cara buat web gratis.com*/
ul#Slide-Menu-vertikal-cbwg {
    list-style: none;
    z-index:999999;
    margin:0;
    padding:0;
}
ul#Slide-Menu-vertikal-cbwg li {
    width: 200px;
    display:inline;
    margin:0;
    padding:0;
}
ul#Slide-Menu-vertikal-cbwg li a {
    display: block;
    position:relative;
    width: 200px;
    height: 25px;
    background-color:#aaa;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #aaa;
    text-decoration:none;
    text-align:center;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin:0;
    padding:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}
ul#Slide-Menu-vertikal-cbwg li a:hover{
    background-color:#fff;
    border:1px solid #bbb;
    padding-top: 80px;
}
ul#Slide-Menu-vertikal-cbwg li a span{
    background: -moz-linear-gradient(center top, #fff 0%,#bbb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb),color-stop(1, #fff));
    border-top:2px solid #bbb;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    display: block;
    width: 200px;
    height: 25px;
    font-size:14px;
    font-weight:bold;
    color:#000;
    margin:0;
    padding:0;
}
ul#Slide-Menu-vertikal-cbwg li a span:hover{
    text-decoration:none;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    color:#40954E;
    background-color:#eee;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>

8. Kemudian masukkan script dibawah ini tepat dibawah script diatas

<style type='text/css'>
ul#Slide-Menu-vertikal-cbwg .ITEM 1 a:hover     { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7IEYbF5Nv13G7HJuQkr7kK2TuEmD1wCwRbo167cIIhj2qRjgWNSO3NbxDHjUpsx4e47t_hQ2kM9hptmJD3NdrwNF1L0098EKq2BLFaHtjat-kXCOUvJ-T-3SlSZfnhozo4c3o7jXWPPR/s104/home+2.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 2 a:hover      { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLKmwIOLe1MF94d7C4jeTuuocnw6xmdNuDsgEzRsz9Gi3-rhMC7sZjC0YwEyPTNY_8zcoPH7eraLBlzAecGBaHMLeZZu2x_4XuqfmB2cvBW_tv-GftQwrIoHwrs6qbdyROGRL9Nd32LR0F/s104/id_card.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 3 a:hover      { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJ3TaEUo7o0fmvrtH4ybC4mDRAN5EXsqh6Qg2-tPt-Jla8hxMfZNHymcsO4ikiDjKFrcK0vLq3IMDuxYHwJu6JAX6JGkIpwNSSgRgf5e_d3d0p9JgCfcxzAwtdGqS2BqBwuLzJsdFqkQ-/s104/html_file.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 4 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXS6ud3x1f_g-9doNz1ko9mT4oOVnrdHH9-8dkg8O2oJ7lETK0xHt7Aeeirg_w3RW_poWxRMBrI0oavW_3VhNK3fbIRRkyU2cliTUvMYRPj1_rHUvPtzD8ITKM9k6NyMqHxhxHW6sGJ4aw/s104/css_file.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 5 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6muVRWXPCJi68krv72H-7S_APdbvoFhd0YsHWyPuvRUEXkv9fdUVwPAkIfQfuJhPcuQnXgNzao4n1sYb8U6WhATTbXeL_hZqiMg0bKOsFYTP7Jbby4Eq9njjAMMVVywF_Z-m6nlp7JfJ/s104/js_file.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 6 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguoZYA4wDvFeBqvBT4ezX9a8gfOSv_qQLB7_trwg_9amIqJpqdaiVWkkZNg7TGkqUEN_LTRocHkiO-NlxjwyCL9RQVnI1FBtDxpzvud0vzM7Kggh-8f0SqpLcmu7GuhXTKlf25YPmBaRkI/s104/edit_page.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 7 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY1Lfs2_XI-Wz4m9vUQnmK71kwfF46rUL87CC2HWMlpAYHe50V48mVXpbuLd6Pj-UKBYdYxTFno9ZiKKoyooK4Z8wbF-byuBPRcaK3x9D7nUElEjINWqJZ6htL1sj8gHr2VX4Iwqk8ALOM/s104/book_accept.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 8 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRM_NHZKtzWjs56ml-Vbt_XmhHOS_9ByfzCm2qpDF2Euo0RytUbE67SSqJxoJ-BLIDUFu3Erlg3HkoumkkAw0vIvXgV642GxFpILW_5GSIe4YJzXXa9t46r9QUdGfatyon85QGS-hS0Oe0/s104/mail.png);}</style>

Catatan :
- Tulisan warna merah adalah ULR Icon yang ada pada setiap menu.
- Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda inginkan.
- Sebagai referens i, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons
- Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.

9. Klik simpan template

Langkah selanjutnya tinggal menaruh Slide Menu Vertikal ini pada Sidebar atau Gadget blog anda.
Ikuti langkah berikut ini :

1. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
2. Masukkan script dibawah ini
3. Klik simpan

<ul id="Slide-Menu-vertikal-cbwg">
<li class="ITEM 1">
<a href="http://AlamatLinkAnda"><span>Judul Menu 1</span></a>
</li>
<li class="ITEM 2">
<a href="http://AlamatLinkAnda"><span>Judul Menu 2</span></a>
</li>
<li class="ITEM 3">
<a href="http://AlamatLinkAnda"><span>Judul Menu 3</span></a>
</li>
<li class="ITEM 4">
<a href="http://AlamatLinkAnda"><span>Judul Menu 4</span></a>
</li>
<li class="ITEM 5">
<a href="http://AlamatLinkAnda"><span>Judul Menu 5</span></a>
</li>
<li class="ITEM 6">
<a href="http://AlamatLinkAnda"><span>Judul Menu 6</span></a>
</li>
<li class="ITEM 7">
<a href="http://AlamatLinkAnda"><span>Judul Menu 7</span></a>
</li>
<li class="ITEM 8">
<a href="http://AlamatLinkAnda"><span>Judul Menu 8</span></a>
</li>
</ul>

Catatan : 
- Tulisan warna biru pada kode ini harus sama dengan tulisan warna biru yang ada pada kode diatas.
- Tulisan warna merah ganti dengan URL halaman anda.
- Tulisan warna pink ganti dengan Judul Menu yang sesuai keinginan anda.

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Transformasi 2D

Transformasi adalah sebuah efek yang memungkinkan perubahan suatu unsur atau elemen seperti bentuk , ukuran dan posisi.
Dengan CSS3 transformasi , kita dapat mengubah skala , putaran , kebalikan , dan elemen peregangan sehingga transformasi menimbulkan efek 2D atau 3D.

Pada saat ini efek transformasi sudah dukung oleh beberapa browser seperti Internet Explorer 9 , Firefox , Chrome , Safari , Opera.
Tapi dari beberapa browser yang mendukung efek transformasi ini memiliki cara yang berbeda pada penulisan kodenya.

Berikut perbedaan yang perlu diperhatikan :
1. Internet Explorer 9 memerlukan awalan-ms-.
2. Firefox membutuhkan awalan-moz-.
3. Chrome dan Safari membutuhkan awalan-WebKit-.
4. Opera membutuhkan awalan-o-.
Sehingga bila kita menginginkan semua browser yang di sebutkan diatas menampilkan efek transformasi yang kita buat , sebaiknya kita buat seluruh kode yang dibutuhkan setiap browser diatas.

Berikut ini saya berikan beberapa contoh metode transformasi 2D.

1. Translate
Dengan metode Translate , elemen bergerak dari posisi semula keposisi lain tergantung pada parameter yang diberikan untuk posisi kiri (sumbu X) dan bagian atas (sumbu Y) :

posisi awal tunjuk kesini

posisi kekanan 50px dan kebawah 10px

Kode :

<style type="text/css">
div.Translate
{
width:100px;
height:75px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
}
div.Translate#geser
{
transform:translate(50px,10px);
-ms-transform:translate(50px,10px); /* IE 9 */
-moz-transform:translate(50px,10px); /* Firefox */
-webkit-transform:translate(50px,10px); /* Safari and Chrome */
-o-transform:translate(50px,10px); /* Opera */
}
</style>
<div class="Translate">ini pada posisi awal</div>
<div class="Translate" id="geser">ini posisi kekanan 50px dan kebawah 10px</div>

2. Rotate
Dengan metode rotate , elemen berputar searah jarum jam pada derajat tertentu.
Nilai negatif , elemen berputar menjadi berlawanan arah jarum jam.

posisi awal tunjuk kesini

posisi 45 derajat

Kode :

<style type="text/css">
div.rotate
{
width:100px;
height:75px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
}
div.rotate#memutar
{
margin:20px;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */
}
</style>
<div class="rotate">ini pada posisi awal</div>
<div class="rotate" id="memutar">ini posisi 30 derajat</div>

3. Scale
Transformasi ini berfungsi mengubah ukuran sebuah elemen baik diperkecil atau diperbesar.
Dalam hal ini ukuran atau ketebalan border juga ikut berubah.

bentuk awal kemudian diperkecil tunjuk kesini

bentuk awal kemudian diperbesar tunjuk kesini

diperkecil

diperbesar

Kode :

<style type="text/css">
div.scale
{
width:100px;
height:75px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
}
div.scale#kecil
{
margin:10px;
transform:scale(0.8,0.8);
-ms-transform:scale(0.8,0.8); /* IE 9 */
-moz-transform:scale(0.8,0.8); /* Firefox */
-webkit-transform:scale(0.8,0.8); /* Safari and Chrome */
-o-transform:scale(0.8,0.8); /* Opera */
}
div.scale#besar
{
margin:60px;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-moz-transform:scale(2,2); /* Firefox */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-o-transform:scale(2,2); /* Opera */
}
</style>
<div class="scale">ini bentuk awal</div>
<div class="scale" id="kecil">ini diperkecil</div>
<div class="scale" id="besar">ini diperbesar</div>

4. Skew

Dengan metode condong , elemen berubah dalam sudut tertentu tergantung pada parameter yang diberikan , untuk horizontal (sumbu X) dan vertikal (sumbu Y).

posisi awal tunjuk kesini

posisi miring kesamping 20 derajat, kebawah 10 derajat

Kode :

<style type="text/css">
div.posisi-awal
{
width:100px;
height:120px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
}
div.posisi-awal#miring
{
margin:39px;
transform:skew(20deg,10deg);
-ms-transform:skew(20deg,10deg); /* IE 9 */
-moz-transform:skew(20deg,10deg); /* Firefox */
-webkit-transform:skew(20deg,10deg); /* Safari and Chrome */
-o-transform:skew(20deg,10deg); /* Opera */
}
</style>
<div class="posisi-awal">ini pada posisi awal</div>
<div class="posisi-awal" id="miring">ini posisi miring kesamping 20 derajat, kebawah 10 derajat</div>

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

CSS3 Transisi

Dengan CSS3 Transisi , kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya ke gaya yang lain tanpa menggunakan animasi Flash ataupun JavaScript.
Tapi sayang belum seluruh browser mendukung adanya fitur CSS3 Transisi ini. 

Berikut beberapa browser yang mendukung fitur ini :
1. Internet Explorer tidak lagi mendukung properti transisi.
2. Firefox 4 membutuhkan awalan -moz-.
3. Chrome dan Safari membutuhkan awalan -WebKit-.
4. Opera membutuhkan awalan -o-.

Ada 2 hal yang harus kita perhatikan agar CSS3 Transisi ini dapat bekerja dengan baik yaitu :
1. Kita harus menentukan Properti CSS.
2. Menentukan durasi efek.
Jika nilai durasi tidak ditentukan maka efek transisi ini tidak akan bekerja karena nilainya masih default yaitu "0".

Cara kerjanya kita menggunakan fitur mouse-over , yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat , dan ketika pointer mouse keluar dari atas elemen , maka bentuk elemen kembali seperti semula.

Silahkan anda arahkan pointer mouse anda pada kotak-kotak yang ada dibawah ini.

Contoh 1

Elemen yang menggunakan CSS3 Transisi

Kode :

<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.transisi:hover
{
width:300px;
}
</style>
<div class="transisi">Elemen yang menggunakan CSS3 Transisi</div>

Contoh 2
Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya , misalnya efek transisi ke samping sekaligus ke bawah.

Efek transisi melebar kesamping sekaligus kebawah

Kode :

<style type="text/css">div.transisi2{width:100px;height:100px;background-color:#e0e0e0;border:3px solid #3b5998;padding:10px;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div.transisi2:hover{width:300px;height:300px;}</style><div class="transisi2">Efek transisi melebar kesamping  sekaligus kebawah</div>

Contoh 3

Efek transisi melebar kesamping sekaligus tinggi menyempit

Kode :

<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.transisi3:hover
{
width:300px;
height:40px;
}
</style>
<div class="transisi3">Efek transisi melebar kesamping  sekaligus tinggi menyempit</div>

Contoh 4

Efek transisi membesar dan berputar

Kode :

<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s,
-webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s,
-o-transform 2s; /* Opera */
}
div.transisi4:hover
{
width:150px;
height:150px;
transform:rotate(720deg);
-moz-transform:rotate(720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
}
</style>
<div class="transisi4">Efek transisi membesar dan  berputar</div>

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

CSS Border-Radius

CSS Border - Radius memudahkan kita untuk merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung , bahkan dengan CSS Border - Radius kita bisa membuat sebuah lingkaran.
Masing - masing sudut bisa diatur nilain nya secara sendiri - sendiri , seperti bagian atas - kanan , atas - kiri , bawah - kanan , dan bawah - kiri.

Contoh 1 :

Kode :

<div class="Contoh_1" style="-moz-border-radius: 0 0 50px 0; -webkit-border-radius: 0 0 50px 0; background-color: #e0e0e0; border-radius: 0 0 50px 0; border: 2px solid #3b5998; height: 65px; width: 160px;"></div>

Contoh 2 :

Kode :

<div class="Contoh_2" style="height: 65px; width:160px;-moz-border-radius: 0 50px 25px 0;-webkit-border-radius: 0 50px 25px 0; border-radius: 0 50px 25px 0; background-color:#e0e0e0;border:2px solid #3b5998;"></div>

Contoh 3 :

Kode :

<div class="Contoh_3" style="-moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0 50px 50px 0; background-color:#e0e0e0; border-radius: 0 50px 50px 0; border:2px solid #3b5998; height:65px; width:160px;"></div>

Contoh 4 :

Kode :

<div class="Contoh_4" style="-moz-border-radius: 25px 50px 25px 50px; -webkit-border-radius: 25px 50px 25px 50px; background-color: #e0e0e0; border-radius: 25px 50px 25px 50px; border: 2px solid #3b5998; height: 65px; width: 160px;"></div>

Contoh 5 :

Kode :

<div class="Contoh_5" style="-moz-border-radius: 25px 25px 25px 25px; -webkit-border-radius: 25px 25px 25px 25px; background-color: #e0e0e0; border-radius: 25px 25px 25px 25px; border: 2px solid #3b5998; height: 65px; width: 160px;"></div>

Contoh 6 :

Kode :

<div class="Contoh_6" style="-moz-border-radius: 50px 50px 50px 50px; -webkit-border-radius: 50px 50px 50px 50px; background-color: #e0e0e0; border-radius: 50px 50px 50px 50px; border: 2px solid #3b5998; height: 70px; width: 70px;"></div>

Catatan :
Ganti tulisan warna biru sesuai keinginan anda.

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!