Cara membuat judul header untuk tag pre

HTML sitemap Trik

Selamat malam sobat blogger kali ini saya mau berbagi tentang cara dan trik membuat judul pada tag pre demo lihat blog ini, biar blognya tambah keren dan terlihat bagus. untuk demo dan hasilnya silahkan lihat di blog ini. cara dan langkahnya cukup mudah silahkan saja ikuti trik di bawah ini.

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=&quot;CSS&quot;]:before{background-color:#006666}
pre[data-codetype=&quot;HTML&quot;]:before{background-color:#ffcc66}
pre[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]: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...

Artikel Terkait

  • Blogger template De-blue responsive
    Kembali saya share template blogger yang pernah saya pakai untuk anda yang sedang mencari template silahkan di gunakan dan di simpan sesuka anda tentunya tanpa syarat apa pun. template ini sudah di lengkapai beberapa tool yang sedang di minati para blogger yaitu Fitur template Valid HTML5 Responsive Top menu Hightlight current menu Thread …
  • Show hide related post (perbaharuan)
    Hallo para sobat blogger, masih semangat ngeblog kali ini saya mau share bagaimana cara dan trik membuat show hide pada related post di blog. triknya cukup mudah dan mungkin berguna untuk blog sobat agar tampil lebih ringkas dan beda dari yang lainnya... kira kira nanti hasilnya akan seperti berikut ini jika sobat ingin menerapkan trik s…
  • Sidebar Menu Accordion jQuery
    Apa fungsi menu accordion? Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat se…
  • Membuat show hide konversi kode dan emoticon
    Salam buat agan agin sobat blogger yang suka utak atik template, kali ini saya mau share cara membuat show hide konversi kode dan emoticon pada komentar blogger bagi anda yang sedang mencari trik ini silahkan saja untuk di simak. pertama buka editor template blogger lalu tambahkan css di bawah ini .box-konvert-kode-db { width:100%; …
  • Membuat satu link untuk dua url halaman
    Salam sobat blogger, iseng iseng ini share trik jadul yang mungkin udah tidak menarik tapi ya mungkin unik buat di gunakan yaitu membuat sebuah link tapi untuk membuka dua halaman dalam waktu bersamaan sekali klik. trus untuk apa? mungkin buat sobat yang menulis posting dan menyertakan beberapa sumber trik ini bisa di gunakan, saya juga menggu…
  • Memasang total post dan total comment
    Mungkin ini bukan trik baru, tapi saya coba terapakan kembali sedikit trik lama ini untuk menambah keunikan di dalam tampilan blog saya. memasang total post dan total comment bukan hal yang sulit, karena kita hanya perlu menggunakan sedikit script. script yang di gunakan seperti di bawah ini: Script untuk Total Posts <script style="text/j…

13 komentar


Link 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>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...