code icon
Membuat Judul Pada Tag Pre - Mungkin sobat pernah melihat beberapa blog yang menggunakan tag pre, mempunyai judul dan warna berbeda sesuai kode, baik CSS, HTML, XML, JavaScrip, JQuery dll.

Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi sobat yang ingin menggunakan nya, silahkan simpan kode ini di atas ]]></b:skin> atau </style>

pre[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:#5fbbba}
pre[data-codetype=&quot;HTML&quot;]:before{background-color:#4fc1eb}
pre[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]:before{background-color:#99c262}

Bagi sobat yang menggunakan tag blockquote apabila ingin menggunakan cara ini, tinggal mengganti CSS diatas dari pre menjadi blockquote.

Untuk penulisan, tambahkan data-codetype="JenisKode" seperti contoh di bawah ini

<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 */
dst...

83 komentar

Weleh-weleh tos gentos acuk deui kang hehehe tambih keren yeuh... janten kabita :D tapi sapertosna masih aya nu teu acan fix kang, sidebar melorot ka handap

Balas

Hehehehe iklanna keren euy...katipu deueuehh...sugan teh iklan Google :D

Balas

waduh belum banyak orang nih kang, izin mampir dan izin nyimak artikelnya!
[ ketigax ]
- salam damai :-d

Balas

sama kang saya jg memperhatikan yg itu hehe

Balas

Tampilan blognya makin keren kang ...

Balas

mau nanya sesuatu eh masih ada tombol info'na hehe .. pasti lagi berkutat keras nih si akang ..untuk mencapai kata PERFECT

Balas

abdi mah tukang nipu batur pan :)
nuhun ah sobat-sabit tos hadir di dieu... btw yangmelorot yang mana ya? tiasa nyuhunkeun screenshoot?

Balas

emang abdi rada.. sanes rada gelo nya :D rada perfectionist.. jauh kana perfect mah kang, nu mana cobi kakirangana kang.. ditampi ayeuna mah :)

Balas

MANTAP...pokoknya KEREN deh blog Kang Ismet....blogger Inspirtion :) ....

Balas

kalau di saya tidak melorot kang ..!!

Balas

Ini lebih komplit dari pada artikelnya Mas Taufik DTE. ;) keren...kerenn.......

Balas

ieu kang screenshotna
http://1.bp.blogspot.com/-nzxkFjS2U_E/UnR6H34uS0I/AAAAAAAAaaY/3wrK9K4ZpRg/s1600/Membuat+Judul+Pada+Tag+Pre+++Blog+Kang+Ismet.png

Balas

Kalau zoom-nya dikecilkan 90% baru sidebarnya naik ke atas.

Balas

nganggo layar resolusi sabaraha kang?

Balas

cuma liat yang vanilla style ko sob :)

Balas

pada saya kok normal ya kang ....

Balas

Perubahannya keren kang :D

Iklannya mirip G adsense..

Balas

MANTAP.....
wah tampilan anyar deui euy sippp kang, haturnuhun tutorna

Balas

bosenan abdimah kang :) ngarah berwarna we lah

Balas

Screen Resolution: 1280 x 1024

Balas

nuhun kang.. kantun memeres anu ukuran mobile na :) lieur

Balas

muntang kang kana cangkir kopi ..meh teu lier dai hehe

Balas

ayeeeeeeeee, ...
Keprok barudakkk

Balas

Muhun kang kade ah muntang sing pageuh hehehe :D

Balas

mouse mana mouse.. lieur yeuh :D

Balas

keren kang... ini sangat bermanfaat lho buat blog tutorial. kang mau tanya nih.. kalau background css warnanya bisa ga ditukar url gambar? soalnya saya mau buat tampilan kayak pocong, kuntil misalnya hehehe..

Balas

waduh kang saya mau tanya :D
- yang lahirin akang siapa, karyanya keren amat *_*
ibunya pasti orangnnya baik dan kreatife :D
- salam damai - salam damai sebesar besarnya :D
[ izin nongkrong :D ] - salam damai sebesar basarnya :-d

Balas

pasti kang ismet dapat kreasinya dari blogwalking ke mana mana jadi dapat dan bisa design se'bagus ini.
- saya jadi melebur liat templatenya [ meleleh @@, ]

Balas

jujur saya tidak mudeng gan ehehehe by the may kapan ganti template nih gan

Balas

yang pasti.. yang lahirin saya adalah perempuan terbaik se dunia :)

Balas

ga usah dipikirin deh kalau ga ngerti :) baru hari ini ko ganti tempe

Balas

semoga kang ismet sehat selalu!
- salam damai

Balas

sama..saya juga tidak mudeng dengan yang beginian. bicara tentang tempe, yang ini keren mas. ada notifinya segala. mau dong templatenya..iklannya juga nyaingin tampilannya GA. mantapp ..kreatif.

Balas

kang saya mau nanya bolehkan hehehe:) tapi maaf sebelumnya ini oot
saya mempunyai website tentang share aplikasi hape nah saya mau tanya cara ganti read more dengan download gimana? kaya di website akang yang http://www.gallerybloggertemplates.com/

Balas

Keren kang template na pull kolor...
Paduan warna na hebring euy,,, :-d

Balas

ni eweh isme-ismetna acan euy!
tutoriales-blogger.info/2013/10/notificaciones-google-modificado-para.html
ari sugan teh heueuh menang manehna, ngan curiga aya hitam, Komentar Baru blabla dina scriptna teh!
nyak geus theme jiga allblogtools!! saha tah, wauh didinya?
heuehuheuehuheueh

Balas

Template yang fresh dan baru ini...bisa juga kang Ismet buat iklan seperti adsense...hebat jempol buat kang Ismet..bisa dibagi tidak itu script seperti iklan google nya kang hehehe

Balas

bangsat dimana2 kang ben.. malah nu punya nama ge MyBloggerLab, prnah copas tulisan saya kang.. saya komplen, eh teu dipublis komena :P

Balas

bisa kang.. cuman lumayan ribet kodenya :)

Balas

Makin Keren Aja Tempenya Kang :D

Balas

wah ada pre pake judul berwarna, kode siap dipasang di blog ane yg lain... siipp :)

Balas

mr ben penjelajah dunia luar apal wae lah

Balas

oia nyari back to top ga ada, sepertinya belum dipasang :)

Balas

waduh kang widget na aya dihandap
kang kalo ngisi diposting nya kan misal pake blocquote mau masukin blocquote pertama diisi css nu kadua html kumaha tah kang rada oot ngerem pikiran teh pedah teu malmingan sigana mah :d

Balas

widget numana kang? mamingan ateuh kang :)

Pertama :
<blockquote data-codetype="CSS">..isi..</blockquote>
Kedua :
<blockquote data-codetype="HTML">..isi..</blockquote>

Balas

wah artikel yang mantapps kang, saya pernah liat artikel kang ismet yang menggunakan ini, kalo gk salah yang validasi HTML5 <b... :D

Balas

Kerenlah kang pokoknya pembaca akan sangat mudah mengenal css,jquery,javascript dengan adanya artikelnya kang ismet ini...

Balas

Makasih kang sharenya.. :)

Balas

Wih kang ismet tambah keren aja tutor nya. gak kalah keren sama baju barunya. hehe :D

Balas

Kang, ada tutorial tentang cara proteksi kode template yang bisa di copas lewat page source / inspect element ga? Makasih...

Balas

Kang ismet? Coba deh Berkomentar di http://mafiasitez.blogspot.com/2013/11/cara-membuat-auto-backlink-valid-html5.html?showComment=1383379988050#c4848629131592515302 dengan menekan tombol balas . Fungsinya bisa gak? Kok di Laptop saya , saya tekan balas malah gak aktif tombolnya :( mohon bantuannya :(

Balas

selama ini belum ada sih... walaupun ada software berbayar, ga efektif. saya pernah baca di salahsatu forum

Balas

bisa ko.. udah saya coba

Balas

ada software khusus gt y kang, waa berbayar uy :D ... tp blm tentu menjamin jg... okedeh, makasih kang atas info nya dan selamat berhari minggu :)

--peace--

Balas

kamari pake pc nu kotak kang hehe ayeuna mah tos sae :-D

waduh iah nuhun kang haha teu kapikiran :-D

Balas

hanya kebetulan dapet :D
ya kalo nge bloglang sudah empet, nggak tauk mo kemana lagi...wong sourcenya jg ke situ-situ juga :P

Balas

Keren banget nih tutornya....

Balas

Tambahan, margin -11px -13px 10px -54px pada elemen pseudo hanya berlaku jika padding elemen PRE adalah 11px 13px 11px 54px.

Kaget sama iklan di pojok kanan atas, tak kira AdSense bisa dibuat space kosong -_-

Balas

iya sama mas, kirain iklan mbah google, rupanya haha

Balas

Hahahaha , bangsat ? gak disensor :) ? paling gak ini membutikkan bahwa orang indonesia sangat kreatif, blogger kreatif sulit lo ditemui, yang kreatif itu kaya MBT, kangismet, DTE, sama bloggeritem

Balas

Balasnya jangan bahasa jawa ya ? meskipun saya orang jawa tetapi saya gak bisa :) , pengaruh zaman, bisanya bahasa cicak mlayu ( Melayu = Indonesia ) hehehee

Balas

Saran saya, supaya blog sulit diclone gunakan javascript yang sudah di minify dan obfuskasi (obfuscator(. Supaya kode sulit didobrak oleh beginner dan middle level beginner, kalau advanced sih ..... bisa hahahahaha pokoknya saya lihat di code sourcenya kang ismet terlalu rawan. Oh ya thanks script tombol search nya, nyari cara masang tombol CSE tetapi hasilnya muncul di page lain, kodenya saya ambil dari blog ini :)

Balas

Saya hanya memberi saran, apakah itu menggunakan javascript arkodasi atau apa namanya, perasaan mirip tapi lupa aku, jeda waktunya terlalu cepat, pusing lihat iklannya :)

Balas

okey sob.. saya coba sesuaikan :)

Balas

percuma sih... sebagus apapun kita encrypt tetep aja bisa dibongkar :D

Balas

wkwkwk... mastah taufik tertipu pada pandangan pertama :) btw.. thanks masukannya :-bd

Balas

wah mantap sob, ditunggu komentnya ^_^

Balas

Patudicob deh ( Patut di Coba )

hehehe :D

Atur Nuhun Kang, Anjeun Geus Berjasa Jeung Blog Abdi :)

Balas

kang, di blog saya judulnya ga kelihatan.

Balas

<pre data-codetype="CSS"><code>...........</code></pre>

Balas

saya tahu caranya mba :D

Balas

ane kok nggak ad border css , html ,javascripnya

Balas

maaf kang sedikit ralat , cara penulisan nya tambahin di mode html bukan compose biar para new by seperti saya bisa sedikit nyantul :D saya telah coba di mode compose gak bisa . sekali lagi maaf agak sok pinter :(

Balas

kang ismet jadi gini, saya udah coba semua tutorial dari kang ismet tentang tag pre. saya praktikan berkali2 ternyata memang tidak ada yang cocok dari semua artikel kang ismet. saya coba buat tag pre yang berjudul dan ada penomoran otomatis. mohon pencerahannya kang :D

Balas

Poskan Komentar


×
Chat