Tutorial membuat postingan Product di Theme Modie-UI Landing Page
|
| Cara Membuat Halaman Postingan Product di Template Blogger Modie-UI Landing Page + AutoSafelink |
Membuat Halaman Postingan Product
Cara membuat Halaman Postingan Produk di Template Modie-UI Landing Page Autosafe Link Blogger , adalah sebagai berikut.
Tutorial
- Masuk ke Dasboard Blogger
- Tambah Halaman Postingan
- Isi Judul dengan : nama judul postingan anda
- Di bawah nama judul, sebelah kiri , pilih Tampilan HTML
- Kemudian di bawah Pratinjau, pilih Setelan Postingan selanjutnya isi nama Label dengan nama : Product dan Fullpage
- Kemudian copy paste, kode script di bawah ini
- Pratinjau
- Publikasikan
Keterangan : Penulisan teks nama label harus sama, termasuk huruf kecil dan besar.
Sample Product ke-1
Cara membuat contoh halaman sample product ke-1, skrip nya sebagi berikut.
<h1>Sample Product</h1>
<div class="mdb box-blue">
<h2>Parabola</h2>
<div class="separator">
<img
alt="Halaman Postingan Product di Tema Modie-UI Landing Page"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzc6vcxoLGrRExIKYLGwGBRg1P0EfeGx10XZ8fiLTJOklbkYcPl4nwKMeXVFJNukzVVxcQKps2L7VAMbG4q-iY3BIMRzxYM9YEVtdlq637UHCWF4_L0_OcjvVapZOcQbnYuG8c10H6rH4his8mQYs6rgho1kxxqev07FN2ELpXGa0JK9oXBcRzLTjhjQ/s1280/sampul%201280x720.jpg.webp"
width="1280"
height="720"
/>
</div>
</div>
<!--[ Price to show in homepage ]-->
<div class="mdb box-red">
<h2 id="Details">💵 Harga</h2>
<div class="proPrice" data-text="Price">🏷️ IDR. 475.000 - 850.000</div>
<!--more-->
</div>
<div class="mdb box-green">
<h2>Detail</h2>
<!--[ Active function ]-->
<input
class="tbIn hidden"
id="fTabs-1"
type="radio"
name="postTabs"
checked
/>
<input class="tbIn hidden" id="fTabs-2" type="radio" name="postTabs" />
<input class="tbIn hidden" id="fTabs-3" type="radio" name="postTabs" />
<input class="tbIn hidden" id="fTabs-4" type="radio" name="postTabs" />
<!--[ Tabs header/title, replace class attribute to class='tbHd scrlH stick' if you want to create a floating tab title ]-->
<div class="tbHd scrlH">
<!--[ Change atribute data-text='...' to replace tabs title ]-->
<label for="fTabs-1" data-text="Data Teknis"></label>
<label for="fTabs-2" data-text="Channel FTA"></label>
<label for="fTabs-3" data-text="Channel Premium"></label>
<label for="fTabs-4" data-text="Brosur"></label>
</div>
<div class="tbCn">
<!--[ Tabs content ]-->
<div class="tbText-1 note">
<p>
✓ 1 bh antena parabola mini.<br />
✓ 1 bh LNB Ku-Band single.<br />
✓ 15 meter kabel coaxcial rg6.<br />
✓ 1 bh Receiver/Dekoder Receiver Kvision / Nex Parabola.<br />
✓ Harga sudah termasuk dengan pemasangan parabola area Bandung dan
sekitarnya. <br />
✓ Warna dan dus tidak mengikat, sesuai kesediaan stok barang yang ada.
</p>
</div>
<!--[ Tabs content ]-->
<div class="tbText-2 note wr">
<p>
Channel TV Lokal :<br />
RCTI, MNC TV, Global TV, INews, TV One, TVRI, TRANS 7, TRANS TV, ANTV,
SCTV, Indosiar, Metro TV, Kompas TV , RTV , NET TV, dll. <br />Channel
TV Islami :<br />
Mekah , Madinah, Insan TV, Rodja TV, Radio Rodja, Wesal TV , Salam TV
, Niaga TV, Surau TV, Ahsan TV, Al-Iman TV, Puldapii TV, Muadz TV,
Ashill Tv, Ahsan TV, Rosyad TV, dll.<br />
*) Bisa tambah channel premium berbayar dengan isi voucher jika akan
ditonton.
</p>
</div>
<!--[ Tabs content ]-->
<div class="tbText-3 note">
<p>
Paket channel berbayar dengan isi voucher di Alfamart, Indomaret,
Transfer, dll.
</p>
</div>
<!--[ Tabs content ]-->
<div class="tbText-4 note wr">
<table class="tr-caption-container">
<tbody>
<tr>
<td>
<img
alt="Brosur Channel Premium Nex Parabola"
class="full"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10E3JEzVaIz-x1THiWjvW6auKb8cC8SAPYMZTpmoBlHfjrhy3NiDh71JCGwK3Ylb5Hz0BB7lLRfu-JWvIS4yOiDFQDAPitBZDnSJBtTSDiUHm9PoARNJozCApBw1ensaamAjvdh7F3ttpC4HLpVREbkogdl4obgmSDGoZg4YBu5L52LdCTK6aC19Y/s1101/paket%20nex%20januari%202023.webp"
/>
</td>
</tr>
<tr>
<td class="tr-caption">Brosur Channel Premium Nex Parabola</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mdb box-yellow">
<h2>Shop</h2>
<div class="pMart">
<small>or Shop through your favorite '<b>Market Place</b>' :</small>
<!--[ Change attribute href='#' to add url ]-->
<a
title="Tv Islam"
href="https://www.parabola.id/2022/02/parabola-mini-tv-islam.html"
target="_blank"
>
<img
class="lazy"
data-src="https://blogger.googleusercontent.com/img/a/AVvXsEirGeaG7tuTbDiCkMTq0K1VnQSRaBTfmNGcOrSr5sI802aqg2sfx5g1gdpY2uq_o4nHlscmGylRHjHMRq3kGHq8Ag-278obcupdBWHDZintwBkb0S-crubuoNYD9d5Av2xrVIr-bNoJC7prwlNOQPwaD_6fXwg-hcrVWfvy1ue0IAoAgn8JjW06GOCZ=s320"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
</a>
<a
title="Kvision/Nex"
href="https://www.parabola.id/2022/02/parabola-mini-k-vision.html"
target="_blank"
>
<img
class="lazy"
data-src="https://blogger.googleusercontent.com/img/a/AVvXsEjwhBuOnJ5rw7s453nYNYofw89TEY-bcxnagnYX-s_vgsGPdUUFp-ErsaixEft0cTf5zP-EmSd7KFpFs76eGObECArpYkpCVmquNKpRsk3NkNSMJuvfUYn17oKOQRSzd_rf6QCgDMM_-pD1XQXm4q03SHjiBZkg9GzKwumGxQk8tVao5fu7_mBLPoO5=s320"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
</a>
</div>
</div>
</div>
Sample Product ke-2
Cara membuat contoh halaman sample product ke-2, skrip nya sebagai berikut.
<h1>Sample Product ke-2</h1>
<div class="mdb box-blue">
<h2>Laptop</h2>
<div class="separator">
<img
alt="img_alt_here"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjypwIXwfCw9CBnowUh9A9vvURR1FBozK_RqnFCri4OLcUbmM9gHMtLSOlQYzJpBPsQy63r5SlhHqeqGyUnuZWaFJHf9nLvbWnKiAnOwY_WAos9T1uL_9NhlCYAkeIqXnj2cFw8jRd5Qz2YElb1qgBIgamgyTbyOKkQW_V5L5s36pUl6ZJeV-T0YRZxJA/s1280/HP_Pavilion.webp"
/>
</div>
</div>
<div class="mdb box-blue">
<h2>Spesifikasi</h2>
<!--[ Post Snippet ]-->
<div class="hidden">Specifications, Design, Performance, Battery</div>
<style>
/*<![CDATA[*/
/* To change Header Subtitle */
.headH .headSub{max-width:none}
.headH .headSub::before{content:"Product Post"}
/*]]>*/
</style>
<div class="pInfo pPad">
<div class="L">
<small>Series</small><span>HP Pavilion Laptop 15-eh1101AU</span>
</div>
<div class="R"><small>Brand</small><span>HP</span></div>
</div>
<div class="pInfo pPad">
<div class="L">
<small>Specific Uses For Product</small><span>Multimedia</span>
</div>
<div class="R"><small>Screen Size</small><span>15.6 Inches</span></div>
</div>
<div class="pInfo pPad">
<div class="L">
<small>Operating System</small><span>Windows 10 Home</span>
</div>
<div class="R">
<small>Human Interface Input</small><span>Touchscreen</span>
</div>
</div>
<div class="pInfo pPad">
<div class="L"><small>CPU Manufacturer</small><span>AMD</span></div>
<div class="R">
<small>Graphics Card Description</small><span>Integrated</span>
</div>
</div>
<div class="pInfo pPad">
<div class="L">
<small>Processor</small><span>AMD Ryzen 5 5500U</span>
</div>
<div class="R"><small>Storage</small><span>512 GB SSD</span></div>
</div>
<div class="pInfo pPad">
<div class="L"><small>Memory</small><span>8 GB DDR4-3200 MHz</span></div>
<div class="L">
<small>Special Feature</small><span>Micro-Edge Display, Thin</span>
</div>
</div>
<div class="pInfo pPad">
<div class="R"><small>Colour</small><span>Silver</span></div>
</div>
<div class="pInfo o pPad">
<small>What is in the Box?</small
><span>HP Laptop, 65 W Smart AC power adapter, user manuals</span>
</div>
</div>
</div>
Keterangan :
- Ganti alamat url dan teks, dengan nama url dan teks anda
Demo
Demo tampilan halaman postingan Product
Demo Halaman Product