구글 블로거 가젯 재수정 버그나서 화면 점이 가리는 현상 생겨서 수정함.

브금용

 

여기에 쓰는거 맞음 ㅇㅇ.
 

기존 가젯 다 좋은대 모바일 버전 과도하게 화면을 가리는 거랑
하얀 점이 펼쳐졋다 사라져야하는대 계속 나와있어서 팝업되게 바꿈
 
[수정 코드]

<!-- ============================= -->
<!-- 🔥 HOTKEY 팝업 가젯 (수정완료 풀버전) -->
<!-- ============================= -->

<div id='p5-all-in-one-menu'>

  <div id='p5-hotkey-wrap'>
    
    <!-- 🔥 메뉴 리스트 -->
    <div id='p5-items-container'>
      <ul id='p5-menu-list'>
        <li><a class='p5-item odd' href='/search/label/공지사항'><span>NOTICE</span></a></li>
        <li><a class='p5-item even' href='/search/label/애니메이션 리뷰'><span>ANIME REVIEW</span></a></li>
        <li><a class='p5-item odd' href='/search/label/만화'><span>MANGA</span></a></li>
        <li><a class='p5-item even' href='/search/label/정발 만화 책갈피'><span>BOOKMARK</span></a></li>
        <li><a class='p5-item odd' href='/search/label/인터넷 던전 아이템 와드'><span>ITEM WARD</span></a></li>
        <li><a class='p5-item even' href='/search/label/PC 및 IT관련'><span>PC &amp; IT</span></a></li>
        <li><a class='p5-item odd' href='/search/label/게임 관련'><span>GAMING</span></a></li>
        <li><a class='p5-item even' href='/search/label/스노%20AI'><span>SUNO AI</span></a></li>
        <li><a class='p5-item odd' href='/search/label/유튜브 클립(덕질용)'><span>YT CLIP</span></a></li>
      </ul>
    </div>

    <!-- 🔥 컨트롤 -->
    <div id='p5-control-panel'>
      
      <div id='p5-search-btn' onclick='openP5Search()' title='SEARCH'>
        <svg height='20' viewBox='0 0 24 24' width='20'>
          <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 
          6.5 6.5 0 1 1 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 
          4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 
          9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 
          14z' fill='white'/>
        </svg>
      </div>

      <div id='p5-hotkey-btn' onclick='toggleP5Menu()'>
        <span class='hotkey-text'>HOTKEY</span>
      </div>

    </div>
  </div>
</div>

<style>
/* ============================= */
/* 🔥 기본 */
/* ============================= */
#p5-all-in-one-menu { font-family: 'Arial Black', sans-serif; }

/* 위치 */
#p5-hotkey-wrap {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10000;
}

/* 컨트롤 */
#p5-control-panel {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* HOTKEY 버튼 */
#p5-hotkey-btn {
  width: 130px;
  height: 55px;
  background: #ff0000;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 3px solid #000;
  transition: 0.3s;
  box-shadow: 0 4px 15px rgba(255,0,0,0.4);
}

.hotkey-text {
  color: #fff;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 900;
  text-shadow: 2px 2px 0 #000;
}

/* 검색 버튼 */
#p5-search-btn {
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 3px solid #ff0000;
  transition: 0.3s;
}

#p5-search-btn:hover { background: #ff0000; }

/* ============================= */
/* 🔥 핵심 FIX (완전 숨김) */
/* ============================= */

/* 컨테이너 */
#p5-items-container {
  position: absolute;
  bottom: 85px;
  right: 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  max-height: 75vh;
  overflow-y: auto;
  padding: 10px;
  direction: rtl;
}

/* 아이템 기본 상태 (완전 숨김) */
.p5-item {
  display: inline-block;
  padding: 12px 35px;
  margin-bottom: 8px;
  font-weight: 900;

  transform: skewX(-15deg) translateX(250%) scale(0.8);
  opacity: 0;
  visibility: hidden;

  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  text-decoration: none;
  border-left: 10px solid #fff;
  white-space: nowrap;
  font-size: 0.95rem;
}

.p5-item span {
  display: inline-block;
  transform: skewX(15deg);
}

/* 색상 */
.p5-item.odd {
  background: #000;
  color: #fff;
  border-color: #ff0000;
}

.p5-item.even {
  background: #ff0000;
  color: #fff;
  border-color: #000;
}

/* 🔥 펼쳤을 때 */
#p5-hotkey-wrap.active #p5-items-container {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#p5-hotkey-wrap.active .p5-item {
  transform: skewX(-15deg) translateX(0%) scale(1);
  opacity: 1;
  visibility: visible;
}

/* 호버 */
.p5-item:hover {
  background: #fff !important;
  color: #000 !important;
  transform: skewX(-15deg) scale(1.1) translateX(-10px);
}

/* 스크롤 제거 */
#p5-items-container::-webkit-scrollbar { width: 0px; }

</style>

<script>
// =============================
// 🔥 JS
// =============================
function toggleP5Menu() {
  const wrap = document.getElementById('p5-hotkey-wrap');
  if (wrap) wrap.classList.toggle('active');
}

function openP5Search() {
  const q = prompt("SEARCH TARGET:");
  if (q) location.href = "/search?q=" + encodeURIComponent(q);
}
</script>

<!-- ============================= -->
<!-- 🔥 끝 -->
<!-- ============================= -->
    
	<div id='admin-hud-wrap'>

  <a href='https://www.blogger.com/blog/posts/4052524304412782356' id='admin-btn' target='_blank'>
    GM
  </a>

</div>

<style>
#admin-hud-wrap {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999999;
}

/* 🔥 GM 원형 버튼 */
#admin-btn {
  width: 60px;
  height: 60px;
  background: linear-gradient(145deg, #111, #000);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  border: 3px solid #ff0000;

  /* 🔥 GM 텍스트 스타일 */
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;

  /* 글로우 */
  box-shadow: 
    0 0 10px rgba(255,0,0,0.7),
    inset 0 0 8px rgba(255,0,0,0.4);

  transition: all 0.2s ease;
}

/* 클릭 느낌 */
#admin-btn:active {
  transform: scale(0.9);
  box-shadow: 
    0 0 5px rgba(255,0,0,0.9),
    inset 0 0 12px rgba(255,0,0,0.6);
}

/* PC 호버 */
#admin-btn:hover {
  transform: scale(1.1);
  background: #ff0000;
  color: #000;
}

/* ===================== */
/* 📱 모바일 대응 */
/* ===================== */
@media (max-width: 768px) {

  #admin-hud-wrap {
    top: 10px;
    right: 10px;
    bottom: auto;
    left: auto;
  }

  #admin-btn {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }
}

</style>

<!-- ============================= -->
<!-- 여기까지가 관리자 버튼이다 -->
<!-- ============================= -->
    
    
    
<!-- ============================= -->
<!-- 여기까지가 팝업 가젯이다 -->
<!-- ============================= -->

 
[이전 삽질글]

티스토리 대체 가능한 블로그 연구중. (구글 블로그)