Menu

  • Home
  • Latest
  • Trending
  • FORUM
  • Activity
  • Members
  • Announcement
  • Need help?

Categories

  • Android (16)
  • Apps (38)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (30)
  • Entertainment (1)
  • Event (17)
  • Game (3)
  • Internet (21)
  • Laptop (73)
  • News (3)
  • OS (15)
  • Peripheral (25)
  • Personal (259)
  • Publisher (3)
  • Review (23)
  • Smartphone (56)
  • Social Media (7)
  • Tablet (1)
  • Technology (157)
  • Tips (77)
  • Travel (5)
  • Tutorial (138)
  • Unboxing (18)
  • Video (47)
  • Web (27)
  • Windows (6)
  • Wordpress (20)
  • YouTube (21)

Tags

Advertise Android Android 4 KitKat Android 9 Pie ASUS Bardi Blog Coding Competition CSS Experience ExpertBook Firmware Game Mobile Google Google Play Store HTML IndiHome Laptop Bisnis Laptop Gaming Plugins Press Release Republic of Gamers ROG Phone Smart Home Smartphone Gaming Spesifikasi dan Harga Technology Troubleshooting Update Upgrade VivoBook VPN Widget Youtube Zenbook Zenfone Zenfone 3 Zenfone 3 Max Zenfone 4 Zenfone 5 Zenfone 6 Zenfone Max Zenfone Max Pro M1 Zenfone Zoom S
XKOMODOTCOM - Sharing is Caring
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM - Sharing is Caring
Home Web Wordpress
Cara Menambahkan Fitur Accordion di ToC RankMath Jadi Bisa Show & Hide Seperti Plugin Premium

Cara Menambahkan Fitur Accordion di ToC RankMath Jadi Bisa Show/Hide Seperti Plugin Premium

Fitur accordion bisa menyembunyikan dan memunculkan ToC RankMath (collapse/toggle button)

Febri Tri Harmoko by Febri Tri Harmoko
February 19, 2023
in Wordpress, Tutorial
0
0

Kita tahu kalau sekarang RankMath SEO sudah membuat fitur tambahan pada plugin -nya yaitu Table of Contents by RankMath, namun fitur yang diberikan merupakan fitur standar dan biasa saja menurut saya. Apalagi kalau artikel kita panjang lebih dari 1000 kata, tentu ToC RankMath akan terlihat jelek dan tidak rapi karena tidak bisa disembunyikan dan tidak memiliki fitur show/hide atau biasa kita kenal dengan fitur Accordion aka Collapsibles.

Table of Contents

  • Cara Menambahkan fitur Accordion di ToC RankMath
    • 1. Tambahkan CSS Accordion ToC RankMath ke Website
    • 2. Tambahkan Filter pemanggil ToC Collapse/Toggle RankMath ke file Functions.php
    • 3. Simpan dan coba jalankan ToC RankMath di Website kamu
  • Ingin Mempercantik Tampilan ToC RankMath?

Cara Menambahkan fitur Accordion di ToC RankMath

Seperti yang sedang ingin saya bahas di sini, jika kamu pengguna Table of Contents by RankMath, seperti saya. Maka kamu akan membutuhkan fitur ini. Kamu bisa lihat sendiri contoh dari accordion yang saya gunakan di ToC RankMath. Jika kamu menginginkannya, saya akan bagikan caranya secara cuma-cuma. Kamu tinggal ikuti saja langkah-langkah yang akan saya bagikan di dalam artikel ini, pastikan kamu sudah mengerti secara basic bagaimana cara menyimpan CSS dan functions.php. Jika kamu belum paham, silakan baca-baca terlebih dahulu di lewat Google Search.

1. Tambahkan CSS Accordion ToC RankMath ke Website

CSS
.wp-block-rank-math-toc-block {
	position:relative;
}

.wp-block-rank-math-toc-block h2 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position:relative;
    margin-bottom: 0;
}
.wp-block-rank-math-toc-block h2:before {
	display:inline-block;
	content: "";
        width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #000000;
	margin-right: 8px;
}

.wp-block-rank-math-toc-block nav{
	padding: 10px 10px 0px 10px;
	max-height: 0;
	overflow:hidden;
}
.wp-block-rank-math-toc-block input:checked+h2~nav {
	max-height: 200vh;
	overflow:visible;
}

TIPS
CSS ToC Accordion untuk RankMath di atas adalah CSS standar, kamu bisa modifikasi seperti yang saya lakukan. Sesuaikan dengan kebutuhan kamu, untuk tampilan dan warnanya.

2. Tambahkan Filter pemanggil ToC Collapse/Toggle RankMath ke file Functions.php

PHP
/**
 * Convert Rank Math FAQ Block Into Accordion
 */
function turn_rm_toc_collapsable() {
    ?>
    <script>
        jQuery(document).ready(function() {
            var tocItems = jQuery("div.wp-block-rank-math-toc-block");
            tocItems.bind("click", function(event) {
                var nav = jQuery(this).find("nav");
                if (nav.css("overflow") == "hidden") {
                    nav.css("overflow", "visible");
                    nav.css("max-height", "200vh");
                } else {
                    nav.css("overflow", "hidden");
                    nav.css("max-height", "0");
                }
            });
        });
 
    </script>
    <?php
}
add_action( 'wp_footer', 'turn_rm_toc_collapsable' );

3. Simpan dan coba jalankan ToC RankMath di Website kamu

Selesai, setelah kamu menyimpan CSS ToC RankMath dan filter pemanggil ToC collapse/toggle untuk ToC RankMath. Maka nantinya secara otomatis semua Table of Contents RankMath kamu akan memiliki fitur show/hide seperti yang saya gunakan di website https://xkomo.com.

Ingin Mempercantik Tampilan ToC RankMath?

Mungkin di artikel berikutnya saya akan bagikan beberapa CSS modifikasi ToC RankMath yang saya punya, siapa tahu kamu membutuhkannya. Tetapi tentu ada syaratnya. Jika artikel ini ramai hingga 1000 views lebih dan 100 komentar lebih, maka akan segera saya proses kumpulan ide dan CSS untuk ToC RankMath.

Jadi, ayo ramaikan artikel ini ya …

Source: How to Add Accordion feature on ToC RankMath?
Tags: CodingCSSPluginsRankMath
Previous Post

Cara Menghilangkan Iklan di DoodStream, Selamat Tinggal Iklan Pop-up dan Kawan-kawannya!

Next Post

How To Setting Mouse Macro a4Tech X7, Quick Change for Shotgun in-game

Leave a Reply Cancel reply

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

Promo Jagoan Hosting

Promo Hosting Murah - Jagoan Hosting

Recommended Videos

For You
Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan

Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan!

39 VIEWS
March 13, 2023
Cara Upgrade Android 13 ROG di Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

Cara Upgrade Android 13 di ROG Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

57 VIEWS
March 3, 2023
Cara Membuat Website di Jagoan Hosting

Cara Membuat Website WordPress di Jagoan Hosting, 100% Mudah dan Cepat untuk Pemula!

38 VIEWS
February 26, 2023
Show More

© 2023 XKOMODOTCOM

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • Terms & Conditions

© 2023 XKOMODOTCOM

No Result
View All Result
  • Account
XKOMODOTCOM
  • MENU
  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?
  • CATEGORIES
  • Cryptocurrency
  • Download
  • Event
  • Internet
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps
    • Computer
    • Game
    • Laptop
    • OS
      • Android
      • Windows
    • Peripheral
    • Smartphone
  • Tips
  • Tutorial
  • Unboxing
  • Web
    • Blogger
    • WordPress

© 2023 XKOMODOTCOM

Link Start!

Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist