✍️ Kode css blogspot android style

style/skin Blogspot yang: SEO friendly Mobile friendly (Android-style UI) Responsive Ringan & cepat Desainnya saya buat flat minimalis seperti aplikasi Android, biar nyaman dibuka di HP. Kode ini bisa kamu tempel di Theme → Edit HTML → cari </head> → tempel di atasnya atau langsung di bagian CSS template.

<!-- ✅ Skin Blogspot Android Style --> <style> /* Reset dasar */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Roboto', sans-serif; background: #f4f6f8; color: #333; line-height: 1.6; font-size: 16px; } /* Header */ header { background: #2196f3; color: #fff; padding: 15px; text-align: center; font-weight: bold; font-size: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* Konten utama */ .main-content { max-width: 960px; margin: auto; padding: 10px; } /* Kartu posting */ .post-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 15px; transition: all 0.3s ease; } .post-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .post-card img { width: 100%; display: block; } .post-card .content { padding: 15px; } .post-card h2 { font-size: 18px; margin-bottom: 8px; color: #222; } .post-card p { font-size: 14px; color: #555; } .read-more { display: inline-block; margin-top: 10px; padding: 8px 14px; background: #2196f3; color: #fff; border-radius: 6px; text-decoration: none; font-size: 14px; transition: background 0.3s ease; } .read-more:hover { background: #1976d2; } /* Navigasi bawah seperti Android */ .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); display: flex; justify-content: space-around; padding: 8px 0; } .bottom-nav a { text-align: center; color: #777; font-size: 12px; text-decoration: none; } .bottom-nav a.active { color: #2196f3; } .bottom-nav i { font-size: 20px; display: block; } /* Responsive */ @media (max-width: 768px) { .post-card h2 { font-size: 16px; } .post-card p { font-size: 13px; } } </style> <!-- ✅ Navigasi Bawah (Android Style) --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <div class="bottom-nav"> <a href="/" class="active"><i class="fa fa-home"></i>Beranda</a> <a href="/search/label/Tutorial"><i class="fa fa-book"></i>Tutorial</a> <a href="/search/label/Tools"><i class="fa fa-wrench"></i>Tools</a> <a href="/p/tentang.html"><i class="fa fa-info-circle"></i>Tentang</a> </div>