Cara Setting Template GridSpeed Agar Blog Tampil Maksimal

Template GridSpeed - Template GridSpeed didesain untuk kecepatan dan tampilan modern dengan tata letak berbasis grid. Template ini memiliki struktur CSS yang rapi menggunakan [CSS Variables atau Variabel CSS] untuk mempermudah kustomisasi warna dan tipografi secara global.

Nama Template: GridSpeed
Versi: 1.1
Penulis: Inteknologi.com

Cara Mengatur Template GridSpeed

Cara Setting Template GridSpeed

#Mengganti Judul Blog ( Opsional )

Untuk judul blog sendiri otomatis mengambil dari nama domain yang kita punya. tapi jika kalian ingin nama blog kalian berbeda dengan nama domani kalian bisa ganti secara manual di Tata Letak. berikut caranya:

Buka dashboard Blogger.
Pilih menu Tata Letak (Layout).
Cari Header dan ubah nama blog sesuai keinginan kalian.
pada header ini kalian juga bisa menambahkan atau mengganti Deskripsi blog milik kalian

1. Cara Menambahkan Featured Post (Postingan Unggulan)

Fitur Postingan Unggulan pada template GridSpeed berada di bawah area header (.header-below-wrapper) dan dirancang untuk memuat widget khusus.

Langkah Setting:

Buka dashboard Blogger.
Pilih menu Tata Letak (Layout).
Cari area widget Featured Post di Bawah Header.
Klik "Tambahkan Gadget" pada area tersebut.
Pilih gadget "Postingan Unggulan" (Featured Post).
dan Pilih Postingan mana yang mau di Tampilkan

