Tutorial Blogger: Cara Mudah Membuat Widget Baca Juga Artikel Lainnya di Tengah Paragraf Artikel Blogger
Salam Ngerapik Blog, apa kabar blogger teman teman semua masih amankah dari Index Search Google, atau sudah parah seperti Index Blog Ngerapik saya ini😅 Kali ini saya mencoba bersemangat menulis lagi meskipun blog ini sangat susah di index google..hahaha😁yaitu menerapkan pengaplikasian tutorial blog tentang Cara Mudah Membuat Widget Baca Juga Artikel Lainnya di Tengah Paragraf Artikel Blogger. Cekidot wae..
Apakah template blogger yang teman teman gunakan tidak menyediakan widget baca juga artikel lainnya di tengah paragraf artikel? banyak kok yang mengulasa cara pemasangan widget ini, namun biasanya mereka menggunakan javascript eval(), escape(), atau unescape() yang terkadang dianggap malware bagi sebagian cek virus blogger, seperti Sucuri SiteCheck.
Nah, kode yang akan saya bagikan ini sudah sesuai dengan keinginan sobat blogger, gak ada mengandung javascript diatas. Aman kok saya sudah mengaplikasikannya pada blog ngerapik ini, lihat tangkapan layar dibawah ini:
Gak usah panjang lebar, mari teman teman simak langkah-langkahnya pembuatannya.
Cara Membuat Kolom Widget di Bawah Header pada Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Edit HTML Template.
3. Cari kode </body>. Gunakan Tombol ctrl+F
4. Masukan kode berikut diatas kode </body>
<div id="aoi-recent-posts">Cari artikel...</div>
<style>
#aoi-recent-posts {
display: flex;
flex-direction: column;
gap: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing: border-box;
counter-reset: aoi-counter;
}
.aoi-post-item {
display: flex;
align-items: center;
gap: 14px;
background: #000000;
padding: 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
text-decoration: none;
transition: background 0.3s ease;
position: relative;
}
.aoi-post-item:hover {
background: #111111;
}
.aoi-thumb-wrapper {
width: 60px;
height: 60px;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.1);
position: relative;
margin-left: 12px;
}
.aoi-thumb-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.aoi-post-item:hover .aoi-thumb-wrapper img {
transform: rotate(360deg);
}
.aoi-post-item::before {
counter-increment: aoi-counter;
content: counter(aoi-counter);
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 22px;
height: 22px;
background-color: #0056b3;
color: #ffffff;
font-size: 11px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.aoi-title-wrapper {
flex: 1;
}
.aoi-post-title {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: #f0f0f0;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.aoi-post-title { font-size: 13px; }
}
</style>
<script>
function aoiRecentPosts(json) {
var container = document.getElementById('aoi-recent-posts');
var html = '';
var maxPosts = 5;
if (json.feed.entry) {
for (var i = 0; i < maxPosts; i++) {
if (i == json.feed.entry.length) break;
var entry = json.feed.entry[i];
var title = entry.title.$t;
var url = '';
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') { url = entry.link[k].href; break; }
}
var imgUrl = 'https://googleusercontent.com';
if (entry.media$thumbnail) {
imgUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s150-c/');
}
html += '<a class="aoi-post-item" href="' + url + '">';
html += '<div class="aoi-thumb-wrapper"><img src="' + imgUrl + '" alt="' + title + '"/></div>';
html += '<div class="aoi-title-wrapper"><h4 class="aoi-post-title">' + title + '</h4></div>';
html += '</a>';
}
container.innerHTML = html;
}
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=aoiRecentPosts"></script>
//Keterangan Perubahan Kode:
Silahkan ganti dan rubah kode dibawah ini:
- var labelTarget = ["Blogger", "My Histori", "tutorial"]; // rubah sesuai label blog teman teman blogger yang diingginkan tampil.
- if (totalTersisip >= 5) break; / rubah sesuai jumlah artikel yang akan ditampilkan pada blog teman teman semua.
Setelah semuanya selesai dikonfigurasi, jangan lupa klik tombol Simpan dan lihat hasilnya di blog teman teman ya. Sekarang widget Baca Juga Artikel Lainnya di Tengah Paragraf Artikel sudah tampil beda, dinamis, dan terlihat sangat elegan menyala boss quee😁
Demikianlah artikel singkat saya kali ini tentang "Cara Mudah Membuat Widget Baca Juga Artikel Lainnya di Tengah Paragraf Artikel Blogger" semoga dapat bermanfaat serta dapat diaplikasikan pada blog toko online sobat blogger juga semuanya. Selamat mencoba untuk mempercantik dan memperganteng blog teman teman semua. Salam Ngerapik Blog.
