אם אתר בעל אתר blogspot וברצונך שיופיע תפריט של כל הרשומות בבלוג,
הכנס לעריכת הבלוג (עיצוב) > פריסה > הוספת גאדג'ט > HTML/Javascript >
כותרת: תפריט של שניר
תוכן - הוסף תגית פותחת וסוגרת:<script>. . .</script>
וביניהן את הקוד שמופיע להלן או באתר
github
.
כתבתי קוד JS בשביל ליצור תפריט לבלוג הזה:
javascript:(()={/*blogspot menu*/const s=document.createElement('style');s.textContent=`#floatingMenu{position:fixed;top:100px;right:10px;width:300px;max-height:450px;background:rgba(0,0,0,0.7);color:white;font-family:Arial,sans-serif;font-size:14px;border-radius:6px;box-shadow:0 0 12px black;display:flex;flex-direction:column;user-select:none;z-index:999999;overflow:hidden;transition:max-height 0.4s ease;}#floatingMenu.collapsed{max-height:40px;}#floatingMenuHeader{padding:8px 10px;background:rgba(0,0,0,0.85);cursor:move;display:flex;justify-content:space-between;align-items:center;font-weight:bold;}#floatingMenuTitle{flex-grow:1;}#floatingMenuControls{display:flex;align-items:center;}#floatingMenuControls>button{cursor:pointer;color:white;margin-left:12px;font-weight:bold;user-select:none;background:none;border:none;font-size:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;}#searchInput{margin:0 10px;padding:5px 8px;border-radius:4px;border:none;font-size:14px;width:calc(100% - 20px);box-sizing:border-box;direction:rtl;}#floatingMenuList{padding:5px 10px;transition:opacity 0.4s ease;flex-grow:1;display:flex;flex-direction:column;overflow:hidden;}#floatingMenuList.fade{opacity:0;}#floatingMenuList.scrollable{overflow-y:auto;max-height:380px;}#floatingMenuList div{padding:5px 8px;border-radius:4px;margin-bottom:4px;background:rgba(255,255,255,0.1);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:background 0.2s ease,opacity 0.3s ease;}#floatingMenuList div:hover{background:rgba(255,255,255,0.25);}#highlight{background:yellow;color:black;font-weight:bold;}#floatingMenu.collapsed #searchInput,#floatingMenu.collapsed #floatingMenuList{opacity:0;pointer-events:none;height:0;padding:0 10px;overflow:hidden !important;transition:opacity 0.4s ease,height 0.4s ease,padding 0.4s ease,margin 0.4s ease;}#floatingMenuList .active{background:orange !important;color:black !important;}`;document.head.appendChild(s);const m=document.createElement('div');m.id='floatingMenu';const h=document.createElement('div');h.id='floatingMenuHeader';const t=document.createElement('div');t.id='floatingMenuTitle';t.textContent='פוסטים';const c=document.createElement('div');c.id='floatingMenuControls';const b1=document.createElement('button');b1.textContent='-';const b2=document.createElement('button');b2.textContent='×';c.appendChild(b1);c.appendChild(b2);h.appendChild(t);h.appendChild(c);const inp=document.createElement('input');inp.id='searchInput';inp.placeholder='חפש פוסטים...';const l=document.createElement('div');l.id='floatingMenuList';m.appendChild(h);m.appendChild(inp);m.appendChild(l);document.body.appendChild(m);function H(t){return/[\u0590-\u05FF]/.test(t);}function E(s){return s.replace(/[.*+?^${}()|[\]\\]/g,'\\$&');}function G(){const ps=document.querySelectorAll('h2.post-title,h3.post-title'),r=[];ps.forEach((p,i)=>{const a=p.querySelector('a');const txt=a?a.textContent.trim():p.textContent.trim();r.push({el:p,text:txt,index:i});});return r;}function X(txt,term){if(!term)return txt;const re=new RegExp('('+E(term)+')','gi');return txt.replace(re,'$1');}let ai=-1;function U(){const term=inp.value.trim().toLowerCase(),ps=G();l.classList.add('fade');setTimeout(()=>{l.innerHTML='';const f=ps.filter(p=>p.text.toLowerCase().includes(term));l.classList.toggle('scrollable',f.length>10);if(f.length===0){const n=document.createElement('div');n.textContent='לא נמצאו פוסטים';n.style.textAlign='center';n.style.opacity='0.7';l.appendChild(n);}else{f.forEach(({el,text})=>{const d=document.createElement('div');d.innerHTML=X(text,term);d.style.textAlign=H(text[0])?'right':'left';d.style.direction=H(text[0])?'rtl':'ltr';d.addEventListener('click',()=>{el.scrollIntoView({behavior:'smooth',block:'center'});d.style.backgroundColor='yellow';setTimeout(()=>{d.style.backgroundColor='';},1500);});l.appendChild(d);});}},200);setTimeout(()=>l.classList.remove('fade'),250);V();}function V(){const ps=G();let mid=window.innerHeight/2,closest=-1,minDist=1e6;ps.forEach((p,i)=>{const r=p.el.getBoundingClientRect(),dist=Math.abs(r.top+r.height/2-mid);if(dist{d.classList.toggle('active',i===closest);});ai=closest;}b1.addEventListener('click',()=>m.classList.toggle('collapsed'));b2.addEventListener('click',()=>m.remove());inp.addEventListener('input',U);U();let drag=false,sx,sy,mx,my;h.addEventListener('mousedown',e=>{drag=true;sx=e.clientX;sy=e.clientY;const r=m.getBoundingClientRect();mx=r.left;my=r.top;e.preventDefault();});window.addEventListener('mousemove',e=>{if(!drag)return;let nx=mx+(e.clientX-sx),ny=my+(e.clientY-sy);nx=Math.max(0,Math.min(nx,window.innerWidth-m.offsetWidth));ny=Math.max(0,Math.min(ny,window.innerHeight-m.offsetHeight));m.style.left=nx+'px';m.style.top=ny+'px';m.style.right='auto';});window.addEventListener('mouseup',()=>drag=false);window.addEventListener('scroll',()=>V());})();
לחלופין אפשר למצוא את הקוד ב-Github שלי
https://github.com/snirex/blogspot-menu
