Tentu! Berikut adalah format HTML yang siap untuk di-upload ke postingan Blogger. Anda bisa menyalin dan menempelkan kode ini ke editor postingan Blogger Anda. ```html

Cara Menambahkan Fitur Toggle untuk Layout Grid di Template Plus UI

Fleksibilitas layout blog sangat penting untuk meningkatkan pengalaman pengguna. Jika Anda menggunakan template Plus UI, Anda punya kesempatan untuk menyesuaikan blog Anda dengan menambahkan fitur toggle yang memungkinkan pengunjung beralih antara layout grid tunggal dan ganda. Artikel ini akan memandu Anda langkah demi langkah untuk menambahkan fitur ini, sehingga blog Anda jadi lebih menarik dan fungsional.

Kenapa Perlu Toggle untuk Layout Grid?

• Pengalaman Pengguna: Dengan memberikan pilihan layout kepada pembaca, Anda bisa memenuhi berbagai preferensi mereka, yang akan meningkatkan keterlibatan dengan blog Anda.
• Estetika: Layout yang berbeda dapat menonjolkan berbagai aspek konten Anda, membuat blog Anda lebih menarik secara visual.
• Fungsionalitas: Pembaca bisa dengan mudah beralih antara layout tanpa perlu mengubah keseluruhan struktur blog.

Panduan Langkah demi Langkah

1. Menyiapkan Struktur HTML

1. Masuk ke dasbor Blogger Anda dan pilih Themes.
2. Klik ikon di samping tombol Sesuaikan.
3. Tekan Ctrl + F dan cari titlePost dalam kode template Anda. Anda akan menemukan kode seperti ini:

   <!--[ Ganti <data:messages.latestPosts/> untuk mengganti 'Latest Posts' dengan teks khusus Anda ]-->
   <h2 class='title dt'><data:messages.latestPosts/></h2>

4. Ganti kode tersebut dengan kode ini:

   <div class='tn-credit' made-by='WIKIFORTECH | YouTube' style='display: none;'/>
   <h2 class='title'><data:messages.latestPosts/></h2>
   <div class='gridMode dt'>
       <label> Grid
           <input id='toggleSwitch' type='checkbox' />
           <svg class='line' id='toggleIcon' viewBox='0 0 24 24'>
               <path d='M10 4H14C18.42 4 22 7.58 22 12C22 16.42 18.42 20 14 20H10C5.58 20 2 16.42 2 12C2 7.58 5.58 4 10 4Z'/>
               <path class='svgG' d='M10 16C12.2091 16 14 14.2091 14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 14.2091 7.79086 16 10 16Z'/>
           </svg>
       </label>
   </div>

5. Catatan! Jangan hapus kredit dari kode ini. Kredit tersebut tidak akan tampil di situs Anda, tetapi sangat penting untuk menjaga hak cipta.

2. Menambahkan CSS untuk Layout

1. Tekan Ctrl + F lagi dan cari tag ]]>.
2. Tempelkan kode CSS berikut di atas tag tersebut:

   .gridMode label {
       display: flex;
       align-items: center;
       cursor: pointer;
       font-size: var(--widgetT);
       font-weight: var(--widgetTw);
       position: relative;
   }
   .gridMode svg {
       width: 22px;
       height: 22px;
       margin: 0 8px;
   }
   .gridMode input {
       display: none;
   }
   .svgG {
       fill: var(--themeC);
       stroke: var(--themeC);
   }
   .drK .svgG {
       fill: var(--darkU);
       stroke: var(--darkU);
   }
   @media (min-width: 501px) {
       .gridMode {
           display: none;
       }
   }

3. Menambahkan JavaScript untuk Toggle

1. Temukan tag </body> di akhir kode template Anda.
2. Salin kode JavaScript berikut dan tempelkan di atas tag </body>:

   <script>
       /*','','6295416AAcCyT','onload','getItem','28xijTGJ','add','2333815xqfuzV','WIKIFORTECH\x20|\x20YouTube','made-by','change','addEventListener','off','getAttribute','421098MUvyAx','Credit\x20removed\x20or\x20modified!\x20Please\x20restore\x20the\x20original\x20credit\x20to\x20use\x20this\x20functionality.','checked','setItem','getElementById'];
         I=function(){return k;};
         return I