penomoran pada blockquote
Membuat Nomor Otomatis pada Blockquote - Banyak diantara rekan blogger menggunakan tag blockquote untuk berbagi kode. Walaupun sebenarnya saya lebih menganjurkan penggunaan tag pre dibanding blockquote. Selengkapnya sobat bisa baca : Mengenal Tag PRE.

Bagi sobat yang masih setia dengan penggunaan blockquote, saya coba membuat penomoran otomatis pada Blockquote. CSS nya saya modifikasi dari tutorial DTE dalam 'membuat penomoran otomatis pada tag PRE'.


Simpan kode ini di atas ]]></b:skin> atau </style>

blockquote {
  background-color:#eee;
  font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#444;
  overflow:auto;
  margin:0 0 1em;
  padding:1em;
}
blockquote,
blockquote .line-number {
  /* Ukuran line-height antara teks di dalam tag <blockquote> dan <span class="line-number"> harus sama! */
  font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  display:block;
  white-space:pre;
}

blockquote .line-number {
  float:left;
  margin:-1em 1em -1em -1em;
  text-align:right;
  background-color:#f1f1f1;
  color:#acacac;
  padding:1em .2em 1em .2em;
  border-right:1px solid #e0e0e0;
}
blockquote br {
display:none;
}

blockquote .line-number span {
  display:block;
  padding:0 .7em 0 1em;
}

blockquote .cl {
  display:block;
  clear:both;
}

Simpan kode ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName('blockquote'),
    pl = pre.length;
for (var i = 0; i < pl; i++) {
    pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
    var num = pre[i].innerHTML.split(/\n/).length;
    for (var j = 0; j < num; j++) {
        var line_num = pre[i].getElementsByTagName('span')[0];
        line_num.innerHTML += '<span>' + (j+1) + '</span>';
    }
}
//]]>
</script>

Semoga bermanfaat...

169 komentar

Siiipp pertamaxnya dapet kang heheheh....
Karena saya menggunakan blockquote untuk kode, sepertinya ini perlu dicoba hehehe :D

Balas

mangga cobian, ukur sarebu :D

Balas

saya yg nungguin dari pagi gak bisa dpt pertamax ^_^
nyimak aja dech, krn saya gak ngerti blockquote, hihihi ^_^

Balas

Koq pake BlockQuote? kan itu mah untuk kata2 kutipan :D ... tapi bebas sih suka suka ya kang, hasil demonya bagus jadi terlihat seperti Pre code, padahal blockquote..

Balas

Maksudnya biar ga terlalu banyak kode css-nya mas :D memanfaatkan yang ada hehehehe

Balas

masa.. tinggal klik aja pada post editor :)

Balas

tinggal ganti, pada CSS dan JS blockquote menjadi pre

Balas

kang knpa jadi berantakan gini ? > http://zetta-zone.blogspot.com/2013/10/cara-membuat-halaman-error-404-di-blog.html

Balas

Yoi kang sebenernya sih bebas, saya ijin pakai versi Pre nya yah, cukup stabil di RWD :D
nuhun ah

Balas

mangga kang.. tetep sih, standarnya pake PRE :D

Balas

coba edit lagi CSSnya.. perhatikan juga penulisan kodenya

Balas

Belum bisa jalan di saya kang hehehe mungkin bentrok sama copy kode, harus diutak-atik lagi... nunggu waktu nu pas ngutak-ngatikna hehehe :D

Balas

Kalau kodenya di copy angkan penomeranya ikut kebawa ya kang :)

Balas

JSnya udah kang.. tadi hilap can ka serat :)

Balas

engga.. coba aja, kecuali pake script auto highlight, saya belum nemu solusi

Balas

Kalau pakai boostrap bentrok, dicoba blog satunya lancar,.. ikuti standard sajalah saya sih,, oh iya kang maat oot, setiap saya buka blog ini koq ada peringatan dari antivirus saya ada trojan katanya.. file js gitu.. gpp itu?

Balas

boleh nih dicoba keren banget

Balas

masangnya cukup mudah ya kang, saya simpen kang, bisa dicoba nanti kalo suatu saat pake blockquote

Balas

Nah artikel, baru ada dan baru saya lihat nih Kang,
Perlu di coba nih, jadi nantinya, scrip code pada artikel
Di blog kita, secara otomatis ada nomor nya apa gimana tuh Kang?

Balas

Kelihatnya jadi menarik yah Kang kalau script
Postingan nya bisa ada nomor nya, di praktekan Kang, terima kasih

Balas
Komentar ini telah dihapus oleh pengarang.

Maaf comments diatas salah tempat jadi saya yang hapus sendiri Kang
Maksudnya mau nanya script postingan Kang Ismet, bisa di gunakan
Di tag blockquote apa saja, apa gimana Kang..?

Balas

jd seperti kode di pengeditan html template ya, ada nomornya... cocok buat yang biasa pake blockquote, mantap :)

Balas

Penulisan code PRE di blog bagaimana kang? soalnya saya belum pernah memakainya :)

Balas

Maksudnya di blockquote itu nantinya ada nomor tampil berurutan atau gimana kang..masih belum mudeng juga saja...maaf lemot juga kali saya. Lihat di demonya juga hanya script saja

Balas

Gua banget yeuhh haha .. eh kang punten kumawantun shyntaxna ..nyuhunken widi sakantenan ...

Balas

wah sesama blockquote kang adhy hehe .. kalau dibikin berwarna jigana top pisan kang

Balas

oia kang, kl bikin static tanpa sidebar trus posisi item (mis: kontak) rata di tengah caranya gimana?

soalnya pake kode ini ada dipinggir item nya

<b:if cond='data:blog.pageType'>
<style>
.sidebar,.comments {display:none;}
#main-wrapper{width: 100%}
</style>
</b:if>

Balas

Wah keren kang jadi kaya dreamweaver.. izin coba :)

Balas

Wah, ternyata kang ismet share juga :D
Saya coba dulu kang ..

Balas

ikut ngomel ah.. eh.. salah, maksudnya ikut coment heheheh :-bd

Balas

hehehe...coba dicek lagi, itu dari script yang di encrypt

Balas

maksudnya blockquote akan berubah seperti pada demo apabila ditambah kode2 di atas. Jangan lakukan apabila tidak menyimpan kode pada blockquote

Balas

silahkan kang mur.. tapi mending pake tag PRE kalau bagi2 kode

Balas

iya otomatis, tidak usah menambahkan manual

Balas

Mkasih kang... ijin bookmark dulu hehehe :D ^_^

Comment back kang: http://central-shared.blogspot.com ^_^

Balas

ijin nyomot kodenya kang, lumayan untuk di pakai.

Balas

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#post-wrapper {width:100%;margin:0 auto}
#sidebar-wrapper, #comments {display:none}
</b:if>

Balas

tulis pada mode HTML
<pre>code yang sudah di convert</pre>

Balas

iya membuat nomor berurutan. tutorial ini hanya untuk yang menggunakan blockquote untuk berbagi kode, maka hasilnya blockuote itu seperti demo

Balas

ayeuna mah tos migrasi ka pre nya :)

Balas

iya mba.. wah jaqo DWnya nih :-d

Balas

iya sob.. soalnya banyak yang share kode pake blockquote

Balas

heuheu.. omelin aja yang komennya ga bener :)

Balas

ok sip kang, hatur nuhun :)

Balas

wah kotak komentarnya kemarin di tutup jadi sepi deh!
- sekarang di duluin pertamax! :D
- salam damai aja :-d

Balas

Yowiss dah gk ada peringatan :D , oh iya kang, kalau ada reset css pre text nya panjang misalnya tidak overflow, urutan nomer2nya jadi tiban tibanan.. hehe bahasanya yaah wkwk, kalau ada overflow lancar sih, coba deh demonya kang ismet pakai script js yang panjang textnya.. maaf ngerepotin :D

Balas

Oh begitu yah Kang.? terima kasih atas ketenganya Kang

Balas

muhun kang hehe .. rada kasep gening si pre teh

Balas

memeh ngopi amengan hela kadieu ah ........

Balas

Oh gitu ya Kang..OK makasih atas penjelasannya ini

Balas

iya sih.. harus pake overflow, soalnya penomoran tiap baris, bukan berdasarkan syntax :)

Balas

Nahh...ini bukan Premium lagi Kang tapi Pertamaxxxx..maxx..maxx..maxx..langsung saya jemput..hahahahyyyyyyy

Balas

