Tutorial Script Membuat Artikel Keren dan Nyaman Dibaca di Blogger
Tutorial lengkap membuat script artikel keren di Blogger agar tampil modern, nyaman dibaca pengunjung, responsif di semua perangkat, ringan diakses, dan SEO friendly supaya mudah terindex Google.
Tampilan artikel yang rapi dan nyaman dibaca sangat penting untuk meningkatkan pengalaman pengunjung website. Artikel yang ringan diakses juga membantu meningkatkan SEO karena Google lebih menyukai website dengan loading cepat dan desain responsif.
Banyak pengguna Blogger masih menggunakan tampilan standar yang terlihat monoton. Padahal, dengan sedikit script CSS modern, artikel bisa terlihat lebih profesional seperti website berita besar.
Pada tutorial ini, kamu akan belajar membuat tampilan artikel Blogger yang:
- Modern dan elegan
- Nyaman dibaca di HP maupun desktop
- Ringan dan cepat dimuat
- SEO friendly
- Responsif di semua ukuran
- layar
Script Artikel Blogger Modern
Masuk ke:
Tema → Edit HTML
Lalu tambahkan kode berikut sebelum </head>:
<style>
.artikel-keren{
font-family:'Arial',sans-serif;
background:#ffffff;
padding:25px;
border-radius:18px;
box-shadow:0 4px 15px rgba(0,0,0,.06);
line-height:1.9;
font-size:17px;
color:#333;
margin:20px auto;
max-width:850px;
transition:.3s;
}
.artikel-keren:hover{
box-shadow:0 8px 20px rgba(0,0,0,.10);
}
.artikel-keren h1,
.artikel-keren h2,
.artikel-keren h3{
color:#111;
line-height:1.5;
margin-top:25px;
}
.artikel-keren h1{
font-size:32px;
}
.artikel-keren h2{
font-size:26px;
}
.artikel-keren h3{
font-size:22px;
}
.artikel-keren p{
margin:18px 0;
}
.artikel-keren img{
width:100%;
height:auto;
border-radius:14px;
margin:15px 0;
loading:lazy;
}
.artikel-keren blockquote{
background:#f5f7fa;
padding:18px;
border-left:4px solid #0d6efd;
border-radius:10px;
font-style:italic;
color:#555;
}
.artikel-keren a{
color:#0d6efd;
text-decoration:none;
font-weight:bold;
}
.artikel-keren a:hover{
text-decoration:underline;
}
@media screen and (max-width:768px){
.artikel-keren{
padding:18px;
font-size:16px;
border-radius:14px;
}
.artikel-keren h1{
font-size:26px;
}
.artikel-keren h2{
font-size:22px;
}
.artikel-keren h3{
font-size:19px;
}
}
</style>
Cara Menggunakan Script Artikel
Tambahkan class berikut pada artikel:
<div class="artikel-keren">
<h1>Judul Artikel</h1>
<p>
Isi artikel tampil modern dan nyaman dibaca pengunjung.
</p>
<blockquote>
Contoh kutipan menarik untuk mempercantik artikel Blogger.
</blockquote>
</div>
Keunggulan Tampilan Artikel Modern
1. Lebih Nyaman Dibaca
Ukuran font dan jarak antar paragraf dibuat lebih ideal untuk mata pengunjung.
2. Responsif di Semua Perangkat
Tampilan otomatis menyesuaikan layar HP maupun desktop.
3. Loading Lebih Cepat
Menggunakan CSS ringan tanpa JavaScript berat.
4. SEO Friendly
Struktur heading dan desain bersih membantu Google memahami isi artikel.
Tips Membuat Artikel Cepat Terindex Google
Gunakan Judul Mengandung Keyword
Contoh:
“Tutorial Script Artikel Blogger Modern”
Gunakan Internal Link
Hubungkan artikel dengan posting lain di website.
Tambahkan Meta Description
Agar Google memahami isi halaman.
Optimasi Gambar
Gunakan format WebP agar ukuran lebih kecil.
Gunakan Template Ringan
Template cepat membantu ranking SEO.
Kesimpulan
Pelajari cara optimasi Blogspot agar cepat diterima Google Adsense dengan template ringan, SEO friendly, dan tampilan profesional.
0 Comments