Sabtu, 26 November 2011

86

Cara hanya menampilkan judul posting saja pada halaman depan blog

Update kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat tempat pada halaman depan sebuah blog. Biasanya cara ini digunakan karena artikel, sidebar ataupun konten yang ditampilkan sudah padat. Tapi ada juga yang hanya sekedar ingin tampil lebih praktis dan lebih meringankan pada saat loading ketika blog tersebut dibuka.
Untunglah ada sobat blogger yang mengeluhkan, bahwa kode css yang saya berikan tidak bekerja dengan baik.... terima kasih sobat. Dan ternyata setelah saya cek kembali, ada beberapa kode yang kurang, dan kini kode yang saya berikan dibawah sudah normal kembali, maka dari itu artikel ini saya update kembali ... bagi yang memerlukan trik ini silahkan anda coba dan saya pastikan akan berhasil tanpa keluhan.

Berikut gambar tampilan blog hanya menampilkan judul posting saja :
 

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode css di bawah ini dan taruh sebelum kode </head> :


6. Simpan Template.

Selamat mencoba ya... Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Ping your blog, website, or RSS feed for Free




Minggu, 20 November 2011

25

Cara buat Slide Menu horisontal dibawah posting

Menu horisontal ini terletak dibawah posting. Selain lebih fungsional karena letaknya dibawah posting, dilihat dari tampilannya menu horisontal ini memang sangat menarik. Sehingga tampilan web atau blog kita menjadi lebih bervariatif. Selain kelebihan diatas menu horisontal ini saya lengkapi dengan efek slide yang menggunakan fitur transition, agar tampil lebih dinamis.
Slide Menu horisontal ini saya buat dengan menggunakan kode CSS dan beberapa kode HTML tanpa menggunakan kode javascript ataupun jQuery, sehingga menu ini akan bekerja lebih ringan.


OK... bila anda berminat memasang tombol ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

8. Copy kode dibawah ini dan paste setelah kode diatas :
<style type='text/css'>

ul#menu-slide-cbwg .item-1 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmWEKtDyu7fOLxQUgUydbBE_hM4MXDMZxrokB1kgJtl_IXdUc0Cid_krWBPYYmb9xSIL1hPbu9kJU7BhOr4-qHeCobQ4vBMz43STDlmAqvbmQXTNv0W6WNReZ0xMVRxa9phvB_0i8gSple/s104/home.png);}

ul#menu-slide-cbwg .item-2 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqTJlXXSVTyBgRv03Z6cP4PjpYZ99XrMjXi_bGJmP10HmhW9KaCMpooBE4YGzklQvLBxJDP3K33rE-p-30nMD9pMyMNZr-TmPpcgY6GhUNkx3n6a6nwqVKoBSgtiz-y8FKmdHXJuCqIuyE/s104/id_card.png);}

ul#menu-slide-cbwg .nitem-3 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpzIxCqAS3vk0DmSs6MOR8gx9CUCdsGQhbuRv7nkkrVwm4pGXfBsyOgS9MLdr0bVFUv543VBUEbsVKlRARoT86NBHfXsPfLq_f1Z8NOuifmrDWct6tiODha8QvN-7QDEW6TDxb1xJELm2c/s104/promotion_new.png);}

ul#menu-slide-cbwg .item-4 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit2lzdvFwUarpB4PWuTjfT1MRCBNBXAPv-M0QnqQULsSALcueWVtsrl00ZtZdToNVJEWvBx_dxU2rxsgngTwHfRZNjSBU93ccamD88WVCPD38-e5qH5MiVwZaiMz5ix5rogovQW5lneD4Y/s104/rss.png);}

ul#menu-slide-cbwg .item-5 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiR2pMUh3bpvE2pVMod2Eusmi7J5Ek2t4xxeycEX0D61WtwDNaz1de7yziW78LhBaTYOQ3A1CtkKKjDPDTaw4sbKYEVrIq9twshfMtMfVap296WrrrHT4RENI4g9q6ztcSsELdYBfU6d6/s104/mail.png);}

</style>
Catatan :
  • Teks merah adalah ULR Icon yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda buat.
  • Sebagai refrensi, 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. Langkah selanjutnya cari kode di bawah ini atau yang mirip dengan kode ini :
<data:post.body/>

10. Copy kode dibawah ini dan paste setelah kode <data:post.body/>:
<ul id="menu-slide-cbwg">
 <li class="item-1">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-1</span></a>
</li>

 <li class="item-2">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-2</span></a>
</li>

 <li class="item-3">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-3</span></a>
</li>

 <li class="item-4">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-4</span></a>
</li>

 <li class="item-5">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-5</span></a>
</li>

</ul>
Catatan :
  • Bila sudah menggunakan fasilitas "read more" letakkan kode <data:post.body/> setelah kode yang kedua.
  • Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas
11.SIMPAN TEMPLATE.

Oh iya.... menu ini juga bisa diletakkan dimana saja seperti tab menu dibawah header.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free




Rabu, 16 November 2011

6

CSS3 Transisi

Setelah yang lalu kita belajar tentang Transformasi 2D, kemudian agar lebih menarik kita tambahkan dengan efek transisi. Dengan CSS3 transisi, kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya kegaya yang lain, tanpa menggunakan animasi Flash ataupun javascripts.

Tapi sayang belum seluruh browser mendukung adanya fitur CSS3 Transisi ini. Berikut beberapa browser yang mendukung fitur ini :
  • Internet Explorer tidak lagi mendukung properti transisi.
  • Firefox 4 membutuhkan awalan-moz-.
  • Chrome dan Safari membutuhkan awalan-WebKit-.
  • Opera membutuhkan awalan-o-.
Ada dua hal yang harus kita perhatikan agar CSS3 Transisi dapat bekerja dengan baik, yaitu kita harus menentukan properti css dan menentukan durasi efek. Jika nilai durasi tidak ditentukan, maka efek transisi tidak akan berpengaruh atau tidak bekerja, karena nilainya masih default yaitu "0".

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


Elemen yang menggunakan CSS3 Transisi

Berikut kode CSS3 dari contoh diatas :
<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.
<style type="text/css">
div.transisi2
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

Efek transisi melebar kesamping sekaligus kebawah

<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

berikut hasilnya :

Efek transisi melebar kesamping sekaligus tinggi menyempit

 Berikut contoh lain :
<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

Efek transisi membesar dan berputar

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free




Senin, 14 November 2011

2

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.

Dan 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 :
  • Internet Explorer 9 memerlukan awalan-ms-.
  • Firefox membutuhkan awalan-moz-.
  • Chrome dan Safari membutuhkan awalan-WebKit-.
  • Opera membutuhkan awalan-o-.
Sehingga bila kita menginginkan semua browser yang saya sebutkan diatas menampilkan efek transformasi yang kita buat, sebaiknya kita buat seluruh kode yang dibutuhkan setiap browser diatas.

Ok, berikut saya berikan beberapa contoh metode transformasi 2D :

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) :
<style type="text/css">
div.Translate
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

ini pada posisi awal
ini posisi kekanan 50px dan kebawah 10px



Rotate
Dengan metode rotate, elemen berputar searah jarum jam pada derajat tertentu. Nilai negatif , elemen berputar menjadi berlawanan arah jarum jam.
<style type="text/css">
div.rotate
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
}
div.rotate#memutar
{
margin:20px;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
</style>

<div class="rotate">ini pada posisi awal</div>
<div class="rotate" id="memutar">ini posisi 30 derajat/div>

Berikut hasilnya :

ini pada posisi awal
ini posisi 30 derajat/div>


Scale
Transformasi ini berfungsi mengubah ukuran sebuah elemen baik diperkecil atau diperbesar. Dalam hal ini ukuran atau ketebalan border juga ikut berubah.
<style type="text/css">
div.scale
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

ini bentuk awal
ini diperkecil
ini diperbesar


Skew
Dengan metode condong, elemen berubah dalam sudut tertentu, tergantung pada parameter yang diberikan, untuk horizontal (sumbu X) dan vertikal (sumbu Y) :
<style type="text/css">
div.posisi-awal
{
width:100px;
height:120px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

ini pada posisi awal
ini posisi miring kesamping 20 derajat, kebawah 10 derajat

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free




Kamis, 10 November 2011

4

Cara buat halaman Google plus untuk blog / website

Google telah memperkenalkan halaman untuk Google plus kepada kita yang memiliki brand, website ataupun blog. Hal ini sangat membantu anda yang berbisnis atau memiliki merek (brand). Dengan halaman Google plus, anda bisa lebih mudah terhubung dengan pelanggan ataupun fans yang  menyukai anda.

Halaman Google plus adalah Cara mudah untuk berbagi beberapa hal dengan siapa saja seperti halnya di kehidupan nyata.
Percakapan lebih baik dilakukan sambil bertatap muka. Gabung dengan hangout video dari komputer atau ponsel Anda untuk bersosialisasi, menonton video YouTube bersama, atau bertukar cerita dengan maksimal 9 teman sekaligus.

Google plus juga mempertimbangkan seluler, anda bisa Ngobrol berkelompok secepat kilat. Foto yang diunggah otomatis. Tampilan yang merangkum hal-hal yang terjadi di sekitar.

Bila anda berminat, silahkan anda ikuti langkah - langkah berikut :

1. Silahkan anda kunjungi Google Plus dan buat halaman baru anda.
2. Login dengan akun google anda.


3. Buat halaman Google plus anda, pilih kategori yang anda inginkan :


4. Bila anda pilih Produk dan merek, silahkan anda isi form yang disediakan seperti berikut :


5. Tunggu sebentar hingga muncul halaman profil publik anda, seperti berikut :



Anda bisa menggunakan Google plus sebagai laman anda. Pos, komentar, dan pemberitahuan untuk anda nantinya berasal dari laman yang anda buat.

6. Kemudian anda bisa tahu semua orang tentang laman baru Anda, melaluai form seperti pada gambar berikut :


7. Nah jadi.... silahkan anda kelola halaman google plus anda....

 


Selamat mencoba... dan semoga bermanfaat untuk anda semuanya....amiin.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Mohon jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Ping your blog, website, or RSS feed for Free




Minggu, 06 November 2011

35

Cara Membuat Link Dalam Satu Halaman

Membuat Link pada halaman yang sama sering disebut dengan nama Link jangkar atau Link anchor. Yang fungsi untuk menghubungkan atau membuka dokumen yang satu dengan yang lain pada bagian tertentu, baik itu dalam satu halaman yang sama maupun dengan halaman yang lain pada bagian tertentu pula.

Dalam penggunaannya Link ini sering dipakai pada daftar isi. Yaitu menghubungkan dari setiap daftar tersebut menuju data atau dokumennya masing - masing yang diletakkan pada bagian tertentu, dihalaman yang sama atau halaman yang lain.

Contoh A : ( Dokumen terdapat pada halaman yang sama )

Cara buat web gratis sangat mudah :
1. Cara dapat domain gratis
2. Cara dapat hosting gratis
3. Cara seting domain gratis dihosting gratis
4. Cara dapat template gratis
5. Cara Upload Template gratis
Silahkan anda coba klik Link - link diatas.

Contoh B : ( Dokumen terdapat pada halaman lain )

Cara buat web gratis sangat mudah :
1. Cara dapat domain gratis
2. Cara dapat hosting gratis
3. Cara seting domain gratis dihosting gratis
4. Cara dapat template gratis
5. Cara Upload Template gratis
Silahkan anda coba klik Link - link diatas.

Penggunaan lain, biasanya digunakan pada web yang mempunyai halaman panjang kebawah, atau pada artikel yang sangat panjang. Sehingga link seperti ini sangat diperlukan untuk memudahkan pengunjung apabila ingin kembali pada bagian atas atau bagian tertentu tanpa harus capai menggeser scroll mouse terus menerus.

Contoh :
Silahkan anda coba klik Link dibawah ini :
KEMBALI KEATAS

Cara membuatnya sangat mudah. Bila anda berminat, silahkan anda ikuti langkah - langkah berikut :

A. Ling anchor pada halaman yang sama :

1. Buat ANCHORNAME seperti berikut ini :
<a name="ANCHORNAME-1"></a>


Kata ANCHORNAME-1 bisa anda ganti terserah anda, yang terpenting setiap anchorname seperti ID yang harus berbeda nama. Kemudian letakkan anchorname tersebut tepat (diatas atau sebelum) dokumen atau bagian yang akan di tuju. Sebagai contoh, anchorname saya letakkan pada bagian paling atas artikel ini.

Perhatikan penulisan berikut :
<a name="ANCHORNAME-1"></a>Membuat Link pada halaman yang sama sering disebut dengan nama Link jangkar atau Link anchor. Yang fungsi untuk menghubungkan atau ....bla... bla... bla...

2. Langkah selanjutnya, buat Link seperti berikut ini :
<a href="#ANCHORNAME-1">KEMBALI KEATAS</a>
Catatan : Tambahkan tanda "#" sebelum anchorname.

3. Silahkan anda taruh pada bagian paling bawah atau terserah kebutuhan anda.

Contoh :
Silahkan anda coba lagi klik Link dibawah ini:
KEMBALI KEATAS

B. Ling anchor pada halaman yang berbeda, dan Link mengarah pada bagian tertentu :

1. Buat ANCHORNAME seperti berikut ini :
sebagai contoh anchorname saya beri nama "caradapathostinggratis"
<a name="caradapathostinggratis"></a>

2. Langkah selanjutnya, buat Link seperti berikut ini :

<a href="http://www.carabuatwebgratis.com/2011/03/cara-mendapat-hosting-gratis.html#caradapathostinggratis">Cara dapat hosting gratis</a>
  • ULR http://www.carabuatwebgratis.com/2011/03/cara-mendapat-hosting-gratis.html adalah alamat dokumen yang dituju.
  • #caradapathostinggratis adalah anchorname (jangan lupa tambahkan tanda "#")
  • Anda bisa tambahkan kode target="_blank" agar terbuka dijendela atau halaman baru. Caranya anda bisa baca artikelnya "Cara membuat Link Terbuka di halaman Baru"
Contoh :
Silahkan anda coba klik Link dibawah ini :
Cara buat web gratis

OK.... mudah kan ???

Oh ya... (hampir lupa...)

Berikut ini adalah contoh dokumen dari "Cara buat web gratis sangat mudah" pada halaman yang sama :


1. Cara dapat domain gratis
Domain merupakan nama yang kita pakai untuk website kita, misalnya: www.carabuatwebgratis.com . Untuk mendapatkan nama domain kita harus mendaftarkan nama domain pada penyedia layanan pemilihan nama domain. Untuk mendapatkan nama domain tentu kita harus membayar sejumlah uang. Tapi jangan khawatir didunia internet semuanya serba mungkin dan bisa kita lakukan. Sebab tidak semua domain berbayar, ada juga penyedia layanan domain yang gratis seperti co.cc, apalagi seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis. 
LANGKAH PERTAMA :  
Cara dapat domain gratis, silahkan anda baca DISINI.
KEMBALI KEATAS


2. Cara dapat hosting gratis
Hosting adalah perusahan penyedia ruangan atau space untuk website kita. Supaya website kita bisa dikunjungi orang, maka website tersebut harus mempunyai ruangan dagang. Dan ruangan tersebut harus bisa online agar orang dari tempat manapun bisa mengunjungi website atau toko kita sepanjang ada sambungan internet. Dan untuk penggunaan hosting, saya juga akan memberikan cara yang gratis.
LANGKAH KEDUA : 
Cara mendapat hosting gratis, silahkan anda baca  DISINI
KEMBALI KEATAS


3. Cara seting domain gratis dihosting gratis
Setelah dapat domain gratis dan hosting gratis, langkah selanjutnya tinggal seting domain dihosting gratis.
LANGKAH KETIGA :
Cara seting domain dihosting gratis, silahkan anda baca  DISINI
KEMBALI KEATAS


4. Cara dapat template gratis
Kita harus memilih bentuk tampilan dan fungsi template sesuai dengan tujuan yang sudah kita tentukan. Silahkan anda bisa lihat, ada ratusan bentuk template yang bisa anda pilih.
LANGKAH KEEMPAT :  
Silahkan anda pilih dan download gratis DISINI.
KEMBALI KEATAS


5. Cara Upload Template gratis
Nah bila ketiganya sudah kita selesaikan, maka website sudah bisa kita diakses termasuk olah orang lain dari tempat manapun di muka bumi sepanjang ada sambungan internet. Selanjutnya kita bisa langsung memanfaatkannya untuk menjalankan bisnis atau yang lain sesuai kebutuhan anda.
LANGKAH KELIMA :  
Cara Upload Template, silahkan anda baca  DISINI
KEMBALI KEATAS

Selamat mencoba... dan semoga bermanfaat untuk anda semuanya....amiin.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Mohon jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Ping your blog, website, or RSS feed for Free




Selasa, 01 November 2011

6

HTML Gambar

Dalam HTML, gambar didefinisikan dengan tag <img>. Dan Tag <img> berdiri sendiri, yang berarti bahwa tag ini hanya berisi atribut, dan tidak memiliki tag penutup.

Untuk menampilkan sebuah gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "source atau sumber". Nilai dari atribut src adalah URL dari gambar yang ingin ditampilkan.

Contoh sintaks untuk mendefinisikan gambar adalah sebagai berikut :
<img src="ULR GAMBAR" alt="NAMA GAMBAR"/>

URL menunjuk ke lokasi di mana gambar disimpan, sedang atribut alt diperlukan menentukan sebuah teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan. Atribut alt sangat berfungsi menyediakan informasi alternatif bagi gambar jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau yang lain).

Kemudian Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, maka browser akan menampilkan gambar sebagi berikut :
paragraf pertama
gambar
paragraf kedua

Mengatur Tinggi dan Lebar dari suatu Gambar
Atribut "height" dan atribut "width" digunakan untuk menentukan tinggi dan lebar dari suatu gambar. Dan secara default, nilai atribut yang ditetapkan adalah satuan piksel.

Jika atribut ini ditetapkan, ruang yang diperlukan untuk gambar dicadangkan saat halaman dimuat. Tapi, tanpa atribut-atribut ini, browser tidak mengetahui ukuran gambar. Sehingga mengakibatkan tata letak halaman akan berubah selama pemuatan (karena beban gambar).

Berikut ini adalah praktek yang baik untuk menentukan atribut tinggi dan lebar untuk gambar :
<img src="ULR GAMBAR" alt="NAMA GAMBAR" width="304" height="228" />

Menyelaraskan gambar
Berikut contoh HTML untuk menyesuaikan gambar dalam teks :
<p><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzhDkRi81XhbpovaY_WrKJZDm8WIfmqi-_DaS8swx3qtyRXU-8S4HtK_-S1_v8Y8Nqsv-BXhqoNp6AXOme6wvzc2Z1zkwr0hHdJbQ8UxU4jXby5Jgntoj9GvfkhtCH2utK36lk8eKrU_m/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" width=32 height=32 />Bila gambar terletak sebelum teks</p>

<p>Bila gambar ditengah dan <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzhDkRi81XhbpovaY_WrKJZDm8WIfmqi-_DaS8swx3qtyRXU-8S4HtK_-S1_v8Y8Nqsv-BXhqoNp6AXOme6wvzc2Z1zkwr0hHdJbQ8UxU4jXby5Jgntoj9GvfkhtCH2utK36lk8eKrU_m/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=bottom width=32 height=32 /> menggunakan align = "bottom".</p>

<p>Bila gambar ditengah dan <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzhDkRi81XhbpovaY_WrKJZDm8WIfmqi-_DaS8swx3qtyRXU-8S4HtK_-S1_v8Y8Nqsv-BXhqoNp6AXOme6wvzc2Z1zkwr0hHdJbQ8UxU4jXby5Jgntoj9GvfkhtCH2utK36lk8eKrU_m/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=middle width=32 height=32 /> menggunakan align = "middle".</p>

<p>Bila gambar ditengah dan <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzhDkRi81XhbpovaY_WrKJZDm8WIfmqi-_DaS8swx3qtyRXU-8S4HtK_-S1_v8Y8Nqsv-BXhqoNp6AXOme6wvzc2Z1zkwr0hHdJbQ8UxU4jXby5Jgntoj9GvfkhtCH2utK36lk8eKrU_m/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=top width=32 height=32 /> menggunakan align = "top".</p>

<p> Sebuah gambar setelah teks.<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzhDkRi81XhbpovaY_WrKJZDm8WIfmqi-_DaS8swx3qtyRXU-8S4HtK_-S1_v8Y8Nqsv-BXhqoNp6AXOme6wvzc2Z1zkwr0hHdJbQ8UxU4jXby5Jgntoj9GvfkhtCH2utK36lk8eKrU_m/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" width=32 height=32 /></p>

<p> <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzhDkRi81XhbpovaY_WrKJZDm8WIfmqi-_DaS8swx3qtyRXU-8S4HtK_-S1_v8Y8Nqsv-BXhqoNp6AXOme6wvzc2Z1zkwr0hHdJbQ8UxU4jXby5Jgntoj9GvfkhtCH2utK36lk8eKrU_m/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=left width=32 height=32 />Sebuah paragraf dengan menggunakan gambar. Dan atribut align "left" menyelaraskan posisi gambar disebelah kiri.</p>

<p> <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzhDkRi81XhbpovaY_WrKJZDm8WIfmqi-_DaS8swx3qtyRXU-8S4HtK_-S1_v8Y8Nqsv-BXhqoNp6AXOme6wvzc2Z1zkwr0hHdJbQ8UxU4jXby5Jgntoj9GvfkhtCH2utK36lk8eKrU_m/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=right width=32 height=32 />Sebuah paragraf dengan menggunakan gambar. atribut align "right" menyelaraskan posisi gambar disebelah  kanan teks ini.</p>

Berikut hasilnya :
LogoBila gambar terletak sebelum teks
Bila gambar ditengah dan Logo menggunakan align = "bottom".

Bila gambar ditengah dan Logo menggunakan align = "middle".

Bila gambar ditengah dan Logo menggunakan align = "top".
Sebuah gambar setelah teks.Logo

LogoSebuah paragraf dengan menggunakan gambar. Dan atribut align "left" menyelaraskan posisi gambar disebelah kiri.

LogoSebuah paragraf dengan menggunakan gambar. atribut align "right" menyelaraskan posisi gambar disebelah kanan teks ini.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free




BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI

Artikel Terbaru

POST POPULER

Entri Populer



BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.

CEO
BLOG MAS NOER

Noer cholis


Plosokuning V, Minomartani, Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"













Baca artikel "Manfaat Tukar Link"

LINK SAHABAT

LINK SAHABAT


CHAT

CHAT




TESTIMONI

Follow Us

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Recent Comments


top down