Langsung ke konten utama

Membuat Fitur khusus Admin untuk Blogspot

author profile

MAGIC Reincarnated

Web Developer •
# #
Banner

Membuat Fitur khusus Admin untuk Blogspot

Cara bikin Menu Admin di Blogspot menggunakan JavaScript. Menu ini hanya tampil untuk admin yang sudah terdaftar diblog dan berfungsi sebagai shortcut ke halaman-halaman penting Blogger seperti Backup, Edit HTML, Layout, Post, Dashboard, Stats, Settings, Theme, dan Comments.

Selain itu kode ini juga bisa dimanfaatkan untuk membuat halaman Maintencent yang hanya muncul pada pengunjung biasa.. sedangkan Admin tidak akan muncul

DEMO

Tidak ada live demo karena memang gak bisa dilive demo

Fitur

  • Menu hanya aktif jika sudah terdaftar diblog sebagai admin.
  • Khusus Admin: Bisa digunakan untuk element lain cukup dengan pasang attribute khusus="admin" pada element yang diinginkan hanya muncul untuk admin.
  • Khusus user: Bisa digunakan untuk element lain cukup dengan pasang attribute khusus="user" pada element yang diinginkan hanya muncul untuk user, diAdmin tidak akan muncul (cocok buat halaman maintencent).

Keunggulan

  • Mudah dipasang di template Blogger hanya dengan copy-paste.
  • tampil hanya untuk admin, jika bukan admin element akan dihapus.

CSS

Letakan di atas </b:skin>

[khusus="admin"] {display: none}
      .floating-menu{position:fixed;bottom:30px;right:30px;z-index:9999;}
      .menu-button {display: flex;align-items: center;justify-content: center;}
      .menu-button{width:34px;height:34px;border-radius:50%;background:#2C2F33;color:#E4E6EB;border:none;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.3);transition:0.3s;font-size:12px;}
      .menu-button:hover{background:#5469B1;}
      .menu-items{position:absolute;bottom:30px;right:0;display:flex;flex-wrap:wrap;gap:15px;width:200px;transform:scale(0);transform-origin:bottom right;transition:transform .4s;}
      .menu-items.show{transform:scale(1);}
      .menu-item{width:34px;height:34px;background:#2C2F33;color:#E4E6EB;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;position:relative;transition:0.3s;font-size:11px;}
      .menu-item:hover{background:#5469B1;}
      .menu-item::after{content:attr(title);position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:#23272A;color:#E4E6EB;padding:5px 10px;border-radius:5px;white-space:nowrap;opacity:0;visibility:hidden;transition:0.3s;font-size:9px;}
      .menu-item:hover::after{opacity:1;visibility:visible;}

MainScript

Letakan di Atas </body>

<script type="text/javascript">
  /*<![CDATA[*/
  /*! Code: Auth admin | Dev: Hirutshuji, Roka  (https://datakodehiru.blogspot.com) | License: MIT | Copyright (c) 2025 Datakodehiru */
  !function(){let $="is_admin_authorized";function _(...$){}function e(...$){}function t($,_,...e){let t=document.createElement($);for(let l in _)"style"===l?Object.assign(t.style,_[l]):t.setAttribute(l,_[l]);return e.forEach($=>{"string"==typeof $?$.trim().startsWith("<svg")?t.innerHTML=$:t.appendChild(document.createTextNode($)):t.appendChild($)}),t}function l(){return _("[AUTH] Mengambil Blog ID..."),fetch("/feeds/posts/default?alt=json").then($=>$.json()).then($=>{let e=($.feed.id.$t||"").match(/blog-(\d+)/);if(!e)throw"Tidak dapat menemukan blogId!";return _("[AUTH] Blog ID:",e[1]),e[1]})}function o($){return new Promise(e=>{let l=`https://www.blogger.com/dyn-css/authorization.css?targetBlogID=${$}&zx=${Date.now()}`,o=t("link",{rel:"stylesheet",href:l});o.onload=()=>{_("[AUTH] CSS ter-load"),e(!0)},o.onerror=()=>{(function $(..._){})("[AUTH] Gagal load CSS"),e(!1)},document.head.appendChild(o),_("[AUTH] CSS diinject:",l)})}function r($){document.querySelectorAll('[khusus="admin"]').forEach(_=>{$?_.classList.add("blog-admin"):_.remove()}),document.querySelectorAll('[khusus="user"]').forEach(_=>{$?_.remove():_.classList.add("blog-user")}),_("[AUTH] processElements, isAdmin=",$)}function n($){_("[MENU] Membangun menu:",$);let e=t("button",{id:"menu_toggle",class:"menu-button",title:"Menu"},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M15.5 11.5a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0"/><path d="M21 13.6q.474-.132 1-.133V9.533c-2.857 0-4.714-3.103-3.268-5.566L15.268 2c-1.464 2.494-5.07 2.494-6.534 0L5.27 3.967C6.716 6.43 4.857 9.533 2 9.533v3.934c2.857 0 4.714 3.103 3.268 5.566L8.732 21A3.76 3.76 0 0 1 12 19.129"/><path d="m18.5 15l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L22 18.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L18.5 22l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L15 18.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705z"/></g></svg>'),l=t("div",{class:"menu-items"},t("a",{class:"menu-item",title:"Backup theme",href:`https://www.blogger.com/blogger-nongwt.g?blogID=${$}&action=download`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 6v6s0 3 7 3q.888 0 1.631-.06M18 6v6"/><path d="M11 3c7 0 7 3 7 3s0 3-7 3s-7-3-7-3s0-3 7-3m0 18c-7 0-7-3-7-3v-6m18.666 5.667C22.048 16.097 20.634 15 18.99 15c-1.758 0-3.252 1.255-3.793 3"/><path d="M20.995 17.667h1.671v0c.185 0 .334-.15.334-.334v-1.888m-7.666 4.888C15.952 21.903 17.366 23 19.01 23c1.758 0 3.252-1.255 3.793-3"/><path d="M17.005 20.333h-1.671v0a.334.334 0 0 0-.334.334v1.888"/></g></svg>'),t("a",{class:"menu-item",title:"Edit HTML",href:`https://www.blogger.com/blog/themes/edit/${$}`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><path fill="currentColor" d="M4 16v-2H2v2H1v-5h1v2h2v-2h1v5zm3 0v-4H5.6v-1h3.7v1H8v4zm3 0v-5h1l1.4 3.4h.1L14 11h1v5h-1v-3.1h-.1l-1.1 2.5h-.6l-1.1-2.5H11V16zm9 0h-3v-5h1v4h2zM9.4 4.2L7.1 6.5l2.3 2.3l-.6 1.2l-3.5-3.5L8.8 3zm1.2 4.6l2.3-2.3l-2.3-2.3l.6-1.2l3.5 3.5l-3.5 3.5z"/></svg>'),t("a",{class:"menu-item",title:"Layout",href:`https://www.blogger.com/blog/layout/${$}`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm16 0H5v3h14zM5 19v-9h4v9zm6 0h8v-9h-8z"/></g></svg>'),t("a",{class:"menu-item",title:"Backup post",href:`https://www.blogger.com/feeds/${$}/archive?authuser=0`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20H13q-.82 0-1.41-.59Q11 18.83 11 18v-5.15L9.4 14.4L8 13l4-4l4 4l-1.4 1.4l-1.6-1.55V18h5.5q1.05 0 1.77-.73q.73-.72.73-1.77t-.73-1.77Q19.55 13 18.5 13H17v-2q0-2.07-1.46-3.54Q14.08 6 12 6Q9.93 6 8.46 7.46Q7 8.93 7 11h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1H9v2m3-7"/></svg>'),t("a",{class:"menu-item",title:"Dashboard",href:`https://www.blogger.com/blog/posts/${$}`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m7.879 5l1.06-1.06l1.421-1.422a3.5 3.5 0 0 0-3.653 4.674l.326.897l-.675.674l-3.797 3.798a.621.621 0 1 0 .878.878l3.798-3.797l.674-.675l.897.325a3.5 3.5 0 0 0 4.674-3.653L12.06 7.062L11 8.12L9.94 7.06l-1-1zm6.173-1.93A5 5 0 0 1 15 6a5 5 0 0 1-6.703 4.703L4.5 14.5a2.121 2.121 0 0 1-3-3l3.797-3.797A5 5 0 0 1 13 2l-1.076 1.076l-.863.863L10 5l1 1l1.06-1.06l.864-.864L14 3z" clip-rule="evenodd"/></svg>'),t("a",{class:"menu-item",title:"Stats",href:`https://www.blogger.com/blog/stats/week/${$}`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"><path fill="currentColor" d="M1.75 13.25V1.5H.5v12a1.24 1.24 0 0 0 1.22 1H15.5v-1.25z"/><path fill="currentColor" d="M3.15 8H4.4v3.9H3.15zm3.26-4h1.26v7.9H6.41zm3.27 2h1.25v5.9H9.68zm3.27-3.5h1.25v9.4h-1.25z"/></svg>'),t("a",{class:"menu-item",title:"Settings",href:`https://www.blogger.com/blog/settings/${$}`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 15v-1.5M4 15V7c0-1.886 0-2.828.586-3.414S6.114 3 8 3h3m7 6.714V11m0-1.286a3.36 3.36 0 0 1-2.774-1.43M18 9.713a3.36 3.36 0 0 0 2.774-1.43M18 3.285c1.157 0 2.176.568 2.774 1.43M18 3.287a3.36 3.36 0 0 0-2.774 1.43M18 3.287V2m4 1.929l-1.226.788M14 9.07l1.226-.788M14 3.93l1.226.788M22 9.07l-1.226-.788m0-3.566a3.12 3.12 0 0 1 0 3.566m-5.548-3.566a3.12 3.12 0 0 0 0 3.566M3.498 16.015L4.02 15h15.932l.55 1.015c1.443 2.662 1.803 3.993 1.254 4.989s-2.002.996-4.91.996H7.154c-2.909 0-4.363 0-4.911-.996c-.549-.996-.19-2.327 1.254-4.989" color="currentColor"/></svg>'),t("a",{class:"menu-item",title:"Theme",href:`https://www.blogger.com/blog/themes/customizer/${$}`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M40.5 26h-33a2 2 0 0 0-2 2v12.5a2 2 0 0 0 2 2h33a2 2 0 0 0 2-2V28a2 2 0 0 0-2-2" stroke-width="2"/><rect width="16.5" height="16.5" x="5.5" y="5.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" rx="2" ry="2" stroke-width="2"/><rect width="6.452" height="6.452" x="26" y="15.548" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" rx="2" ry="2" stroke-width="2"/><rect width="6.452" height="6.452" x="26" y="5.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" rx="2" ry="2" stroke-width="2"/><rect width="6.452" height="6.452" x="36.048" y="15.548" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" rx="2" ry="2" stroke-width="2"/><rect width="6.452" height="6.452" x="36.048" y="5.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" rx="2" ry="2" stroke-width="2"/></svg>'),t("a",{class:"menu-item",title:"Comments",href:`https://www.blogger.com/blog/comments/${$}`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M16 4a3 3 0 0 1 2.995 2.824L19 7v2a3 3 0 0 1 2.995 2.824L22 12v4a3 3 0 0 1-2.824 2.995L19 19v.966c0 1.02-1.143 1.594-1.954 1.033l-.096-.072L14.638 19H11a3 3 0 0 1-1.998-.762l-.14-.134L7 19.5c-.791.593-1.906.075-1.994-.879L5 18.5V17a3 3 0 0 1-2.995-2.824L2 14V7a3 3 0 0 1 2.824-2.995L5 4zm3 7h-8a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h3.638a2 2 0 0 1 1.28.464l1.088.906A1.5 1.5 0 0 1 18.5 17h.5a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1m-3-5H5a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h.5A1.5 1.5 0 0 1 7 16.5v.5l1.01-.757A3 3 0 0 1 8 16v-4a3 3 0 0 1 3-3h6V7a1 1 0 0 0-1-1"/></g></svg>'),t("a",{class:"menu-item",title:"Create New Page",href:`https://www.blogger.com/blog/pages/${$}`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5v2H5v14h14v-5z"/><path fill="currentColor" d="M21 7h-4V3h-2v4h-4v2h4v4h2V9h4z"/></svg>'),t("a",{class:"menu-item",title:"Create New Post",href:`https://www.blogger.com/blog/posts/${$}`},'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M10 4.5H5.5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V11"/><path d="M17.5 3.467a1.46 1.46 0 0 1-.017 2.05L10.5 12.5l-3 1l1-3l6.987-7.046a1.41 1.41 0 0 1 1.885-.104zm-2 2.033l.953 1"/></g></svg>')),o=t("div",{class:"floating-menu"},e,l);document.body.appendChild(o),_("[DEBUG] Menu berhasil ditambahkan ke halaman."),e.addEventListener("click",()=>{l.classList.toggle("show"),_("[DEBUG] Menu toggle:",l.classList.contains("show")?"Terbuka":"Tertutup")})}window.buildAdminMenu=n,window.addEventListener("storage",_=>{if(_.key===$){let t="true"===_.newValue;r(t),t&&l().then(n).catch(e)}}),document.addEventListener("DOMContentLoaded",()=>{_("[INIT] DOMContentLoaded, cek localStorage...");let t=localStorage.getItem($);null!==t&&(r("true"===t),"true"===t&&l().then(n).catch(e)),l().then(o).then($=>!!$&&(_("[AUTH] Memeriksa .blog-admin..."),new Promise($=>{let _=document.querySelector(".blog-admin");if(_){let e="block"===window.getComputedStyle(_).display;return $(e)}let t=new MutationObserver((_,e)=>{let t=document.querySelector(".blog-admin");if(t){let l="block"===window.getComputedStyle(t).display;return e.disconnect(),$(l)}});t.observe(document.body,{childList:!0,subtree:!0}),setTimeout(()=>{t.disconnect(),$(!1)},2500)}))).then(_=>{localStorage.setItem($,_?"true":"false"),r(_),_&&window.buildAdminMenu&&l().then(window.buildAdminMenu).catch(e)}).catch(e)})}();
  /*]]>*/
</script>

Cara pakai

cukup pasang attribute sesuai pilihan khusus buat siapa element tersebut ditampilkan

pastikan class .blog-admin terpasang dekat dengan attribute khusus admin

// khusus Admin
<div class='blog-admin'  khusus='admin'>Fitur khusus Admin</div>
//khusus user
<div khusus='user'>Fitur Khusus User</div>

"Bahkan batu pun bisa bernyanyi jika disentuh oleh cahaya bulan."

“The journey continues in the next chapter...”

Komentar Pembaca

2 Komentar
  1. #Question...
    omega
    omega
    Member
    Terima kasih banyak ka
    delete Balas
  2. #Reply... omega
    MAGIC Reincarnated
    MAGIC Reincarnated
    Admin
    sama-sama, kalau ada bug laporkan saja.
    delete Balas
Tinggalkan komentar Jika suka dengan kontent ini
Masukkan URL Gambar (imgbb) / (im.ge) atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code

Recent Komentar

Animedayid

terimakasih panduannya

MAGIC Reincarnated

kode mainscript letaknya head, tepatnya bisa diatas </head>

MAGIC Reincarnated

kode mainscript letaknya head, tepatnya bisa diatas . cara untuk implementasiny...

MAGIC Reincarnated

dihentikan sementara. sampai ada waktu, bakal ku dikembangkan lagi kalau ada wak...

Animedayid

kalo di bloger ini tarunya di element mana ya?

Load More