Atur postingan yang ingin kalian tampilkan. CSS template ini sudah diatur untuk menyembunyikan judul widget Featured Post (#FeaturedPost2 h2.title {display: none;}) agar tampil bersih.

2. Cara Menambahkan Widget Sidebar Header Below

Template ini menyediakan area widget di sebelah fitur Featured Post di bawah header, yang diidentifikasi dengan kelas .sidebar-below-header. / Sidebar Tambahan di Bawah Header. Area ini biasanya digunakan untuk iklan atau widget kecil seperti Postingan Populer.

Langkah Setting:

Buka menu Tata Letak (Layout) di dashboard Blogger.
Cari area widget yang mungkin berlabel "Sidebar Below Header/Sidebar Tambahan di Bawah Header" yang terletak dibawah area Featured Post.
Klik "Tambahkan Gadget" pada area tersebut.
Kalian bisa menambahkan widget apa pun, seperti HTML/JavaScript (untuk iklan) atau Postingan Populer (template ini memiliki styling khusus untuk Popular Posts di area ini).

3. Cara Mengganti Warna Background Header dan Footer

Template GridSpeed menggunakan Variabel CSS yang terpusat untuk kustomisasi warna, yang sangat memudahkan.

Cara Setting (Warna Header):

Buka menu Tema (Theme) > Edit HTML.
Cari bagian /* ===== CSS VARIABLES FOR THEMING ===== */.
Ubah kode warna pada variabel --header-bg. Warna default (asli) adalah hitam (#333333).
Kalian bisa ganti #333333 dengan warna yang kalian inginkan. atau kalian bisa ganti langdung di .main-header{background:var(--header-bg). Ganti var(--header-bg) dengan warna yang kalian inginkan

Ganti Warna Background Footer.

Karena Footer menggunakan Variabel yang sama dengan header kalian tidak perlu lagi mengganti warna backgroundya. tapi jika kalian ingin warna yang berdeda dengan header kita bisa menggantinya. berikut cara nya :

Masuk ke Menu Tema ( Theme ) > Edit HTML
Tekan Ctrl + F dan masukan .site-footer dan Tekan Enter. Maka kalian akan menemukan kode seperti ini .site-footer{background:var(--header-bg);color:#ccc;font-size:14px;line-height:1.6;padding:20px 0;border-top:1px solid #333} silahkan ganti background:var(--header-bg) dengan warna yang kalian inginkan

4. Cara Menambahkan Menu dan Drop-down Menu (Edit HTML)

Menu navigasi utama (Main Navigation) pada template GridSpeed diatur secara statis di dalam kode HTML template.

Langkah Setting Menu:

Buka dashboard Blogger.
Pilih menu Tema (Theme) > Edit HTML.
Cari bagian untuk menu navigasi. Gunakan fitur cari (Ctrl+F atau Cmd+F) dan ketikan header-center atau main-nav maka akan muncul kode seperti dibawah ini :

<div class='header-center'>
<nav class='main-nav'>
  <ul>
    <li><a href='#'>Nama Menu 1</a></li>
    <li><a href='#'>Nama Menu2</a></li>
    <li><a href='#>Nama Menu3</a></li>    
     <li class='has-dropdown'> 
      <div class='dropdown'>
        <a class='dropbtn' href='#'>
          Dropdown Menu <span class='dropdown-icon'>
            <svg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'><path d='M140.3 376.8c12.6 10.2 31.1 9.5 42.8-2.2l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301.4 192 288.5 192l-256 0c-12.9 0-24.6 7.8-29.6 19.8S.7 237.5 9.9 246.6l128 128 2.4 2.2z'/></svg>
          </span>
        </a>
        
        <div class='dropdown-content'>
          <a href='#'>Link 1</a>
          <a href='#'>Link 2</a>
          <a href='#'>Link 3</a>
        </div>
      </div>
    </li>
  </ul>
</nav>
</div>

Silahkan ganti tanda # yang warna merah dengan Link Menu punya kalian ( Biasanya Link Label )
ganti tulisan Menu1 Menu2,Menu3 dengan Nama Menu kalian
ganti tulisan Link 1 , Link 2, Link 3 dengan sub menu kalian

5. Cara Menambahkan Link pada Menu di Footer (Edit HTML)

Link atau menu di bagian footer (biasanya untuk Disclaimer, Privacy Policy, dll.) juga diatur secara statis di dalam kode HTML, di dalam area <div class='footer-menu'>.

Cara Setting Link Footer:

Buka Tema > Edit HTML.
Cari bagian footer menggunakan Ctrl+F dan ketik: <footer class='site-footer' itemscope='itemscope' itemtype='https://schema.org/WPFooter'
Struktur kodenya akan terlihat seperti ini:

<footer class='site-footer' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>
  <div class='footer-container'>
  <div class='footer-top'>
    <!-- Kolom Kiri: Menu Navigasi -->
    <div class='footer-left'>
      <ul class='footer-menu'>
        <li><a href='URL_ANDA'>Sitemap</a></li>
        <li><a href='URL_ANDA>Privacy Policy</a></li>
        <li><a href='URL_ANDA'>Disclaimer</a></li>
        <li><a href='URL_ANDA'>Term of Srvice</a></li>
        <li><a href='URL_ANDA'>About</a></li>
        <li><a href='URL_ANDA'>Contact</a></li>
      </ul>
    </div>
    <!-- Kolom Kanan: Sosial Media -->

Ganti URL_ANDA dengan alamat tautan kalian dan ganti nama menu (misalnya Disclaimer).
kalian bisa menambah atau menghapus <li> sesuai kebutuhan.

6. Menambahkan Link Media Sosial di Footer (Edit HTML)

Link media sosial di footer juga harus diubah langsung dalam kode HTML template, biasanya terletak di sekitar area Footer atau Copyright. Template ini menggunakan ikon dari Boxicons (<i class='bx bxl-facebook'/>).

Cara Setting Link Media Sosial:

Buka Tema > Edit HTML.
Cari bagian media sosial, biasanya di dalam div dengan kelas seperti social-footer atau di dekat copyright.
Cari tag: <div class='footer-right'>
Struktur kodenya akan terlihat seperti ini:

 <div class='footer-right'>
      <div class='social-icons' itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
        <meta content='Inteknologi' itemprop='name'/>
        <a aria-label='Facebook' href='https://facebook.com/yourpage' itemprop='sameAs' rel='noopener' target='_blank'>
          <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l98.2 0 0-145.8-52.8 0 0-78.2 52.8 0 0-33.7c0-87.1 39.4-127.5 125-127.5 16.2 0 44.2 3.2 55.7 6.4l0 70.8c-6-.6-16.5-1-29.6-1-42 0-58.2 15.9-58.2 57.2l0 27.8 83.6 0-14.4 78.2-69.3 0 0 145.8 129 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/></svg>
        </a>
        <a aria-label='Twitter' href='https://twitter.com/yourhandle' itemprop='sameAs' rel='noopener' target='_blank'>
      <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm297.1 84l-103.8 118.6 122.1 161.4-95.6 0-74.8-97.9-85.7 97.9-47.5 0 111-126.9-117.1-153.1 98 0 67.7 89.5 78.2-89.5 47.5 0zM323.3 367.6l-169.9-224.7-28.3 0 171.8 224.7 26.4 0z'/></svg>
        </a>
        <a aria-label='Instagram' href='https://instagram.com/yourprofile' itemprop='sameAs' rel='noopener' target='_blank'>
         <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M194.4 211.7a53.3 53.3 0 1 0 59.2 88.6 53.3 53.3 0 1 0 -59.2-88.6zm142.3-68.4c-5.2-5.2-11.5-9.3-18.4-12-18.1-7.1-57.6-6.8-83.1-6.5-4.1 0-7.9 .1-11.2 .1s-7.2 0-11.4-.1c-25.5-.3-64.8-.7-82.9 6.5-6.9 2.7-13.1 6.8-18.4 12s-9.3 11.5-12 18.4c-7.1 18.1-6.7 57.7-6.5 83.2 0 4.1 .1 7.9 .1 11.1s0 7-.1 11.1c-.2 25.5-.6 65.1 6.5 83.2 2.7 6.9 6.8 13.1 12 18.4s11.5 9.3 18.4 12c18.1 7.1 57.6 6.8 83.1 6.5 4.1 0 7.9-.1 11.2-.1s7.2 0 11.4 .1c25.5 .3 64.8 .7 82.9-6.5 6.9-2.7 13.1-6.8 18.4-12s9.3-11.5 12-18.4c7.2-18 6.8-57.4 6.5-83 0-4.2-.1-8.1-.1-11.4s0-7.1 .1-11.4c.3-25.5 .7-64.9-6.5-83-2.7-6.9-6.8-13.1-12-18.4l0 .2zm-67.1 44.5c18.1 12.1 30.6 30.9 34.9 52.2s-.2 43.5-12.3 61.6c-6 9-13.7 16.6-22.6 22.6s-19 10.1-29.6 12.2c-21.3 4.2-43.5-.2-61.6-12.3s-30.6-30.9-34.9-52.2 .2-43.5 12.2-61.6 30.9-30.6 52.2-34.9 43.5 .2 61.6 12.2l.1 0zm29.2-1.3c-3.1-2.1-5.6-5.1-7.1-8.6s-1.8-7.3-1.1-11.1 2.6-7.1 5.2-9.8 6.1-4.5 9.8-5.2 7.6-.4 11.1 1.1 6.5 3.9 8.6 7 3.2 6.8 3.2 10.6c0 2.5-.5 5-1.4 7.3s-2.4 4.4-4.1 6.2-3.9 3.2-6.2 4.2-4.8 1.5-7.3 1.5c-3.8 0-7.5-1.1-10.6-3.2l-.1 0zM448 96c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320zM357 389c-18.7 18.7-41.4 24.6-67 25.9-26.4 1.5-105.6 1.5-132 0-25.6-1.3-48.3-7.2-67-25.9s-24.6-41.4-25.8-67c-1.5-26.4-1.5-105.6 0-132 1.3-25.6 7.1-48.3 25.8-67s41.5-24.6 67-25.8c26.4-1.5 105.6-1.5 132 0 25.6 1.3 48.3 7.1 67 25.8s24.6 41.4 25.8 67c1.5 26.3 1.5 105.4 0 131.9-1.3 25.6-7.1 48.3-25.8 67l0 .1z'/></svg>
        </a>
        <a aria-label='YouTube' href='https://youtube.com/yourchannel' itemprop='sameAs' rel='noopener' target='_blank'>
         <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M282 256.2l-95.2-54.1 0 108.2 95.2-54.1zM384 32L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64zm14.4 136.1c7.6 28.6 7.6 88.2 7.6 88.2s0 59.6-7.6 88.1c-4.2 15.8-16.5 27.7-32.2 31.9-28.3 7.7-142.2 7.7-142.2 7.7s-113.9 0-142.2-7.6c-15.7-4.2-28-16.1-32.2-31.9-7.6-28.6-7.6-88.2-7.6-88.2s0-59.7 7.6-88.2c4.2-15.8 16.5-28.2 32.2-32.4 28.3-7.7 142.2-7.7 142.2-7.7s113.9 0 142.2 7.7c15.7 4.2 28 16.6 32.2 32.4z'/></svg>
        </a>
        <a aria-label='Pinterest' class='pinterest' href='https://pinterest.com/yourprofile' itemprop='sameAs' rel='noopener' target='_blank'>
    <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M384 32L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l72.6 0-2.2-.8c-5.4-48.1-3.1-57.5 15.7-134.7 3.9-16 8.5-35 13.9-57.9 0 0-7.3-14.8-7.3-36.5 0-70.7 75.5-78 75.5-25 0 13.5-5.4 31.1-11.2 49.8-3.3 10.6-6.6 21.5-9.1 32-5.7 24.5 12.3 44.4 36.4 44.4 43.7 0 77.2-46 77.2-112.4 0-58.8-42.3-99.9-102.6-99.9-69.9 0-110.9 52.4-110.9 106.6 0 21.1 8.2 43.7 18.3 56 2 2.4 2.3 4.5 1.7 7-1.1 4.7-3.1 12.9-4.7 19.2-1 4-1.8 7.3-2.1 8.6-1.1 4.5-3.5 5.5-8.2 3.3-30.6-14.3-49.8-59.1-49.8-95.1 0-77.5 56.2-148.6 162.2-148.6 85.2 0 151.4 60.7 151.4 141.8 0 84.6-53.3 152.7-127.4 152.7-24.9 0-48.3-12.9-56.3-28.2 0 0-12.3 46.9-15.3 58.4-5 19.3-17.6 42.9-27.4 59.3L384 480c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64z'/></svg>
    </a>
      </div>
    </div>

Silahkan ganti yang Warna Merah dengan URL media sosial kalian

7.Mengganti Atribusi (Credit Pembuat Template)

Buka Tema > Edit HTML.
Cari bagian media sosial, biasanya di dalam div dengan kelas seperti social-footer atau di dekat copyright.
Cari tag: <div class='footer-bottom'>
Struktur kodenya akan terlihat seperti ini:

 <div class='footer-bottom'>
    <p>Copyright&#169; 2025 | Template by <a href='https://www.inteknologi.com/' itemprop='creator' rel='noopener' target='_blank'><data:blog.title/></a>
    </p>
  </div>

Silahkan ganti yang warna merah dengan link yang kalian mau

8. Membuat Download Button dan Tabel Responsif di Template GridSpeed

Selain pengaturan dasar template seperti menu navigasi dan warna, kualitas sebuah postingan sering kali ditentukan oleh elemen-elemen khusus yang membantu pembaca, seperti tombol unduh dan tabel data. Template GridSpeed telah menyediakan styling CSS yang elegan dan siap pakai untuk elemen-elemen ini.

Bagian ini akan memandu Anda secara spesifik mengenai kode HTML yang perlu Anda sisipkan langsung di editor postingan (mode HTML) agar Anda dapat:

Membuat Tombol Download (Download Button) yang menarik dengan berbagai pilihan warna, tanpa perlu mengotak-atik CSS.
Menyajikan Data dalam Tabel yang tetap rapi dan responsif, bahkan saat diakses melalui perangkat mobile (ponsel pintar).

Dengan menggunakan kode-kode berikut, konten Anda akan terlihat lebih profesional, terstruktur, dan tentu saja, ramah pengguna.

Membuat Download Button.

Untuk membuat download button kalian tinggal gunakan saja kode berikut ini :

<a class="button button1" href="https://www.inteknologi.com/" role="button" target="_blank">Demo</a>
<a class="button button2" href="https://github.com/Sutrisnot/Grid-Speed-Template" role="button" target="_blank">Download</a></p>

Silahkan ganti Link yang warna merah dengan Link Kalian

Pengaturan Meta Tags (Optimasi SEO Dasar)

GridSpeed adalah template yang fokus pada SEO. Kalian bisa mengatur deskripsi meta default blog kalian langsung dari kode HTML.

Tujuan: Mengganti deskripsi blog yang muncul di hasil pencarian Google jika postingan Kaliantidak memiliki deskripsi meta spesifik.

Cara Setting:

Buka Tema > Edit HTML.
Cari bagian <meta expr:content=... di dalam <head>:

<meta expr:content='data:blog.metaDescription ? data:blog.metaDescription : &quot;Blog teknologi dan tutorial coding terbaru&quot;' name='description'/>

Ganti teks di antara "...":

Blog teknologi dan tutorial coding terbaru

Contoh Perubahan: Ganti dengan deskripsi singkat blog Anda, misalnya: "Kumpulan panduan blogger, tips SEO, dan review gadget terbu

Untuk Cara Pemasangan iklan Adsense silahkan lihat artikl berikut : Cara Pasang IKlan Adsense Pada template GridSpeed.

Jika masih bingung silahkan tinggalkan komentar dibawah.

Inteknologi.com