Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Featured News Ala Jalan Tikus di Blogger

Cara Membuat Featured News Ala Jalan Tikus di Blogger
Cara Membuat Featured News Ala Jalan Tikus di Blogger - Assalamualaikum, pada kesempatan kali ini saya akan memberikan tutorial lagi untuk kalian semua yaitu Membuat Featured News Ala Jalan Tikus.

Jika kalian tertarik dengan tutorial ini yuk ikuti langkah - langkah berikut ini :

Membuat Featured News Ala Jalan Tikus

Langkah pertama kalian Masuk Akun Blogger kalian.

Pilih menu Tata Letak, pilih Tambah Gadget kemudian pilih HTML/Javascript, tinggal masukkan kode berikut ini :
<div class="featured-news" style="box-sizing: border-box; max-height: 220px; min-width: 100%; overflow-x: auto; padding: 12px 15px; white-space: nowrap;"><div class="featured-news-lg box-6" style="display: inline-block; float: none; height: 193px; line-height: 193px; position: relative; vertical-align: middle; width: 298px;"><div class="news-image " style="background: url(&quot;data:image/png; height: 193px; overflow: hidden; text-align: center; transition: all 0.5s ease 0s; width: 298px;"><img alt="Judul Postingan ke 1" class="lazy" src="Gambar Postingan ke 1" style="height: 193px; margin: 0px -298px; min-height: 100%; min-width: 100%; position: relative; transform-origin: center center 0px; transition: all 0.5s ease 0s; vertical-align: top;" /></div><div class="news-detail" style="bottom: 0px; left: 0px; padding: 15px; pointer-events: none; position: absolute; white-space: normal; z-index: 9;"><h2 class="title color white" style="-webkit-box-orient: vertical; -webkit-line-clamp: 3; color: white; display: -webkit-box; font-family: Museo, sans-serif; font-size: 18px; line-height: 24px; margin: auto; max-height: 72px; overflow: hidden; padding: 0px !important; position: relative; text-overflow: ellipsis; text-shadow: rgba(0, 0, 0, 0.59) 0px 3px 6px;">Judul Postingan ke 1</h2></div><a class="link-overlay" href="URL Postingan ke 1" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); bottom: 0px; cursor: pointer; height: 193px; left: 0px; outline: 0px; position: absolute; right: 0px; text-decoration-line: none; top: 0px; width: 298px; z-index: 4;" target="_self"></a></div><div class="featured-news-sm box-3" style="display: inline-block; float: none; height: 193px; line-height: 220px; margin-left: 12px; position: relative; vertical-align: middle; width: 298px;"><div class="news-image " style="background: url(&quot;data:image/png; height: 193px; overflow: hidden; text-align: center; transition: all 0.5s ease 0s; width: 298px;"><img alt="Judul Postingan ke 2" class="lazy" src="Gambar Postingan ke 2" style="height: 193px; margin: 0px -298px; min-height: 100%; min-width: 100%; position: relative; transform-origin: center center 0px; transition: all 0.5s ease 0s; vertical-align: top;" /></div><div class="news-detail" style="bottom: 0px; left: 0px; padding: 15px; pointer-events: none; position: absolute; white-space: normal; z-index: 9;"><h2 class="title color white" style="-webkit-box-orient: vertical; -webkit-line-clamp: 3; color: white; display: -webkit-box; font-family: Museo, sans-serif; font-size: 18px; line-height: 24px; margin: auto; max-height: 72px; overflow: hidden; padding: 0px !important; position: relative; text-overflow: ellipsis; text-shadow: rgba(0, 0, 0, 0.59) 0px 3px 6px;">Judul Postingan ke 2</h2></div><a class="link-overlay" href="URL Postingan ke 2" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); bottom: 0px; cursor: pointer; height: 193px; left: 0px; outline: 0px; position: absolute; right: 0px; text-decoration-line: none; top: 0px; width: 298px; z-index: 4;" target="_self"></a></div><div class="featured-news-sm box-3" style="display: inline-block; float: none; height: 193px; line-height: 220px; margin-left: 12px; position: relative; vertical-align: middle; width: 298px;"><div class="news-image " style="background: url(&quot;data:image/png; height: 193px; overflow: hidden; text-align: center; transition: all 0.5s ease 0s; width: 298px;"><img alt="Judul Postingan ke 3" class="lazy" src="Gambar Postingan ke 3" style="height: 193px; margin: 0px -298px; min-height: 100%; min-width: 100%; position: relative; transform-origin: center center 0px; transition: all 0.5s ease 0s; vertical-align: top;" /></div><div class="news-detail" style="bottom: 0px; left: 0px; padding: 15px; pointer-events: none; position: absolute; white-space: normal; z-index: 9;"><h2 class="title color white" style="-webkit-box-orient: vertical; -webkit-line-clamp: 3; color: white; display: -webkit-box; font-family: Museo, sans-serif; font-size: 18px; line-height: 24px; margin: auto; max-height: 72px; overflow: hidden; padding: 0px !important; position: relative; text-overflow: ellipsis; text-shadow: rgba(0, 0, 0, 0.59) 0px 3px 6px;">Judul Postingan ke 3</h2></div><a class="link-overlay" href="URL Postingan ke 3" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); bottom: 0px; cursor: pointer; height: 193px; left: 0px; outline: 0px; position: absolute; right: 0px; text-decoration-line: none; top: 0px; width: 298px; z-index: 4;" target="_self"></a></div><div class="featured-news-sm box-3" style="display: inline-block; float: none; height: 193px; line-height: 220px; margin-left: 12px; position: relative; vertical-align: middle; width: 298px;"><div class="news-image " style="background: url(&quot;data:image/png; height: 193px; overflow: hidden; text-align: center; transition: all 0.5s ease 0s; width: 298px;"><img alt="Judul Postingan Ke 4" class="lazy" src="Gambar Postingan ke 4" style="height: 193px; margin: 0px -298px; min-height: 100%; min-width: 100%; position: relative; transform-origin: center center 0px; transition: all 0.5s ease 0s; vertical-align: top;" /></div><div class="news-detail" style="bottom: 0px; left: 0px; padding: 15px; pointer-events: none; position: absolute; white-space: normal; z-index: 9;"><h2 class="title color white" style="-webkit-box-orient: vertical; -webkit-line-clamp: 3; color: white; display: -webkit-box; font-family: Museo, sans-serif; font-size: 18px; line-height: 24px; margin: auto; max-height: 72px; overflow: hidden; padding: 0px !important; position: relative; text-overflow: ellipsis; text-shadow: rgba(0, 0, 0, 0.59) 0px 3px 6px;">Judul Postingan ke 4</h2></div><a class="link-overlay" href="URL Postingan ke 4" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); bottom: 0px; cursor: pointer; height: 193px; left: 0px; outline: 0px; position: absolute; right: 0px; text-decoration-line: none; top: 0px; width: 298px; z-index: 4;" target="_self"></a></div><div class="featured-news-sm box-3" style="display: inline-block; float: none; height: 193px; line-height: 220px; margin-left: 12px; margin-right: 15px; position: relative; vertical-align: middle; width: 298px;"><div class="news-image " style="background: url(&quot;data:image/png; height: 193px; overflow: hidden; text-align: center; transition: all 0.5s ease 0s; width: 298px;"><img alt="Judul Postingan ke 5" class="lazy" src="Gambar Postingan ke 5" style="height: 193px; margin: 0px -298px; min-height: 100%; min-width: 100%; position: relative; transform-origin: center center 0px; transition: all 0.5s ease 0s; vertical-align: top;" /></div><div class="news-detail" style="bottom: 0px; left: 0px; padding: 15px; pointer-events: none; position: absolute; white-space: normal; z-index: 9;"><h2 class="title color white" style="-webkit-box-orient: vertical; -webkit-line-clamp: 3; color: white; display: -webkit-box; font-family: Museo, sans-serif; font-size: 18px; line-height: 24px; margin: auto; max-height: 72px; overflow: hidden; padding: 0px !important; position: relative; text-overflow: ellipsis; text-shadow: rgba(0, 0, 0, 0.59) 0px 3px 6px;">Judul Postingan ke 5</h2></div><a class="link-overlay" href="URL Postingan ke 5" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); bottom: 0px; cursor: pointer; height: 193px; left: 0px; outline: 0px; position: absolute; right: 0px; text-decoration-line: none; top: 0px; width: 298px; z-index: 4;" target="_self"></a></div><div class="clear" style="clear: both !important; margin: 0px !important; padding: 0px !important;"></div></div>

Simpan, selesai
Perlu diingat Featured ini masih manual jadi kalian harus isi gambar dan url blog kalian sendiri
Untuk demonya kalian bisa lihat pada gambar dibawah ini.

Demikian Tutorial Membuat Featured News Ala Jalan Tikus, semoga bermanfaat.
Mas Dar
Mas Dar Hanya Blogger Amatiran, dan mulai ngeblog pada tahun 2017 dengan blog Ivhaa Netwoek setelah itu fakum dan ngeblog lagi di tahun 2020 demgan nnama sudarblogger.web.id