Cara Membuat Script Box Responsive Untuk Tutorial Blog

Tutorial Blogger - Cara Membuat Script Box Responsive Untuk Tutorial Blog , Pernah melihat Script Box pada beberapa tutorial yg telah dibuat oleh para blogger? Biasanya blog yang memiliki rating tinggi akan membuat postingan dengan isi maupun tampilan yang semenarik mungkin. Salah satunya adalah Script Box yang mereka gunakan pada beberapa tutorial yang telah mereka buat.



Script Box ini akan mengemas Script yang akan mereka share kepada para pembaca, menjadi lebih elegan dan terkesan rapih. Sebenarnya Script Box sendiri adalah hanya sebuah Text Box biasa pada umumnya. Namun Text Box ini sangat sering digunakan untuk menyimpan sebuah material Script di dalamnya sebagai tutorial, yang nantinya dapat digunakan oleh para pengunjung blog. Terdapat beberapa jenis Box yang bisa kita gunakan. Namun Akira telah memilih salah satu Box, yang menurut Akira cukup elegan. Box yang satu ini memiliki fitur Scroll. Jadi, Box ini tidak akan memanjang ke bawah jika Script yang kamu masukan cukup banyak. Cara membuatnya cukup mudah. Ikuti tahap-tahap berikut:

1. Masuk Blogger,
2. Klik Template,
3. Klik Edit HTML,
4. Copy kode yang ada di kotak kode di bawah ini dan pastekan tepat di atas kode ]]></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:#79798d;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:#79798d;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',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}

code .token.important {font-weight:bold;}

code .token.entity {cursor:help;}

pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;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:#fff;box-shadow:inset 0 0 0 1px #eee;}


5. Simpan Template.

Cara Memanggil CSS Kotak Kode
1. Buat Postingan Baru
2. Pilih HTML (Bukan Compose),
3. Salin kode di bawah ke HTML tadi

<pre data-codetype="CSSku" title="CSS"><code class="language-markup">Kodeanda di sini......</code></pre>

Catatan :
- Ganti CSSku dan CSS jika ingin diganti namun hanya ada 4 yaitu CSSku dan CSS, HTMLku dan HTML, JavaScriptku dan JavaScript, jQueryku dan jQuery,

- Ganti tulisan kode anda di sini...... dengan kode yang ingin anda pasang di dalam kotak kode atau kotak script kode yang telah di buat. namun, sebelum anda memasukan kode anda usahakan untuk memparse kode terlebih dahulu.

4. Selesai.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Script Box Responsive Untuk Tutorial Blog "

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel