Cara Membuat Kotak Script Highlight Html Css Html5 JQuery JavaScript Pada Blog







Cara Membuat Kotak Script Highlight Html,Css,Html5,JQuery,JavaScript Pada Blog :
Pembahasan pada kali ini ialah cara pembuatan kotak tempat kode html,Javascript untuk blog,dengan tampilan berwarna hitam pada backgroundnya dan teks yang berwarna hijau.

Iya ,ini sering di gunakan oleh Blog master dalam menuangkan sebuah tutorial yang selalu berkaitan dengan Template Html Css JavaScript dalam upaya membangun sebuah Blog.

Memang jika di lihat dari penampilannya,Blog akan terlihat lebih Profesional dalam menambahkan kode html yang di sajikan.

Mungkin juga dengan tampilan yang begini bisa membuat para pengunjung suka dengan tampilan blog yang di tawarkan atau di gunakan.

Untuk di ketahui ,Pembuatan kotak Script pada blog dapat juga di lakukan dengan menggunakan Kotak script yang biasa dengan tampilan Border lampiran biasa,dan ada juga dengan menggunakan mode scrol.Seperti yang telah di ulas di postingan sebelumnya :Cara Membuat Kotak Script Border Biasa Dan Mode Scroll

Namun pada kesempatan postingan kali ini ,akan menyajikan kotak script yang berbeda dengan sebelumnya yaitu dengan sebutan Kotak Script HighLight,Yang mungkin maksud kalian adalah seperti gambar di bawah ini.


Bagaimana? Apakah ini yang kalian ingin gunakan di postingan blog kalian?
Kalian bisa mendapatkan kode pembentuk kotak area seperti di atas,Jika kalian tertarik ingin memasangnya pada blog kalian,silahkan simak langkahnya di bawah ini.

Cara Membuat Kotak Area Copy Paste Highlight Scroll Pada Blog

OKEY,berikut ini adalah cara atau kode html yang perlu sobat Bloginjase pasangkan pada bagian template blogger kalian.langkah-langkahnya adalah sebagai berikut.

  • Pertama silahkan kunjungi Blogger,Login dan menuju Dasbhord tentunya.
  • Yang kedua ,langsung saja guys,Pilih theme dan klik Edit Template.
  • Gunakan CTRL F dan ketikan ]]><b:skin> atau </style>
  • Jika sudah ,maka copy kode di bawah dan tempelkan tepat di atas tag ]]></b:skin>
  • Jika sudah ,langsung klik save theme.
Copy kode html di bawah ini dan tempelkan di atas tag ]]></b:skin>

/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#ffffff;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#ffffff;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
code {font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}
code{color:#BC587E}
pre mark,code mark,pre code mark {background-color:#3498db;color:#fff;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#22A7F0;box-shadow:inset 0 0 0 1px #ffffff;}

Jika kalian sudah menempelkan kode di atas,Maka langkah selanjutnya ialah cara penerapannya dalam menulis sebuah posting,agar kode di atas bisa berfungsi.dengan cara sebagai berikut:
  • Buka dasbhord blogger
  • Klik new entri
  • pilih Mode HTML dan paste kode Di bawah ini
  • Kemudian jika sudah di pasang,klik mode compose lagi.
  • masukan teks anda atau kode html yang ingin di publikasikan,dengan catatan menghapus isi "Isi Html Sobat disini"

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">

Isi HTML sobat di sini

</pre></code>






Nah jika sudah di copy.kode di atas dapat di masukan hanya lewat menulis sebuah postingan,Klik html ,paste kode di atas,klik mode compose lagi dan pastekan kode html.Mudah banget kan geng?

Tidak usah panjang lebar,itulah kode html yang bisa kalian gunakan untuk membuat sebuah kotak script berborder sangat keren untuk blog tutorial Blogger dan ada tulisannya juga dengan Caption Html,Css,JavaScript Html 5 dan lain sebagainya.

Tentunya kotak script ini bisa di scroll bawah dan atas.pokoknya di scroll sudah.hehe Cukup mudah kan dalam membuat kotak area copy paste Kode html Gighlight pada blog ?

Kalian juga bisa mengatur atau mengedit kode yang telah di tempelkan pada bagian tag ]]></b:skin> skin tersebut,seperti kode untuk warna dasar backgroundnya,Ukuran dan panjang bordernya dan juga tulisan HTML nya.


Artikel Terkait

Postingan populer dari blog ini

Begini Cara Memasang iklan penelusuran bersponsor google adsense Di Blog

Tutorial Full Flash Smartphone OPPO A37 ,Lupa Pola

Membuat Related Post Grid Untuk Template AMP Blogger

Cara Mengatasi Gagal Install Driver VGA Pada windows 7 All version

Cara Menampilkan Traffic Data Koneksi Internet Pada Laptop

Download Template Igniel versi premium Gratis

Cara membuat Link Model no follow dan Do follow

Cara Membuat Akun Google Adsense Hosted Terbaru

Tutorial Hack Nokia Symbian S60v3 Dan s60v5

Download Aplikasi Winloader Extreme untuk Windows 7