Membuat Tag Pre Keren

Membuat Tagpre Keren - Sebuah blog atau web tutorial tidak akan pernah lepas dari hal yang satu ini, pada pencarian Google banyak sekali jenis tagpre yang disajikan secara lengkap dengan cara pemasangannya oleh blogger-blogger Indonesia maupun Mancanegara, Pembuatan Tagpre itu sendiri mungkin ditujukan agar pembaca atau audiens sebuah blog dapat lebih cepat memahami serta membedakan antar kode yang disajikan baik itu CSS, HTML, jQuery dan yang lainnya.
Penggunaan Tagpre juga akan sedikit memperindah tampilan tempat sebuah kode disimpan, bentuk dari tagpre yang akan saya sajikan berikut ini adalah bukan hasil karya pribadi saya sepenuhnya, sumber kode tersebut saya ambil dari mas Taufik Nurrohman dalam blognya www.dte.web.id dalam artikelnya "Tema Vanila untuk Tag PRE" kemudia saya edit sedikit warnanya dan lagi-lagi saya menambah kode penomoran otomatis juga hasil karya Mas Taupik Nurrohman.
Dan jika sobat ingin mengetahui lebih jauh apa itu tagpre dan apa aja unsur-unsur didalamnya silakan sobat blogger kunjungi blognya Kang Ismet pada artikel tentang "Mengenal Tag Pre "
membuat tagpre keren, tagpre, pre tag, pre


 <pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre> 
 pre {
    background-color:#233948;
    font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    color:#333;
    border:1px solid #f1c40f;
    position:relative;
    padding:0 7px;
    margin:10px 0;
    overflow:auto;
    word-wrap:normal;
    white-space:pre;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    position:relative;
}

pre[data-codetype] {
    padding:23px 1em 7px 1em;
}

pre[data-codetype]:before {
    content:attr(data-codetype);
    display:block;
    position:absolute;
    top:0;
    right:0;
    left:0;
    background-color:#95a5a6;
    padding:0 7px;
    font:bold 12px/20px Arial,Sans-Serif;
    color:white;
}

