Cara Menggunakan Script Encode Base64 di Blog tidak sesulit yang anda bayangkan. Berikut langkah-langkah dan contoh penggunaanya yang bisa anda jadikan sebagai pedoman
Setelah menconvert gambar anda menjadi kode base64, sekarang anda tinggal menyisipkan kodenya ke blog anda. Baik ke halaman postingan, ke header, ke footer maupun ke sidebar. Prinsip dasarnya sama. Jadi dimana pun anda ingin memasangnya tidak masalah. Yang penting, cara penulisannya tepat.
Oya bagi anda yang baru kesasar, sebaiknya baca dulu tulisan sebelumnya agar tidak bingung: Cara Meringankan Gambar dengan Encode Base64
Ada 2 cara penggunaan kode base64 yang bisa anda pilih
Pertama pada HTML:
Prinsipnya penulisannya sama dengan saat anda menulis tag image atau tag gambar seperti selama ini. Tag image isinya adalah URL image dimana gambar anda tersimpan. Maka begitu juga saat menggunakan kode base64. Anda tinggal mengganti URL image tersebut dengan kode base64. Skemanya lebih kurang seperti ini:
<img src="URL IMAGE"/>
<img src="KODE BASE64"/>
Contoh penerapannya akan menjadi seperti ini:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyVBnG9Zc-iTZjZxSrb69AcANzBHm51-4Jvpn3Aa8vqKm7n8pOqzKzpm0koFm8zrUauPNT1VtZGIlWboezijSsQsab1qLDzPQqehQpeLab2tGjxa4IN9k_SqmGIsKkAoWM8DtyhL7bxg/s1600/base64-blogernas.png"/>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU ..... ErkJggg=="/>
Kedua pada CSS:
Biasanya image pada CSS digunakan untuk sebagai background atau untuk mengisi sebuah space pada blog. Misalnya bagian body, header, widget atau space tertentu yang ingin diberi latar dengan sebuah gambar. Skema penulisannya lebih kurang seperti ini:
background:url(URL IMAGE)
background:url(KODE BASE64)
Contoh penerapannya adalah seperti ini
#header-wrapper{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyVBnG9Zc-iTZjZxSrb69AcANzBHm51-4Jvpn3Aa8vqKm7n8pOqzKzpm0koFm8zrUauPNT1VtZGIlWboezijSsQsab1qLDzPQqehQpeLab2tGjxa4IN9k_SqmGIsKkAoWM8DtyhL7bxg/s1600/base64-blogernas.png)no-repeat;
margin-top:25px;
width:100%;
}
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyVBnG9Zc-iTZjZxSrb69AcANzBHm51-4Jvpn3Aa8vqKm7n8pOqzKzpm0koFm8zrUauPNT1VtZGIlWboezijSsQsab1qLDzPQqehQpeLab2tGjxa4IN9k_SqmGIsKkAoWM8DtyhL7bxg/s1600/base64-blogernas.png)no-repeat;
margin-top:25px;
width:100%;
}
#header-wrapper{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEU ..... ErkJggg==)no-repeat;
margin-top:25px;
width:100%;
}
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEU ..... ErkJggg==)no-repeat;
margin-top:25px;
width:100%;
}
