Cara Membuat Kolom Kode Script di Blog Mudah, lengkap & Keren

By | October 11, 2018
Halo teman-teman blogger…

Kali ini saya akan berbagi tips bagaimana cara membuat kolom untuk berbagi kode script dengan mudah yang biasanya teman-teman gunakan untuk menyempurnakan kekurangan-kekurangan pada blog yang kalain kelola.


Biasanya hal ini dibutuhkan bagi temen-temen yag masih awam akan apa itu script atau biasa disebut pengkodingan.


Loading...


Sehingga cara tersebut dibagikan kepada teman-teman lainya dengan cara menempelkan baris kode script yang tinggal di kopi saja.


Lalu bagaimana sih caranya??

Silahkan perhatikan baik-baik langkah-langkah di bawah ini.

Pertama kalian buka halaman portingan kalian.




Silahkan pilih menu HTML 




Kemudian letakkan code pembuatan kolom diantara script HTML di halaman blogger sesuai dengan yang kalian inginkan.


Ada beberapa Style atau bentuk yang bisa kalian gunakan berikut juga contoh tampilanya.


1. Style Simple


Kodenya :


Tampilan Kolom Code/Script



2. Style Left Border



Kodenya :

Hasilnya :


Tampilan Kolom Code/Script



3. Style Dotted



Kodenya :


Hasilnya :


Tampilan Kolom Code/Script



4. Style Double Outline



Kodenya :


Hasilnya : 


Loading...
Tampilan Kolom Code/Script


5.  Style Dashed



Kodenya :

Hasilnya : 


Tampilan Kolom Code/Script




6.  Style Scroll Horzontal


Kodenya :

Hasilnya :

Tampilan Kolom Code/Script
Tampilan Kolom Code/Script
Tampilan Kolom Code/Script
Tampilan Kolom Code/Script
Tampilan Kolom Code/Script
Tampilan Kolom Code/Script



7. Style Scroll Vertical


a.  Login ke blogger > Tema > Edit HTML 
b. Masukkan kode berikut sebelum </:bskin> 




Catatan : klian bisa mengubah warna background pada kode yang bertulis #f1f1f1;


c. Save Template
d. Masuk ke “Entri Baru”, pilih mode penulisan HTML. Masukkan kode berikut : 

<pre class=”scriptbox”>Masukkan kode/script disini</pre>

e. Setelah itu tinggal ganti tulisan Masukkan kode/script disini dengan script teman-teman

Hasilnya :

Masukkan script disini..........................................................................................................................................................


8. Style Highligt


Hanya dengan menekan tombol highlight maka seluruh isi dari kode/script akan di highlight/blok semua dan tinggal di copy saja. Fungsi tombol highlight ini sangat berguna untuk mencegah tertinggalnya satu atau beberapa isi dari kode/script.


Silahkan copy kode HTML di bawah ini :


<div><form name=”copy”><div align=”center”><span><input onclick=”javascript:this.form.txt.focus();this.form.txt.select();” value=”Copy All” type=”button”> </span></div><p align=”center”><textarea style=”width: 150px; height: 80px;” name=”txt” rows=”5″ wrap=”VIRTUAL” cols=”20″>ISI TULISAN SOBAT DISINI</textarea></p></form></div>


Hasilnya :


CATATAN :
Untuk seluruh kode-kode diatas bisa kalian modifikasi sesuka hati kalian.
misalkan merubah warna yaitu dengan cara :

1. Cari kode yang biasanya bertulis dengan awalan “#”……
Kalian silahkan ubah dengan bantuan Color Picker untuk mempermudah dalam pemilihan warnanya.

2. Dengan cara inspect elemen, caranya silahkan klik kanan pada halaman kolom yang akan dirubah warnanya , tampilnya sebagai berikut ini :


 Cari kode yang bertulisakan color, backgrond dan identik dengan awalan “#”.



Mungkin itu lah sedikit Cara Membuat Kolom Kode Script di Blog Mudah, lengkap & Keren yang bisa saya bagikan kepada teman-teman blogger

semoga bermanfaat, terimakasih…

6 thoughts on “Cara Membuat Kolom Kode Script di Blog Mudah, lengkap & Keren

  1. opinion instaboom

    Hey there! Do you know if they make any plugins to assist with SEO?
    I’m trying to get my blog to rank for some targeted keywords but I’m
    not seeing very good success. If you know of any please share.

    Thanks!

    Reply
  2. Shiela

    Very good post! We will be linking to this particularly great
    post on our website. Keep up the great writing.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *