Cara Membuat Box Kotak Script Keren Lengkap di Blog

Cara Membuat Box Kotak Script Keren Lengkap di Blog

~ Halo sobat AS terutama kalian para Blogger kembali lagi ya dengan saya jelas Aldi Andreansyah , Alhamdulilah di hari dengan cuaca yang kurang mendukung ini atau gelap ini, saya masih di beri kesempatan jelas nya oleh Sang Maha Kuasa yaitu mengenai hal Blogger yang berjudul Cara Membuat Box Kotak Script Keren Lengkap di Blog .
Menambah Script di dalam kotak atau box memang sudah tak asing lagi dengan kalian para Blogger maupun wordpress dan mywapblog yang dimana hal ini untuk memudahkan kita membagikan tutorial tutorial nge blog dengan ada nya script berbasis HTML , Jquery , CSS , javascript bahkan script script lain nya atau sekedar teks biasa pun dapat di masukan dalam Box kotak script keren ini.
Box kotak script keren ini pun yang biasa nya dapat juga disebut box script syntax highlighter yang berarti ....???, hehe saya pun tidak tahu artinya sih tapi jika kalian ingin tahu bisa silahkan cari apa itu syntax highlighter di mbah Google atau juga kalian bisa cari pada mesin penerjemah atau yang biasa di sebut Google Translate .

Mengapa saya tidak mengetahui apa itu arti dari syntax highlighter ? karena itu saya tidak atau belum mencari dari pada arti tersebut dan yang paling terpenting kotak box script keren ini bukan lah hasil dari buatan saya ( mengakui ) melainkan kotak box script ini di buat oleh pakar blogger dan saya disini bermaksud hanya membagikan nya lagi dengan cara berbagi , kotak box script ini dibuat oleh pakar web program yaitu mbak arlina , kang ismet dan jika kalo dikatakan itu bisa itu juga saya sendiri Aldi Andreansyah ya hehe, Amin.

Pada script script sebelumnya box kotak script hanya memiliki ruang yang berisikan script script tanpa ada nya script khusus seperti box kotak script khusus CSS , HTML , Jquery , Javascript , Mysql dan sejenis nya ,nah pada kesempatan ini saya membagikan nya dengan box kotak script nya yang khusus, yang sebagaimana script di dalam nya terdapat box kotak script khusus yaitu dalam bentuk CSS , HTML , Jquery , dan Javascript .

Sebelum ke langkah langkah nya ada kala nya kita mengetahui kelebihan dan kekurangan nya terlebih dahulu yuk , mari simak kelebihan dan kekurangan nya disini , cekidot hehe :

* Kelebihan nya:

 - Terdapat kotak box script keren yaitu CSS , HTML , Jquery , dan Javascript yang membuat para pengguna lebih tertarik dan mudah mengetahui bahwa mode script tersebut 

 - Terdapat warna dari font (huruf) heading maupun teks nya , warna heading , warna latar belakang , warna scroll dan yang paling penting kalian dapat menyesuaikan nya dengan kemauan sendiri 

- Script tersebut jika ingin di salin keseluruhan kalian hanya cukup mengklik dua kali atau double tepat di dalam kotak box script  nya tersebut mungkin sekian saja mengenai kelebihan nya dari kotak box script ini.

*Jika kekurangan nya yaitu :

- Dapat dikatakan membuat loading web atau blog menjadi berkurang karena dengan adanya CSS yang terpasang dan kotak box script tersebut 

- Posisi dari script tersebut tidak menjalan kebawah melainkan harus di scroll terlebih dahulu dan mengikuti sesuai dari script mode tersebut dan mungkin hanya sekian lagi mengenai kekurangan nya.

Oke langsung saja kita ke langkah langkah dari Cara Membuat Box Kotak Script Keren Lengkap di Blog, di bawah ini langkah nya, cekidot :

Langkah Awal :

Seperti biasa nya pastikan kalian sudah Login terlebih dahulu di akun Google Blogger kalian jika sudah kalian ke menu -> Template -> Edit HTML -> CTRL+F lalu search b:skin atau <style> jika sudah ditemukan lalu masukan CSS di bawah ini tepat di dalam b:skin atau <style> yang sudah di cari tadi : 

 /*CSS Syntax Hightliter edited by aldiandreansyah.blogspot.co.id*/
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #374760;
    padding: 10px;
    left: 0;
    right: 0;
    color: #FFF;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

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

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSS']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTML']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScript']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQuery']:before {
    background-color: #e5b460;
} 

lalu klik simpan template

Langkah Kedua :

Penerapan kotak box script keren ini di mode Postingan ( Entri ) :
Pertama ke menu Entri atau buat artikel -> pada bagian isi atau content kalian pindah dari mode compose menuju edit HTML lalu isi script pemanggil kotak box script nya di bawah (seterah ingin di letakkan di bagian mana saja sesuai keinginan) : 

 <pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> Taruh Script HTML Di Sini </code></pre>

 <pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> Taruh Script CSS Di Sini </code></pre> 

 <pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> Taruh Script Java Script Di Sini </code></pre> 

 <pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> Taruh Script JQuery Di Sini </code></pre> 

jika sudah coba publikasikan dan lihat di blog kalian apakah bekerja 100% atau tidak.  Oke mungkin cukup sekian saja dari artikel saya mengenai Blogger yang berjudul Cara Membuat Box Kotak Script Keren Lengkap di Blog , semoga bermanfaat dan bekerja 100 % , Amien

Share this post