Mantap kang ismet kalau pengen dipasang number targetnya juga bisa tapi mungkin dengan penambahan css tapi ini memang mantap kang otomatis :-d :-d :-d

Balas

ta ade leng maksud dgn profil nan . . . oke nA laki mantap

Balas

kang kalau tutorial untuk menambah :) atau (y)

bantu tuntasin donk :)

Balas

kode ini sudah pernah saya coba tapi gak bisa Kang, kapan-kapan saya coba lagi, makasih... :)

Balas

kalau cara ini gagal mungkin perlu mencoba syntaxhighlighter mbak Ana :)

Balas

berkunjung Kang :) thanks bwt tipsnya :)

Balas

Kang ismet minta dong script recent komennya yang loceng :D
di tunggu di --> starcross1st@gmail.com

Balas

Nice gan. Tutorialnya keren juga,

Balas

siap kang.. punten teu dijamu :)

Balas

iya sob..pernah lihat di dte

Balas

Keren kang, tapi saya kurang berpendapat dengan artikel ini :p, seharusnya kan blockquote digunakan pada kata yang di Kutip , bukan untuk code :p, tapi itu semua selera kita masing-masih sih :D

Balas

ya.. ga dibaca nih.. coba baca dari awal :P

Balas

Maaf kang, saya cuma mau tanya, kalo blockquote nya di ganti dengan tag pre apakah bisa kang??

Balas

susah buatnya kayak lonceng punya kang ismet?
-harus jadi master baru bisa buat :D

Balas

bisa.. emang dasarnya ini kode penomoran untuk tag PRE, cuma saya modif aja, karena banyak yang share kode dengan blockquote

Balas

Wiih, Template mantapppppppp kang :)

Balas

Templatenya anyar keuneh euyyy, mantaaaaapp :D

Balas

Keren kang ismet buat iklan teks nya... mirip GA... :)
Boleh dibagi dong kang... heheee

Balas

nanti saya share.. episode ke 3 ya.. soalnya postingan selanjutnya masih tag pre :)

Balas

boseeen euy nu itu... paling buat blog lainnya :)

Balas

widih....tampilannya baru lebih minimalis dan color matching :)

Balas

saya kira salah masuk tadi, ternyata tidak hehehe.. berubah wujud rupanya kwkwkwkwk....

Balas

wuisss meni keren kieu kang .. pantesan beberapa hari tapa teh gelending mau berubah .. hebat kang

Balas

hehehhe... sami bosenan siga kang rully, menambah semangat blogging aja kang

Balas

Tapi punten kang aya nu rada te enakeun yeuh ningalna ..

http://2.bp.blogspot.com/-S2zLaJolQho/UnL1pebeu6I/AAAAAAAAERg/YnHRGKoeP7s/s640/kang+ismet+a.png

http://3.bp.blogspot.com/-splbqP3RBuQ/UnL1pyr6Y1I/AAAAAAAAERk/ZzfN4k4iJQ8/s640/kang+ismet+b.png

punten nyimpen link .. abdi nganggo layar 1024 x 768 asa rada kumaha kitu

Balas

ah si akang mah.. teu diklik button na nya?

http://1.bp.blogspot.com/-l5lX9KRXzV4/UnL4MbNZCZI/AAAAAAAAF_o/hNNH-xwPTRo/s1600/infoscr.png

Balas

To ka klik tadi teh .. maksud'y cuma disitu saja kang selebihnya oke

Balas

selebihnya masih banyak error di RWD kang.. lieur ngurus responsive teh :)

Balas

matak ditingalkeun we si responsive teh kang .. mending ngopi ah ayeuna mah kang

Balas

Baru lagi ... kereen .. dan iklannya keren abis . saya pikir GA loh beneran ... :)

Balas

widih kangismet ganti template lagi nih....
Yang lama kemana ? di Share apa di jual yah ??
aku tunggu yah kabarnya kang ye..
-salam damai-

Balas

Mantap kang, Makasih infonya
Nanti saya coba..

Balas

http://i.imgur.com/aX4y1lD.png

Gimana buat gituan bang ?? bantu saya donk... :D

Balas

Owalah, redesign.. makin mantap aja kang beneran deh.. gimana numbernya sudah fixed kah?

Balas

kayaknya bisa diatasi dengan CSS.. coba aj sob

Balas

mohon ijin kang... template akang yang lama aku pakai meskipun tidak seratus persen sama... semua terlahir dari inspirasi dari akang ni alamatnya http://arisfahruddin.blogspot.com/search/posts/default?max-results=5

Balas

Mohon ma'af sekali lagi,headernya masih menggunakan nama akang... pengan ganti tapi masih dalam desain... terima kasih

Balas

itu kategorinya clone bukan ??? y kang

Balas

Kalau template'y dah fix kasih tau ya kang hehe ...
soalnya mau protes masih ada tuh tombol infona hehe

Balas

cloning tapi baru bilang :P

Balas

siap... kalau udah fix dikabar2i :)

Balas

@aris.. silahkan buat sesuai konsep sendiri.. perasaan saya ga pernah membagikan template yang pernah saya pake, jangan sampai kejadian seperti ini http://blog.kangismet.net/2013/07/surat-terbuka-buat-admin-templateaxe.html

Balas

iya biar gak dikasih surat terbuka hehe

Balas

kalau tampilan luar saja ga masalah... semua script dicopy.. bukan minjem kalau gitu.. sampai, manipulasi komentar dan notifikasi... ANDA MALING

Balas

jago juga tuh orang niru tampilannya, saya juga gk 100% sama hehe, gw kapok dimarahin orang karena niru tampilannya 100% kwkwkwk :D

Balas

kalau niru kayak'y gampang sob .. cuma ya bakalan bikin enek yg punya ...

Balas

masih kayaknya sob haha tapi susah kok, kata ini "cuma ya bakalan bikin enek yg punya" apa maksudnya gw gk ngerti ?

Balas

maksud'y kalau kita ngclone .. yang di clone'y bakalan gak seneng / muak ..

Balas

Makin Bagus Aja Nih Templat :D

Balas

Tampilan blognya bagus mas, Flat UI Design ya :)

Balas

ya kang terima kasih.... ntar tak kembalikan lagi format template semula.... semua yang ane lakukan mengikuti tutorial dari akang. baik form komentar, script spam dan lain sebaigainya begaia informasi tutoial yang aku gunakan dari akang sebagai berikut :
1. http://blog.kangismet.net/2013/08/menampilkan-komentar-blogger-dan-google-plus-bersamaan.html
2. http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html
3. http://blog.kangismet.net/2013/06/hati-hati-spammer-dan-penipu.html
4. http://blog.kangismet.net/2013/10/blacklist-banned-komentator-blogger.html

Balas

sekarang banyak yang hilang, tapi pas pertama, kumplit semua isi blog saya. mana tutorial tentang notiikasi komentar di blog saya?
padahal anda sudah punya filenya :
http://mastercode.googlecode.com/svn/trunk/data/js/ntv.v2.js

Balas

wah wah wah Saya salut sama Kang Ismet ^_^
ini baru perfect desain :D

#sukses terus Kang Ismet :)

Balas

waduh kang blm muncul tp lg dicoba scriptnya hehehehe
quota limit :d

Balas

makin jozz tampilan templatenya...

Balas

TAMPILAN BARUNYA CETAR MEMBAHANA :D Eiitt jadi kaya syahrini :D

Balas

wah wah wah.... Templatenya mantab!....
keren kang!
- salam damai
[ mau tanya nih ]
kang kalo ngatasin blog yang kena algoritma google ntu g mana, gejalanya sih kata teman saya artikelnya semua ngak ke indeks dan blognya kacau di webmastertools!
gmana nih :D
- salam damai

Balas

wkwkwkkw.. masih jauh ke perfect

Balas

Kang Ismet ... Templatenya keren bangeeeeeeeeeeeet !!

Balas

Akhirnya, template yang kemarin masih didesain dan saya (lancang) masuk diterapkan juga. :-d Kang...

Balas

oke lah kang... artinya boleh ane pakai atau tidak kang ? sayang kalau di buang toh.. sekarang akang ganti pakai template yang baru... sayang kl template bagus tidak dipakai.... tapi bagaimanupun juga aku harus memperoleh ijin dari akang. Saya akui untuk notifikasi aku comot dari blog akang...

Please.......... boleh ya kang templateyang lama aku pakai. Terima kasih.

Template ini baru berani aku pasang ketika akang sudah berganti template. sebenarnya template blog tersebut berwana dengan tema hitam simple

Balas

tapi menurut saya sudah memang sangat keren :-bd

Balas

bukan marah.. lagi sibuk benerin template :) , soalnya panjang itu kodenya

Balas

ow, iya kgk apa..
udah jadi di blogku.. kok..
http://zetta-zone.blogspot.com/

Balas

Bener nih Sob tampilan template Kang Ismet keren
Lebih Responsiv Matching. Admin nya juga fresh hhhh

Balas

Tah mun urusan Ngopi mah hayuh pisan lah Kang Ruly, Liur mikiran Css javascript, asa kumaha getooo..? hkhkhhhhh

Balas

Datang lagi Kang, untuk komentar di artikel ini
Terma kasih Kang sudah berbagi

Balas

sore kang, saya mau tanya apa penomoran ini bisa diterapkan di hightlight.js ?

Balas

bisa.. coba liat di DTE.. itu pake highlight js ko

Balas

Bisa jika kita menekan tombol quote, akan muncul pre, saya pernah mencobanya di suatu template tetapi yang mana ya ? Kalau gak salah ada fungsi replace di CSS nya dekat body ? CMIMW YA ?

Balas

kang css dasarnya kan dari DTE .. javascript'y akang yg buat ?? penting kang soalna rada kehel ka hiji jelema ieu teh hehe

Balas

bae antep kang lah.. blog anu karitu patutmah bakal tumbeng

Balas

soalna aya artikel akang nu dimuat reshare ..tapi bersih teu aya link sumber pas dina notif : Jika mengutip harap berikan link yang menuju ke artikel Cara Pasang Blockquote Dengan Nomor Otomatis ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya

Balas

mana linkna.. sakalian urang bantai :D

Balas

kang ruly ngomporan kang :D bohong.. abdimah bageur, tara emam tikotok

Balas

wah kalau gitu ikut dong... harus demo besar-besaran nih :)

Balas

tah neng leony bde ikut mam tikotok cnah t lpat neng?

Balas

Jeng Leony ini orangnya cantik, tapi maenannya sereeeem :D

Balas

Tah kang didieu
http://www.kampungjasa.com/2013/11/cara-pasang-blockquote-dengan-nomor.html
tadi mah aya javascript .. tapi ayena mah dibuka kusaya naha lengit script java na ..duka lamun di tinggal ku akang mah tidinya ..

Balas

apal saya jalmina kang.. nu blogna pernah dibantai ku sayah yuditpress.. emut keneh? apal jalmina?

Balas

iya kang saya juga lg mengingat-ngingat soalna rada hese inget ka jelema nu pikasebelen teh wkwkwk..

Balas

ada yang bikin saya ketawa kang.. ternyata postingannya sudah diganti :P

Balas

kang, kalo penomoran otomatis pada tag pre milik nya highlight.js.?

Balas

wadaw..... =(
baru lihat..
rupanya perbedaan dari punya saya yang saya pasang sama postingan ini Beda Backgrund nya doank =D
hahahaa jadi pingin coba nih.... ERROR gak yah nantinya :P
Coba dulu kang. mana tau manjur nih blockquote nya. :ngakak:

Balas

kenapa ya terlalu lebar banget
padahal udh bener, ampe melebihi batas post ke kana semua ampe ga kelihatan,,
cara nya gimana kang..
nuhun :o

Balas

kok ane gag ada line numbernya ??

Balas

Kok gini ya kang? Solusinya bgaimna ya? =(
[img]http://4.bp.blogspot.com/-UQdRvPhzn0Q/U5nH41uMJOI/AAAAAAAACMA/Z9rBXjT8w0Q/s1600/zone-00778.png[/img]

Balas
Komentar ini telah dihapus oleh pengarang.

kalau pake line number kaya punya akang gimana caranya?
boleh minta tutornya?

Balas

Wah infonya sangat bermanfaat sekali gan. izin nyimak ya gan dan jangan lupa update terus artikelnya. Oh iya sob, kapan-kapan saya akan mampir lagi jika ada waktu luang. hehehehehe. jangan lupa di update terus ya blognya. salam kenal.
Cara Menggunakan Template Flat Ui
Thanks.

Balas

Poskan Komentar


×
Chat