Cara Membuat Link Membesar Ketika Disorot

Posted by noeroel arashi | 09:48 | , | 1 comments »

Cara Membuat Link Membesar dengan CSS

Cara membuat link membesar ketika disorot dengan mouse merupakan salah satu cara untuk mempercantik link. Link dapat dipercantik dengan CSS. Mungkin anda pernah menemui link dan ketika anda meletakkan/mengarahkan kursor pada tulisan link tersebut tiba-tiba tulisan link tersebut menjadi membesar. Kalau anda juga ingin membuat sebuah link yang dapat membesar ketika disorot mouse, berikut ini cara yang dapat anda lakukan.

<style type="text/css">
a.sundaboy-com:link {color:#ff0000;}
a.sundaboy-com:visited {color:#DF7401;}
a.sundaboy-com:hover {font-size:150%;}
</style>
<a class="sundaboy-com" href="http://belajar-html-lengkap.blogspot.com/" target="_blank">Belajar Html Lengkap</a>

Contoh: Arahkan kursor pada tulisan di bawah ini!

Belajar Html Lengkap

Keterangan:
  • Tulisan yang berwarna merah ganti dengan url link anda.
  • Tulisan yang berwarna hijau ganti dengan judul link anda.
  • Tulisan yang berwarna ungu dapat anda ganti dengan warna yang anda inginkan.

Selain dapat membuat link membesar ketika disorot, dengan CSS juga dapat membuat:
1. Link berubah warna ketika disorot klik di sini.
2. Link berubah warna tulisannya ketika disorot klik di sini.

Sekian Tutorial Blog-CSS mengenai cara membuat tulisan link membesar ketika diarahkan/disorot mouse. Mudah-mudah dapat memberikan manfaat dalam menambah pemahaman anda mengenai CSS atau blogging. Terima kasih atas perhatiannya dan saya sangat senang sekali apabila ada yang bersedia memberikan komentar pada tulisan saya kali ini. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Memberi Efek Menarik pada Gambar di Blog

Posted by noeroel arashi | 23:31 | , | 0 comments »

Cara Membuat Efek pada Gambar dengan CSS

Tutorial Bog-CSS| Cara memberi efek menarik pada gambar di blog dengan CSS merupakan salah satu tips untuk mempercantik tampilan blog kita. Mungkin di antara kita pernah mengunjungi suatu blog dan ketika kita mengarahkan kursor mouse pada gambarnya maka akan muncul efek seperti berputar, melengkung, bergetar, bergerak ke samping, dll. Sebagaimana kita tahu bahwa CSS tidak membuat loading di blog kita menjadi berat namun kode-kodenya dapat membuat tampilan blog kita semakin menarik dan keren, sehingga tidak ada salahnya kalau kita menerapkannya pada blog kita. Berikut ini ada beberapa contoh kode CSS yang dapat digunakan untuk memberi efek pada gambar di blog kita.

Ketika anda menulis postingan baru harus memilih mode HTML jangan mode Compose. Copy Paste kode <style type="text/css">KODE CSS</style> di bawah <head>. Ganti KODE CSS dengan kode css yang diinginkan. Untuk menampilkan efek kode CSS tadi pada gambar, setiap kali kita ingin memasukan gambar kita gunakan kode HTML <img class="#" src="URL GAMBAR" />.

1. Efek Fade In (membuat gambar menjadi blur lalu menjadi terang ketika disorot/diarahkan kursor mouse)

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

2. Efek membuat gambar menjadi melengkung lalu kembali ke seperti semula ketika diarahkan/disorot kursor mouse.

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

3. Efek Rotasi (membuat gambar berputar dan membesar ketika diarahkan/disorot kursor mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

4. Efek Skew (Membuat gambar menjadi berpendar ketika diarahkan/disorot mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

5. Efek gambar bergerak ke samping

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

6. Efek Fade Out (membuat gambar menjadi blur ketika diarahkan/disorot mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

7. Efek Bumping (membuat gambar bergerak ke atas ketika diarahkan/disorot mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

8. Efek melengkung (membuat sudut gambar menjadi melengkung ketika diarahkan/disorot mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

9. Efek bingkai bergaris ketika gambar diarahkan/disorot mouse.

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

10. Efek bayangan/shadow ketika gambar diarahkan/disorot mouse.

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

Sekian Tutorial Blog-CSS mengenai tips mempercantik tampilan gambar pada blogspot dengan menggunakan CSS yang bisa saya share kali ini. Semoga bermanfaat dalam meningkatkan tampilan blog anda. Pengunjung yang baik tidak ada salahnya memberi komentar setelah membaca postingan ini. Terima kasih atas perhatiannya. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Membuat Widget Kamera Tersembunyi di Blog

Posted by noeroel arashi | 18:53 | | 1 comments »

Cara Memasang Widget Kamera Tersembunyi di blogger

Tutorial Blog-CSS|Cara membuat atau memasang kamera tersembunyi seperti CCTV di blog merupakan salah satu cara untuk mempercantik tampilan blog. Tidak seperti kamera CCTV yang kita jumpai di mall atau kantoran tertentu, kamera tersembunyi di blog hanyalah sebuah widget yang dapat bergerak seperti kamera yang sedang mengintai sehingga tampilan blog menjadi lebih menarik. Jika anda tertarik untuk memasang gadget kamera pengintai ini pada blog anda silahkan ikuti cara berikut ini.

1. Login ke akun blog anda.
2. Pilih Desain lalu Klik Tata Letak.
3. Pilih Tambahkan Gadget.
4. Pilih HTML/JavaSript.
5. Copy Paste kode di bawah ini.

Hasilnya akan tampak seperti di bawah ini

Hasilnya akan tampak seperti di bawah ini

6. Klik simpan dan lihatlah hasilnya.

Demikian Tutorial Blog-CSS mengenai cara memasang gadget kamera CCTV di blogspot yang bisa saya bagikan kali ini. Terima kasih atas perhatiannya dan semoga dapat memberikan manfaat khususnya dalam mempercantik tampilan blog anda sehingga menjadi lebih menarik. Saya senang sekali jika ada yang bersedia memberikan komentar pada postingan saya kali ini. Sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Membuat Efek 3D pada Tulisan Blog

Posted by noeroel arashi | 14:24 | , | 0 comments »

Cara Membuat Efek Tiga Dimensi pada Tulisan Blog

Tutorial Blog-CSS mengenai cara membuat efek 3D (Tiga Dimensi) pada tulisan di blog dapat dilakukan dengan memanfaatkan CSS. Dengan Efek tiga dimensi pada tulisan dapat membuat tampilan blog menjadi semakin menarik karena tercipta variasi di antara tulisan-tulisannya. Bagi anda yang tertarik ingin menerapkan efek 3D pada tulisan blog anda silahkan ikuti cara berikut ini.

1. Copy Paste kode di bawah ini sebelum anda menulis tulisan yang ingin anda beri efek bayangan atau 3D

<h1 style=" color: #ff8000; font-size: 30px; text-align: center; text-height: font-size; text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd;"> EFEK 3D PADA BLOG DENGAN CSS </h1>

Maka akan terlihat seperti tampilan di bawah ini

EFEK 3D PADA BLOG DENGAN CSS

Keterangan: Ganti tulisan yang berwarna merah (EFEK 3D PADA BLOG DENGAN CSS) dengan tulisan yang ingin anda beri efek 3D.

2. Copy Paste kode berikut ini untuk tipe lain dari efek 3D pada tulisan di blog.

<h4 style="text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd; font-size: 50px; color: #666; text-align:center; text-height:font-size;">Belajar Html Lengkap</h4>

Hasilnya akan seperti tampilan di bawah ini.

Belajar Html Lengkap

Keterangan: Ganti tulisan yang berwarna merah (Belajar Html Lengkap) dengan tulisan yang ingin anda beri efek 3D.

Demikian postingan saya mengenai cara membuat efek text-shadow pada tulisan di blogspot yang bisa saya share kali ini. Mudah-mudahan dapat memberikan manfaat bagi anda dalam berkreasi di dunia blogging. Terima kasih atas perhatiannya dan saya senang sekali apabila ada yang bersedia memberikan komentar pada postingan saya kali ini. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Membuat Gadget pada Blog

Posted by noeroel arashi | 06:50 | | 0 comments »

Cara Menambahkan Gadget pada Blog

Tutorial Blog| Cara membuat Gadget atau widget pada blog bagi para pemula memang sedikit membingungkan, apalagi jika baru membuat blog. Gadget dapat digunakan untuk membuat atau menambahkan like box facebook, pengikut, page rank, recent post, arsip blog, twitter, histats, slide foto, jam, dll. Jika anda sekarang sedang mencari tahu tentang cara menambahkan gadget pada blog ikuti langkah-langkah berikut ini.

1. Login pada akun blogger anda.
2. Pada dasbor pilih Desain.
3. Klik Tata Letak lalu pilih Tambah Gadget.

5. Pilih salah satu gedget yang ingin anda tambahkan dengan klik tanda plus (+), atau jika anda ingin memasukan kode HTML tertentu pilihlah HTML/JavaSript.

4. Untuk yang memilih HTML/JavaSript masukan kode tertentu untuk membuat gadget yang anda inginkan, jika anda ingin memberi judul ketikkan judul pada kotak judul yang tersedia. Untuk yang memilih selain HTML/JavaSript dapat langsung meng-klik Simpan.

5. Klik Simpan jika sudah selesai.

Sekian Tutorial Blog mengenai cara memasang gadget atau widget pada blogger. Walaupun sederana tetapi semoga dapat bermanfaat. Terima kasih atas perhatiannya dan saya senang sekali jika ada yang bersedia memberikan komentar pada postingan saya kali ini. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Membuat Deskripsi Blog|Tutorial Blog

Posted by noeroel arashi | 12:56 | | 0 comments »

Cara Memberi Deskripsi Blog

Tutorial Blog|Cara membuat deskripsi blog bagi yang baru memasuki dunia blogging mungkin dirasa belum paham mengenai ini. Begitu pula dengan saya pada saat baru membuat blog saya bingung ketika ingin memberi deskripsi tentang blog saya. Memberikan deskripsi blog sebenarnya sangatlah mudah apalagi dengan tampilan blogger terbaru saat ini sangat memudahkan pengguna dalam beraktivitas blogging. Apabila anda sekarang sedang bertanya bagaimana cara untuk membuat deskripsi blog ikutilah cara berikut ini.

1. Login ke akun blogger anda.
2. Pilih Desain lalu klik Setelan maka secara otomatis akan terbuka setelan Dasar.
3. Klik Edit pada deskripsi lalu isikan deskripsi mengenai blog anda pada kotak yang disediakan, maksimal 500 karakter.
4. Klik Simpan Perubahan kalau sudah selesai mengisikan deskripsi.

Contoh: Lihat gambar di bawah ini! Arahkan kursor pada gambar untuk memperbesar gambar.


Sekian Tutorial Blog mengenai cara memberikan deskripsi pada blog blogspot yang bisa saya bagikan kali ini. Bagaimana mudah kan dalam membuatnya? Terima kasih atas perhatiannya dan saya sangat senang sekali apabila ada yang bersedia memberikan komentar pada postingan saya kali ini. Jika anda menyukai tulisan saya ini silahkan klik like pada icon like facebook yang sudah tersedia. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Edit Template Blog Tampilan Baru

Posted by noeroel arashi | 09:59 | | 0 comments »

Cara Edit Template Blogspot

Tutorial Blog >>Cara mengedit template pada blog dengan tampilan baru sedikit berbeda jika dibandingkan dengan blog tampilan yang lama. Belum lama ini blogger telah melakukan inovasi dengan merubah tampilannya untuk lebih memudahkan user dalam melakukan kegiatan blogging. Berikut ini cara mengedit template blog dengan tampilan baru:

1. Login ke blogger.com
2. Klik Template lalu pilih Edit Html. Jika masih memiliki Navbar maka klik Desain baru dilanjutkan dengan mengklik Template-Edit Html.

3. Klik Lanjutkan
4. Centang Expand Template Widget. Hal ini bertujuan apabila terjadi kesalahan maka akan mendapatkan pemberitahuan dari blogger.
5. Masukan kode script yang diinginkan untuk mengedit template.
6. Klik pratinjau sebelum menyimpan untuk melihat hasilnya.

7. Klik Simpan Template
8. Klik tanda silang untuk close dan lihat hasilnya.

Bagaimana mudah bukan? Sekian dulu untuk tutorial blog mengenai cara mengedit template blog dengan tampilan baru. Saya ucapkan terima kasih kepada para pengunjung yang bersedia menyimak dari awal hingga akhir tulisan saya ini. Mudah-mudahan dapat memberikan manfaat dalam menunjang kegiatan blogging anda. Sampai jumpa di postingan saya selanjutnya. Salam...

Subscribe to: Posts (Atom)