Cara Membuat Widget Syntax Highlight + Line Number Buatan Gue
Cara membuat Syntax Highlights - Kotak Syntax merupakan template untuk memberikan keterangan coding dengan berbagai macam warna dan agar lebih mudah dipahami.
Syntax Highlghts ini berfungsi untuk menampilkan atau menjelaskan isi dari coding agar mudah dipahami dan enak dipandang. Namun ada beberapa blogger pemula yang masih bingung bagaimana cara membuatnya.
Nahh untuk itu sobat, admin mencoba untuk membagikan kode syntax highlight yang buatan admin sendiri, semoga sobat suka ya.
Untuk mempersingkat waktu, mari simak berikut ini :
Cara Membuat Widget Syntax Highlight + Line Number
Tertarik untuk mencobanya?? Yukk simak berikut ini.
Tahap pertama :
1. Login ke Blogger
2. Lihat Tab Tema > Edit HTML
3. Masukkan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
.tl-dropcap{float:left;display:block;font-size:50px;line-height:50px;background-color:$(keycolor);color:white;text-align:center;margin:9px 13px 0 0;padding:2px 13px 5px 13px;font-family:Verdana,Geneva,sans-serif;text-transform:uppercase;}
.tl-dropcap.dcap2{webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%}
.tl-dropcap.dcap3{background:none;font-weight:900;font-size:75px;line-height:65px}
pre{background-color:#F5F5F5;color:#333;position:relative;padding:0 7px;margin:15px 0 10px;overflow:auto;word-wrap:normal;white-space:pre;position:relative}
pre[data-codetype]{padding:37px 1em 5px}
pre[data-codetype]:before{content:attr(data-codetype);display:block;position:absolute;top:-5px;right:0;left:0;background-color:#F1F1F1;padding:7px;color:#FFFFFF;webkit-box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;-moz-box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;}
pre[data-codetype="HTML"]{color:#6d6e70}
pre[data-codetype="CSS"]{color:#00a78e}
pre[data-codetype="JavaScript"]{color:#8a7967}
pre[data-codetype="JQuery"]{color:#fd5c63}
pre[data-codetype="HTML"]:before{background-color:#6d6e70}
pre[data-codetype="CSS"]:before{background-color:#00a78e}
pre[data-codetype="JavaScript"]:before{background-color:#8a7967}
pre[data-codetype="JQuery"]:before{background-color:#fd5c63}
pre[data-codetype="HTML"] span.line-number{border-right: 2px solid #6d6e70;}
pre[data-codetype="CSS"] span.line-number{border-right: 2px solid #00a78e;}
pre[data-codetype="JavaScript"] span.line-number{border-right: 2px solid #8a7967;}
pre[data-codetype="JQuery"] span.line-number{border-right: 2px solid #fd5c63;}
pre code,pre .line-number{display:block;color:#666666}
pre .line-number{color:#666666;min-width:1em}
pre .line-number span{display:block}
pre .line-number span:nth-child(even){background-color:#EEEEEE}
pre .cl{display:block;clear:both}
pre .line-number{float:left;margin:0 1em 0 -1em;border-right:2px solid #666666 ;text-align:right}
pre .line-number span{padding:0 .8em 0 1em}
.button,input.button{position:relative;display:inline-block;margin-right:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer}
.button,input.button{-webkit-transition:background-color 0.3s linear,color 0.3s linear;-moz-transition:background-color 0.3s linear,color 0.3s linear;transition:background-color 0.3s linear,color 0.3s linear}
.button:hover,input.button:hover{border-bottom:none;background-color:rgba(84,87,102,0.9)}
.button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)}
Tahap kedua :
1. Pada Dashboard Postingan, Pilih Entri baru > Mode HTML >
2. Simpan Kode dibawah ini Jika ingin menampilkan Kode
<pre data-codetype="HTML">Masukkan Code HTML Anda</pre>
<pre data-codetype="CSS">Masukkan Code CSS Anda</pre>
<pre data-codetype="JavaScript">Masukkan Code Javascript Anda</pre>
<pre data-codetype="JQuery">Masukkan Code Jquery Anda</pre>* > Sebelum Sobat Memasukkan codenya, Harus di Parse Terlebih dahulu agar kodenya Tampil
Belum Paham kah sobat???
Marii Simak Sederhananya
Misal Sobat ingin Membuat Syntax Highlight Versi HTML
Maka, Sobat Pilih Kode yang dibawah ini :
<pre data-codetype="HTML">Masukkan Code HTML Anda</pre>Misal Sobat ingin Membuat Syntax Highlight Versi CSS
Maka, Sobat Pilih Kode yang dibawah ini :
<pre data-codetype="CSS">Masukkan Code CSS Anda</pre>Semoga paham ya sobat dan bisa diterapkan, Terima Kasih Semoga bermanfaat+_=
Komentar
Posting Komentar