free article

Diposting oleh Networking di Rabu, Juli 25, 2012

Tips Membuat Efek Lingkaran Menjadi Bentuk Kotak Persegi

Tutorial Blog-CSS| Cara membuat gambar/foto menjadi lingkaran dan berubah menjadi kotak persegi apabila disorot mouse merupakan salah satu teknik yang menggunakan CSS dalam pembuatannya. Seiring dengan perkembangan dunia web semakin meningkat pula efek-efek menarik yang bisa disajikan, salah satunya yaitu membuat efek foto menjadi lingkaran dan ketika didekati pointer mouse akan berubah menjadi kotak persegi. Efek canggih ini dapat dimanfaatkan dalam foto di postingan atau dalam membuat banner iklan sehingga tampilannya menjadi lebih profesional dan menarik.

Sebagaimana yang kita tahu penggunaan gambar di blog akan membuat blog terlihat menarik dan tidak membosankan. Tetapi jika terlalu banyak menggunakan gambar maka akan membuat loading di blog kita menjadi lama. Oleh karena itu, bijaklah ketika membuat sebuah postingan agar selain dapat menyajikan postingan yang menarik juga tetap mempertahankan loading blog yang cepat sehingga pengunjung akan merasa nyaman ketika mengunjungi blog kita. Efek pada foto yang akan saya bagikan kali ini murni menggunakan CSS sehingga tidak membuat berat di loading blog. Gambar di bawah ini merupakan demo dari efek membuat gambar/foto menjadi lingkaran dan apabila diarahkan kursor mouse akan berubah menjadi kotak persegi secara tiba-tiba.

Arahkan kursor mouse Anda pada gambar di atas!

Apabila anda tertarik ingin mencoba menerapkannya pada blog, silahkan ikuti cara berikut ini:

1. Letakkan kode CSS berikut ini di bawah kode <head> ketika anda membuat entri baru (hanya berlaku pada penulisan mode HTML). Tempatkan di antara <style> dan </style>. Tetapi jika anda ingin menerapkannya pada banner iklan, langsung letakkan di atas kode ]]></b:skin>. Caranya pilih Template lalu Edit HTML.

#mode1 { margin: 0px; padding: 5px; text-align: center; } #mode1 img { margin: 0px 8px 4px 0px; padding: 3px; text-align: center; border: 3px solid #c0c0c0; -webkit-border-radius:70px; -moz-border-radius:70px; -o-border-radius:70px; border-radius:70px; -webkit-transition: all 0.45s ease-out; -moz-transition: all 0.45s ease-out; -o-transition: all 0.45s ease-out; transition: all 0.45s ease-out; } #mode1 img:hover { margin: 0px 8px 4px 0px; padding: 3px; text-align: center; border: 3px solid #c33f00; -webkit-border-radius:0px; -moz-border-radius:0px; -o-border-radius:0px; border-radius:0px; }

2. Setiap anda ingin memasukan gambar pada postingan gunakan kode di bawah ini, dengan catatan anda harus mengunggah gambarnya terlebih dahulu untuk mendapatkan url gambar. Untuk yang ingin menerapkannya dalam banner iklan langsung copy paste pada gadget caranya pada menu Tata Letak pilih Tambahkan Gadget. Setelah kodenya dimasukan Klik Simpan.

Sekian Tutorial Blog-CSS tentang cara membuat gambar menjadi lingkaran dan berubah menjadi kotak persegi ketika disorot kursor mouse yang bisa saya bagikan kali ini. Semoga bermanfaat dalam memperkaya wawasan anda. Pengunjung yang baik tidak ada salahnya memberi komentar setelah membaca tulisan ini. Terima kasih atas perhatiannya dan sampai jumpa lagi di postingan saya selanjutnya. Salam...

Diposting oleh Networking di Senin, Juli 23, 2012

Tips Membuat Kotak Berbayang dengan CSS

Tutorial Blog-CSS| Cara membuat kotak dengan efek shadow pada postingan blog tidak perlu menggunakan photoshop karena dengan CSS3 sudah dapat dilakukan. Tidak seperti pada Photoshop yang kita harus mengedit gambar menjadi mempunyai bayangan kemudian kita unggah di blog kita yang kadangkala membuat loading di blog menjadi berat, dengan CSS hanya memasukan kode tertentu efek bayangan pada kotak sudah dapat kita nikmati di blog kita. Selain itu tidak mempengaruhi berat loading.

Belajar membuat kotak berbayang dengan CSS 3

Kotak berbayang di atas merupakan salah satu demo yang memanfaatkan CSS dalam pembuatannya. Jika anda tertarik ingin menerapkannya pada blog anda silahkan ikuti cara berikut ini.

1. Copy Paste kode CSS berikut di bawah <head> ketika anda menulis postingan baru.

2. Setiap anda ingin menampilkan efek berbayang pada kotak, anda gunakan kode berikut.

<div class=shadow
Style="width:200px">
Belajar membuat kotak berbayang dengan CSS 3
</div>

Perhatikan baris box-shadow: 8px 8px 4px #0c0c0c; yang membentuk efek kotak berbayang. Property box-shadow memiliki empat parameter/atribut sebagai berikut.
1. Offset Horizontat Bayangan
8px seperti contoh berarti bayangan kotak bergeser sebesar 8 pixel secara horizontal ke sebelah kanan. Jika parameter bernilai negatif, bayangan akan tampil disebelah kiri kotak.
2. Offset Vertikal Bayangan
8px seperti pada contoh berarti bayangan kotak bergeser sebesar 8 pixel secara vertikal ke bawah. Jika parameter bernilai negatif, bayangan akan tampil pada atas kotak.
3. Radius Blur
Semakin besar nilai ini, bayangan akan semakin blur. Jika 0px, akan didapatkan bayangan yang solid tanpa ada efek blur. Pada contoh di atas digunakan radius blur sebesar 4 pixel.
4. Warna Bayangan
Pada contoh ditentukan warna bayangan adalah #0c0c0c.

Baris Kedua, yaitu background-color:#00ff00; berfungsi untuk mendefinisikan warna background.

Baris <div class=shadow style=”width:200px”> merupakan pemanggilan class .shadow dengan membatasi isi konten dalam div sebesar 200 pixel. Pemanggilan CSS dengan atribut style ini disebut dengan Inline Styles.

Sekian Tutorial Blog-CSS tentang cara membuat kotak berbayang pada postingan blog yang bisa saya bagikan kali ini. Semoga bermanfaat dan sebagai pengunjung yang baik tidak ada salahnya memberikan komentar setelah membaca tulisan di atas. Terima kasih atas perhatiannya dan sampai jumpa lagi di postingan saya selanjutnya. Salam...

Diposting oleh Networking di Senin, Juli 23, 2012

Tips Membuat Tulisan Basmallah di Posting Blog

Tutorial Blog| Cara membuat tulisan basmallah di posting blog dapat menjadi salah satu alternatif dalam menyajikan tampilan yang unik di postingan blog kita. Mungkin di antara anda pernah menjumpai tulisan bismillah di bawah judul postingan blog tertentu dan anda bertanya-tanya bagaimana cara membuatnya? kali ini saya akan membagikan caranya, silahkan copy paste kode di bawah ini di tempat yang ingin anda letakkan tulisan basmallah. Tips ini hanya berlaku untuk penulisan dengan mode HTML.

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{"type":3}'><span dir='rtl'>بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم</span></span></span></div><br/>

Hasilnya akan seperti di bawah ini.

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Catatan: Anda dapat merubah ukuran tulisan basmallah di atas dengan merubah font-size dalam kode misalnya menjadi 24px 26px 30px atau ukuran yang lainnya.

Sekian Tutorial Blog tentang tips membuat tulisan basmallah pada posting di blog blogspot yang bisa saya share kali ini. Semoga bermanfaat dan jangan lupa untuk memberikan komentar. Terima kasih dan sampai jumpa di postingan saya selanjutnya. Salam..

Diposting oleh Networking di Minggu, Juli 22, 2012

Tips Membuat Tombol Share yang Menarik

Tutorial Blog| Tips cara membuat widget tombol share facebook, twitter, google, myspace, MSN, yahoo dll. yang menarik di blog dapat memberi nilai tambah karena selain mempermudah pengunjung blog dalam melakukan share postingan yang mereka baca juga dapat menyajikan tampilan yang menarik bagi pandangan mata. Bagaimana cara membuatnya. Anda dapat mengikuti cara berikut bila anda ingin menerapkannya pada blog anda.

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. Lalu klik Simpan.

Hasilnya dapat anda lihat di bawah.

Sekian Tutorial Blog tentang tips cara membuat tombol share facebook, twitter, yahoo, google, myspace, MSN dll. di blog yang bisa saya bagikan kali ini. Semoga bermanfaat, jangan lupa untuk memberikan komentar jika anda selesai membaca postingan ini. Terima kasih dan sampai jumpa lagi di postingan saya selanjutnya. Salam..

Diposting oleh Networking di Minggu, Juli 22, 2012

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.

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

Diposting oleh Networking di Sabtu, Juli 21, 2012

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

.mode6 { opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; } .mode6:hover { opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1; }

KODE HTML