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
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.
HTML Widget

Dapatkan Tips Menarik Setiap Harinya!

  • Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
  • Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
  • Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel