Fre Code Multitab Syntax Otomatis Semua Template Blogger

Table of Contents +

• Artinya Multitab Syntax Highlight (Pre Code) Yang Sering Digunakan Blogger
• Mengapa Multitab Syntax Highlight Digunakan Blogger?
• Cara Membuat Multitab Syntax Highlight (Fre Code) di Blogger/Blogspot  
• Apa Itu Multitab Syntax Highlight?  
•  Persiapan Sebelum Membuat Multitab Syntax Highlight (Fre Kode)  
• Membuat Multitab Syntax Highlight Di Template Median Ui Dan Plus Ui

K esempatan sebelumnya saya sudah membahas Membuat Pre Code Otomatis Menggunakan Blockquete Di Blogger, Nah Pada Kesempatan Kali Ini Saya Akan Membahas Hal Yang Sama Yaitu Membuat Pre Code Html Css Dan Js Menggunakan MultiTabs Syntax Higlight. 

Jika kita membuat pre code menggunakan Blockquete maka kode yang kita tandai sebagai paragraf blockquete maka paragraf tersebut akan otomatis di bungkus dalam pre code secara otomatis. Pre code menggunakan blockquete akan bermanfaat untuk blog dengan tema pemograman seperti html,css, dan js. 

Namun pre code otomatis menggunakan blockquete yang digunakan blog dengan tema selain pemograman maka akan memperjelek tampilan blog kita. Oleh sebab itulah saya membuat artikel ini untuk pemilik blog dengan tema gado-gado yang pengen memasukan paragrafnya di dalam pre code multitab syntax highlight.

Artinya Multitab Syntax Highlight (Pre Code) Yang Sering Digunakan Blogger

Multitab Syntax Highlight (Pre Code) adalah fitur yang digunakan oleh para blogger atau pengembang web untuk menampilkan kode program dengan format yang rapi, berwarna, dan mudah dibaca dalam blog atau situs web. Fitur ini sering dipakai untuk menampilkan cuplikan kode (code snippets) dalam tutorial, panduan, atau artikel teknis.  

Berikut penjelasan istilah Multitab Syntax Highligjt: 

 

1. Multitab: Merujuk pada tampilan tab yang memungkinkan pengguna berpindah antara beberapa pilihan bahasa pemrograman atau blok kode. Misalnya, jika sebuah artikel membahas Python, JavaScript, dan CSS, multitab akan memudahkan pembaca untuk memilih tab sesuai dengan bahasa yang diinginkan.  

   

2. Syntax Highlight: Memberikan pewarnaan pada elemen-elemen tertentu dalam kode (seperti keyword, string, angka, dll.) untuk meningkatkan keterbacaan dan memudahkan identifikasi struktur kode.  

3. Pre Code: Biasanya merujuk pada elemen HTML `<pre>` dan `<code>` yang digunakan untuk menampilkan teks berupa kode dengan format yang terjaga, seperti indentasi dan spasi, sehingga tampilannya tidak berubah.  

Mengapa Multitab Syntax Highlight Digunakan Blogger?

● Meningkatkan keterbacaan: Pewarnaan sintaks membantu pembaca memahami kode lebih cepat.

● Profesionalisme: Memberikan kesan profesional dan terorganisir dalam penyampaian tutorial atau dokumentasi.

● Interaktif: Dengan fitur multitab, pembaca dapat dengan mudah berpindah antar blok kode tanpa perlu menggulir panjang.  

 Contoh Implementasi

Biasanya multitab syntax highlight ini dibuat menggunakan kombinasi HTML, CSS, dan JavaScript, atau dengan bantuan pustaka seperti:

• [Prism.js]

• [Highlight.js]

Contoh Tampilan HTML Sederhana MultiTab Syntax Highlight:

<div class="tabs">

  <button class="tab" onclick="showTab('python')">Python</button>

  <button class="tab" onclick="showTab('javascript')">JavaScript</button>

</div>

<div id="python" class="code-block">

  <pre><code class="language-python">

def hello_world():

    print("Hello, world!")

  </code></pre>

</div>

BACA JUGA:Demo Cara Buat Widget Donasi Di Blogspot

<div id="javascript" class="code-block" style="display: none;">

  <pre><code class="language-javascript">

function helloWorld() {

    console.log("Hello, world!");

}

  </code></pre>

</div>

<script>

  function showTab(tabId) {

    document.querySelectorAll('.code-block').forEach(el => el.style.display = 'none');

    document.getElementById(tabId).style.display = 'block';

  }

</script>

Dengan cara ini, Anda dapat memberikan pengalaman membaca yang lebih nyaman bagi pembaca blog Anda!

Cara Membuat Multitab Syntax Highlight (Fre Code) di Blogger/Blogspot  

Menampilkan kode pemrograman dengan rapi dan menarik di artikel blog adalah salah satu cara untuk meningkatkan pengalaman pembaca, terutama jika Anda seorang blogger teknologi, pengembang web, atau programmer. Salah satu solusi terbaik adalah dengan membuat multitab syntax highlight yang memungkinkan pembaca melihat kode dalam berbagai bahasa pemrograman (seperti HTML, CSS, dan JavaScript) dalam tab terpisah.  

Artikel ini akan memandu Anda langkah demi langkah untuk membuat multitab syntax highlight di platform Blogger atau Blogspot dengan penjelasan mendetail.  

Apa Itu Multitab Syntax Highlight?  

Multitab syntax highlight adalah fitur yang memungkinkan pembaca berpindah antara tab berbeda untuk melihat kode dalam berbagai bahasa pemrograman. Setiap tab mewakili satu bahasa, seperti HTML, CSS, atau JavaScript. Fitur ini sering digunakan pada blog pengembangan web untuk mempermudah pembaca memahami kode yang terorganisir dengan baik.  

Berikut adalah manfaatnya:  

1. Tampilan Profesional: Membuat blog Anda terlihat lebih modern dan interaktif. 

 

2. Meningkatkan Pengalaman Pengguna: Pembaca dapat fokus pada satu bagian kode dalam satu waktu tanpa merasa bingung. 

 

3. Cocok untuk Blog Tutorial: Membantu pembaca memahami tutorial pemrograman dengan lebih mudah.  

 Persiapan Sebelum Membuat Multitab Syntax Highlight (Fre Kode)  

Sebelum kita masuk ke langkah implementasi, pastikan Anda memenuhi persyaratan berikut:  

1. Akses ke Blogger: Pastikan Anda memiliki akun Blogger dan akses ke dashboard blog Anda.  

2. Pengetahuan Dasar HTML dan CSS: Agar mudah dipahami, Anda hanya perlu memahami struktur dasar HTML dan CSS.  

BACA JUGA:Widget Like Post Artikel Blogger Pakai Firebase

3. Kode Editor: Anda dapat menggunakan editor teks seperti Notepad++, Visual Studio Code, atau bahkan editor bawaan Blogger.  

Langkah 1: Struktur Dasar HTML untuk Multitab

Kita akan memulai dengan membuat struktur HTML sederhana untuk tab dan konten kode. Berikut adalah contoh kode:  

<div class="pre tb">

    <!-- Input untuk tab -->

    <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked>

    <input class="prei hidden" id="preT-2" type="radio" name="preTab">

    <input class="prei hidden" id="preT-3" type="radio" name="preTab">

    <!-- Header tab -->

    <div class="preH tbHd scrlH">

        <label for="preT-1" data-text="HTML">HTML</label>

        <label for="preT-2" data-text="CSS">CSS</label>

        <label for="preT-3" data-text="JavaScript">JavaScript</label>

    </div>

    <!-- Konten setiap tab -->

    <div class="preC preC-1">

        <pre><code class="language-html">&lt;h1&gt;Hello World&lt;/h1&gt;</code></pre>

    </div>

    <div class="preC preC-2">

        <pre><code class="language-css">body { background-color: #f4f4f4; }</code></pre>

    </div>

    <div class="preC preC-3">

        <pre><code class="language-javascript">console.log('Hello World');</code></pre>

    </div>

</div>

 

Penjelasan:  

1. Input Radio: Input radio (`<input type="radio">`) digunakan untuk mengontrol tab yang aktif.  

2. Label: Label bertindak sebagai tombol tab yang memungkinkan pengguna berpindah antara tab.  

3. Konten: Setiap tab memiliki elemen `<div>` yang berisi kode dalam format `<pre><code>` untuk syntax highlight.  

 Langkah 2: Menambahkan CSS untuk Gaya  Multitab

Setelah struktur HTML, langkah berikutnya adalah menambahkan gaya menggunakan CSS. Tambahkan kode ini ke editor CSS Anda:  

/* Sembunyikan input radio */

.prei.hidden {

    display: none;

}

BACA JUGA:Membuat Table Of Content Otomatis Di Blogger Tanpa Input Manual

/* Gaya header tab */

.preH label {

    display: inline-block;

    padding: 10px 20px;

    cursor: pointer;

    background: #f0f0f0;

    border: 1px solid #ddd;

    margin-right: -1px;

    transition: background 0.3s;

}

.preH label:hover {

    background: #e0e0e0;

}

/* Gaya tab aktif */

.prei:checked + .preH label {

    background: #fff;

    font-weight: bold;

    border-bottom: 1px solid #fff;

}

/* Konten tab */

.preC {

    display: none;

    padding: 15px;

    border: 1px solid #ddd;

    background: #fff;

}

#preT-1:checked ~ .preC-1,

#preT-2:checked ~ .preC-2,

#preT-3:checked ~ .preC-3 {

    display: block;

}

 Penjelasan:  

● Sembunyikan Input: Input radio disembunyikan karena hanya berfungsi sebagai kontrol.  

● Gaya Tab Header: Label diberi gaya untuk menyerupai tombol.  

● Tab Aktif: Tab yang aktif diberi gaya berbeda menggunakan CSS selector `:checked`.  

● Tampilkan Konten Aktif: Konten tab hanya muncul jika input radio terkait berada dalam kondisi `checked`.  

 Langkah 3: Menambahkan Syntax Highlight dengan Prism.js  

Untuk menambahkan syntax highlight pada kode, kita akan menggunakan Prism.js. Ikuti langkah berikut:  

 a) Tambahkan Script dan CSS Prism.js  

Salin dan tempel kode berikut ke dalam `<head>` template Blogger Anda:  

<!-- Prism.js CSS -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />

<!-- Prism.js Script -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>

BACA JUGA:Memasang Widget Live Ajax Search Box (Mempercantik Fitur Search Blogspot)

 b) Modifikasi Elemen `<code>`  

Pastikan setiap elemen `<code>` memiliki kelas yang sesuai dengan bahasa pemrograman:  

• HTML: `language-html`  

• CSS: `language-css`  

• JavaScript: `language-javascript`  

Langkah 4: Implementasi Multitab syntax Highlight (Fre Code) di Blogger  

Setelah semua langkah selesai, Anda dapat menerapkan kode di Blogger:  

1. Buka dashboard Blogger Anda.  

2. Pilih Tema > Edit HTML.  

3. Tambahkan kode HTML, CSS, dan Prism.js di bagian yang sesuai.  

4. Simpan perubahan dan lihat hasilnya di blog Anda.  

Langkah 5: Pengujian  Multitab Syntax Highlight Di Blogspot

Setelah implementasi, lakukan pengujian:  

1. Buka artikel blog Anda di browser.  

2. Klik setiap tab untuk memastikan fungsi bekerja.  

3. Pastikan syntax highlight berjalan dengan baik untuk setiap bahasa.  

Membuat Multitab Syntax Highlight Di Template Median Ui Dan Plus Ui

Jika artikel yang kita bahas di atas yang kita bahas adalah membuat Multitab syntax higlight (Fre Kode) Di Semua Template Blogger / Blogspot. Nah di paragraf artikel ini saya juga akan membagikan cara membuat multitab syntax highlight (Fre Code) Pada Template Blogspot Seperti Median UI Dan Plus UI.

 

Langkah 1 : Memasang Multitab Syntax Highlight Di Template Median UI dan Plus UI.

• Saat membuat postingan artikel baru di blogsppt klik Tampilan Html. Lalu pasangkan kode di bawah ini:

<div class='pre tb'>
	<input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
	<input class='prei hidden' id='preT-2' type='radio' name='preTab'>
	<input class='prei hidden' id='preT-3' type='radio' name='preTab'>
	<div class='preH tbHd scrlH'>
		<label for='preT-1' data-text='HTML'></label>
		<label for='preT-2' data-text='CSS'></label>
		<label for='preT-3' data-text='JS'></label>
	</div>
	<div class='preC-1'>
		<pre>html here</pre>
	</div>
	<div class='preC-2'>
		<pre>css here</pre>
	</div>
	<div class='preC-3'>
		<pre>JS here</pre>
	</div>
</div>

Anda tinggal mengubah isi kode yang ada di antara code <pre>Dan</pre>

Tampilan dari kode multitab syntax highlight untuk template median UI dan Plus UI akan Seperti Dibawah.

html here

css here

JS here

Membuat multitab syntax highlight di Blogger/Blogspot tidak hanya membuat tampilan blog Anda lebih profesional, tetapi juga memberikan pengalaman membaca yang luar biasa bagi pengunjung. Dengan menggunakan kombinasi HTML, CSS, dan Prism.js, Anda dapat menghadirkan fitur modern yang banyak digunakan di situs web pengembang besar.  

Selamat mencoba, dan semoga artikel ini membantu meningkatkan kualitas blog Anda!