Cara Membuat Efek Stabilo pada Tulisan di Blog

Posted by noeroel arashi | 02:50 | | 2 comments »

Tips Membuat Background Tulisan di Blogspot

Tutorial Blog| Cara membuat efek stabilo pada tulisan di postingan blog merupakan salah satu tips dalam membuat background pada tulisan di blog. Efek tulisan ini berfungsi untuk membedakan tulisan tertentu dengan tulisan yang lainnya, misalnya tulisan yang memuat kode HTML. Jika anda tertarik ingin menggunakan efek stabilo pada tulisan, anda tinggal gunakan kode berikut ini.

<span style="background-color:#FFFFB3;"> Ganti tulisan ini dengan tulisan yang ingin diberi efek stabilo</span>

Demikian Tutorial Blog mengenai cara membuat efek stabilo pada tulisan di blog yang bisa saya bagikan kali ini. Semoga bermanfaat dalam menambah wawasan anda. Pengunjung yang baik tidak ada salahnya memberi komentar setelah membaca postingan ini. Terima kasih atas perhatiannya dan sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Membuat Gambar Membesar Ketika Disorot

Posted by noeroel arashi | 22:55 | , | 1 comments »

Cara Membuat Gambar Membesar Ketika Disorot Mouse

Tutorial Blog| Cara membuat gambar membesar ketika disorot merupakan salah satu teknik dalam mempercantik postingan kita. Sebagaimana yang kita tahu bahwa dengan adanya gambar di postingan kita dapat membuat tampilan postingan kita terlihat lebih hidup dan enak dilihatnya. Akan tetapi terlalu banyak gambar juga membuat kita pusing dalam melihatnya selain itu dapat membuat loading blog kita menjadi lambat. Keuntungan dari membuat gambar dapat membesar ketika diarahkan mouse adalah dapat menghemat tempat dalam postingan. Selain itu juga dapat membuat tampilan di postingan kita terlihat lebih menarik dan profesional. Jika anda tertarik ingin menerapkannya dalam blog anda silahkan anda ikuti cara berikut ini.

1. Copy Paste kode di bawah ini pada tempat yang ingin anda beri gambar dalam postingan.

<style type="text/css">
border: none;
vertical-align: top;
</style>
<script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script><img border="0" class="expando" height="100" src="URL GAMBAR ANDA" width="100" />

2. Untuk mendapatkan url gambar, sebelumnya anda harus mengunggah gambar terlebih dahulu.
3. Ganti URL GAMBAR ANDA dengan url gambar yang tadi anda unggah.
4. Lihat hasilnya akan seperti gambar di bawah ini.

Silahkan Anda arahkan kursor mouse anda pada gambar di bawah ini !

Jika gambar yang ingin anda masukan lebih dari satu maka agar lebih praktis anda dapat gunakan cara sebagai berikut ini.

1. Copy Paste Script di bawah ini.

<style type="text/css">
border: none;
vertical-align: top;
</style>
<script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script>

2. Letakan script di atas di bawah <head>.
3. Lalu Copy Paste kode di bawah ini tiap kali anda ingin memasukan gambar

<img border="0" class="expando" height="100" src="URL GAMBAR ANDA" width="100" />

Jika anda ingin lebih praktis lagi maka Copy Paste sript pada No. 1 di bawah <head> yang ada pada menu Template Edit HTML. Untuk cara Edit Tempalate silahkan klik di sini. Selanjutnya lakukan seperti cara No. 3 nanti secara otomatis setiap anda memasukan gambar akan berlaku efek membesar ketika disorot mouse.

Keterangan:

  • Angka pada height="100" dan width="100" menunjukkan panjang dan lebar gambar dapat anda sesuaikan sendiri. Usahakan ukuran gambar asli lebih besar dari ukuran heigh dan width supaya efek membesarnya terlihat.
  • Ganti tulisan URL GAMBAR ANDA dengan url gambar yang ingin anda pakai.
  • <script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script> merupakan script yang membuat efek gambar menjadi membesar ketika disorot jadi jangan pernah anda merubahnya.
  • Semua cara di atas berlaku untuk penulisan mode HTML dan tidak berlaku untuk mode Compose.

Demikian Tutorial Blog mengenai cara membikin gambar membesar ketika disorot kursor mouse yang bisa saya share kali ini. Mudah-mudahan dapat memberikan manfaat bagi anda. Terima kasih atas perhatiannya dan saya sangat senang sekali apabila ada yang bersedia memberikan komentar pada postingan kali ini. Sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Membuat Keterangan Gambar dengan CSS

Posted by noeroel arashi | 17:59 | , | 1 comments »

Cara Membuat Gambar Membesar Ketika Disorot Mouse

Tutorial Blog-CSS| Cara membuat keterangan gambar di blog adalah salah satu tips untuk memberikan penjelasan mengenai keterangan gambar yang kita unggah agar para pengunjung dapat memahaminya. Namun yang ingin saya bagikan kali ini tidak hanya dapat memberikan keterangan pada gambar akan tetapi sekaligus membuat tampilan gambar menjadi lebih dinamis dan terlihat canggih. Ketika pointer mouse berada di area gambar maka keterangan gambar tiba-tiba muncul dari bawah dengan efek hover yang sangat menarik perhatian mata. Jika anda ingin mencoba menerapkan tips ini silahkan anda Copy Paste kode CSS berikut ini lalu tempatkan di bawah kode <head>. Cara ini hanya berlaku untuk penulisan postingan dengan mode HTML dan tidak berlaku untuk mode Compose.

Untuk menampilkan keterangan gambar dengan efek hover ini, setiap kali kita ingin memasukan gambar gunakan kode di bawah ini. Tentunya sebelumnya anda unggah gambarnya terlebih dahulu untuk mendapatkan url.

Arahkan kursor mouse Anda pada gambar di bawah ini!

MEMBERI KETERANGAN GAMBAR
Memberi keterangan gambar dengan CSS.

Bagaimana mudah bukan? Sekian Tutorial-CSS mengenai cara memberi keterangan yang menarik pada gambar di blog dengan CSS yang bisa saya bagi kali ini. Terima kasih atas perhatiannya dan saya senang sekali apabila anda memberi komentar setelah membaca postingan saya. Sampai jumpa dan salam...

Cara Membuat Gambar Menjadi Lingkaran

Posted by noeroel arashi | 19:53 | , | 0 comments »

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.

Tutorial CSS Tutorial CSS Tutorial CSS Tutorial CSS

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.

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.

<div id="mode1">
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBAR IKLAN/BLOG ANDA" border="0"/></a>
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBARIKLAN/BLOG ANDA" border="0"/></a>
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBAR IKLAN/BLOG ANDA" border="0"/></a>
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBAR IKLAN/BLOG ANDA" border="0"/></a>
</div>

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

Cara Membuat Kotak Berbayang dengan CSS

Posted by noeroel arashi | 01:51 | , | 1 comments »

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

Cara Membuat Tulisan Basmallah di Posting Blog

Posted by noeroel arashi | 01:45 | | 0 comments »

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.

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

Cara Membuat Widget Tombol Share di blog

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

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

Subscribe to: Posts (Atom)