pre[data-codetype="HTML"]       {border-color:#27ae60;color:#8FE6B3;}
pre[data-codetype="CSS"]        {border-color:#16a085;color:#7DDECA;}
pre[data-codetype="JavaScript"] {border-color:#2980b9;color:#91C8ED;}
pre[data-codetype="JQuery"]     {border-color:#34495e;color:#889CAF;}


pre[data-codetype="HTML"]:before          {background-color:#27ae60;}
pre[data-codetype="CSS"]:before           {background-color:#16a085;}
pre[data-codetype="JavaScript"]:before    {background-color:#2980b9;}
pre[data-codetype="JQuery"]:before        {background-color:#34495e;}


pre code,
pre .line-number {
  display:block;
  font:normal normal 12px/15px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#006699;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#ecf0f1;
  background-color:#243342;
  border-right:2px solid #3E5770;
  text-align:right;
  min-width:2.5em;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .line-number span:nth-child(even) {background-color:#243342}

pre .cl {
  display:block;
  clear:both;
} 
 <script type='text/javascript'>
(function() {
    var pre = document.getElementsByTagName('pre'),
        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> 

Demikian artikel tentang pembuatan tagpre keren, dan semoga artikel ini bermanfaat.

Berlangganan update artikel terbaru via email:

76 Responses to "Membuat Tag Pre Keren"

  1. tag pree blog ini juga keren banget nih...
    karena blog saya bukan tutorial, jadi nyimak dulu yah

    ReplyDelete
    Replies
    1. silakan mas, terimaksih udah nyempetin berkunjung

      Delete
  2. Wah boleh nih untuk di coba praktekan tagpree nya gan..

    ReplyDelete
  3. saya juga ikut nyimak aja nih mas. nggak apa2 ya, biar tahu apa itu tag pre :)

    ReplyDelete
  4. Benar benar keren sob perlu dicoba nich!
    tampilanya fresh banget :)

    ReplyDelete
  5. bagus mas Tag free nya mas membedakan css,html,maupun javascript top dah mas Alex..

    ReplyDelete
  6. Saya akan segera meluncur ke blognya Kang Ismet. Menuju TKP wusssssssssssssssss

    ReplyDelete
  7. mantap sob artikelnya sangat membantu,
    izin follow blognya ya!
    ditunggu follback

    ReplyDelete
  8. tag pre nya memang keren, dengan tag pre pengunjung akan mudah mempelajari dan merubah kode HTML, javascript atau css nya. terimaksih atas sharingnya. ijin untuk menyimpan.

    ReplyDelete
    Replies
    1. sam-sama mas, terimaksih kembali kunjungannya

      Delete
  9. memang dengan memasang tagpre pada posting yang mewajibkan pasang nomer urut dalam alenia ini selain terlihat rapi juga terlihat profesional ya,, posting yang menarik gan, tgx sharingnya..

    ReplyDelete
  10. Bisa di cobanih tutorial, makasih mas Alex

    ReplyDelete
  11. Masih belum paham saya mas soal tag pre soalnya masih pemula. Terimakasih atas sharing nya ya :)

    ReplyDelete
  12. Nyimak dulu tutorialnya gan..

    ReplyDelete
  13. saya belum pernah pake yang kaya begituan euy hehe :D makasih buat infonya kang Alex :)

    ReplyDelete
  14. Saya ikutan duduk manis ya mas
    Tapi liat demonya keren sih hasilnya :)

    ReplyDelete
  15. demo dan cara pemasangannya udah saya lihat,memang hasilnya top banget kang....best pokokna.

    o ya,kunjungan pertama nih kayaknya....salam kenal kang
    salam silahturrahmi

    ReplyDelete
  16. keren ueyy tag pre-nya bikin naksir.. bm dulu mas

    ReplyDelete
  17. untuk saya yang keren ini, ilmunya kelewat tinggi jadinya malah bingung, bedainjava, css, dan html azh sampe sekarang ngga ngerti....hebatkan saya ya?...;o)

    ReplyDelete
  18. Aku angkat tangan secara spontan aja deh kalo udah urusan begini...
    Ikutan nimbrung takut salah, hehe

    ReplyDelete
  19. sementara ini masih pake yg lama, jadi gimana kalo di save dulu buat kapan2, setuju toh ???

    ReplyDelete
  20. pelajaran saya belum nyampe sana

    ReplyDelete
  21. ikut lihat mantengin css mas, kode-kodenya bikin puyeng, siapa tahu dapet inspirasi judul blog, susahnya belajar css

    ReplyDelete
    Replies
    1. sebenarnya tidak terlalu susah mas yang susah itu lebih kepada Javascriptnya
      kalau css sebenarnya tinggal dikembangkan saja kalau kita sudah mendapatkan dasarnya maka tampilan akan kita desain dengan sendirinya menggunakan css dasar dengan sedikit pengembangan saja..

      tapi kalau jssangat rumit untuk segi penyusunannya mas... cuman pendapat..

      Delete
    2. wah mantap sekali apa yag mas imron papar kan wetul banget

      Delete
  22. wah ini memang benar^ mantap dan keren mas
    terima kasih sudah berbagi

    ReplyDelete
  23. bisa saya jadikan referensi mas joens.
    karena blog saya bukan genre tutorial dan saya hanya pengguna saja bukan penyedia tutorial blog.

    ReplyDelete
    Replies
    1. hehheh ok deh mas agus, saya juga baru belajar mas

      Delete
  24. bner2 keren yg satu ini..
    pngen coba sob..
    tpi kpan2 deh

    ReplyDelete
  25. Kerrreeen masss, warna fresh2... :D
    Tag pre memberikan kejelasan jga mana tag pembuka dan mana tag penutup.. Saya jga uda gunain tag pre tapi berbeda dngn yg atas.. :D

    ReplyDelete
  26. wah lila to kadie teh meni makin caem wae yeuh si akang ... mantapzzzz

    ReplyDelete
    Replies
    1. bisa wae ah, ngan trafik yeuh nurun, can normal deui

      Delete
  27. pokonya keren mas, maaf baru bisa berkunjung lagi

    ReplyDelete
  28. warna2x lembut, sama dgn dominan warna diblog sobat, adminx jg mgkn lembut kali ya hehe...., makasih *smile

    ReplyDelete
  29. Wahh mantab nih tutorialnya, manfaat banget bagi saya yang baru belajar ini. Makasih infonya.

    ReplyDelete
  30. datang berkunjung sambil bawa kopi ah hehe

    ReplyDelete
    Replies
    1. waduh maksih banyak nih, seruput dulu ah kopina

      Delete
  31. thanks infonya mas,ilmu baru neh buat pemula seperti saya

    ReplyDelete
  32. untuk JS na di taruh dmna yah mas

    ReplyDelete
  33. oh iya mas tempo hari saya ambil CSSnya untuk saya masukan ke template.. hehe
    haturnuwun tankyu mas alex, the tag pre is really cool

    ReplyDelete
    Replies
    1. iya mas tak apeee, gak usah sungkan malahan ane senang,,,,

      Delete
  34. Replies
    1. sama gana ane juga pemula, bahkan banyak yang lupa gara2 jarang ngeblog

      Delete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel