Arhiva articole pe blog

Previzualizare Widget:

TOATE ARTICOLELE BLOGULUI

• Se încarcă articolele (0)...

Codul HTML pentru blogul tău:

<!-- Widget Liste Articole - Realizat de petre-vitan --> <div class="my-blog-titles-widget"> <div class="widget-title-box"> <div class="widget-title">TOATE ARTICOLELE BLOGULUI</div> </div> <div class="titles-scroll-container"> <ul id="myBloggerTitlesList"> <li class="loading-state" id="titlesLoadingMsg">Se încarcă articolele (0)...</li> </ul> </div> </div> <style> .my-blog-titles-widget { background: #161616; border: 2px solid #2e2e2e; border-radius: 12px; padding: 25px; font-family: sans-serif; width: 100%; margin: 15px auto; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6); box-sizing: border-box; } .widget-title-box { border: 2px solid #ff0033; border-radius: 6px; padding: 12px 15px; margin-bottom: 30px; background: linear-gradient(135deg, #161616, #1f1214); box-shadow: 0 0 10px rgba(255, 0, 51, 0.2), inset 0 0 8px rgba(0, 255, 204, 0.15); position: relative; } .my-blog-titles-widget .widget-title { font-size: 1.1rem; color: #00ffcc; letter-spacing: 2px; font-weight: 600; text-align: center; margin: 0; text-transform: uppercase; text-shadow: 0 0 8px rgba(0, 255, 204, 0.4); } .my-blog-titles-widget .titles-scroll-container { width: 100%; max-height: 580px; overflow-y: auto; padding-right: 10px; } .my-blog-titles-widget .titles-scroll-container::-webkit-scrollbar { width: 6px; } .my-blog-titles-widget .titles-scroll-container::-webkit-scrollbar-track { background: #161616; } .my-blog-titles-widget .titles-scroll-container::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; } .my-blog-titles-widget .titles-scroll-container::-webkit-scrollbar-thumb:hover { background: #ff0033; } .my-blog-titles-widget ul { list-style: none; padding: 0; margin: 0; } .my-blog-titles-widget li { background: #141414; border: 1px solid #2e2e2e; border-left: 5px solid #007bff; padding: 16px 20px; margin-bottom: 22px; border-radius: 6px; font-size: 0.95rem; transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .my-blog-titles-widget li a { color: #e0e0e0; text-decoration: none; display: flex; align-items: center; line-height: 1.5; transition: color 0.25s ease; } .my-blog-titles-widget .post-arrow-icon { width: 0; height: 0; margin-right: 14px; display: inline-block; flex-shrink: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #ffcc00; filter: drop-shadow(0 0 3px rgba(255, 204, 0, 0.4)); transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); } .my-blog-titles-widget li:hover { border-color: #444444; border-left-color: #00d2ff; background: #12171f; transform: translateX(10px); box-shadow: 0 8px 22px rgba(0, 123, 255, 0.4); } .my-blog-titles-widget li:hover a { color: #ffffff; text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); } .my-blog-titles-widget li:hover .post-arrow-icon { transform: translateX(5px) scale(1.1); border-left-color: #ffeaa7; filter: drop-shadow(0 0 8px #ffcc00); } .my-blog-titles-widget .loading-state { border: none; background: transparent; color: #ffcc00; text-align: center; } </style> <script> (function() { const rootList = document.getElementById("myBloggerTitlesList"); const loadingMsg = document.getElementById("titlesLoadingMsg"); let allPosts = []; const maxResultsPerPage = 150; function fetchTitlesPage(startIndex) { const scriptElement = document.createElement("script"); scriptElement.src = "/feeds/posts/default?alt=json-in-script&callback=parseMyInfiniteTitles&max-results=" + maxResultsPerPage + "&start-index=" + startIndex; document.body.appendChild(scriptElement); } window.parseMyInfiniteTitles = function(data) { const entries = data.feed.entry || []; allPosts = allPosts.concat(entries); if (loadingMsg) { loadingMsg.textContent = "Se încarcă articolele (" + allPosts.length + ")..."; } if (entries.length === maxResultsPerPage) { fetchTitlesPage(allPosts.length + 1); } else { renderAllTitles(); } }; function renderAllTitles() { if (!rootList) return; rootList.innerHTML = ""; if (allPosts.length === 0) { rootList.innerHTML = "<li>Nu am găsit niciun articol publicat pe acest blog.</li>"; return; } for (let i = 0; i < allPosts.length; i++) { const title = allPosts[i].title.$t; let url = "#"; for (let j = 0; j < allPosts[i].link.length; j++) { if (allPosts[i].link[j].rel === "alternate") { url = allPosts[i].link[j].href; break; } } const li = document.createElement("li"); const a = document.createElement("a"); a.href = url; a.target = "_blank"; const arrowSpan = document.createElement("span"); arrowSpan.classList.add("post-arrow-icon"); const titleText = document.createTextNode(title); a.appendChild(arrowSpan); a.appendChild(titleText); li.appendChild(a); rootList.appendChild(li); } } fetchTitlesPage(1); })(); </script>

Widget realizat cu pasiune de petre-vitan

Ghid de instalare pas cu pas:

Acțiune	Pași de urmat în panoul Blogger / Blogspot
1. Crearea paginii în Blogger	Accesează meniul din stânga și dă click pe Pages (Pagini). Apasă butonul de sus New Page (Pagină nouă). Introdu titlul dorit (ex: "Toate Articolele" sau "Hartă Site").
2. Adăugarea codului	În editorul paginii, apasă pe pictograma cu creion din stânga sus și alege HTML View (Vizualizare HTML). Șterge orice text existent și **lipește (Paste)** codul copiat mai sus. Apasă butonul portocaliu Publish (Publică) din dreapta sus.
3. Copierea link-ului paginii	Revino la lista de pagini din panou. Du cursorul de la mouse peste pagina nou creată și apasă pe pictograma în formă de Ochi (View). Din bara de adrese a browserului, **copiază adresa URL completă** a paginii tale.
4. Punerea link-ului în Meniu	Mergi în meniul Blogger la secțiunea Layout (Aspect). Caută gadgetul numit Main Menu, Page List sau Link List (în funcție de tema ta) și apasă *Edit*. Apasă pe Add a New Item (Adăugați un element nou). La *Site Name* scrie textul meniului, iar la *Site URL* **lipește link-ul paginii** copiat la pasul anterior. Salvează gadgetul și apoi apasă pe pictograma de salvare generală din colțul dreapta-jos al ecranului.