Cara Mendesain Konten Heading H1-H6 Artikel Blog

Tutorial Eksternal CSS - Membuat tampilan artikel Blog jadi menarik selalu ingin diterapkan hampir tiap blogger, Salah satunya tampilan Konten Heading H1-H6 pada Artikel Blog. Tapi kebanyakan dari Blogger mendesain Konten Heading H1-H6 nya menggunakan Kode inline CSS. Sangat disayangkan bila Nilai SEO sebuah Artikel menjadi buruk gara-gara penggunaan Kode Inline CSS ini.

Menurut beberapa Situs Web Tools SEO, kode Inline CSS ini mengurangi nilai Skor SEO. Untuk itulah pada artikel Cara Mendesain Otomatis Konten Heading H1-H6 Artikel Blog, penulis menggunakan kode eksternal CSS agar tidak memperburuk nilai SEO sebuah artikel sekaligus mendesain otomatis Konten Heading H1-H6 Artikel Blog.

Cara Meletakkan Kode Eksternal CSS di Template Blog

Untuk mendesain Otomatis Konten Heading H1-H6 artikel blog, kode eksternal CSS yang digunakan di letakkan di dalam pengkodean template blog. Lebih jelasnya ikuti petunjuk alur  cara meletakkan kode eksternal CSS dibawah ini.
1. Klik Bagian tema Blog kemudian Klik edit Html
2. Cari kode  </style> atau ]]></b:skin> yang ada di sebelum kode </head> atau &lt;!--<head/>--&gt;
3. setelah ketemu, letakkan kode eksternal CSS di bawah ini sebelum kode </style> atau ]]></b:skin>

/* Kode Eksternal CSS Cara Mendesain Otomatis Konten H1-H6 Artikel Blog*/
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6{display:inline-block;padding: 0px 20px 0px 0px;border-radius: 20px 5px 80px 5px;background:#E6E6FA;}

4. Setelah selesai meletakkan kode eksternal CSS, Klik Simpan.
5. Kalian tinggal menambahkan konten heading H1-H6 di artikel Blog kalian tanpa menambahkan kode lainnya. Setelah kalian publish artikel kalian, maka konten H1-H6 nya akan secara otomatis mendesain sendiri sesuai kode eksternal CSS yang diletakkan.

Cara menambahkkan konten Heading H1-H6 di artikel Blog bisa kalian lihat di gambar di bawah ini.



Pada gambar diatas, konten heading hanya tersedia h2-h4. Untuk membuat konten salah satu heading h1-h6, maka kalian menuju ke bagian html dan rubahlah konten salah satu heading h2-h4 yang sudah kalian buat sebelumnya menjadi salah satu h1-h6 yang kalian inginkan.

Sekian Artikel tentang Cara Mendesain Otomatis Konten Heading H1-H6 Artikel Blog, semoga bermanfaat – Tutorial Eksternal CSS.

Share this Cara Mendesain Konten Heading H1-H6 Artikel Blog article :

Facebook Twitter Google+

Artikel Terkait Cara Mendesain Konten Heading H1-H6 Artikel Blog

TENTANG PENULIS

Nanang Sugiarto

Penulis seorang Programmer Aplikasi Database Vb6 dan Blogger. Situs Web yang dibuat Penulis yaitu : Nanang Sugiarto WorkShop, Tutorial VB6 Sugiarto, Tutorial Microsoft Office Sugiarto, dan Seputar Pengetahuan Pangan.