Random post Bloger

Widget Articole Aleatorii (Random Post) Realizat de petre-vitan

Previzualizare widget în bara laterală (Sidebar):

🎲 Articole Aleatorii

• 1 Cum să îți optimizezi blogul în câțiva pași
• 2 Cele mai bune trucuri CSS pentru începători
• 3 Ghid complet de instalare scripturi Blogspot

Codul sursă de copiat:

<div id="pv-random-posts">Se încarcă articolele...</div> <!-- Script Articole Aleatorii Eficient --> <!-- Realizat de petre-vitan --> <script type='text/javascript'> //<![CDATA[ var numar_articole = 5; var afiseaza_numaratoare = true; function genereazaArticoleAleatorii(json) { var totalIntrari = json.feed.entry.length; var numereAleatorii = []; while (numereAleatorii.length < Math.min(numar_articole, totalIntrari)) { var r = Math.floor(Math.random() * totalIntrari); if (numereAleatorii.indexOf(r) === -1) numereAleatorii.push(r); } var html = '<ul style="list-style:none; padding:0; margin:0;">'; for (var i = 0; i < numereAleatorii.length; i++) { var entry = json.feed.entry[numereAleatorii[i]]; var titluArticol = entry.title.$t; var linkArticol; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel == 'alternate') { linkArticol = entry.link[j].href; break; } } html += '<li class="pv-random-item">'; if (afiseaza_numaratoare) { html += '<span class="pv-random-num">' + (i + 1) + '</span>'; } html += '<a class="pv-random-link" href="' + linkArticol + '">' + titluArticol + '</a>'; html += '</li>'; } html += '</ul>'; document.getElementById('pv-random-posts').innerHTML = html; } document.addEventListener("DOMContentLoaded", function() { var script = document.createElement('script'); script.src = '/feeds/posts/summary?alt=json-in-script&max-results=500&callback=genereazaArticoleAleatorii'; document.body.appendChild(script); }); //]]> </script> <style> .pv-random-item { padding: 8px 0; border-bottom: 1px solid #333333; display: flex; align-items: center; gap: 10px; } .pv-random-item:last-child { border-bottom: none; } .pv-random-num { background: #00aa66; color: #ffffff; font-size: 11px; padding: 2px 6px; border-radius: 3px; font-weight: bold; } .pv-random-link { color: #ffffff; text-decoration: none; font-size: 13px; font-weight: bold; transition: color 0.2s ease; } .pv-random-link:hover { color: #00aa66; } </style>

🛠️ Cum se instalează pe Blogspot (ca și Gadget de Sidebar):

1. Copiați codul de mai sus dând clic pe butonul Copiază Codul.
2. Intrați în contul dumneavoastră Blogger.
3. În meniul din stânga, selectați secțiunea Aspect (Layout).
4. Navigați către zona barei laterale (Sidebar) și faceți clic pe Adăugați un gadget (Add a Gadget).
5. Din fereastra pop-up care se deschide, alegeți opțiunea HTML/JavaScript.
6. La câmpul „Titlu” puteți scrie de exemplu 🎲 Articole Aleatorii.
7. Lipiți întregul cod copiat în secțiunea de text numită Conținut (Content).
8. Apăsați butonul Salvați (Save), apoi salvați configurația generală a aspectului din colțul din dreapta jos al ecranului.