Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Modifikasi Artikel Blog dengan HTML Sederhana

modifikasi artikel blog

Pada panduan blogging kali ini, saya akan membagikan tutorial sederhana yang saya anggap cukup berguna dalam menghias atau memodifikasi artikel 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 salah satu cara menulis artikel di blog melalaui 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> 

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.

Berikut beberapa pilihan style kode HTML untuk posting blog anda. Silakan dipilih dan sesuaikan dengan kebutuhan sendiri.

- Contoh Style 2

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 smoth 

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

Contoh Style 3 - Tuliskan teks Anda di sini

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

Contoh Style 4 - Tuliskan teks anda di sini

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

tulis teks anda di sini

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

Tulis teks Anda di sini

Style 6 Gunakan Kode ini:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #0e0a11; border-radius: 10px; border: 7px double rgb(255, 255, 255); padding: 10px; t-align: left;"><span style="color: white;"> Tulis teks Anda di sini</span></div>  

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

Semoga bermanfaat, silakan dipraktikkan sendiri.

Posting Komentar untuk "Cara Modifikasi Artikel Blog dengan HTML Sederhana"