Kode Script Penting Buat Blogger
# Kode Script Penting untuk Blogger
Berikut beberapa kode script penting yang sering digunakan oleh blogger untuk meningkatkan fungsionalitas dan tampilan blog mereka:
## 1. Responsive Meta Tag
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
## 2. Favicon
```html
<link href='https://example.com/favicon.ico' rel='icon' type='image/x-icon'/>
```
## 3. Google Analytics
```html
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y');
</script>
```
## 4. CSS Custom
```html
<style type="text/css">
/* Custom CSS */
.post-body {
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
}
</style>
```
## 5. JavaScript Custom
```html
<script type="text/javascript">
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
```
## 6. Breadcrumb SEO
```html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com"
},{
"@type": "ListItem",
"position": 2,
"name": "Category",
"item": "https://example.com/category"
},{
"@type": "ListItem",
"position": 3,
"name": "Post Title"
}]
}
</script>
```
## 7. Lazy Load Gambar
```html
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js"></script>
<script>
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy"
});
</script>
```
## 8. Dark Mode Toggle
```html
<script>
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
}
if (localStorage.getItem('darkMode') === 'true') {
document.body.classList.add('dark-mode');
}
</script>
```
## 9. Back to Top Button
```html
<style>
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
cursor: pointer;
}
</style>
<button id="back-to-top" onclick="topFunction()">↑</button>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("back-to-top").style.display = "block";
} else {
document.getElementById("back-to-top").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
```
## 10. Related Posts
```html
<script>
// Script untuk menampilkan related posts berdasarkan label
// Biasanya menggunakan API Blogger JSON
</script>
```
Pastikan untuk menyesuaikan kode-kode di atas dengan kebutuhan spesifik blog Anda dan selalu uji kode baru di versi draft sebelum dipublikasikan.