Begini Cara Mengetahui Kode Template Blog Secara Detail & Lengkap!

Begini Cara Mengetahui Kode Template Blog Secara Detail & Lengkap! Terkadang sebagai seorang blogger kita tertarik dan penasaran dengan tampilan blog orang lain dan bahkan saking tertariknya sampai ingin memiliki tampilan yang sama dengan blog tersebut

Daftar isi

Baca Juga

Begini Cara Mengetahui Kode Template Blog Secara Detail & Lengkap! Terkadang sebagai seorang blogger kita tertarik dan penasaran dengan tampilan blog orang lain dan bahkan saking tertariknya sampai ingin memiliki tampilan yang sama dengan blog tersebut. Ternyata untuk memiliki tampilan yang sama dengan blog orang lain caranya sangat mudah karena caranya adalah dengan mengetahui kode yang digunakan untuk membuat tampilan tersebut. Dan kode yang digunakan adalah kode CSS dan HTML bahkan Script. Nah, untuk mengetahui kode ini tentu terasa sulit untuk melihat karena saat melihat tampilan sebuah blog, yang ada hanyalah tampilan dari konten blog tersebut bukan berupa kode.

Setiap tampilan halaman blog memiliki kode CSS, HTML atau Script yang berbeda untuk halaman depan (home), halaman artikel (single post), halaman statis, halaman error, dan tampilan untuk halaman smartphone. Dan terkadang masing-masing halaman memiliki kode yang sama. Sehingga untuk mengetahui kode template blog dari masing-masing halaman menggunakan cara yang sama dengan kode link yang berbeda agar masing-masing kode dari halaman tersebut bisa diketahui secara lengkap, namun perlu diingat dengan mengetahui kode template blog orang lain tidak serta merta Anda menggunakannya secara bebas apalagi meniru tampilan dari blog tersebut.

Lantas bagaimana cara mengetahui kode tampilan dari sebuah blog yang Anda lihat? Ada 2 cara yang bisa Anda gunakan yaitu:
Cara Pertama: Gunakan Inspect Element

1. Buka blog yang ingin diketahui kodenya. Misalnya sebagai contoh adalah blog ini, digitalpoin.com dan kode template yang ingin diketahui adalah halaman artikel di link: https://www.digitalpoin.com/2019/01/cara-mengganti-kode-template-blog.html dan tampilannya seperti berikut ini:
   
   
2. Perhatikan, disini kode template yang ingin diketahui adalah halaman artikel blog atau single post. Bukan halaman depan (Home), bukan halaman statis dan lainnya, sehingga kode yang ditampilkan adalah kode yang ada di halaman artikel saja. Namun cara ini biasa digunakan untuk mengetahui kode template dari halaman blog yang lain.
3. Sebagai target pertama dari tampilan halaman yang kami contohkan diatas yang ingin diketahui kodenya adalah kode dari Judul Artikel. Tujuan untuk mengetahui kode ini adalah untuk mengetahui kode css yang digunakan pada Judul Artikel yaitu:
   
   
   • Kode Jenis Font yang digunakan.
   • Kode Ukuran Font yang digunakan.
   • Kode Warna yang digunakan.
4. Untuk mengetahui kode CSS dari Judul Artikel, Klik kanan pada area halaman tersebut, sehingga muncul tampilan seperti berikut ini, dan pilih Inspeksi (Inspect) sehingga muncul kolom dibagian bawahnya seperti berikut ini. Untuk memunculkan kolom Inspeksi ini juga bisa menggunakan tombol Ctrl + Shift + I:
   
   
5. Klik icon dibagian pojok kiri atas atau seperti gambar dibawah ini. Dan pastikan warna icon sudah berubah menjadi biru (Aktif). Lalu arahkan cursor pada Judul Artikel sehingga akan terpilih atau terseleksi. Jika penempatan cursor sudah benar, klik pada area Judul Artikel maka akan muncul kode-kode yang digunakan pada Judul Artikel tersebut. Kode inilah yang disebut sebagai kode CSS.
   
   Kode CSS tersebut bisa tampil melayang dan tampilan langsung sesuai atribut yang digunakan pada kolom sebelah kanan seperti gambar dibawah ini:
   
   
6. Untuk kode terlengkap dari sebuah tampilan blog ada dibagian kolom sebelah kanan dari kolom Inspeksi (Inspect). Gunakan kode tersebut jika ingin memiliki tampilan yang sama dengan tampilan yang ada pada blog tersebut kedalam kode template blog Anda.
   
   
7. Namun kode CSS yang telah Anda dapatkan tentunya tidak akan bekerja jika kode HTML juga tidak diambil. Untuk mengambil kode HTML, sorot area pada tampilan yang Anda inginkan, dalam hal ini kami contohkan adalah kode Judul Artikel. Setelah disorot atau terseleksi, maka akan terpilih juga kode HTML yang ada didalam kolom Inspeksi seperti berikut ini:
   
   
   • Lalu klik kanan pada kode HTML dan pilih Edit as HTML
     
     
   • Dan salin kode HTML dengan cara di bloK semua
     
     
8. Setiap kode CSS, HTML dan Script yang Anda dapatkan, simpan di notepad.
   

Cara Kedua: Gunakan Ctrl + U atau Link Source Code View Untuk cara kedua ini sebenarnya merupakan kelanjutan dari Cara Pertama. Namun dengan menampilkan kode template secara keseluruhan yaitu dengan cara menggunakan tombol Ctrl + U sebagai berikut:

1. Buka tampilan sebuah halaman blog atau kami gunakan contohnya seperti cara pertama diatas. Setelah halamannya tampil, langsung tekan Ctrl + U secara bersamaan dan akan terbuka kode halaman dari halaman artikel blog tersebut seperti gambar berikut ini:
   
   
   
   Gambar diatas adalah tampilan dari halaman artikel https://www.digitalpoin.com/2019/01/cara-mengganti-kode-template-blog.html dan perhatikan alamat url pada kode halaman tersebut, ada penambahan kata view-source: Kode ini digunakan untuk menampilkan sumber kode sebuah halaman blog. Jadi jika fungsi Ctrl + U tidak berfungsi karena diproteksi, Anda bisa mengetikan langsung view-source: di bar address diikuti dengan url halaman blog. Contohnya seperti berikut: view-source:https://www.digitalpoin.com/2019/01/cara-mengganti-kode-template-blog.html
2. Untuk mengetahui kode tampilan yang menjadi target utama adalah dengan melakukan pencarian pada halaman kode tersebut. Dan untuk mengetahui kode yang akan di cari, gunakan terlebih dulu cara pertama. Misalkan kode dari Judul Artikel, maka kode yang ada di Inspeksi yang ada di kolom sebelah kanan adalah .post h1 (Lihat cara pertama No. 6)
3. Bukan halaman kode view-source:https://www.digitalpoin.com/2019/01/cara-mengganti-kode-template-blog.html dan tekan Ctrl + F, maka akan muncul halaman pencarian seperti gambar berikut:
   
   
4. Cari kode .post h1 menggunakan kolom pencarian tersebut dan tekan Enter pada keyboard sehingga akan tampil kode CSS dari .post H1 dan otomatis kode tersebut akan tampil seperti gambar berikut:
   
   
5. Perhatikan jumlah kode yang ditampilkan, Nah disinilah yang akan menjadi petualangan Anda karena jika Anda menampilkan sebuah kode yang ingin diketahui dengan menggunakan cara kedua ini, akan tampil semua kode CSS yang sama. Kode ini bisa digunakan pada halaman yang Anda cari misalnya halaman artikel (Single post), halaman beranda (Home) atau halaman statis. Jadi perhatikan dengan baik kode yang akan Anda gunakan, karena kode-kode yang Anda temukan tersebut berada pada kode tag kondisional yang digunakan.

Apa itu kode tag kondisional? Silahkan Baca: Tag Conditional Blogger, Fungsi Dan Cara Menggunakan Nah itulah cara mengetahui kode template blog secara detail dan lengkap yang bisa Anda kembangkan sendiri. Namun perlu diperhatikan, artikel yang kami buat ini hanya sebagai pembelajaran saja. Masalah Anda mau belajar dan menggunakannya untuk kepentingan apapun semuanya terserah Anda dan menjadi tanggungjawab Anda sendiri. Selamat belajar