pertama silahkan buka editor template blogger sobat dan cari kode
</style> atau jika sobat masih menggunakan struktur template defaul blogger cari kode ]]></b:skin> setelah ditemukan silahkan copy dan letakkan kode css di bawah ini di atas kode tadi:1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-15pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre[data-codetype="CSS"]:before{background-color:#006666}
pre[data-codetype="HTML"]:before{background-color:#ffcc66}
pre[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre[data-codetype="JQuery"]:before{background-color:#99c262}
untuk menggunakan atau memanggilnya di dalam posting, buat di pos editor kode berikut ini
1code-line:2-12code-line:2-23code-line:2-34code-line:2-4<pre data-codetype="CSS"><code>...........</code></pre> Untuk CSS
<pre data-codetype="HTML"><code>...........</code></pre> Untuk HTML
<pre data-codetype="JavaScript"><code>...........</code></pre> Untuk JavaScript
<pre data-codetype="JQuery"><code>...........</code></pre> Untuk kode JQuery
Silahkan hapus tulisan untuk css, html, js dan jquery yang ada di kode. jika anda ingin menambahkan lebih banyak judul untuk kode tag pre lakukan langkah seperti di atas dan jika setelah langkah semua diatas sudah sobat lakukan atur kembali css
1code-line:3-1margin:-11px -13px 10px -54px;
kode diatas menyesuaikan letak judul tag pre lebih ke kiri atau kanan.
semoga berhasil...
13 komentar
Wah keren nih sob, bermanfaat sekali bagi saya
BalasHapussilahkan di coba sob
HapusMantap sob..
BalasHapusok sob...
Hapuswah keren nih kalau bisa tampil otomatis getu
BalasHapusbelum spenuhnya otomatis, hanya saja lebih mudah pemangilannya
HapusKeren ya
BalasHapussilahkan di coba sis
Hapusboleh nih mas dicoba
BalasHapussilahkan sesuka hati gan...
Hapusluar biasa mas, kebetulan saya belum begitu paham tentang kode html, jadi izin belajar dulu ya
BalasHapussilahkan mbak
Hapussfdsfdfdf
BalasHapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>