Welcome to www.winkamaru.com

Cara Memodifikasi Artikel Blog dengan HTML


Pada panduan blogging kali ini, saya akan membagikan tutorial sederhana yang saya anggap cukup berguna dalam menghias atau memodifikasi tulisan blog kita dengan style kode HTML sehingga tulisan di blog bisa menjadi lebih menarik.

Baiklah mari kita membahasnya dengan serius.

Panduan kali ini, sebenarnya adalah teknik khusus menulis artikel di blog dengan memanfaatkan mode penulisan HTML.

Dalam mode penulisan HTML ini, kita sebagai blogger memiliki ruang dan kebebasan untuk berekspresi dalam memodifikasi tulisan dengan menggunakan style kode HTML sehingga postingan menjadi lebih menarik. Misalnya: pada tulisan-tulisan berupa kutipan atau tulisan yang ingin ditandai secara khusus.

- Contoh Style 1

Contoh style 1 ini adalah penggunaan style kode HTML yang berguna untuk meletakkan teks postingan khusus ke dalam kotak lingkaran garis putus-putus.

Bagaimana membuat tulisan khusus seperti contoh style 1 di atas?

Caranya ternyata cukup mudah:

Langkah 1
Silakan menyisipkan kode berikut di postingan artikel blog anda, melalui mode penulisan HTML dan bukan pada mode Compose.

 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; border-radius: 10px; border: 2px dashed #6fa8dc; padding: 10px;">  
 Contoh style 1 ini adalah penggunaan style kode HTML yang berguna untuk meletakan teks postingan khusus ke dalam kotak lingkaran garis putus-putus.</div>  

Perhatian:
Silakan ganti seluruh tulisan yang berwarna merah dengan teks atau tulisan yang ingin anda letakkan di dalam kotak seperti contoh style 1 di atas!

Langkah 2
Selesaikan tulisan anda lalu publish.

menulis artikel dengan mode HTML

Berikut beberapa pilihan style kode HTML untuk posting blog anda. Silakan dipilih sendiri

- Contoh Style 2

Contoh style 2 ini adalah penggunaan style kode HTML yang berguna untuk meletakkan teks postingan khusus ke dalam kotak lingkaran garis putus-putus bersudut yang lebih smooth

Style 2 Gunakan Kode HTML ini:


 <div style="-moz-border-radius: 30px; -webkit-border-radius: 30px; background-color: white; border-radius: 30px; border: 2px dashed #6fa8dc; padding: 10px;">  
 Contoh style 2 ini adalah penggunaan style kode HTML yang berguna untuk meletakan teks postingan khusus ke dalam kotak lingkaran garis putus-putus bersudut yang lebih&nbsp;<i>smoth</i>&nbsp;</div>  

- Contoh Style 3

Dengan menggunakan contoh style 3, maka hasil dari penggunaan penulisan HTML akan menampilkan tulisan ke dalam kotak seperti ini.

Style 3 Gunakan Kode HTML ini:


 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">  
 Contoh Style 3 - Tuliskan teks anda di sini</div>  

- Contoh Style 4

Begini jika anda menggunakan pilihan style ke 4. Maka postingan blog atau tulisan khusus akan disisipkan ke dalam kotak seperti ini.

Style 4 Gunakan Kode HTML ini:


 <div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;">  
 Contoh Style 4 - Tuliskan teks anda di sini</div>  

- Contoh Style 5

Contoh style 5 bisa digunakan untuk memasukkan teks ke dalam kotak HTML yang ditampilkan seperti ini. Sangat bagus untuk memuat tulis quote atau tulisan yang ingin ditandai secara khusus.

Style 5 Gunakan Kode HTML ini:


 <div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">  
 tulis teks anda di sini</div>  

- Contoh Style 6

Pada penggunaan style kode HTML yang ke 6, maka tampilan teks akan dimasukkan ke dalam kotak seperti ini. Dengan garis warna merah muda besar berada di atas teks. Namun warna tersebut bisa diubah dengan mengganti kode warna pada style kode HTML-nya

Style 6 Gunakan Kode HTML ini:


 <div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">  
 tulis teks anda di sini  
 </div>  

- Contoh Style 7

Pada contoh style 7, penggunaannya disarankan untuk mengubah font atau huruf postingan di dalam kotak ini dengan warna putih. Sehingga tulisan bisa tampak dengan jelas.

Style 7 Gunakan Kode HTML ini:

 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #0E0A11; border-radius: 10px; border: 7px double #9A23E7; padding: 10px; t-align: left;">  
 Tulis teks Anda di sini</div>  

Mungkin hanya itu, silakan anda pilih dan gunakan style kode HTML yang anda butuhkan saja. Sehingga postingan blog anda menjadi lebih variatif dan unik.

Semoga bermanfaat, silakan dipraktekan sendiri.